/* ==========================================================================
   MonCentre 3 — refonte visuelle (octobre 2026)
   Chargé APRÈS style.css : redéfinit les jetons et la coque. Même identité (indigo, Inter + Bricolage),
   mais un mode clair bien plus lumineux, des surfaces en verre, plus d'air, des transitions de page animées.
   ========================================================================== */

/* ---------- Jetons : clair (MonCentre 4 : lumière nacrée, indigo électrique → violet → magenta) ---------- */
:root {
    --bg: #f5f6fc;
    --surface: #ffffff;
    --surface-2: #f7f8fd;
    --ink: #0f1222;
    --ink-2: #363c52;
    --muted: #646b84;
    --line: rgba(24, 28, 72, .08);
    --line-strong: rgba(24, 28, 72, .15);
    --brand: #5b4dff;
    --brand-2: #a24dff;
    --brand-3: #ec4899;
    --brand-ink: #4033e0;
    --brand-soft: rgba(91, 77, 255, .10);
    --brand-gradient: linear-gradient(135deg, #5446ff 0%, #7a4dff 52%, #a24dff 100%);
    --brand-gradient-vivid: linear-gradient(125deg, #4f46ff 0%, #7c4dff 36%, #b14dff 68%, #ec4899 100%);
    --surface-tint: rgba(24, 28, 72, .035);
    --surface-tint-strong: rgba(24, 28, 72, .065);
    --glass: rgba(255, 255, 255, .66);
    --glass-strong: rgba(255, 255, 255, .86);
    --card-bg: color-mix(in srgb, var(--surface) 90%, transparent);
    --bevel: rgba(255, 255, 255, .9);
    --sheen: rgba(255, 255, 255, .55);
    --glow: color-mix(in srgb, var(--brand) 42%, transparent);
    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --shadow-1: 0 1px 2px rgba(20, 22, 60, .05), 0 3px 12px -6px rgba(40, 30, 120, .10);
    --shadow-2: 0 2px 4px rgba(20, 22, 60, .05), 0 22px 44px -20px rgba(54, 38, 180, .28);
    --shadow-3: 0 4px 10px rgba(20, 22, 60, .07), 0 40px 90px -28px rgba(40, 26, 140, .45);
    --aurora-1: rgba(91, 77, 255, .17);
    --aurora-2: rgba(14, 165, 233, .12);
    --aurora-3: rgba(236, 72, 153, .10);
    --aurora-4: rgba(162, 77, 255, .12);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: .05;
    --sidebar-w: 264px;
}
/* ---------- Jetons : sombre (bleu nuit profond, néons doux) ---------- */
:root[data-theme="dark"] {
    --bg: #070812;
    --surface: #0f1120;
    --surface-2: #141729;
    --ink: #eef0ff;
    --ink-2: #c4c9e0;
    --muted: #8d94b0;
    --line: rgba(160, 170, 255, .09);
    --line-strong: rgba(170, 180, 255, .17);
    --brand: #8a7dff;
    --brand-2: #c084fc;
    --brand-3: #f472b6;
    --brand-ink: #b4abff;
    --brand-soft: rgba(138, 125, 255, .16);
    --brand-gradient: linear-gradient(135deg, #6d5dff 0%, #9466ff 52%, #c084fc 100%);
    --brand-gradient-vivid: linear-gradient(125deg, #6457ff 0%, #8e5cff 36%, #c46cff 68%, #f472b6 100%);
    --surface-tint: rgba(180, 190, 255, .05);
    --surface-tint-strong: rgba(180, 190, 255, .09);
    --glass: rgba(15, 17, 32, .66);
    --glass-strong: rgba(15, 17, 32, .86);
    --card-bg: color-mix(in srgb, var(--surface) 86%, transparent);
    --bevel: rgba(255, 255, 255, .07);
    --sheen: rgba(255, 255, 255, .14);
    --glow: color-mix(in srgb, var(--brand) 55%, transparent);
    --aurora-1: rgba(98, 80, 255, .32);
    --aurora-2: rgba(30, 150, 255, .16);
    --aurora-3: rgba(214, 64, 230, .17);
    --aurora-4: rgba(80, 60, 220, .22);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: .035;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 48px -20px rgba(0, 0, 0, .8);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, .5), 0 44px 90px -24px rgba(0, 0, 0, .9), 0 0 70px -24px rgba(110, 93, 255, .28);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg: #070812; --surface: #0f1120; --surface-2: #141729; --ink: #eef0ff; --ink-2: #c4c9e0; --muted: #8d94b0;
        --line: rgba(160, 170, 255, .09); --line-strong: rgba(170, 180, 255, .17);
        --brand: #8a7dff; --brand-2: #c084fc; --brand-3: #f472b6; --brand-ink: #b4abff; --brand-soft: rgba(138, 125, 255, .16);
        --brand-gradient: linear-gradient(135deg, #6d5dff 0%, #9466ff 52%, #c084fc 100%);
        --brand-gradient-vivid: linear-gradient(125deg, #6457ff 0%, #8e5cff 36%, #c46cff 68%, #f472b6 100%);
        --surface-tint: rgba(180, 190, 255, .05); --surface-tint-strong: rgba(180, 190, 255, .09);
        --glass: rgba(15, 17, 32, .66); --glass-strong: rgba(15, 17, 32, .86);
        --card-bg: color-mix(in srgb, var(--surface) 86%, transparent);
        --bevel: rgba(255, 255, 255, .07); --sheen: rgba(255, 255, 255, .14); --glow: color-mix(in srgb, var(--brand) 55%, transparent);
        --aurora-1: rgba(98, 80, 255, .32); --aurora-2: rgba(30, 150, 255, .16); --aurora-3: rgba(214, 64, 230, .17); --aurora-4: rgba(80, 60, 220, .22);
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --grain-opacity: .035;
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 48px -20px rgba(0, 0, 0, .8);
        --shadow-3: 0 8px 20px rgba(0, 0, 0, .5), 0 44px 90px -24px rgba(0, 0, 0, .9), 0 0 70px -24px rgba(110, 93, 255, .28);
    }
}

/* ---------- Couleur signature par module : chaque page a son dégradé (--mod → --mod-2) ---------- */
body { --mod-2: var(--brand-2); }
body[data-mod="appointments"], body[data-mod="files"], body[data-mod="account"] { --mod-2: var(--m-tasks); }
body[data-mod="inventory"] { --mod-2: var(--m-mail); }
body[data-mod="shopping"] { --mod-2: var(--m-projects); }
body[data-mod="budget"] { --mod-2: var(--m-stats); }
body[data-mod="notes"], body[data-mod="admin"] { --mod-2: var(--m-inventory); }
body[data-mod="projects"], body[data-mod="mail"], body[data-mod="lorenzo"] { --mod-2: var(--m-shopping); }
body[data-mod="stats"], body[data-mod="help"] { --mod-2: var(--m-appointments); }
body { --mod-gradient: linear-gradient(135deg, color-mix(in oklab, var(--mod) 80%, #fff) 0%, var(--mod) 46%, var(--mod-2) 100%); }

/* ---------- Fond vivant : aurore très lente (GPU : transform seulement) + grain ---------- */
body { background: var(--bg); }
body::before {
    content: ""; position: fixed; inset: -14vh -14vw; z-index: -1; pointer-events: none;
    background:
        radial-gradient(44vw 38vh at 10% 6%, var(--aurora-1), transparent 70%),
        radial-gradient(40vw 36vh at 94% 2%, var(--aurora-2), transparent 70%),
        radial-gradient(48vw 42vh at 74% 104%, var(--aurora-3), transparent 70%),
        radial-gradient(36vw 30vh at 30% 70%, var(--aurora-4), transparent 72%);
    will-change: transform; animation: mc-aurora 46s ease-in-out var(--aurora-t, 0s) infinite;
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--grain); background-size: 160px 160px; opacity: var(--grain-opacity);
}
@keyframes mc-aurora {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    33% { transform: translate3d(3vw, 2.5vh, 0) rotate(5deg) scale(1.06); }
    66% { transform: translate3d(-2.5vw, 4vh, 0) rotate(-4deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; will-change: auto; } }
@media print { body::before, body::after { display: none; } }

/* ---------- Transitions de page (navigation entre pages, sans rechargement visible) ---------- */
@view-transition { navigation: auto; }
.content { view-transition-name: page; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(page) { animation: mc3-out .16s ease both; }
::view-transition-new(page) { animation: mc3-in .32s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes mc3-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes mc3-in { from { opacity: 0; transform: translateY(10px) scale(.995); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-old(page), ::view-transition-new(page) { animation: none; }
}

/* ---------- Typographie ---------- */
body { font-size: 15px; letter-spacing: -.003em; }
h1 { font-size: 2rem; letter-spacing: -.035em; }
.page-header { margin: 10px 0 24px; }
.page-header h1 { font-size: 1.9rem; letter-spacing: -.035em; gap: 14px; }
.page-icon {
    width: 44px; height: 44px; border-radius: 14px; color: #fff;
    background: var(--mod-gradient);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--mod) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.page-icon svg { width: 22px; height: 22px; }
p { color: var(--muted); }

/* ---------- Barre latérale ---------- */
.sidebar {
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border-right: 1px solid var(--line); padding: 18px 14px 12px;
}
.sb-search { background: var(--surface); border-color: var(--line); border-radius: 13px; box-shadow: var(--shadow-1); padding: 10px 12px; }
.sb-label { font-size: .64rem; letter-spacing: .1em; opacity: .7; padding: 14px 12px 5px; }
.sb-link { padding: 6px 10px; border-radius: 12px; font-weight: 560; }
.sb-link .nav-icon { width: 30px; height: 30px; border-radius: 10px; }
.sb-link:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.sb-link.active { background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); font-weight: 680; }
.sb-link.active .nav-icon { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); box-shadow: 0 6px 14px -6px var(--c); }
.sb-link.active::before { display: none; }
.sb-foot { border-top-color: var(--line); }
.theme-seg { background: var(--surface-tint); }

/* ---------- Barre du haut ---------- */
.topbar {
    background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
.crumb-chip { border-radius: 11px; }
/* Éléments de la coque affichés seulement sur téléphone (voir ui4/shell.css) */
.tb-logo, .crumb-brand, .sb-close, .topbar-search { display: none; }
.quick-field { height: 44px; border-radius: 14px; border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.quick-field:focus-within { box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-2); }
.icon-btn, .theme-toggle, .notif-bell { border-radius: 12px; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
.notif-panel { border-radius: 20px; background: var(--glass-strong); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }

/* ---------- Cartes ---------- */
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-1); padding: 22px 24px; }
a.card:hover, .card.kpi-card-link:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.card h3 { letter-spacing: .1em; font-size: .68rem; }
.item-row { background: var(--surface); border-color: var(--line); border-radius: 14px; box-shadow: var(--shadow-1); }
.item-row:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }

/* ---------- Boutons & champs ---------- */
.btn { height: 42px; border-radius: 12px; font-weight: 620; }
.btn-small { height: 34px; border-radius: 10px; }
.btn-primary { background: var(--brand-gradient); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-outline { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
input, select, textarea { background: var(--surface); border-color: var(--line-strong); border-radius: 12px; height: 44px; }
textarea { height: auto; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--brand-soft); }
input[type="checkbox"], input[type="radio"] { height: 18px; }
.view-toggle-btn.active, .filter-btn.active { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand) 80%, transparent); }

/* ---------- Fenêtres ---------- */
.modal-overlay { background: rgba(14, 14, 30, .38); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.modal-box { border-radius: 26px; border-color: var(--line); box-shadow: var(--shadow-3); }

/* ---------- Notifications « toast » ---------- */
.toast { border-radius: 16px !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* ---------- Puces de filtre prêtes à l'emploi (pré-filtres) ---------- */
.prefilters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 6px; scrollbar-width: none; }
.prefilters::-webkit-scrollbar { display: none; }
.prefilters button {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 99px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 600 .84rem var(--font-body); cursor: pointer;
    box-shadow: var(--shadow-1); transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.prefilters button:hover { transform: translateY(-1px); }
.prefilters button b { font-size: .72rem; font-weight: 700; color: var(--muted); }
.prefilters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.prefilters button[aria-pressed="true"] b { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.prefilters button.tone-bad b { color: var(--bad); }

/* ---------- Mobile : barre d'onglets flottante ---------- */
@media (max-width: 960px) {
    .sidebar { background: var(--glass-strong); }
    .content { padding: 4px 16px calc(var(--tabbar-h) + 104px); }
    .tabbar {
        left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--tabbar-h); padding: 0;
        border-radius: 24px; border: 1px solid var(--line); background: var(--glass-strong); box-shadow: var(--shadow-3);
        backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
    }
    .fab { bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }
    .page-header h1 { font-size: 1.6rem; }
    .page-icon { width: 40px; height: 40px; border-radius: 13px; }
    .card { padding: 18px; border-radius: 18px; }
}

/* ---------- Accueil : plus calme ---------- */
.dash-ai { padding: 14px 18px; }
.dash-ai .ai-sum { font-size: .95rem; }
.focus { border-radius: 22px; padding: 18px 22px; }
.smart-strip { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.smart-card { border-radius: 18px; }
#taskSummary { display: none; } /* les compteurs sont sur les pré-filtres */

/* ---------- Stock : carte mentale ---------- */
.mm-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-1); padding: 10px; overflow: auto; }
.mm { width: 100%; min-width: 680px; height: auto; display: block; font-family: var(--font-body); }
.mm text { fill: var(--ink); font-size: 15px; font-weight: 560; }
.mm .mm-q { fill: var(--muted); font-weight: 700; font-size: 13px; }
.mm .mm-glabel { font-weight: 750; font-size: 16px; }
.mm .mm-gcount { fill: #fff; font: 800 18px var(--font-display); }
.mm .mm-ctitle { fill: #fff; font: 800 20px var(--font-display); }
.mm .mm-csub { fill: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; }
.mm-item { cursor: pointer; }
.mm-item:hover text, .mm-item:focus text { fill: var(--brand); }
.mm-item:hover circle { r: 12; }
.mm-item:focus { outline: none; }
.seg-extra { opacity: .8; }
@media (max-width: 760px) { .mm { min-width: 820px; } .seg-extra { display: none !important; } }

/* ====================== Zone : shell ====================== */
/* ==========================================================================
   MonCentre 4 — COQUE (shell) : identité visuelle et langage global
   Monogramme, barre latérale, barre du haut, île de navigation mobile + bouton +,
   palette Ctrl K, menus « ⋯ », modales, toasts, boutons, champs, cartes, listes,
   états vides illustrés, squelettes, focus clavier, progression de navigation.
   Concaténé après theme3.css (jetons : clair / sombre). Animations : transform/opacity.
   ========================================================================== */

/* ---------- Jetons de la coque ---------- */
:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-elastic: cubic-bezier(.34, 1.56, .64, 1);
    --ease-glide: cubic-bezier(.34, 1.25, .64, 1);
    --menu-radius: 16px;
    --scrim: rgba(14, 14, 40, .32);
    --toast-bg: rgba(17, 19, 34, .94);
    --toast-line: rgba(255, 255, 255, .09);
    --island-bg: rgba(15, 16, 32, .9);
    --island-solid: #121327;
    --island-line: rgba(255, 255, 255, .1);
    --island-ink: #ffffff;
    --island-muted: rgba(232, 234, 255, .6);
    --island-shadow: 0 22px 44px -18px rgba(14, 10, 60, .6), 0 6px 16px -8px rgba(14, 10, 60, .35);
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand), 0 0 18px 2px color-mix(in srgb, var(--brand-2) 40%, transparent);
}
:root[data-theme="dark"] {
    --scrim: rgba(2, 3, 14, .6);
    --toast-bg: rgba(26, 29, 54, .95);
    --toast-line: rgba(170, 180, 255, .16);
    --island-bg: rgba(22, 24, 48, .82);
    --island-solid: #181a35;
    --island-line: rgba(170, 180, 255, .16);
    --island-shadow: 0 22px 44px -16px rgba(0, 0, 0, .8), 0 0 40px -12px rgba(110, 93, 255, .35);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --scrim: rgba(2, 3, 14, .6);
        --toast-bg: rgba(26, 29, 54, .95);
        --toast-line: rgba(170, 180, 255, .16);
        --island-bg: rgba(22, 24, 48, .82);
        --island-solid: #181a35;
        --island-line: rgba(170, 180, 255, .16);
        --island-shadow: 0 22px 44px -16px rgba(0, 0, 0, .8), 0 0 40px -12px rgba(110, 93, 255, .35);
    }
}

/* ---------- Animations communes ---------- */
@keyframes sh-fade { from { opacity: 0; } }
@keyframes sh-fade-out { to { opacity: 0; } }
@keyframes sh-pop { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes sh-pop-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes sh-menu { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes sh-menu-up { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes sh-sheet { from { transform: translateY(105%); } }
@keyframes sh-modal { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes sh-item { from { opacity: 0; transform: translateY(7px); } }
@keyframes sh-badge { 0% { transform: scale(0); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes sh-icon-pop { from { opacity: 0; transform: scale(.6) rotate(-14deg); } }
@keyframes sh-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes sh-nav { from { transform: scaleX(0); } 40% { transform: scaleX(.55); } to { transform: scaleX(.92); } }
@keyframes sh-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes sh-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Base : toucher, sélection, défilement, focus ---------- */
html { -webkit-tap-highlight-color: transparent; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
a, button, summary, .btn, [role="button"] { touch-action: manipulation; }
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); color: var(--ink); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 16%, transparent); border: 2px solid transparent; background-clip: content-box; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 62%, transparent); background-clip: content-box; }
input, textarea { caret-color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
:is(.btn, .icon-btn, .notif-bell, .burger, .sb-link, .sb-search, .sb-close, .sb-brand, .tb-logo, .fab, .tabbar a, .tabbar button,
    .theme-seg button, .palette-close, .toast-action, .row-more > summary):focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Barre de progression de navigation (retour immédiat au clic) ---------- */
.nav-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none;
    transform: scaleX(0); transform-origin: left center; opacity: 0;
    background: var(--brand-gradient-vivid); box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 70%, transparent);
    transition: opacity .2s ease;
}
html.is-navigating .nav-progress { opacity: 1; animation: sh-nav 2.6s var(--ease-out) forwards; }

/* ==========================================================================
   Monogramme MonCentre (tuile maillée + orbite)
   ========================================================================== */
.logo-mark {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(95% 95% at 14% 10%, rgba(150, 132, 255, .95) 0%, rgba(150, 132, 255, 0) 58%),
        radial-gradient(90% 90% at 100% 100%, rgba(236, 72, 153, .92) 0%, rgba(236, 72, 153, 0) 62%),
        linear-gradient(135deg, #4f46ff 0%, #8b4dff 100%);
    box-shadow: 0 8px 20px -8px rgba(91, 77, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(20, 8, 70, .2);
}
.logo-mark::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 52%);
}
.logo-mark .lm-glyph { transform-origin: 12px 12px; transition: transform .7s var(--ease-elastic); }
.welcome-art.logo-mark { width: 64px; height: 64px; border-radius: 20px; }
.sb-brand, .tb-logo { border-radius: 14px; }
.sb-brand .logo-mark, .tb-logo .logo-mark { transition: transform .4s var(--ease-elastic), box-shadow .25s; }
.sb-brand:hover .logo-mark, .tb-logo:hover .logo-mark { transform: scale(1.06); box-shadow: 0 12px 26px -8px rgba(91, 77, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .42); }
.sb-brand:hover .lm-glyph, .tb-logo:hover .lm-glyph { transform: rotate(-120deg); }
.sb-brand:active .logo-mark, .tb-logo:active .logo-mark { transform: scale(.92); }
.brand { letter-spacing: -.045em; }
.brand b { background: var(--brand-gradient-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   Titres de page : Bricolage affirmé, encre → couleur du module
   ========================================================================== */
.page-header h1 {
    font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.12;
    padding: .06em 0; margin: -.06em 0;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-header h1 {
        background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, color-mix(in oklab, var(--mod) 80%, var(--ink)) 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
}
.page-icon {
    width: 46px; height: 46px; border-radius: 15px; flex: none;
    box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--mod) 78%, transparent), 0 0 0 4px color-mix(in srgb, var(--mod) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, .38);
    animation: sh-icon-pop .5s var(--ease-elastic) .06s backwards;
}

/* ==========================================================================
   Barre latérale
   ========================================================================== */
.sidebar {
    background:
        radial-gradient(130% 32% at 0% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 72%),
        radial-gradient(120% 28% at 100% 100%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 72%),
        var(--glass);
}
.sidebar::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--brand) 40%, transparent) 30%, color-mix(in srgb, var(--brand-2) 32%, transparent) 70%, transparent 100%);
}
.sb-brand .brand { font-size: 1.34rem; }
.sb-search {
    height: 42px; gap: 10px; background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel);
    transition: border-color .18s, box-shadow .2s, color .18s, transform .15s;
}
.sb-search:hover { color: var(--ink-2); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-1); }
.sb-search:active { transform: scale(.985); }
.sb-search svg { color: var(--brand); flex: none; }
.sb-search kbd { font-size: .64rem; background: var(--surface-2); color: var(--muted); }
.sb-label { display: flex; align-items: center; gap: 8px; }
.sb-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); opacity: .7; }
.sb-link { min-height: 40px; transition: background .18s, color .18s, box-shadow .2s, transform .15s; }
.sb-link .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-link:active { transform: scale(.98); }
.sb-link.active {
    color: var(--ink);
    background: linear-gradient(95deg, color-mix(in srgb, var(--c) 15%, var(--surface)) 0%, color-mix(in srgb, var(--c) 4%, var(--surface)) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--c) 90%, transparent);
}
.sb-link.active .nav-icon {
    color: #fff;
    background: linear-gradient(140deg, color-mix(in oklab, var(--c) 78%, #fff) 0%, var(--c) 48%, var(--c2, var(--c)) 100%);
    box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--c) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sb-link.active::before {
    display: block; content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--c), var(--c2, var(--c))); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--c) 70%, transparent);
}
.sb-pill {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; line-height: 1;
    font-size: .68rem; font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--bad) 70%, transparent);
    animation: sh-badge .4s var(--ease-elastic) .15s backwards;
}
.sb-pill.warn { box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--warn) 70%, transparent); }
.sb-pill.muted { box-shadow: none; }
.sb-foot { gap: 8px; }
.sb-user { transition: background .18s; }
.sb-user:hover { background: var(--surface-tint); }
.sb-user .avatar { background: var(--brand-gradient-vivid); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 75%, transparent), 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--brand) 30%, transparent); }
.theme-seg { background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--line); }
.theme-seg button { height: 34px; transition: background .2s, color .2s, box-shadow .2s, transform .3s var(--ease-elastic); }
.theme-seg button:active { transform: scale(.9); }
.theme-seg button[aria-pressed="true"] { box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); }
.sb-close { display: none; }
.tb-logo, .crumb-brand { display: none; }

/* ==========================================================================
   Barre du haut
   ========================================================================== */
.topbar { background: color-mix(in srgb, var(--bg) 64%, transparent); transition: box-shadow .25s; }
.topbar.scrolled { border-bottom-color: transparent; box-shadow: 0 14px 30px -26px rgba(30, 24, 100, .5); }
.topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 38%, var(--line-strong)) 30%, color-mix(in srgb, var(--brand-2) 32%, var(--line-strong)) 70%, transparent);
}
.topbar.scrolled::after { opacity: 1; }
.crumb-chip {
    width: 36px; height: 36px; border-radius: 12px; color: #fff; background: var(--mod-gradient);
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--mod) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.crumb-title { font-size: 1.14rem; font-weight: 750; letter-spacing: -.03em; }
.quick-field { background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); transition: border-color .18s, box-shadow .2s; }
.quick-field:hover { border-color: var(--line-strong); }
.quick-field:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 0 0 4px var(--brand-soft), 0 12px 30px -16px var(--glow); }
#quickAddPreview {
    flex-wrap: wrap; border-radius: 14px; padding: 10px 14px; color: var(--ink-2); border-color: var(--line);
    background: var(--glass-strong); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--shadow-3); animation: sh-menu .18s var(--ease-out) backwards;
}
#quickAddPreview > svg { color: var(--brand); flex: none; }
#quickAddPreview::after {
    content: "Entrée ↵"; margin-left: auto; padding: 1px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px;
    font-size: .7rem; font-weight: 650; color: var(--muted); white-space: nowrap;
}

/* Boutons ronds (cloche, recherche, outils) */
.icon-btn, .notif-bell {
    background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel);
    transition: background .18s, border-color .18s, color .18s, transform .3s var(--ease-elastic), box-shadow .2s;
}
.icon-btn:hover, .notif-bell:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-2), inset 0 1px 0 var(--bevel); }
.icon-btn:active, .notif-bell:active { transform: scale(.9); }
.notif-bell[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.notif-badge { border-color: var(--bg); }
.notif-badge.show { animation: sh-badge .45s var(--ease-elastic); box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--bad) 70%, transparent); font-variant-numeric: tabular-nums; }
.notif-bell:has(.notif-badge.show) > svg { transform-origin: 50% 12%; animation: sh-ring 1.1s ease .7s 1; }
.topbar-search { display: none; }
.burger { border-radius: 12px; border-color: var(--line); box-shadow: var(--shadow-1); transition: transform .3s var(--ease-elastic), background .18s; }
.burger:active { transform: scale(.9); }
.burger[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); }

/* ---------- Panneau de notifications ---------- */
.notif-panel {
    padding: 0; width: min(380px, calc(100vw - 24px)); max-height: min(72vh, 560px); overscroll-behavior: contain;
    border-color: var(--line); box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent), inset 0 1px 0 var(--bevel);
    transform-origin: top right; transform: translateY(-6px) scale(.96); visibility: hidden;
    transition: opacity .18s ease, transform .26s var(--ease-out), visibility 0s linear .26s;
}
.notif-panel.open { visibility: visible; transition: opacity .18s ease, transform .3s var(--ease-glide), visibility 0s; }
.notif-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 14px 16px 11px;
    background: var(--glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
}
.notif-head b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.025em; color: var(--ink); }
.notif-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 750; background: var(--brand-gradient); color: #fff; box-shadow: 0 4px 10px -4px var(--glow); }
.notif-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.notif-item { align-items: center; gap: 12px; min-height: 54px; padding: 9px 10px; border-radius: 14px; transition: background .15s, transform .15s; }
.notif-item:hover { background: var(--surface-tint); }
.notif-item:active { transform: scale(.985); }
.notif-ico {
    position: relative; width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center;
    color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 13%, transparent);
}
.notif-item .notif-ico .notif-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; margin: 0; border: 2px solid var(--surface); box-shadow: none; }
.notif-txt { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.notif-go { flex: none; display: inline-flex; color: var(--muted); opacity: .55; transition: transform .25s var(--ease-elastic), opacity .2s; }
.notif-item:hover .notif-go { transform: translateX(3px); opacity: 1; }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 22px 30px; text-align: center; }
.notif-empty-ico {
    width: 56px; height: 56px; margin-bottom: 10px; border-radius: 18px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(140deg, color-mix(in oklab, var(--ok) 70%, #fff), var(--ok) 55%, color-mix(in oklab, var(--ok) 60%, var(--info)));
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--ok) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.notif-empty b { font-size: 1rem; color: var(--ink); font-family: var(--font-display); letter-spacing: -.02em; }
.notif-empty small { color: var(--muted); font-size: .82rem; line-height: 1.45; max-width: 30ch; }

/* ==========================================================================
   Boutons : dégradé, brillance au survol, pression élastique
   ========================================================================== */
.btn { transition: transform .4s var(--ease-elastic), box-shadow .2s, background-color .18s, border-color .18s, color .18s, filter .18s; }
.btn:active:not(:disabled) { transform: scale(.95); transition-duration: .1s; }
.btn-primary {
    background: linear-gradient(105deg, transparent 38%, var(--sheen) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat, var(--brand-gradient);
    box-shadow: 0 10px 24px -12px var(--glow), 0 2px 6px -2px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(20, 10, 80, .18);
    text-shadow: 0 1px 1px rgba(30, 10, 120, .16);
    transition: transform .4s var(--ease-elastic), box-shadow .25s, background-position .8s var(--ease-out), filter .2s;
}
@media (hover: hover) {
    .btn-primary:hover:not(:disabled) {
        background-position: -40% 0, 0 0; transform: translateY(-1px); filter: saturate(1.08);
        box-shadow: 0 16px 30px -12px var(--glow), 0 2px 6px -2px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(20, 10, 80, .18);
    }
}
.btn-primary:active:not(:disabled) { box-shadow: 0 4px 10px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-outline { background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); }
.btn-outline:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line-strong)); color: var(--ink); }
.btn-danger:hover { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bad) 70%, transparent); }
.btn svg { flex: none; }

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--ink) 24%, transparent);
}
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--brand) 70%, transparent); box-shadow: 0 0 0 4px var(--brand-soft), 0 8px 22px -14px var(--glow); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
#quickAddInput:hover, .palette-input input:hover { border-color: transparent; }
#quickAddInput:focus, .palette-input input:focus { box-shadow: none; }

/* ==========================================================================
   Cartes (verre, liseré lumineux), listes, pastilles
   ========================================================================== */
.card { box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); transition: border-color .2s, box-shadow .25s, transform .3s var(--ease-elastic), background-color .2s; }
.card:where([class="card"]) { background: var(--card-bg); }
a.card:hover, .card.kpi-card-link:hover { box-shadow: var(--shadow-2), inset 0 1px 0 var(--bevel), 0 0 0 1px color-mix(in srgb, var(--mod) 16%, transparent); }
a.card:active, .card.kpi-card-link:active { transform: scale(.985); }
/* L'animation d'entrée ne « colle » plus à la ligne une fois finie : aucun contexte d'empilement parasite (menus « ⋯ » coupés) */
.item-row, .slot { animation-fill-mode: backwards; }
.item-row { box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); transition: border-color .18s, background .18s, box-shadow .22s, opacity .2s, max-height .25s, padding .25s, margin .25s, transform .25s var(--ease-out); }
.badge { line-height: 1.4; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }

/* ---------- États vides illustrés ---------- */
.item-list > .empty-state, .grid > .empty-state, #taskList > .empty-state {
    position: relative; line-height: 1.5; border: 1px dashed color-mix(in srgb, var(--mod) 30%, var(--line-strong));
    background:
        radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--mod) 8%, transparent), transparent 70%),
        color-mix(in srgb, var(--surface) 55%, transparent);
}
:is(.item-list, .grid, #taskList) > .empty-state:not(.plan-empty):not(:has(svg, img))::before {
    content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 14px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--mod) 75%, #fff) 0%, var(--mod) 45%, var(--mod-2, var(--brand-2)) 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='9' y='15' width='32' height='40' rx='8' transform='rotate(-11 25 35)' fill='%23000' fill-opacity='.22'/%3E%3Crect x='21.3' y='9.3' width='32.4' height='41.4' rx='8' fill='%23000' fill-opacity='.12' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M29 21h17M29 29h17M29 37h10' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M51 43.5l1.7 4.6 4.6 1.7-4.6 1.7-1.7 4.6-1.7-4.6-4.6-1.7 4.6-1.7z' fill='%23000'/%3E%3Ccircle cx='12' cy='10' r='2.2' fill='%23000' fill-opacity='.5'/%3E%3Ccircle cx='58' cy='20' r='1.6' fill='%23000' fill-opacity='.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='9' y='15' width='32' height='40' rx='8' transform='rotate(-11 25 35)' fill='%23000' fill-opacity='.22'/%3E%3Crect x='21.3' y='9.3' width='32.4' height='41.4' rx='8' fill='%23000' fill-opacity='.12' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M29 21h17M29 29h17M29 37h10' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M51 43.5l1.7 4.6 4.6 1.7-4.6 1.7-1.7 4.6-1.7-4.6-4.6-1.7 4.6-1.7z' fill='%23000'/%3E%3Ccircle cx='12' cy='10' r='2.2' fill='%23000' fill-opacity='.5'/%3E%3Ccircle cx='58' cy='20' r='1.6' fill='%23000' fill-opacity='.4'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: sh-icon-pop .55s var(--ease-elastic) backwards;
}

/* ---------- Squelettes de chargement (reflet qui glisse : transform seulement) ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-tint-strong); animation: none; }
.skeleton::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--sheen), transparent); animation: sh-shimmer 1.4s ease-in-out infinite;
}
.sk-row {
    display: flex; align-items: center; gap: 14px; padding: 15px 16px; margin-bottom: 8px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); animation: sh-fade .3s ease backwards;
}
.sk-row .sk-dot { width: 26px; height: 26px; min-height: 0; border-radius: 50%; flex: none; }
.sk-row .sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-row .sk-l1 { height: 12px; min-height: 0; border-radius: 6px; }
.sk-row .sk-l2 { height: 10px; min-height: 0; border-radius: 6px; }

/* ---------- Pré-filtres (amélioration) ---------- */
.prefilters button { transition: background .15s, color .15s, border-color .15s, transform .3s var(--ease-elastic), box-shadow .2s; }
.prefilters button:active { transform: scale(.94); }
.prefilters button[aria-pressed="true"] { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ink) 60%, transparent); }

/* ==========================================================================
   Menus « ⋯ » génériques (details.row-more)
   ========================================================================== */
.row-more > summary { width: 38px; height: 38px; border-radius: 12px; font-size: 1.25rem; line-height: 1; transition: background .15s, color .15s, transform .25s var(--ease-elastic); }
.row-more > summary:active { transform: scale(.9); }
.row-more[open] > summary { background: var(--brand-soft); color: var(--brand); }
.row-more-menu {
    z-index: 60; min-width: 214px; gap: 4px; padding: 8px; border-radius: var(--menu-radius); border-color: var(--line);
    background: var(--glass-strong); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: var(--shadow-3), inset 0 1px 0 var(--bevel); transform-origin: top right; animation: sh-menu .2s var(--ease-out) backwards;
}
.row-more.menu-up > .row-more-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; animation-name: sh-menu-up; }
.row-more-menu .row-more-label { padding: 6px 8px 2px; }
.row-more-menu select { height: 40px; border-radius: 11px; }
.row-more-menu form { margin: 0; }
.row-more-menu .btn {
    width: 100%; height: 40px; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: 11px;
    box-shadow: none; font-size: .88rem; font-weight: 600; text-shadow: none;
}
.row-more-menu .btn-outline { background: transparent; border-color: transparent; color: var(--ink); }
.row-more-menu .btn-outline:hover { background: var(--surface-tint-strong); transform: none; box-shadow: none; }
.row-more-menu .btn-danger { background: transparent; border-color: transparent; }
.row-more-menu .btn-danger:hover { background: color-mix(in srgb, var(--bad) 11%, transparent); transform: none; box-shadow: none; }
.row-more-menu > .btn-danger, .row-more-menu > form:last-child { margin-top: 5px; box-shadow: 0 -5px 0 -4px var(--line-strong); }
.row-more-menu > .btn-danger:hover { box-shadow: 0 -5px 0 -4px var(--line-strong); }
/* La ligne dont le menu est ouvert passe au-dessus des suivantes */
.item-row:has(.row-more[open]) { position: relative; z-index: 40; }

/* ==========================================================================
   Palette de commandes (Ctrl K) : verre, liseré dégradé, halo
   ========================================================================== */
.palette { background: var(--scrim); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); padding-top: max(10vh, 24px); }
.palette.open { animation: sh-fade .18s ease backwards; }
.palette.closing { animation: sh-fade-out .14s ease forwards; pointer-events: none; }
.palette.closing .palette-box { animation: sh-pop-out .14s ease forwards; }
.palette-box {
    position: relative; isolation: isolate; width: min(660px, 100%); border-radius: 24px; border: 0;
    background: var(--glass-strong); box-shadow: var(--shadow-3), 0 30px 90px -30px color-mix(in srgb, var(--brand) 50%, transparent), inset 0 1px 0 var(--bevel);
    animation: sh-pop .3s var(--ease-glide) backwards;
}
.palette-box::before {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 60%, transparent) 0%, color-mix(in srgb, var(--brand-2) 18%, transparent) 35%, var(--line) 60%, color-mix(in srgb, var(--brand-3) 40%, transparent) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.palette-box::after {
    content: ""; position: absolute; left: 8%; right: 8%; top: -70px; height: 150px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 24%, transparent), transparent);
}
.palette-input {
    height: 64px; padding: 0 14px 0 20px; gap: 12px; border-bottom: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 40%, var(--line)) 30%, color-mix(in srgb, var(--brand-2) 34%, var(--line)) 70%, transparent) bottom / 100% 1px no-repeat;
}
.palette-input > svg:first-child { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--brand) 55%, transparent)); }
.palette-input input { font-size: 1.1rem; font-weight: 500; letter-spacing: -.012em; }
.palette-input input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.palette-input kbd { flex: none; }
.palette-close { display: none; flex: none; width: 40px; height: 40px; border: none; border-radius: 12px; background: var(--surface-tint-strong); color: var(--ink-2); place-items: center; cursor: pointer; transition: transform .25s var(--ease-elastic); }
.palette-close:active { transform: scale(.9); }
.palette-list { max-height: min(56vh, 480px); padding: 8px; overscroll-behavior: contain; scroll-padding: 8px; }
.palette-group { padding: 12px 12px 6px; font-size: .64rem; letter-spacing: .12em; color: color-mix(in srgb, var(--brand) 55%, var(--muted)); }
.palette-item { min-height: 50px; gap: 12px; padding: 8px 10px; border-radius: 14px; transition: background .12s, box-shadow .12s; }
.palette.fresh .palette-item { animation: sh-item .3s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 16ms + 30ms); }
.palette-item:hover { background: var(--surface-tint); }
.palette-item.sel {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--brand)) 14%, transparent), color-mix(in srgb, var(--c, var(--brand)) 4%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--brand)) 18%, transparent);
}
.palette-item .pi-ico { width: 36px; height: 36px; border-radius: 11px; transition: background .15s, color .15s, box-shadow .15s, transform .3s var(--ease-elastic); }
.palette-item.sel .pi-ico {
    color: #fff; transform: scale(1.04);
    background: linear-gradient(140deg, color-mix(in oklab, var(--c, var(--brand)) 78%, #fff) 0%, var(--c, var(--brand)) 50%, var(--c2, var(--c, var(--brand))) 100%);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c, var(--brand)) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.palette-item .pi-txt b { font-size: .93rem; }
.palette-item .pi-txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item.sel::after {
    content: "↵"; flex: none; display: grid; place-items: center; width: 26px; height: 22px; border-radius: 6px;
    border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); font-size: .78rem; color: var(--muted);
}
.palette-foot { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
@media (hover: none) {
    .palette-foot, .palette-input kbd, .palette-item.sel::after { display: none; }
    .palette-close { display: inline-grid; }
}

/* ==========================================================================
   Modales
   ========================================================================== */
.modal-overlay { background: var(--scrim); }
.modal-overlay.show { animation: sh-fade .2s ease backwards; }
.modal-overlay.show .modal-box { animation: sh-modal .34s var(--ease-glide) backwards; }
.modal-box { border-color: var(--line); box-shadow: var(--shadow-3), inset 0 1px 0 var(--bevel), 0 0 0 1px color-mix(in srgb, var(--brand) 7%, transparent); }
.modal-overlay > .modal-box { background-image: radial-gradient(120% 50% at 50% -18%, color-mix(in srgb, var(--mod) 10%, transparent), transparent 62%); }
:where(.modal-box) { position: relative; overflow-y: auto; overscroll-behavior: contain; }
.modal-overlay > .modal-box { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
.modal-box h3 { font-size: 1.32rem; font-weight: 750; letter-spacing: -.03em; }
/* Confirmation */
.modal-confirm { width: min(400px, 100%); text-align: center; }
.confirm-ico {
    width: 56px; height: 56px; margin: 2px auto 14px; border-radius: 18px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(140deg, color-mix(in oklab, var(--bad) 72%, #fff), var(--bad) 55%, color-mix(in oklab, var(--bad) 70%, var(--warn)));
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--bad) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
    animation: sh-icon-pop .45s var(--ease-elastic) .05s backwards;
}
.modal-confirm .modal-message { font-size: 1rem; font-weight: 560; color: var(--ink); margin-bottom: 22px; }
.modal-confirm .modal-actions { justify-content: center; }
.modal-confirm .modal-actions .btn { flex: 1 1 0; height: 46px; }
.modal-confirm .btn-danger { background: color-mix(in srgb, var(--bad) 15%, var(--surface)); }

/* Visite guidée */
.tour-hole { box-shadow: 0 0 0 9999px rgba(8, 8, 30, .62), 0 0 0 3px var(--brand), 0 0 24px 4px color-mix(in srgb, var(--brand) 55%, transparent); }
.tour-card { border-color: var(--line); box-shadow: var(--shadow-3), inset 0 1px 0 var(--bevel); border-radius: 22px; }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toast-container { gap: 8px; }
.toast {
    position: relative; overflow: hidden; gap: 12px; min-height: 52px; padding: 10px 14px 10px 10px;
    border-radius: 18px !important; background: var(--toast-bg); border: 1px solid var(--toast-line); color: #f4f5fb;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .07);
    cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
    transform: translateY(14px) scale(.96); transition: opacity .2s ease, transform .36s var(--ease-glide);
}
.toast.show { transform: none; }
.toast.is-dragging { transition: none; }
.toast-icon { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 4px 12px -4px var(--tc); }
.toast-icon svg { width: 16px; height: 16px; }
.toast-msg { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.toast-action { height: 34px; padding: 0 14px; border-radius: 10px; }
.toast { --tc: var(--info); }
.toast-success { --tc: var(--ok); }
.toast-error { --tc: var(--bad); }
.toast-warning { --tc: var(--warn); }
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; background: var(--tc); opacity: .75; animation: sh-toast-bar linear forwards; }

/* ==========================================================================
   Survol uniquement à la souris (pas d'effet « collé » après un tap)
   ========================================================================== */
@media (hover: none) {
    .btn:hover, .icon-btn:hover, .notif-bell:hover, .prefilters button:hover, a.card:hover, .card.kpi-card-link:hover, .sb-link:hover .nav-icon { transform: none; }
    .icon-btn:hover, .notif-bell:hover { box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); }
    .sb-search:hover { box-shadow: var(--shadow-1), inset 0 1px 0 var(--bevel); }
    .sb-brand:hover .lm-glyph, .tb-logo:hover .lm-glyph { transform: none; }
    .sb-brand:hover .logo-mark, .tb-logo:hover .logo-mark { transform: none; }
}
@media (pointer: coarse) {
    .btn-small { height: 40px; }
    .btn-icon.btn-small { width: 40px; height: 40px; }
    .prefilters button { height: 40px; }
    .row-more > summary { width: 40px; height: 40px; }
}

/* ==========================================================================
   Tablette / téléphone
   ========================================================================== */
@media (max-width: 960px) {
    /* Tiroir de menu flottant, liseré dégradé */
    .sidebar {
        top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); left: 8px; height: auto;
        width: min(308px, calc(100vw - 56px)); border-radius: 24px; border: 0;
        background:
            radial-gradient(130% 30% at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 72%),
            radial-gradient(120% 26% at 100% 100%, color-mix(in srgb, var(--brand-2) 9%, transparent), transparent 72%),
            var(--glass-strong);
        transform: translateX(calc(-100% - 40px)); transition: transform .34s var(--ease-out);
    }
    .sidebar::after {
        top: 0; bottom: 0; left: 0; right: 0; width: auto; border-radius: inherit; padding: 1px;
        background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 45%, transparent), var(--line) 35%, var(--line) 65%, color-mix(in srgb, var(--brand-2) 40%, transparent));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    }
    .sidebar.is-dragging { transition: none; }
    .sb-close {
        display: inline-grid; place-items: center; position: absolute; top: 14px; right: 12px; width: 40px; height: 40px; z-index: 2;
        border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer;
        transition: transform .3s var(--ease-elastic), background .15s;
    }
    .sb-close:active { transform: scale(.88); }
    .sb-brand { padding-right: 52px; }
    .sb-link { min-height: 44px; font-size: .95rem; }
    .sb-link .nav-icon { width: 32px; height: 32px; }
    .overlay { background: var(--scrim); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
    html:has(.sidebar.open) { overflow: hidden; }

    /* Barre du haut : le monogramme remplace le bouton menu (le menu complet est dans l'île du bas) */
    .burger { display: none; }
    .tb-logo { display: inline-grid; flex: none; }
    .tb-logo .logo-mark { width: 36px; height: 36px; border-radius: 12px; }
    .tb-logo .logo-mark svg { width: 22px; height: 22px; }
    .crumb-chip { display: none; }
    .topbar-inner { gap: 10px; }
    .topbar-search { display: inline-grid; }
    .user-area { margin-left: auto; }

    /* Notifications : sous la cloche */
    .notif-panel { left: auto; right: 12px; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); max-height: min(70dvh, 560px); }

    /* Île de navigation flottante (« dynamic island ») */
    .tabbar {
        background: var(--island-bg); border-color: var(--island-line); box-shadow: var(--island-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
        color-scheme: dark; transition: transform .3s var(--ease-out), opacity .22s ease;
    }
    .tabbar::before {
        content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
        background: linear-gradient(110deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, .02) 60%, color-mix(in srgb, var(--brand) 60%, transparent) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    }
    .tabbar-scroll { position: relative; }
    .tabbar a, .tabbar button { z-index: 1; flex-basis: 70px; min-height: 48px; color: var(--island-muted); font-size: .64rem; letter-spacing: .01em; transition: color .2s; }
    .tabbar .on { color: var(--island-ink); }
    .tab-ico { width: 40px; height: 30px; border-radius: 11px; transition: background .25s, color .2s, transform .3s var(--ease-elastic), box-shadow .25s, width .25s var(--ease-out); }
    .tabbar .on .tab-ico {
        width: 46px; color: #fff;
        background: linear-gradient(140deg, color-mix(in oklab, var(--mod) 78%, #fff) 0%, var(--mod) 50%, var(--mod-2, var(--mod)) 100%);
        box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--mod) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
    }
    .tabbar.has-ind .on .tab-ico { background: transparent; box-shadow: none; }
    .tabbar .on > span:last-child { font-weight: 750; }
    .tab-ind {
        position: absolute; left: 0; top: 0; z-index: 0; width: 46px; height: 30px; border-radius: 11px; pointer-events: none; opacity: 0;
        background: linear-gradient(140deg, color-mix(in oklab, var(--mod) 78%, #fff) 0%, var(--mod) 50%, var(--mod-2, var(--mod)) 100%);
        box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--mod) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
        transition: transform .48s var(--ease-glide), opacity .2s ease;
    }
    .tab-ind.show { opacity: 1; }
    .tab-ind.no-anim { transition: none; }
    .tab-dot { top: -2px; right: 1px; border-color: var(--island-solid); }

    /* Bouton + : dégradé signature, reflet, pression élastique */
    .fab {
        width: 56px; height: 56px; border-radius: 20px; background: var(--brand-gradient-vivid);
        box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--brand) 85%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--brand-3) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .38);
        transition: transform .4s var(--ease-elastic), opacity .2s ease;
    }
    .fab::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 55%);
    }
    .fab svg { position: relative; transition: transform .4s var(--ease-elastic); }
    .fab:active { transform: scale(.88); }
    .fab:active svg { transform: rotate(90deg); }

    /* Fenêtre ouverte : la barre du bas s'efface */
    body:has(.modal-overlay.show) :is(.tabbar, .fab) { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 40px)) !important; }

    /* Modales en feuille flottante */
    .modal-overlay { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
    .modal-box { border-radius: 28px; }
    .modal-overlay > .modal-box { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .modal-overlay.show .modal-box { animation: sh-sheet .36s var(--ease-out) backwards; }
    .modal-overlay > .modal-box::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px;
        background: var(--line-strong); pointer-events: none; z-index: 3;
    }
}
/* Clavier virtuel ouvert : la barre du bas ne recouvre pas le champ */
@media (max-width: 960px) and (hover: none) {
    body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]), textarea, [contenteditable="true"]):focus) :is(.tabbar, .fab) {
        opacity: 0; pointer-events: none; transform: translateY(calc(100% + 40px)) !important;
    }
}
@media (max-width: 720px) {
    /* Téléphone : en haut de page, « MonCentre » ; dès que le grand titre passe sous la barre, le nom de la page prend sa place */
    .crumb { position: relative; }
    .crumb-title { font-size: 1.08rem; transition: opacity .22s ease, transform .3s var(--ease-out); }
    .crumb-brand {
        display: block; position: absolute; left: 0; top: 50%; font: 800 1.2rem/1.1 var(--font-display); letter-spacing: -.045em; color: var(--ink);
        white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(calc(-50% - 8px));
        transition: opacity .22s ease, transform .3s var(--ease-out);
    }
    .crumb-brand b { font-weight: 800; background: var(--brand-gradient-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; }
    body:has(.content > .page-header, .content .dash-hero, .content .help-hero) .topbar:not(.titled) .crumb-title { opacity: 0; transform: translateY(8px); }
    body:has(.content > .page-header, .content .dash-hero, .content .help-hero) .topbar:not(.titled) .crumb-brand { opacity: 1; transform: translateY(-50%); }

    .page-icon { width: 42px; height: 42px; border-radius: 14px; }
    .page-icon svg { width: 21px; height: 21px; }

    .palette { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
    .palette-box { border-radius: 22px; }
    .palette-input { height: 58px; padding-left: 16px; }
    .palette-input input { font-size: 16px; }
    .palette-list { max-height: min(62vh, 520px); max-height: min(62dvh, 520px); }
    .palette-item { min-height: 54px; }
}
@media (max-width: 640px) {
    /* Évite le zoom automatique d'iOS au focus et rend la saisie confortable */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }

    /* Menus « ⋯ » : feuille d'actions en bas d'écran (jamais coupée, jamais sous la tabbar) */
    .item-row:has(.row-more[open]) { z-index: 300; }
    details.row-more[open] > summary::before {
        content: ""; position: fixed; inset: 0; z-index: 290; cursor: default;
        background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: sh-fade .2s ease backwards;
    }
    details.row-more[open] > .row-more-menu {
        position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 300;
        min-width: 0; max-height: 72vh; max-height: 72dvh; overflow-y: auto; gap: 6px; padding: 22px 12px 12px; border-radius: 24px;
        background: var(--surface); transform-origin: bottom center; animation: sh-sheet .32s var(--ease-out) backwards;
    }
    details.row-more[open] > .row-more-menu::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--line-strong);
    }
    details.row-more[open] > .row-more-menu .btn, details.row-more[open] > .row-more-menu select { height: 50px; font-size: 1rem; }
    body:has(details.row-more[open]) :is(.tabbar, .fab) { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 40px)) !important; }

    /* Confirmation : boutons pleine largeur */
    .modal-confirm .modal-actions { flex-wrap: nowrap; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .notif-bell:has(.notif-badge.show) > svg, .sb-pill, .notif-badge.show, .page-icon, .confirm-ico,
    .palette.fresh .palette-item,
    :is(.item-list, .grid, #taskList) > .empty-state::before { animation: none; }
    .skeleton::after { animation: none; opacity: 0; }
    .tab-ind, .logo-mark .lm-glyph { transition: none; }
    html.is-navigating .nav-progress { animation: none; transform: scaleX(.6); }
}
@media print {
    .nav-progress, .tab-ind, .fab { display: none !important; }
    .page-header h1 { background: none; color: #000; }
}

/* ====================== Zone : dashboard ====================== */
/* ==========================================================================
   UI4 — Accueil (body[data-mod="dashboard"])
   Hiérarchie : date + salutation → priorité du jour (+ conseil IA à côté sur grand écran)
   → 2 suggestions max → widgets. Tout est limité à l'accueil.
   ========================================================================== */

/* ---------- En-tête : date en sur-titre, salutation, pastilles cliquables ---------- */
body[data-mod="dashboard"] .dash-hero { align-items: flex-end; gap: 14px 20px; margin: 8px 0 22px; }
body[data-mod="dashboard"] .dash-hero-main { flex: 1 1 320px; min-width: 0; }
body[data-mod="dashboard"] .dash-date {
    margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
body[data-mod="dashboard"] .dash-greeting { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.06; letter-spacing: -.04em; overflow-wrap: anywhere; }
body[data-mod="dashboard"] .brief-chips { margin-top: 14px; gap: 8px; }
body[data-mod="dashboard"] .brief-chip {
    position: relative; min-height: 34px; padding: 6px 13px; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: translate .18s var(--ease-spring), box-shadow .18s, border-color .15s, background .15s;
}
body[data-mod="dashboard"] .brief-chip span { white-space: nowrap; }
/* Zone de tap ≥ 40 px sans grossir la pastille (l'écart de 8 px entre les lignes absorbe le débord) */
body[data-mod="dashboard"] .brief-chip::after { content: ""; position: absolute; inset: -4px -3px; }
body[data-mod="dashboard"] .brief-chip:hover { translate: 0 -1px; box-shadow: var(--shadow-2); border-color: var(--line-strong); }
body[data-mod="dashboard"] .brief-chip:active { scale: .97; }
body[data-mod="dashboard"] .brief-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="dashboard"] .brief-chip.warn { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
body[data-mod="dashboard"] .brief-chip.ok { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
body[data-mod="dashboard"] #customizeDashboardBtn { height: 38px; border-radius: 12px; color: var(--ink-2); flex: none; }
body[data-mod="dashboard"] #customizeDashboardBtn:hover { color: var(--brand); }

/* ---------- Bandeau du haut : priorité du jour + conseil IA ---------- */
body[data-mod="dashboard"] .dash-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 18px; align-items: stretch; }
body[data-mod="dashboard"] .dash-top > .focus,
body[data-mod="dashboard"] .dash-top > .dash-ai { margin-bottom: 0; }
@media (min-width: 1280px) {
    body[data-mod="dashboard"] .dash-top:has(> .dash-ai:not([hidden])) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* Priorité du jour */
body[data-mod="dashboard"] .focus {
    --fc: var(--brand);
    flex-wrap: nowrap; padding: 20px 22px; border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--fc) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: translate .2s var(--ease-spring), box-shadow .2s;
}
body[data-mod="dashboard"] .focus.level-danger { --fc: var(--bad); background: linear-gradient(120deg, #c9184a 0%, #e93a5a 55%, #ff6b6b 100%); }
body[data-mod="dashboard"] .focus.level-warning { --fc: var(--warn); background: linear-gradient(120deg, #c2410c 0%, #e8590c 55%, #f59f00 100%); }
:root[data-theme="dark"] body[data-mod="dashboard"] .focus.level-danger { background: linear-gradient(120deg, #9e1239 0%, #c92a4b 55%, #e0485a 100%); }
:root[data-theme="dark"] body[data-mod="dashboard"] .focus.level-warning { background: linear-gradient(120deg, #9a3409 0%, #c2410c 55%, #d97706 100%); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-mod="dashboard"] .focus.level-danger { background: linear-gradient(120deg, #9e1239 0%, #c92a4b 55%, #e0485a 100%); }
    :root:not([data-theme="light"]) body[data-mod="dashboard"] .focus.level-warning { background: linear-gradient(120deg, #9a3409 0%, #c2410c 55%, #d97706 100%); }
}
body[data-mod="dashboard"] .focus-left { flex: 1 1 auto; min-width: 0; gap: 14px; }
body[data-mod="dashboard"] .focus-copy { min-width: 0; }
body[data-mod="dashboard"] .focus-icon-badge { width: 48px; height: 48px; border-radius: 15px; }
body[data-mod="dashboard"] .focus.level-danger .focus-icon-badge { animation: dash-ring 2.2s ease-out 3; }
body[data-mod="dashboard"] .focus-text {
    overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Tout le bandeau est cliquable (le lien « Voir » s'étend dessus) */
body[data-mod="dashboard"] .focus-go { position: static; flex: none; height: 38px; padding: 0 14px; border-radius: 12px; font-weight: 700; }
body[data-mod="dashboard"] .focus-go::before {
    content: ""; position: absolute; inset: 0; z-index: auto; background: none; opacity: 1; transform: none; animation: none; border-radius: 0; pointer-events: auto;
}
body[data-mod="dashboard"] .focus-go svg { transition: transform .2s var(--ease-spring); }
body[data-mod="dashboard"] .focus.has-link:hover { translate: 0 -2px; box-shadow: 0 24px 46px -22px color-mix(in srgb, var(--fc) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2); }
body[data-mod="dashboard"] .focus.has-link:hover .focus-go svg { transform: translateX(3px); }
body[data-mod="dashboard"] .focus.has-link:active { scale: .99; }
body[data-mod="dashboard"] .focus-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Rien d'urgent : carte calme et légère, pas un gros bandeau vert */
body[data-mod="dashboard"] .focus.level-calm {
    --fc: var(--ok); color: var(--ink); padding: 16px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 11%, var(--surface)), var(--surface) 72%);
    border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--line)); box-shadow: var(--shadow-1);
}
body[data-mod="dashboard"] .focus.level-calm::after { display: none; }
body[data-mod="dashboard"] .focus.level-calm .focus-icon-badge {
    width: 42px; height: 42px; border-radius: 13px; color: var(--ok); border-color: transparent;
    background: color-mix(in srgb, var(--ok) 15%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-mod="dashboard"] .focus.level-calm .focus-kicker { color: var(--ok); opacity: 1; }
body[data-mod="dashboard"] .focus.level-calm .focus-text { font-size: 1.02rem; color: var(--ink); }

/* Conseil du jour (IA à la demande) */
body[data-mod="dashboard"] .dash-ai {
    gap: 14px; padding: 18px 20px; border-radius: var(--radius-lg);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 60%),
        radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 60%),
        var(--surface);
}
body[data-mod="dashboard"] .dash-ai .ai-ico { width: 42px; height: 42px; border-radius: 14px; }
body[data-mod="dashboard"] .dash-ai .ai-age { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
body[data-mod="dashboard"] .dash-ai .ai-sum { line-height: 1.5; }
body[data-mod="dashboard"] .dash-ai .ai-tips li { animation: rise .3s var(--ease-spring) both; }
body[data-mod="dashboard"] .dash-ai .ai-tips li:nth-child(2) { animation-delay: .05s; }
body[data-mod="dashboard"] .dash-ai .ai-tips li:nth-child(3) { animation-delay: .1s; }
body[data-mod="dashboard"] .dash-ai .ai-refresh { width: 40px; height: 40px; border-radius: 12px; color: var(--muted); }
body[data-mod="dashboard"] .dash-ai .ai-refresh:hover { color: var(--brand); }
body[data-mod="dashboard"] .dash-ai.loading .ai-refresh svg { animation: spin .8s linear infinite; }
body[data-mod="dashboard"] .dash-ai.is-ask { align-items: center; }
/* Liste de conseils vide en mode « à la demande » : sinon elle compte comme un élément flex et décentre le bouton sur téléphone */
body[data-mod="dashboard"] .dash-ai.is-ask .ai-tips { display: none; }
body[data-mod="dashboard"] .dash-ai.is-ask .ai-sum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
    margin: 2px 0 0; font-size: .9rem; font-weight: 500; color: var(--ink-2);
}
body[data-mod="dashboard"] .dash-ai .ai-ask-text { flex: 1 1 220px; min-width: 0; }
body[data-mod="dashboard"] .dash-ai .ai-ask-btn { flex: none; height: 38px; border-radius: 12px; }

/* ---------- Suggestions (2 au maximum) ---------- */
body[data-mod="dashboard"] .smart-strip { gap: 14px; margin-bottom: 20px; }
body[data-mod="dashboard"] .smart-card { align-items: flex-start; padding: 16px 18px; transition: translate .2s var(--ease-spring), box-shadow .2s; }
body[data-mod="dashboard"] .smart-card:hover { translate: 0 -1px; box-shadow: var(--shadow-2); }
body[data-mod="dashboard"] .smart-text { font-size: .9rem; }
body[data-mod="dashboard"] .smart-actions .btn { border-radius: 11px; }

/* ---------- Widgets ---------- */
body[data-mod="dashboard"] { --dash-pad-x: 22px; }
body[data-mod="dashboard"] .dash-grid { gap: 18px; }
body[data-mod="dashboard"] .dw > .card { padding: 20px var(--dash-pad-x); }
body[data-mod="dashboard"] .dw .card-head { align-items: center; margin-bottom: 14px; }
body[data-mod="dashboard"] .dw .card-head h3 {
    margin: 0; gap: 10px; font: 700 1rem/1.2 var(--font-display); letter-spacing: -.015em; text-transform: none; color: var(--ink);
}
body[data-mod="dashboard"] .dw .card-head h3 .inline-icon {
    width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; vertical-align: middle;
    color: var(--c, var(--mod)); background: color-mix(in srgb, var(--c, var(--mod)) 14%, transparent);
}
body[data-mod="dashboard"] .dw .card-head h3 .inline-icon svg { width: 16px; height: 16px; }
body[data-mod="dashboard"] .dw .card-footer-link { padding-top: 14px; }

/* Lignes de liste : tuiles douces, sans ombre (pas de « carte dans la carte ») */
body[data-mod="dashboard"] .dw .item-list { gap: 6px; }
body[data-mod="dashboard"] .dw .item-row {
    padding: 11px 14px; border-radius: 14px; background: var(--surface-tint); border-color: transparent; box-shadow: none;
}
body[data-mod="dashboard"] .dw .item-row:hover {
    background: color-mix(in srgb, var(--c, var(--brand)) 7%, var(--surface)); border-color: color-mix(in srgb, var(--c, var(--brand)) 20%, transparent); box-shadow: none;
}
body[data-mod="dashboard"] .dw a.item-row { color: inherit; text-decoration: none; }
body[data-mod="dashboard"] .dw .item-row:focus-within { box-shadow: none; border-color: transparent; }
body[data-mod="dashboard"] .dw .item-row:has(:focus-visible),
body[data-mod="dashboard"] .dw a.item-row:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
body[data-mod="dashboard"] .dw .item-row.item-row-alert { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
body[data-mod="dashboard"] .dw .item-row-alert .item-sub { color: var(--bad); font-weight: 600; }
body[data-mod="dashboard"] .dw .card > .empty-state,
body[data-mod="dashboard"] .dw .item-list > .empty-state {
    padding: 22px 14px; border-radius: 16px; background: var(--surface-tint); border: 1px dashed var(--line-strong); font-size: .9rem;
}

/* Tâches du jour : cible de coche plus grande, bouton « demain » discret */
body[data-mod="dashboard"] .dw .task-row { gap: 12px; padding: 9px 8px 9px 12px; }
body[data-mod="dashboard"] .dash-task-done-btn { position: relative; width: 28px; height: 28px; }
body[data-mod="dashboard"] .dash-task-done-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
body[data-mod="dashboard"] .dash-task-done-btn.done { animation: dash-pop .32s var(--ease-spring); }
body[data-mod="dashboard"] .dash-task-postpone-btn {
    width: 36px; height: 36px; border-radius: 11px; flex: none; color: var(--muted); background: var(--surface); border-color: var(--line); box-shadow: none;
}
body[data-mod="dashboard"] .dash-task-postpone-btn:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: var(--brand-soft); }

/* Budget */
body[data-mod="dashboard"] .budget-amount { font-size: 2rem; font-variant-numeric: tabular-nums; }
body[data-mod="dashboard"] .dw .progress-bar { height: 8px; }
body[data-mod="dashboard"] .dw .mini-list { border-top-style: solid; border-top-color: var(--line); }

/* Mail : un point de couleur devant les mails non lus, lecture plus rapide */
body[data-mod="dashboard"] .mail-card { color: inherit; text-decoration: none; }
body[data-mod="dashboard"] .mail-card .mini-row.unread span::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; vertical-align: middle;
    background: var(--c, var(--brand));
}
body[data-mod="dashboard"] .mail-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Agenda du jour ---------- */
body[data-mod="dashboard"] #dayScheduleCard { overflow-x: clip; } /* le glissement d'un jour à l'autre ne doit jamais élargir la page */
body[data-mod="dashboard"] #dayScheduleCard .card-head { align-items: flex-start; flex-wrap: wrap; }
/* Base 0 : les boutons ne passent à la ligne que si le titre du jour ne tient vraiment pas (petits téléphones) */
body[data-mod="dashboard"] #dayScheduleCard .card-head > div:first-child { flex: 1 1 0%; }
body[data-mod="dashboard"] #dayScheduleCard .day-nav { margin-left: auto; }
body[data-mod="dashboard"] #dayScheduleCard .card-head h3 {
    font: 700 .7rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); gap: 8px;
}
body[data-mod="dashboard"] #dayScheduleCard .card-head h3 .inline-icon { width: 24px; height: 24px; border-radius: 8px; }
body[data-mod="dashboard"] #dayScheduleCard .card-head h3 .inline-icon svg { width: 13px; height: 13px; }
body[data-mod="dashboard"] .day-label { font-size: 1.65rem; margin-top: 8px; }
body[data-mod="dashboard"] .day-nav { flex: none; }
body[data-mod="dashboard"] .day-nav .btn { height: 38px; border-radius: 12px; }
body[data-mod="dashboard"] .day-nav .btn-icon { width: 38px; }
/* Bande des jours : bord à bord dans la carte, fondu sur les côtés */
body[data-mod="dashboard"] .day-chips {
    gap: 6px; margin: 0 calc(-1 * var(--dash-pad-x)) 6px; padding: 6px var(--dash-pad-x) 14px; scroll-padding-inline: var(--dash-pad-x);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--dash-pad-x), #000 calc(100% - var(--dash-pad-x)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--dash-pad-x), #000 calc(100% - var(--dash-pad-x)), transparent 100%);
}
body[data-mod="dashboard"] .dchip { width: 52px; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
body[data-mod="dashboard"] .dchip:active { scale: .95; }
body[data-mod="dashboard"] .dchip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="dashboard"] .dchip.is-today:not(.sel) { background: var(--brand-soft); }
/* Frise : pas d'animation au rafraîchissement de la minute, glissement doux au changement de jour */
body[data-mod="dashboard"] .tl.is-quiet > *,
body[data-mod="dashboard"] .tl.go-next > *,
body[data-mod="dashboard"] .tl.go-prev > * { animation: none; }
body[data-mod="dashboard"] .tl.go-next { animation: dash-tl-next .26s var(--ease-spring) both; }
body[data-mod="dashboard"] .tl.go-prev { animation: dash-tl-prev .26s var(--ease-spring) both; }
body[data-mod="dashboard"] .tl-ev { border-radius: 14px; }
body[data-mod="dashboard"] .tl-empty { padding: 18px 0 6px; }

/* ---------- Fenêtre « Personnaliser l'accueil » ---------- */
body[data-mod="dashboard"] .cz-count { display: inline-block; color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
body[data-mod="dashboard"] #customizeWidgetList { gap: 6px; padding: 4px; } /* l'anneau de focus (3 px) n'est plus rogné par la liste défilante */
body[data-mod="dashboard"] .cz-row {
    flex-wrap: nowrap; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--surface-2); border-color: var(--line); box-shadow: none;
    animation: none; transition: opacity .15s, background .15s, border-color .15s;
}
body[data-mod="dashboard"] .cz-row:hover { box-shadow: none; }
body[data-mod="dashboard"] .cz-row:focus-within { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 0 0 3px var(--brand-soft); }
body[data-mod="dashboard"] .cz-row.is-off { opacity: .55; background: transparent; }
body[data-mod="dashboard"] .cz-row.is-off:hover,
body[data-mod="dashboard"] .cz-row.is-off:focus-within { opacity: .9; }
body[data-mod="dashboard"] .cz-row .check-row { min-height: 42px; min-width: 0; }
body[data-mod="dashboard"] .cz-row .check-row span { overflow-wrap: anywhere; }
body[data-mod="dashboard"] .cz-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
body[data-mod="dashboard"] .cz-row .item-actions { flex-wrap: nowrap; gap: 6px; }
body[data-mod="dashboard"] .cz-move { width: 40px; height: 40px; border-radius: 12px; }
body[data-mod="dashboard"] .cz-move:disabled { opacity: .35; }
body[data-mod="dashboard"] .cz-up svg { transform: rotate(180deg); }
body[data-mod="dashboard"] .cz-row.just-moved { animation: dash-flash .6s ease; }

/* ---------- Animations ---------- */
@keyframes dash-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes dash-pop { 0% { scale: 1; } 45% { scale: 1.22; } 100% { scale: 1; } }
@keyframes dash-tl-next { from { opacity: .25; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes dash-tl-prev { from { opacity: .25; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes dash-flash {
    from { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
}

/* ---------- Tablette ---------- */
@media (max-width: 960px) {
    body[data-mod="dashboard"] { --dash-pad-x: 18px; }
    body[data-mod="dashboard"] .dw > .card { padding: 18px var(--dash-pad-x); }
}

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
    body[data-mod="dashboard"] .dash-hero { margin: 4px 0 18px; }
    body[data-mod="dashboard"] .dash-top { gap: 12px; margin-bottom: 14px; }
    body[data-mod="dashboard"] .focus { padding: 16px; gap: 12px; border-radius: 20px; }
    body[data-mod="dashboard"] .focus-left { gap: 12px; }
    body[data-mod="dashboard"] .focus-icon-badge { width: 42px; height: 42px; border-radius: 13px; }
    body[data-mod="dashboard"] .focus-text { font-size: 1rem; }
    /* Le bandeau entier est cliquable : le bouton devient une simple flèche ronde */
    body[data-mod="dashboard"] .focus-go { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
    body[data-mod="dashboard"] .focus-go-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    body[data-mod="dashboard"] .dash-ai { padding: 14px; gap: 12px; border-radius: 20px; }
    body[data-mod="dashboard"] .dash-ai .ai-ico { width: 36px; height: 36px; border-radius: 12px; }
    body[data-mod="dashboard"] .dash-ai.is-ask .ai-body { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
    body[data-mod="dashboard"] .dash-ai.is-ask .ai-title { margin: 0; }
    body[data-mod="dashboard"] .dash-ai.is-ask .ai-sum { margin: 0; flex: none; }
    body[data-mod="dashboard"] .dash-ai .ai-ask-text { display: none; }
    body[data-mod="dashboard"] .dash-ai .ai-ask-btn { height: 40px; }

    /* Deux suggestions : carrousel horizontal (la 2ᵉ dépasse pour montrer qu'il y en a une autre) */
    body[data-mod="dashboard"] .smart-strip { margin-bottom: 16px; }
    /* Une seule suggestion : pleine largeur (le minimum de 320 px du thème débordait sur les petits téléphones) */
    body[data-mod="dashboard"] .smart-strip:not(.is-multi) { grid-template-columns: minmax(0, 1fr); }
    body[data-mod="dashboard"] .smart-strip.is-multi {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: -16px; padding: 2px 16px 8px; scroll-padding-inline: 16px;
    }
    body[data-mod="dashboard"] .smart-strip.is-multi::-webkit-scrollbar { display: none; }
    body[data-mod="dashboard"] .smart-strip.is-multi > .smart-card { scroll-snap-align: start; }
    body[data-mod="dashboard"] .smart-card { padding: 14px; gap: 12px; }
    body[data-mod="dashboard"] .smart-actions .btn { height: 40px; }

    body[data-mod="dashboard"] .dash-grid { gap: 14px; }
    body[data-mod="dashboard"] .day-label { font-size: 1.45rem; }
    body[data-mod="dashboard"] .day-nav .btn { height: 40px; }
    body[data-mod="dashboard"] .day-nav .btn-icon { width: 40px; }
    body[data-mod="dashboard"] .dash-task-postpone-btn { width: 40px; height: 40px; }
    body[data-mod="dashboard"] .dw .card-footer-link .link-more { min-height: 40px; }
}
@media (max-width: 640px) {
    body[data-mod="dashboard"] .dash-hero #customizeDashboardBtn { width: 40px; height: 40px; border-radius: 12px; }
    body[data-mod="dashboard"] .dash-date { padding-right: 48px; }
    body[data-mod="dashboard"] .brief-chip { min-height: 32px; padding: 5px 11px; font-size: .78rem; }
}

/* ---------- Mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-mod="dashboard"] .tl.go-next,
    body[data-mod="dashboard"] .tl.go-prev,
    body[data-mod="dashboard"] .focus.level-danger .focus-icon-badge,
    body[data-mod="dashboard"] .dash-task-done-btn.done,
    body[data-mod="dashboard"] .cz-row.just-moved,
    body[data-mod="dashboard"] .dash-ai .ai-tips li,
    body[data-mod="dashboard"] .dash-ai.loading .ai-refresh svg { animation: none; }
    body[data-mod="dashboard"] .focus.has-link:hover,
    body[data-mod="dashboard"] .smart-card:hover,
    body[data-mod="dashboard"] .brief-chip:hover { translate: none; }
}

/* ====================== Zone : plan ====================== */
/* ==========================================================================
   MonCentre 4 — zone « plan » : Tâches, Rendez-vous, Projets
   (concaténé après theme3.css ; tout est limité à body[data-mod="tasks|appointments|projects"])
   ========================================================================== */

@keyframes plan-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes plan-fade { from { opacity: 0; } }
@keyframes plan-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes plan-ring { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes plan-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes plan-slide-l { from { opacity: 0; transform: translateX(26px); } }
@keyframes plan-slide-r { from { opacity: 0; transform: translateX(-26px); } }

/* ---------- Commun : apparition des lignes (seules les nouvelles s'animent ; « backwards » = aucun contexte d'empilement résiduel) ---------- */
body:is([data-mod="tasks"], [data-mod="appointments"]) .item-list > .item-row { animation: none; position: relative; }
body:is([data-mod="tasks"], [data-mod="appointments"]) .item-list > .item-row.is-new {
    animation: plan-rise .34s var(--ease-spring) backwards; animation-delay: calc(var(--i, 0) * 26ms);
}
/* Pas d'anneau de focus sur toute la ligne au simple clic (seulement au clavier) */
body:is([data-mod="tasks"], [data-mod="appointments"]) .item-list > .item-row:focus-within { border-color: var(--line); box-shadow: var(--shadow-1); }
body:is([data-mod="tasks"], [data-mod="appointments"]) .item-list > .item-row.item-row-alert:focus-within { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
body:is([data-mod="tasks"], [data-mod="appointments"]) .item-list > .item-row:has(:focus-visible) {
    border-color: color-mix(in srgb, var(--mod) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod) 16%, transparent);
}
/* Lignes estompées (tâche faite, rendez-vous annulé) : on estompe le contenu, pas la ligne entière,
   sinon le menu « ⋯ » (et sa feuille plein écran sur téléphone) devient lui aussi transparent */
body[data-mod="tasks"] .task-row.is-done,
body[data-mod="appointments"] .appt-row.is-cancelled { opacity: 1; }
body[data-mod="tasks"] .task-row.is-done > :not(.row-more) { opacity: .75; }
body[data-mod="appointments"] .appt-row.is-cancelled > :not(.row-more) { opacity: .6; }
/* Ligne qui s'en va (tâche cochée, suppression) : elle se replie en douceur */
body:is([data-mod="tasks"], [data-mod="appointments"]) .item-list > .item-row.plan-leave {
    height: 0 !important; min-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: -8px;
    border-width: 0; opacity: 0; transform: translateX(28px); overflow: hidden; pointer-events: none; animation: none;
    transition: height .28s cubic-bezier(.4, 0, .2, 1), padding .28s cubic-bezier(.4, 0, .2, 1), margin .28s cubic-bezier(.4, 0, .2, 1),
                border-width .28s, opacity .2s ease, transform .28s ease;
}

/* Les listes déroulantes gardent leur flèche (theme3.css et select:focus la retirent via « background: ») */
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) select,
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7080' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
}

/* ---------- États vides ---------- */
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) .plan-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px; grid-column: 1 / -1;
    padding: 34px 20px 30px; border: 1px dashed var(--line-strong); border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 55%, transparent); text-align: center; animation: plan-fade .3s ease backwards;
}
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) .plan-empty-ico {
    width: 58px; height: 58px; margin-bottom: 6px; border-radius: 19px; display: grid; place-items: center; color: var(--mod);
    background: linear-gradient(150deg, color-mix(in srgb, var(--mod) 16%, transparent), color-mix(in srgb, var(--mod) 6%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 20%, transparent);
}
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) .plan-empty b { font: 700 1.05rem var(--font-display); letter-spacing: -.015em; color: var(--ink); }
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) .plan-empty small { max-width: 36ch; font-size: .86rem; line-height: 1.45; color: var(--muted); }

/* ---------- Pastilles (dates relatives, statut) ---------- */
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip { height: 22px; padding: 0 9px; gap: 5px; font-size: .74rem; }
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip.today { background: color-mix(in srgb, var(--mod) 15%, transparent); color: var(--mod); font-weight: 750; }
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip.soon { background: color-mix(in srgb, var(--mod) 9%, transparent); color: color-mix(in srgb, var(--mod) 75%, var(--ink)); }
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip.bad { font-weight: 700; }
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip .plan-dot,
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip.plan-live i {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: plan-pulse 1.8s infinite;
}
body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip.plan-live { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); font-weight: 750; }

/* ---------- Petites puces de choix rapide (échéance, durée) ---------- */
body:is([data-mod="tasks"], [data-mod="appointments"]) .plan-quick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body:is([data-mod="tasks"], [data-mod="appointments"]) .plan-quick button {
    height: 34px; padding: 0 12px; border-radius: 99px; border: 1px dashed var(--line-strong); background: transparent;
    color: var(--ink-2); font: 600 .8rem var(--font-body); cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease-spring);
}
body:is([data-mod="tasks"], [data-mod="appointments"]) .plan-quick button:active { transform: scale(.95); }
body:is([data-mod="tasks"], [data-mod="appointments"]) .plan-quick button[aria-pressed="true"] {
    border: 1px solid transparent; background: var(--mod); color: #fff; box-shadow: 0 6px 14px -8px var(--mod);
}
@media (hover: hover) {
    body:is([data-mod="tasks"], [data-mod="appointments"]) .plan-quick button:not([aria-pressed="true"]):hover { border-style: solid; border-color: var(--mod); color: var(--mod); }
}

/* Contours de focus clavier bien visibles */
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) :is(.plan-quick button, .plan-toggle, .plan-seg button, .check-btn, .plan-today-btn):focus-visible {
    outline: 2px solid var(--mod); outline-offset: 2px;
}

/* ==========================================================================
   Formulaire d'ajout compact (Tâches, Projets)
   ========================================================================== */
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add {
    display: block; padding: 8px; margin: 0 0 18px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    transition: border-color .2s, box-shadow .25s;
}
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add:focus-within {
    border-color: color-mix(in srgb, var(--mod) 42%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod) 11%, transparent), var(--shadow-2);
}
body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) .plan-add-ico {
    width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center;
    color: var(--mod); background: color-mix(in srgb, var(--mod) 12%, transparent);
    transition: transform .3s var(--ease-spring), background .2s, color .2s, box-shadow .2s;
}
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add:focus-within .plan-add-ico,
body[data-mod="appointments"] .plan-apptadd.is-open .plan-add-ico {
    color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--mod) 78%, #fff), var(--mod));
    box-shadow: 0 8px 18px -10px var(--mod);
}
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add:focus-within .plan-add-ico { transform: rotate(90deg); }
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-main { display: flex; align-items: center; gap: 8px; }
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-main > input[type="text"] {
    flex: 1 1 auto; min-width: 0; width: auto; height: 44px; padding: 0 6px; border: 0; border-radius: 10px;
    background: transparent; box-shadow: none; color: var(--ink); font-size: 1rem; font-weight: 560;
}
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-main > input[type="text"]:focus { background: transparent; box-shadow: none; border: 0; }
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-btn { flex: none; height: 42px; padding: 0 18px; border-radius: 13px; }
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-btn > svg { display: none; }
body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-btn:disabled { opacity: .6; cursor: progress; }

body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-opts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 4px 4px 52px;
}
body[data-mod="projects"] .plan-add-opts-stack { flex-direction: column; align-items: stretch; gap: 10px; padding-right: 8px; }

/* Options en pilules : icône + liste déroulante / date, sans étiquette encombrante */
body[data-mod="tasks"] .plan-opt {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; height: 36px; padding: 0 2px 0 11px; border-radius: 99px;
    border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); cursor: pointer;
    font: 600 .82rem var(--font-body); text-transform: none; letter-spacing: 0;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
body[data-mod="tasks"] .plan-opt > svg { flex: none; }
body[data-mod="tasks"] .plan-opt:focus-within { border-color: var(--mod); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod) 14%, transparent); }
body[data-mod="tasks"] .plan-opt :is(select, input) {
    width: auto; min-width: 0; height: 34px; margin: 0; padding: 0 30px 0 0; border: 0; border-radius: 0;
    background-color: transparent; box-shadow: none; color: var(--ink-2); font: 600 .84rem var(--font-body); cursor: pointer;
}
body[data-mod="tasks"] .plan-opt select,
body[data-mod="tasks"] .plan-opt select:focus { background-position: right 9px center; }
body[data-mod="tasks"] .plan-opt input[type="date"] { padding: 0 10px 0 0; }
body[data-mod="tasks"] .plan-opt :is(select, input):focus { border: 0; box-shadow: none; background-color: transparent; }
body[data-mod="tasks"] .plan-opt.has-value,
body[data-mod="tasks"] .plan-opt-rec:has(option:not([value="none"]):checked) {
    border-color: color-mix(in srgb, var(--mod) 40%, transparent); background: color-mix(in srgb, var(--mod) 9%, var(--surface)); color: var(--mod);
}
body[data-mod="tasks"] .plan-opt-prio:has(option[value="high"]:checked) {
    border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); color: var(--warn);
}
body[data-mod="tasks"] .plan-opt.has-value :is(select, input),
body[data-mod="tasks"] .plan-opt-rec:has(option:not([value="none"]):checked) select,
body[data-mod="tasks"] .plan-opt-prio:has(option[value="high"]:checked) select { color: var(--ink); }
@media (hover: hover) {
    body[data-mod="tasks"] .plan-opt:hover { border-color: color-mix(in srgb, var(--mod) 45%, var(--line-strong)); }
}

/* Curseur de progression (Projets) */
body[data-mod="projects"] .plan-range {
    display: flex; align-items: center; gap: 12px; margin: 0; font: 600 .8rem var(--font-body);
    text-transform: none; letter-spacing: 0; color: var(--muted);
}
body[data-mod="projects"] .plan-range > span { flex: none; }
body[data-mod="projects"] .plan-range output {
    flex: none; min-width: 48px; text-align: right; font: 750 .92rem var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums;
}
body[data-mod="projects"] .plan-range input[type="range"] {
    -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; width: auto; height: 30px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; touch-action: pan-y;
}
body[data-mod="projects"] .plan-range input[type="range"]::-webkit-slider-runnable-track {
    height: 8px; border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mod) 70%, #fff), var(--mod)) 0 0 / calc(var(--p, 0) * 1%) 100% no-repeat, var(--surface-tint-strong);
}
body[data-mod="projects"] .plan-range input[type="range"]::-moz-range-track {
    height: 8px; border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mod) 70%, #fff), var(--mod)) 0 0 / calc(var(--p, 0) * 1%) 100% no-repeat, var(--surface-tint-strong);
}
body[data-mod="projects"] .plan-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--mod); box-shadow: 0 3px 10px -3px rgba(17, 19, 40, .35);
    transition: transform .15s var(--ease-spring), box-shadow .15s;
}
body[data-mod="projects"] .plan-range input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--mod); box-shadow: 0 3px 10px -3px rgba(17, 19, 40, .35);
}
body[data-mod="projects"] .plan-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
body[data-mod="projects"] .plan-range input[type="range"]:focus { box-shadow: none; background: transparent; }
body[data-mod="projects"] .plan-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mod) 25%, transparent); }
body[data-mod="projects"] .plan-add textarea { min-height: 70px; margin: 0; border-radius: 14px; background: var(--surface-2); }

/* ==========================================================================
   Tâches : lignes, case à cocher, complétion animée
   ========================================================================== */
body[data-mod="tasks"] .task-row {
    flex-wrap: nowrap; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; border-radius: 16px; background: var(--surface);
}
body[data-mod="tasks"] .task-row .item-main { flex: 1 1 auto; gap: 3px; }
body[data-mod="tasks"] .task-row .item-title { display: block; font-size: .97rem; font-weight: 600; line-height: 1.35; color: var(--ink); transition: color .25s; }
body[data-mod="tasks"] .task-row .task-meta { margin-top: 3px; }
body[data-mod="tasks"] .task-row.item-row-alert { background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }

/* Barré animé (trait qui se dessine de gauche à droite) */
body[data-mod="tasks"] .task-row .tt {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .32s ease .06s;
}
body[data-mod="tasks"] .task-row.is-done .item-title { text-decoration: none; color: var(--muted); }
body[data-mod="tasks"] .task-row:is(.is-done, .is-completing) .tt { background-size: 100% 1.5px; }
body[data-mod="tasks"] .task-row.is-completing .item-title { color: var(--muted); }
body[data-mod="tasks"] .task-row.is-reopening .tt { background-size: 0 1.5px; }
body[data-mod="tasks"] .task-row.is-reopening .item-title { color: var(--ink); }
body[data-mod="tasks"] .item-list > .task-row.is-completing {
    background: color-mix(in srgb, var(--ok) 7%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
}

/* Case ronde : zone tactile de 46 px, anneau coloré selon la priorité */
body[data-mod="tasks"] .task-row .check-btn {
    position: relative; width: 28px; height: 28px; border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
    background: var(--surface); color: transparent;
}
body[data-mod="tasks"] .task-row .check-btn::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
body[data-mod="tasks"] .task-row .check-btn svg { transform: scale(.55); opacity: 0; transition: transform .28s var(--ease-spring), opacity .15s; }
body[data-mod="tasks"] .task-row[data-prio="high"] .check-btn:not(.done) {
    border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface));
}
body[data-mod="tasks"] .task-row[data-prio="low"] .check-btn:not(.done) { border-color: var(--line-strong); }
@media (hover: hover) {
    body[data-mod="tasks"] .task-row .check-btn:not(.done):hover { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
    body[data-mod="tasks"] .task-row .check-btn:not(.done):hover svg { opacity: .75; transform: scale(.85); }
}
@media (hover: none) { body[data-mod="tasks"] .task-row .check-btn:hover { transform: none; } }
body[data-mod="tasks"] .task-row .check-btn.done,
body[data-mod="tasks"] .task-row.is-completing .check-btn {
    background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 6px 14px -8px var(--ok);
}
body[data-mod="tasks"] .task-row .check-btn.done svg,
body[data-mod="tasks"] .task-row.is-completing .check-btn svg { opacity: 1; transform: scale(1); }
body[data-mod="tasks"] .task-row.is-completing .check-btn { animation: plan-pop .38s var(--ease-spring); }
body[data-mod="tasks"] .task-row.is-completing .check-btn::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ok); pointer-events: none;
    animation: plan-ring .55s ease-out forwards;
}
body[data-mod="tasks"] .task-row.is-reopening .check-btn { background: var(--surface); border-color: var(--line-strong); color: transparent; box-shadow: none; }
body[data-mod="tasks"] .task-row.is-reopening .check-btn svg { opacity: 0; transform: scale(.55); }
body[data-mod="tasks"] .task-row .check-btn:disabled { cursor: progress; }

/* « En retard » attire l'œil quand il y en a */
body[data-mod="tasks"] .prefilters button.tone-bad:has(b:not(:empty)):not([aria-pressed="true"]) {
    border-color: color-mix(in srgb, var(--bad) 40%, var(--line-strong)); color: var(--bad);
    background: color-mix(in srgb, var(--bad) 6%, var(--surface));
}
body[data-mod="tasks"] .prefilters button.tone-bad[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
body[data-mod="tasks"] .prefilters button.tone-bad[aria-pressed="true"] b { color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   Rendez-vous
   ========================================================================== */
/* Sélecteur Liste / Calendrier (segmenté) */
body[data-mod="appointments"] .plan-seg {
    display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-tint-strong); border: 1px solid var(--line);
}
body[data-mod="appointments"] .plan-seg .view-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; margin: 0;
    border: 0; border-radius: 10px; background: transparent; color: var(--muted); box-shadow: none; cursor: pointer;
    font: 650 .86rem var(--font-body); transition: background .2s, color .2s, box-shadow .2s;
}
body[data-mod="appointments"] .plan-seg .view-toggle-btn:hover { color: var(--ink); transform: none; }
body[data-mod="appointments"] .plan-seg .view-toggle-btn.active {
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
body[data-mod="appointments"] .plan-seg .view-toggle-btn.active svg { color: var(--mod); }

/* Carte « Nouveau rendez-vous » repliable */
body[data-mod="appointments"] .plan-apptadd { padding: 8px; margin: 0 0 18px; border-radius: 20px; transition: border-color .2s, box-shadow .25s; }
body[data-mod="appointments"] .plan-apptadd.is-open {
    border-color: color-mix(in srgb, var(--mod) 35%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod) 9%, transparent), var(--shadow-2);
}
body[data-mod="appointments"] .plan-toggle {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0;
    border: 0; border-radius: 14px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
body[data-mod="appointments"] .plan-toggle-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body[data-mod="appointments"] .plan-toggle-txt b { font: 700 .98rem var(--font-body); letter-spacing: -.01em; }
body[data-mod="appointments"] .plan-toggle-txt small { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mod="appointments"] .plan-apptadd.is-open .plan-toggle-txt small { display: none; }
body[data-mod="appointments"] .plan-chev {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--muted);
    transition: transform .28s var(--ease-spring), background .15s, color .15s;
}
body[data-mod="appointments"] .plan-apptadd.is-open .plan-add-ico { transform: rotate(45deg); }
@media (hover: hover) {
    body[data-mod="appointments"] .plan-toggle:hover .plan-chev { background: var(--surface-tint-strong); color: var(--ink); }
}
body[data-mod="appointments"] #apptForm { padding: 6px 6px 6px; }
body[data-mod="appointments"] .plan-appt-grid { gap: 2px 14px; }
body[data-mod="appointments"] .plan-appt-grid .plan-span { grid-column: 1 / -1; }
body[data-mod="appointments"] .plan-appt-grid label { margin-top: 10px; }
body[data-mod="appointments"] #apptDurChips { margin-top: 8px; }
body[data-mod="appointments"] #apptColor { height: 44px; padding: 4px; cursor: pointer; }
body[data-mod="appointments"] #apptColor::-webkit-color-swatch-wrapper { padding: 0; }
body[data-mod="appointments"] #apptColor::-webkit-color-swatch { border: 0; border-radius: 8px; }
body[data-mod="appointments"] #apptColor::-moz-color-swatch { border: 0; border-radius: 8px; }
body[data-mod="appointments"] .plan-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body[data-mod="appointments"] .plan-form-actions .btn:disabled { opacity: .6; cursor: progress; }

/* En-têtes de jour */
body[data-mod="appointments"] .plan-day {
    display: flex; align-items: baseline; gap: 8px; margin: 18px 4px 2px; font: 750 .74rem var(--font-body);
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
body[data-mod="appointments"] .plan-day:first-child { margin-top: 4px; }
body[data-mod="appointments"] .plan-day small { font-size: .8rem; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--muted); }
body[data-mod="appointments"] .plan-day em {
    margin-left: auto; font-style: normal; font-size: .7rem; letter-spacing: 0; padding: 2px 9px; border-radius: 99px;
    background: var(--surface-tint-strong); color: var(--muted);
}
body[data-mod="appointments"] .plan-day.is-today > span { color: var(--mod); }

/* Lignes : badge horaire teinté de la couleur du rendez-vous */
body[data-mod="appointments"] .appt-row {
    flex-wrap: nowrap; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; border: 1px solid var(--line);
    border-radius: 16px; background: var(--surface);
}
body[data-mod="appointments"] .appt-row .appt-time {
    flex: none; min-width: 64px; padding: 8px 8px 7px; border-radius: 12px; text-align: center; line-height: 1.15;
    background: color-mix(in srgb, var(--sc) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 18%, transparent);
}
body[data-mod="appointments"] .appt-row .appt-time b { font-size: 1rem; color: color-mix(in srgb, var(--sc) 62%, var(--ink)); }
body[data-mod="appointments"] .appt-row .appt-time small { display: block; margin-top: 1px; font-size: .72rem; }
body[data-mod="appointments"] .appt-row .appt-time small:empty { display: none; }
body[data-mod="appointments"] .appt-row .item-main { flex: 1 1 auto; gap: 2px; }
body[data-mod="appointments"] .appt-row .item-title { display: block; font-size: .96rem; line-height: 1.3; }
body[data-mod="appointments"] .appt-row .item-sub { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0; row-gap: 2px; }
body[data-mod="appointments"] .appt-row .item-sub svg { margin-right: 3px; flex: none; }
body[data-mod="appointments"] .appt-row .plan-sep { font-style: normal; margin: 0 7px; opacity: .55; }
body[data-mod="appointments"] .appt-row .task-meta { margin-top: 4px; }
body[data-mod="appointments"] .appt-row .item-sub { overflow-wrap: anywhere; }
body[data-mod="appointments"] .appt-row.is-cancelled .appt-time { filter: grayscale(1); }
body[data-mod="appointments"] .plan-more { margin-top: 16px; text-align: center; }

/* Calendrier */
body[data-mod="appointments"] .plan-cal { display: grid; gap: 16px; align-items: start; }
body[data-mod="appointments"] .plan-cal-card { margin: 0; padding: 16px; border-radius: 22px; overflow: hidden; }
body[data-mod="appointments"] .plan-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
body[data-mod="appointments"] .plan-cal-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
body[data-mod="appointments"] .plan-cal-title h2 { margin: 0; font: 750 1.15rem var(--font-display); letter-spacing: -.02em; color: var(--ink); }
body[data-mod="appointments"] .plan-cal-nav { width: 40px; height: 40px; border-radius: 12px; flex: none; }
body[data-mod="appointments"] .plan-flip { display: inline-grid; transform: rotate(180deg); }
body[data-mod="appointments"] .plan-today-btn {
    height: 28px; padding: 0 11px; border-radius: 99px; cursor: pointer; font: 700 .72rem var(--font-body);
    border: 1px solid color-mix(in srgb, var(--mod) 35%, transparent); background: color-mix(in srgb, var(--mod) 10%, transparent); color: var(--mod);
}
body[data-mod="appointments"] .cal-days { gap: 5px; }
body[data-mod="appointments"] .cal-day {
    aspect-ratio: 1; min-height: 40px; border-radius: 13px; border-color: transparent; background: transparent;
    font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s, transform .2s var(--ease-spring);
}
body[data-mod="appointments"] .cal-day.plan-past:not(.cal-day-selected) { color: var(--muted); }
body[data-mod="appointments"] .cal-day-empty { pointer-events: none; }
body[data-mod="appointments"] .cal-day-has-appt:not(.cal-day-selected) {
    background: color-mix(in srgb, var(--day-color, var(--mod)) 12%, transparent);
    border-color: color-mix(in srgb, var(--day-color, var(--mod)) 22%, transparent);
}
body[data-mod="appointments"] .cal-day-today:not(.cal-day-selected) { border: 2px solid var(--mod); color: var(--mod); font-weight: 800; }
body[data-mod="appointments"] .cal-day-selected {
    background: linear-gradient(140deg, color-mix(in srgb, var(--mod) 78%, #fff), var(--mod)); border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--mod) 75%, transparent);
}
@media (hover: hover) {
    body[data-mod="appointments"] .cal-day:not(.cal-day-empty):not(.cal-day-selected):hover { background: var(--surface-tint-strong); transform: translateY(-1px); }
}
body[data-mod="appointments"] .cal-day:not(.cal-day-empty):active { transform: scale(.94); }
body[data-mod="appointments"] .plan-dots { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); display: flex; gap: 2px; }
body[data-mod="appointments"] .plan-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--mod)); }
body[data-mod="appointments"] .cal-day-selected .plan-dots i { background: #fff; }
body[data-mod="appointments"] .plan-slide-l .cal-days { animation: plan-slide-l .28s var(--ease-spring) backwards; }
body[data-mod="appointments"] .plan-slide-r .cal-days { animation: plan-slide-r .28s var(--ease-spring) backwards; }
body[data-mod="appointments"] #calDayList .plan-day:first-child { margin-top: 2px; }
/* Tablette / ordinateur : cases moins hautes que larges, sinon le calendrier dépasse l'écran */
@media (min-width: 641px) {
    body[data-mod="appointments"] .cal-day { aspect-ratio: 1.3; }
}
@media (min-width: 1000px) {
    body[data-mod="appointments"] .plan-cal { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    body[data-mod="appointments"] .plan-cal-card { position: sticky; top: calc(var(--topbar-h, 64px) + 12px); }
}

/* ==========================================================================
   Projets
   ========================================================================== */
body[data-mod="projects"] .plan-proj-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
body[data-mod="projects"] .plan-proj {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mod) 6%, var(--surface)), var(--surface) 62%);
}
body[data-mod="projects"] .plan-proj.is-new { animation: plan-rise .36s var(--ease-spring) backwards; }
body[data-mod="projects"] .plan-proj:has(.row-more[open]) { z-index: 40; }
@media (hover: hover) { body[data-mod="projects"] .plan-proj:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); } }
body[data-mod="projects"] .plan-proj.plan-leave-card { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .22s ease; pointer-events: none; }
body[data-mod="projects"] .plan-proj-head { display: flex; align-items: center; gap: 14px; }
body[data-mod="projects"] .plan-proj-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-mod="projects"] .plan-proj .card-title {
    margin: 0; font: 700 1.08rem var(--font-display); letter-spacing: -.02em; text-transform: none; color: var(--ink); overflow-wrap: anywhere;
}
body[data-mod="projects"] .plan-proj-desc {
    margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Anneau de progression */
body[data-mod="projects"] .plan-ring {
    position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--mod) calc(var(--p, 0) * 3.6deg), var(--surface-tint-strong) 0);
    transition: background .2s;
}
body[data-mod="projects"] .plan-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
body[data-mod="projects"] .plan-ring b { position: relative; display: flex; align-items: baseline; font: 800 .98rem var(--font-display); letter-spacing: -.03em; color: var(--ink); }
body[data-mod="projects"] .plan-ring b small { font-size: .62rem; font-weight: 700; margin-left: 1px; color: var(--muted); }
body[data-mod="projects"] .plan-proj.is-done .plan-ring { background: var(--ok); }
body[data-mod="projects"] .plan-proj.is-done .plan-ring::before { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
body[data-mod="projects"] .plan-proj.is-done .plan-ring b { color: var(--ok); }
body[data-mod="projects"] .plan-proj.is-done .plan-range input[type="range"]::-webkit-slider-runnable-track { background: var(--ok); }
body[data-mod="projects"] .plan-proj.is-done .plan-range input[type="range"]::-moz-range-track { background: var(--ok); }
body[data-mod="projects"] .plan-proj.is-done .plan-range input[type="range"]::-webkit-slider-thumb { border-color: var(--ok); }
body[data-mod="projects"] .plan-proj-suggest {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; padding: 9px 10px 9px 12px;
    border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--mod) 38%, transparent); background: color-mix(in srgb, var(--mod) 7%, transparent);
    font-size: .84rem; color: var(--ink-2);
}
body[data-mod="projects"] .plan-proj-suggest > span { display: inline-flex; align-items: center; gap: 6px; }
body[data-mod="projects"] .plan-proj-suggest svg { color: var(--mod); flex: none; }
body[data-mod="projects"] .plan-proj-suggest b { color: var(--ink); }

/* ==========================================================================
   Téléphone
   ========================================================================== */
@media (max-width: 640px) {
    /* Formulaire d'ajout : la ligne principale seule, les options se déplient au toucher */
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add { padding: 6px; border-radius: 18px; margin-bottom: 16px; }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-main > input[type="text"] { font-size: 16px; }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-btn { width: 44px; height: 44px; padding: 0; border-radius: 14px; }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-btn > svg { display: block; }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-btn > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-opts {
        max-height: 0; padding: 0 4px; 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) .plan-add-opts {
        max-height: 340px; padding: 10px 4px 4px; opacity: 1; visibility: visible;
        transition: max-height .32s var(--ease-spring), padding .25s ease, opacity .22s ease, visibility 0s;
    }
    body[data-mod="tasks"] .plan-opt { height: 42px; padding-left: 12px; }
    body[data-mod="tasks"] .plan-opt :is(select, input) { flex: 1 1 auto; height: 40px; font-size: .84rem; }
    body[data-mod="tasks"] .plan-opt-date { flex: 1 1 100%; }
    body[data-mod="tasks"] .plan-quick { flex: 1 1 100%; }
    body[data-mod="tasks"] .plan-quick button { flex: 1 1 0; height: 40px; padding: 0 8px; }
    body[data-mod="tasks"] :is(.plan-opt-prio, .plan-opt-rec) { flex: 1 1 calc(50% - 4px); }
    body[data-mod="tasks"] :is(.plan-opt-prio, .plan-opt-rec) > svg { display: none; }
    body[data-mod="projects"] .plan-add-opts-stack { padding-right: 4px; }

    /* Lignes un peu plus aérées, gros doigts bienvenus */
    body[data-mod="tasks"] .task-row { gap: 12px; padding: 11px 4px 11px 12px; }
    body[data-mod="tasks"] .task-row .check-btn { width: 30px; height: 30px; }
    body[data-mod="appointments"] .appt-row { gap: 10px; padding: 9px 4px 9px 9px; }
    body[data-mod="appointments"] .appt-row .appt-time { min-width: 58px; padding: 7px 6px 6px; }
    body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip { height: 24px; }

    /* Rendez-vous : sélecteur compact (icônes seules) dans l'en-tête */
    body[data-mod="appointments"] .plan-seg .view-toggle-btn { width: 46px; height: 40px; padding: 0; }
    body[data-mod="appointments"] .plan-today-btn { height: 40px; padding: 0 14px; font-size: .8rem; }
    body[data-mod="appointments"] #apptShowMoreBtn,
    body[data-mod="projects"] .apply-progress-btn { height: 40px; padding: 0 16px; }
    body[data-mod="appointments"] .plan-seg-lbl {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    body[data-mod="appointments"] .plan-apptadd { padding: 6px; border-radius: 18px; }
    body[data-mod="appointments"] .plan-quick button { height: 40px; flex: 1 1 0; padding: 0 6px; }
    body[data-mod="appointments"] #apptDurChips { display: flex; width: 100%; }
    body[data-mod="appointments"] .plan-form-actions .btn { flex: 1 1 100%; height: 46px; }
    body[data-mod="appointments"] .plan-cal-card { padding: 12px 10px; border-radius: 20px; }
    body[data-mod="appointments"] .cal-days { gap: 4px; }
    body[data-mod="appointments"] .cal-day { border-radius: 12px; font-size: .9rem; }

    body[data-mod="projects"] .plan-proj { padding: 16px; gap: 12px; }
    body[data-mod="projects"] .plan-range input[type="range"] { height: 40px; }
    body[data-mod="projects"] .plan-proj:has(.row-more[open]) { z-index: 300; }
}
/* Formulaire de rendez-vous : statut et couleur côte à côte, le reste en pleine largeur */
@media (max-width: 720px) {
    body[data-mod="appointments"] .plan-appt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body[data-mod="appointments"] .plan-appt-grid > div:not(:nth-last-child(-n+2)) { grid-column: 1 / -1; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    body:is([data-mod="tasks"], [data-mod="appointments"], [data-mod="projects"]) :is(.item-row.is-new, .plan-proj.is-new, .plan-empty, .cal-days) { animation: none !important; }
    body[data-mod="tasks"] .task-row.is-completing .check-btn,
    body[data-mod="tasks"] .task-row.is-completing .check-btn::after,
    body:is([data-mod="tasks"], [data-mod="appointments"]) .tchip :is(.plan-dot, i) { animation: none; }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-ico { transform: none !important; }
}

/* ====================== Zone : lists ====================== */
/* ==========================================================================
   MonCentre 4 — zone « listes » : Notes, Courses, Fichiers
   Concaténé après theme3.css. Toutes les règles sont limitées à ces trois pages.
   ========================================================================== */

/* ---------- Commun aux trois pages ---------- */
:is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) [hidden] { display: none !important; }

:is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) .lists-count {
    display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border-radius: 99px;
    font: 750 .8rem/1 var(--font-body); letter-spacing: 0; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--mod) 82%, var(--ink)); background: color-mix(in srgb, var(--mod) 14%, transparent);
    transform: translateY(1px);
}

:is(body[data-mod="notes"], body[data-mod="files"]) .lists-toolbar {
    display: flex; align-items: center; gap: 10px; margin: 22px 0 12px;
}
:is(body[data-mod="notes"], body[data-mod="files"]) .lists-search { position: relative; flex: 1 1 auto; min-width: 0; }
:is(body[data-mod="notes"], body[data-mod="files"]) .lists-search > svg {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
:is(body[data-mod="notes"], body[data-mod="files"]) .lists-search input {
    height: 48px; padding-left: 42px; border-radius: 15px; border-color: var(--line); box-shadow: var(--shadow-1); font-size: .95rem;
}
:is(body[data-mod="notes"], body[data-mod="files"]) .lists-search input:focus {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-1);
}

:is(body[data-mod="notes"], body[data-mod="files"]) .view-switch {
    flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 15px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
:is(body[data-mod="notes"], body[data-mod="files"]) .view-switch button {
    width: 40px; height: 40px; border: 0; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
    background: transparent; color: var(--muted); font: inherit; transition: background .15s, color .15s;
}
:is(body[data-mod="notes"], body[data-mod="files"]) .view-switch button:hover { color: var(--ink); }
:is(body[data-mod="notes"], body[data-mod="files"]) .view-switch button[aria-pressed="true"] {
    color: color-mix(in srgb, var(--mod) 85%, var(--ink)); background: color-mix(in srgb, var(--mod) 15%, transparent);
}
:is(body[data-mod="notes"], body[data-mod="files"]) .view-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

:is(body[data-mod="notes"], body[data-mod="files"]) .prefilters { margin: 0 0 8px; }
:is(body[data-mod="notes"], body[data-mod="files"]) .prefilters button { min-height: 40px; height: auto; }
:is(body[data-mod="notes"], body[data-mod="files"]) .pf-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--k, var(--tone, var(--mod)));
}

:is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) .lists-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; column-span: all;
    padding: 42px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 65%, transparent); animation: lists-fade .3s ease both;
}
:is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) .lists-empty b {
    font: 700 1.05rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.01em;
}
:is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) .lists-empty small {
    max-width: 40ch; font-size: .86rem; line-height: 1.5; color: var(--muted);
}
:is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) .lists-empty-ico {
    width: 58px; height: 58px; margin-bottom: 6px; border-radius: 19px; display: grid; place-items: center;
    color: var(--mod); background: color-mix(in srgb, var(--mod) 13%, transparent);
}

@keyframes lists-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes lists-fade { from { opacity: 0; } }
@keyframes lists-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes lists-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   NOTES : mur de post-it élégants (ou liste)
   ========================================================================== */
body[data-mod="notes"] {
    --note-tone-0: var(--m-notes);
    --note-tone-1: var(--m-shopping);
    --note-tone-2: var(--m-appointments);
    --note-tone-3: var(--m-budget);
    --note-tone-4: var(--m-projects);
    --note-tone-5: var(--m-mail);
    --note-tone-6: var(--m-stats);
    --note-mix: 11%;
}
:root[data-theme="dark"] body[data-mod="notes"] { --note-mix: 14%; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-mod="notes"] { --note-mix: 14%; }
}

/* Saisie : une barre « Nouvelle note » qui s'ouvre au toucher */
body[data-mod="notes"] .note-composer {
    padding: 8px 12px; border-radius: 22px; margin: 0;
    transition: box-shadow .2s, border-color .2s;
}
body[data-mod="notes"] .note-composer:focus-within {
    border-color: color-mix(in srgb, var(--mod) 40%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod) 12%, transparent), var(--shadow-2);
}
body[data-mod="notes"] .nc-head { display: flex; align-items: center; gap: 10px; }
body[data-mod="notes"] .nc-ico {
    flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    color: color-mix(in srgb, var(--mod) 85%, var(--ink)); background: color-mix(in srgb, var(--mod) 15%, transparent);
}
body[data-mod="notes"] .note-composer .nc-title,
body[data-mod="notes"] .note-composer .nc-body {
    border: 0; background: transparent; box-shadow: none; border-radius: 10px;
}
body[data-mod="notes"] .note-composer .nc-title { height: 46px; padding: 0 4px; font: 650 1rem var(--font-body); color: var(--ink); }
body[data-mod="notes"] .note-composer .nc-body {
    display: block; min-height: 76px; padding: 4px 4px 8px 52px; resize: none; font-size: .95rem; line-height: 1.55; color: var(--ink-2);
}
body[data-mod="notes"] .nc-more { border-top: 1px solid var(--line); padding: 2px 2px 4px; }
body[data-mod="notes"] .nc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-mod="notes"] .nc-fields label { margin: 10px 0 6px; }
body[data-mod="notes"] .nc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
body[data-mod="notes"] .nc-hint { font-size: .74rem; color: var(--muted); }
body[data-mod="notes"] .nc-foot .btn { margin-left: auto; }
body[data-mod="notes"] .note-composer:not(:focus-within):has(#noteTitle:placeholder-shown):has(#noteContent:placeholder-shown) :is(.nc-body, .nc-more) { display: none; }
body[data-mod="notes"] .note-composer :is(.nc-body, .nc-more) { animation: lists-fade .2s ease both; }
@media (hover: none) { body[data-mod="notes"] .nc-hint { display: none; } }

/* Mur de notes (colonnes façon tableau de liège) */
body[data-mod="notes"] .note-wall { columns: 3 250px; column-gap: 16px; margin-top: 6px; }
body[data-mod="notes"] .note-wall > :is(.skeleton, .sk-row) { break-inside: avoid; column-span: all; margin-bottom: 10px; }
body[data-mod="notes"] .note-wall > .empty-state { column-span: all; }

body[data-mod="notes"] .note-card,
body[data-mod="notes"] .note-editor { --tone: var(--note-tone-0); }
body[data-mod="notes"] :is(.note-card, .note-editor)[data-tone="1"] { --tone: var(--note-tone-1); }
body[data-mod="notes"] :is(.note-card, .note-editor)[data-tone="2"] { --tone: var(--note-tone-2); }
body[data-mod="notes"] :is(.note-card, .note-editor)[data-tone="3"] { --tone: var(--note-tone-3); }
body[data-mod="notes"] :is(.note-card, .note-editor)[data-tone="4"] { --tone: var(--note-tone-4); }
body[data-mod="notes"] :is(.note-card, .note-editor)[data-tone="5"] { --tone: var(--note-tone-5); }
body[data-mod="notes"] :is(.note-card, .note-editor)[data-tone="6"] { --tone: var(--note-tone-6); }

body[data-mod="notes"] .note-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; break-inside: avoid; margin: 0 0 16px;
    padding: 16px 16px 12px; border-radius: 18px; cursor: pointer;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 70%),
        color-mix(in srgb, var(--tone) var(--note-mix), var(--surface));
    border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--line));
    box-shadow: var(--shadow-1);
    transition: translate .22s var(--ease-spring), scale .22s var(--ease-spring), box-shadow .22s, border-color .2s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    body[data-mod="notes"] .note-card:hover { translate: 0 -3px; box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--tone) 42%, var(--line)); }
}
body[data-mod="notes"] .note-card:active { scale: .985; }
body[data-mod="notes"] .note-card.is-new { animation: lists-in .32s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 24ms); }
body[data-mod="notes"] .note-card.is-leaving { opacity: 0; scale: .95; pointer-events: none; }

body[data-mod="notes"] .note-title { margin: 0; font: 700 1.02rem/1.3 var(--font-display); letter-spacing: -.012em; color: var(--ink); }
body[data-mod="notes"] .note-open {
    all: unset; display: block; cursor: pointer; overflow-wrap: anywhere; border-radius: 6px;
}
body[data-mod="notes"] .note-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
body[data-mod="notes"] .note-body {
    color: var(--ink-2); font-size: .9rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden;
}
body[data-mod="notes"] .note-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
body[data-mod="notes"] .note-foot { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-height: 30px; margin-top: 2px; }
body[data-mod="notes"] .note-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
body[data-mod="notes"] .note-chip {
    padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .01em;
    color: color-mix(in srgb, var(--tone) 70%, var(--ink)); background: color-mix(in srgb, var(--tone) 18%, transparent);
}
body[data-mod="notes"] .note-tag { padding: 3px 2px; font-size: .72rem; font-weight: 600; color: var(--muted); }
body[data-mod="notes"] .note-date { margin-left: auto; font-size: .72rem; font-weight: 550; color: var(--muted); white-space: nowrap; transition: opacity .15s; }
body[data-mod="notes"] .note-actions {
    position: absolute; right: 10px; bottom: 9px; display: flex; gap: 4px;
    opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s; pointer-events: none;
}
body[data-mod="notes"] .note-act {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; font: inherit;
    border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink-2); box-shadow: var(--shadow-1);
    transition: color .15s, background .15s, border-color .15s;
}
body[data-mod="notes"] .note-act:hover { color: var(--ink); background: var(--surface); }
body[data-mod="notes"] .note-act.is-danger:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
@media (hover: hover) {
    body[data-mod="notes"] .note-card:is(:hover, :focus-within) .note-actions { opacity: 1; transform: none; pointer-events: auto; }
    body[data-mod="notes"] .note-card:is(:hover, :focus-within) .note-date { opacity: 0; }
    body[data-mod="notes"] .note-chips { max-width: calc(100% - 76px); }
}
@media (hover: none) { body[data-mod="notes"] .note-actions { display: none; } }

/* Variante liste */
body[data-mod="notes"] .note-wall.is-list { columns: auto; display: flex; flex-direction: column; gap: 8px; }
body[data-mod="notes"] .note-wall.is-list .note-card {
    margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px 12px 18px; border-radius: 15px;
    background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1), inset 4px 0 0 var(--tone);
}
@media (hover: hover) { body[data-mod="notes"] .note-wall.is-list .note-card:hover { translate: 0 -1px; } }
body[data-mod="notes"] .note-wall.is-list .note-title { flex: 1 1 180px; min-width: 0; font-size: .98rem; }
body[data-mod="notes"] .note-wall.is-list .note-foot { flex: 0 1 auto; margin: 0; }
body[data-mod="notes"] .note-wall.is-list .note-body {
    order: 3; flex: 1 1 100%; white-space: normal; -webkit-line-clamp: 2; line-clamp: 2; font-size: .86rem; color: var(--muted);
}
body[data-mod="notes"] .note-wall.is-list .note-actions { bottom: auto; top: 50%; transform: translateY(-50%); }
@media (hover: hover) {
    body[data-mod="notes"] .note-wall.is-list .note-card:is(:hover, :focus-within) .note-actions { transform: translateY(-50%); }
    body[data-mod="notes"] .note-wall.is-list .note-chips { max-width: none; }
    body[data-mod="notes"] .note-wall.is-list .note-card:is(:hover, :focus-within) .note-foot { visibility: hidden; }
}

/* Fenêtre de lecture / édition */
body[data-mod="notes"] .note-editor {
    width: min(660px, 100%); display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 18px; outline: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 12%, var(--surface)), var(--surface) 55%);
    border-color: color-mix(in srgb, var(--tone) 22%, var(--line));
}
body[data-mod="notes"] .note-editor :is(.ne-title, .ne-body) {
    border: 0; background: transparent; box-shadow: none; padding: 6px 8px; border-radius: 10px; transition: background .15s;
}
body[data-mod="notes"] .note-editor :is(.ne-title, .ne-body):focus { background: color-mix(in srgb, var(--tone) 8%, transparent); box-shadow: none; }
body[data-mod="notes"] .note-editor .ne-title { height: auto; font: 750 1.35rem/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
body[data-mod="notes"] .note-editor .ne-body { min-height: 150px; max-height: 50vh; resize: none; font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
body[data-mod="notes"] .ne-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--line); }
body[data-mod="notes"] .ne-meta label { margin: 10px 0 6px; }
body[data-mod="notes"] .ne-meta input { height: 42px; }
body[data-mod="notes"] .ne-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body[data-mod="notes"] .ne-date { flex: 1 1 auto; min-width: 0; font-size: .74rem; color: var(--muted); }
body[data-mod="notes"] .ne-actions .btn-icon { width: 42px; height: 42px; }

@media (max-width: 960px) {
    body[data-mod="notes"] .note-editor { max-height: 92vh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
    body[data-mod="notes"] .note-wall:not(.is-list) { columns: 2; column-gap: 10px; }
    body[data-mod="notes"] .note-wall:not(.is-list) .note-card { margin-bottom: 10px; padding: 13px 13px 10px; border-radius: 16px; gap: 6px; }
    body[data-mod="notes"] .note-wall:not(.is-list) .note-title { font-size: .95rem; }
    body[data-mod="notes"] .note-wall:not(.is-list) .note-body { font-size: .84rem; -webkit-line-clamp: 8; line-clamp: 8; }
    body[data-mod="notes"] .note-wall:not(.is-list) .note-foot { min-height: 0; }
    body[data-mod="notes"] .note-composer .nc-body { padding-left: 4px; }
    body[data-mod="notes"] .nc-fields, body[data-mod="notes"] .ne-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
    body[data-mod="notes"] .nc-foot .btn { width: 100%; }
    body[data-mod="notes"] .ne-date { order: -1; flex-basis: 100%; }
    body[data-mod="notes"] .ne-actions .btn:not(.btn-icon) { flex: 1 1 0; }
    body[data-mod="notes"] .lists-toolbar { margin-top: 16px; }
}

/* ==========================================================================
   COURSES : pensé pour le magasin, d'une main
   ========================================================================== */
body[data-mod="shopping"] .page-header .btn { gap: 6px; }
body[data-mod="shopping"] .shop-add {
    margin: 0 0 22px; padding: 7px; border-radius: 22px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: box-shadow .2s, border-color .2s;
}
body[data-mod="shopping"] .shop-add:focus-within {
    border-color: color-mix(in srgb, var(--mod) 42%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod) 12%, transparent), var(--shadow-2);
}
body[data-mod="shopping"] .shop-add-main { display: flex; align-items: center; gap: 8px; }
body[data-mod="shopping"] .shop-add-ico {
    flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
    color: color-mix(in srgb, var(--mod) 85%, var(--ink)); background: color-mix(in srgb, var(--mod) 14%, transparent);
}
body[data-mod="shopping"] .shop-add #shopName {
    flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 6px; border: 0; background: transparent; box-shadow: none;
    font-size: 1.02rem; font-weight: 550;
}
body[data-mod="shopping"] .shop-add-btn { flex: none; height: 46px; padding: 0 18px; border-radius: 15px; }
body[data-mod="shopping"] .shop-add-btn svg { display: none; }
body[data-mod="shopping"] .shop-add-more {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; margin-top: 6px; padding: 0 6px 6px;
    border-top: 1px solid var(--line); animation: lists-fade .2s ease both;
}
body[data-mod="shopping"] .shop-add-more label { margin: 10px 0 6px; }
body[data-mod="shopping"] .shop-add:not(:focus-within):has(#shopName:placeholder-shown) .shop-add-more { display: none; }
body[data-mod="shopping"] .qty-step {
    display: flex; align-items: stretch; height: 44px; border: 1px solid var(--line-strong); border-radius: 12px;
    background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
body[data-mod="shopping"] .qty-step:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
body[data-mod="shopping"] .qty-step button {
    width: 42px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 600 1.15rem/1 var(--font-body);
    transition: background .15s; -webkit-tap-highlight-color: transparent;
}
body[data-mod="shopping"] .qty-step button:hover { background: var(--surface-tint); }
body[data-mod="shopping"] .qty-step button:active { background: var(--surface-tint-strong); }
body[data-mod="shopping"] .qty-step input {
    width: 58px; height: 100%; padding: 0 2px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
    text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
body[data-mod="shopping"] .qty-step input::-webkit-outer-spin-button,
body[data-mod="shopping"] .qty-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Liste par rayon : une carte par rayon, des lignes larges faciles à toucher */
body[data-mod="shopping"] .shop-list { display: flex; flex-direction: column; gap: 20px; }
body[data-mod="shopping"] .shop-aisle-head {
    display: flex; align-items: center; gap: 8px; margin: 0 6px 8px;
    font: 700 .72rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
body[data-mod="shopping"] .shop-aisle-head::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--mod); flex: none; }
body[data-mod="shopping"] .shop-aisle-head b {
    padding: 2px 8px; border-radius: 99px; font-size: .7rem; letter-spacing: 0; color: var(--ink-2); background: var(--surface-tint-strong);
}
body[data-mod="shopping"] .shop-aisle-items {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-1); overflow: hidden;
}
body[data-mod="shopping"] .shop-aisle-items .shop-row {
    position: relative; flex-wrap: nowrap; gap: 14px; min-height: 62px; max-height: 200px; padding: 9px 18px 9px 16px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; animation: none; cursor: pointer;
    transition: background .15s, opacity .25s, translate .25s var(--ease-spring), max-height .25s, min-height .25s, padding .25s;
    -webkit-tap-highlight-color: transparent;
}
body[data-mod="shopping"] .shop-aisle-items .shop-row + .shop-row { border-top: 1px solid var(--line); }
body[data-mod="shopping"] .shop-aisle-items .shop-row:hover { background: var(--surface-tint); box-shadow: none; }
body[data-mod="shopping"] .shop-aisle-items .shop-row:focus-within { box-shadow: none; border-color: var(--line); }
body[data-mod="shopping"] .shop-aisle-items .shop-row:has(.shop-check:focus-visible) { box-shadow: inset 0 0 0 2px var(--brand); }
body[data-mod="shopping"] .shop-row.is-new { animation: lists-in .3s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 22ms); }
body[data-mod="shopping"] .shop-row .item-main { flex: 1 1 auto; }
body[data-mod="shopping"] .shop-row .item-title { font-size: 1rem; font-weight: 600; transition: color .2s; }
body[data-mod="shopping"] .shop-row .badge-auto { font-size: .6rem; padding: 2px 8px; }

/* Le bouton rond « coché » couvre toute la ligne : on touche n'importe où pour cocher */
body[data-mod="shopping"] .shop-check {
    width: 30px; height: 30px; border-width: 2px; color: transparent; background: var(--surface); outline: none;
}
body[data-mod="shopping"] .shop-check::after { content: ""; position: absolute; inset: 0; }
body[data-mod="shopping"] .shop-check svg { opacity: 0; transform: scale(.4); transition: opacity .15s, transform .25s var(--ease-spring); }
/* Pas de transform sur le rond : il changerait le bloc conteneur du ::after (zone tactile) pendant l'appui */
body[data-mod="shopping"] .shop-check:active { transform: none; }
body[data-mod="shopping"] .shop-aisle-items .shop-row:active { background: var(--surface-tint-strong); }
body[data-mod="shopping"] .shop-row:active .shop-check { border-color: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 16%, transparent); }
@media (hover: hover) {
    body[data-mod="shopping"] .shop-row:hover .shop-check { border-color: var(--ok); color: var(--ok); }
    body[data-mod="shopping"] .shop-row:hover .shop-check svg { opacity: .55; transform: scale(.8); }
}
body[data-mod="shopping"] .shop-row.is-done { background: color-mix(in srgb, var(--ok) 7%, transparent); }
body[data-mod="shopping"] .shop-row.is-done .shop-check { background: var(--ok); border-color: var(--ok); color: #fff; }
body[data-mod="shopping"] .shop-row.is-done .shop-check svg { opacity: 1; transform: none; }
body[data-mod="shopping"] .shop-row.is-done .item-title {
    opacity: 1; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px;
    text-decoration-color: color-mix(in srgb, var(--ok) 70%, transparent);
}
body[data-mod="shopping"] .shop-row.is-done::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ok); opacity: .55;
    transform-origin: left; animation: lists-drain 2.6s linear forwards; pointer-events: none;
}
body[data-mod="shopping"] .shop-undo { display: none; font-size: .74rem; font-weight: 650; color: var(--ok); }
body[data-mod="shopping"] .shop-row.is-done .shop-undo { display: block; animation: lists-fade .2s ease both; }
body[data-mod="shopping"] .shop-row.is-leaving {
    opacity: 0; translate: 28px 0; max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; overflow: hidden;
}
body[data-mod="shopping"] .shop-qty {
    flex: none; padding: 5px 11px; border-radius: 99px; font: 750 .86rem/1 var(--font-body); font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--mod) 78%, var(--ink)); background: color-mix(in srgb, var(--mod) 13%, transparent);
}
body[data-mod="shopping"] .shop-row.is-done .shop-qty { opacity: .5; }

@media (max-width: 560px) {
    body[data-mod="shopping"] .shop-add-ico { display: none; }
    body[data-mod="shopping"] .shop-add #shopName { padding-left: 10px; }
    body[data-mod="shopping"] .shop-add-btn { width: 48px; padding: 0; }
    body[data-mod="shopping"] .shop-add-btn svg { display: block; }
    body[data-mod="shopping"] .shop-add-btn span { display: none; }
    body[data-mod="shopping"] #clearListBtn { width: 40px; height: 40px; padding: 0; gap: 0; font-size: 0; }
    body[data-mod="shopping"] .shop-aisle-items .shop-row { padding: 8px 14px 8px 14px; min-height: 60px; }
}

/* ==========================================================================
   FICHIERS : dépôt soigné, vignettes par type, menus
   ========================================================================== */
body[data-mod="files"] .files-usage {
    padding: 7px 13px; border-radius: 99px; font-size: .8rem; font-weight: 600; color: var(--muted);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
body[data-mod="files"] .files-upload { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 22px; }
body[data-mod="files"] .files-drop {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; cursor: pointer;
    border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    background: color-mix(in srgb, var(--brand) 4%, var(--surface-2));
    transition: border-color .15s, background .15s, transform .2s var(--ease-spring);
}
body[data-mod="files"] .files-drop input[type="file"] {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
body[data-mod="files"] .files-drop:hover,
body[data-mod="files"] .files-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
body[data-mod="files"] .files-drop.is-over { transform: scale(1.01); }
body[data-mod="files"] .files-drop:has(input:focus-visible) { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
body[data-mod="files"] .files-drop-ico {
    flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff;
    background: var(--brand-gradient); box-shadow: 0 12px 22px -12px var(--brand), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: background .2s, transform .25s var(--ease-spring);
}
body[data-mod="files"] .files-drop:hover .files-drop-ico { transform: translateY(-2px); }
body[data-mod="files"] .files-drop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body[data-mod="files"] .files-drop-text b { font-size: .98rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mod="files"] .files-drop-text small { font-size: .78rem; line-height: 1.4; color: var(--muted); }
body[data-mod="files"] .files-drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
body[data-mod="files"] .files-drop.has-file .files-drop-ico { background: var(--ok); box-shadow: 0 12px 22px -12px var(--ok); }
body[data-mod="files"] .files-upload-row { display: flex; gap: 10px; }
body[data-mod="files"] .files-upload-row input { flex: 1 1 auto; min-width: 0; }
body[data-mod="files"] .files-upload-row .btn { flex: none; height: 44px; }
body[data-mod="files"] .files-upload.is-busy .files-drop { opacity: .65; pointer-events: none; }
body[data-mod="files"] .files-upload.is-busy .files-drop-ico svg { animation: lists-fade .7s ease-in-out infinite alternate; }
body[data-mod="files"] .files-drive {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 2px 4px 0; font-size: .8rem; line-height: 1.45; color: var(--muted);
}

/* Lignes de fichiers (liste) */
body[data-mod="files"] .file-list { margin-top: 6px; }
body[data-mod="files"] .file-row { position: relative; flex-wrap: nowrap; gap: 14px; padding: 10px 12px 10px 10px; }
/* (Pas de z-index ici pour la ligne au menu ouvert : la coque gère 40 / 300 pour la feuille d'actions mobile) */
body[data-mod="files"] .file-row:focus-within { box-shadow: var(--shadow-1); border-color: var(--line-strong); }
body[data-mod="files"] .file-row .item-main { flex: 1 1 auto; }
body[data-mod="files"] .file-thumb {
    --k: var(--m-files);
    position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px; display: grid; place-items: center;
    color: color-mix(in srgb, var(--k) 88%, var(--ink)); text-decoration: none; cursor: pointer; font: inherit;
    background: linear-gradient(145deg, color-mix(in srgb, var(--k) 20%, var(--surface)), color-mix(in srgb, var(--k) 9%, var(--surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 18%, transparent);
    transition: transform .2s var(--ease-spring);
}
body[data-mod="files"] .file-thumb:hover { transform: scale(1.04); }
body[data-mod="files"] .file-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="files"] .file-ext {
    position: absolute; right: -5px; bottom: -4px; padding: 2px 5px; border-radius: 6px;
    font: 800 .54rem/1.1 var(--font-body); letter-spacing: .03em; color: #fff; background: var(--k); box-shadow: 0 0 0 2px var(--surface);
}
/* Mode sombre : les couleurs de module sont claires, le texte blanc y devient illisible */
:root[data-theme="dark"] body[data-mod="files"] .file-ext { color: #10131c; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-mod="files"] .file-ext { color: #10131c; }
}
body[data-mod="files"] .kind-image { --k: var(--m-projects); }
body[data-mod="files"] .kind-pdf { --k: var(--bad); }
body[data-mod="files"] .kind-doc { --k: var(--m-appointments); }
body[data-mod="files"] .kind-sheet { --k: var(--m-budget); }
body[data-mod="files"] .kind-zip { --k: var(--m-inventory); }
body[data-mod="files"] .kind-other { --k: var(--m-files); }
body[data-mod="files"] .file-name {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 620;
}
body[data-mod="files"] .file-name:hover { color: var(--brand); }
body[data-mod="files"] .file-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
body[data-mod="files"] .file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; }
body[data-mod="files"] .file-cat { font-weight: 650; color: var(--ink-2); }
body[data-mod="files"] .file-flag { display: inline-flex; align-items: center; gap: 4px; }
body[data-mod="files"] .file-flag.is-shared { color: var(--brand); font-weight: 600; }
body[data-mod="files"] .row-more > summary { width: 40px; height: 40px; }
body[data-mod="files"] .row-more > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
body[data-mod="files"] .row-more-menu { gap: 6px; padding: 8px; border-radius: 16px; min-width: 200px; }
body[data-mod="files"] .row-more-menu .btn { width: 100%; justify-content: flex-start; height: 40px; }
body[data-mod="files"] #fileSearchEmpty { grid-column: 1 / -1; }

/* Variante vignettes */
body[data-mod="files"] .file-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
body[data-mod="files"] .file-list.is-grid > .lists-empty { grid-column: 1 / -1; }
body[data-mod="files"] .file-list.is-grid .file-row {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 8px 12px; border-radius: 18px;
    transition: translate .22s var(--ease-spring), box-shadow .2s, border-color .15s;
}
@media (hover: hover) { body[data-mod="files"] .file-list.is-grid .file-row:hover { translate: 0 -2px; } }
body[data-mod="files"] .file-list.is-grid .file-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 13px; }
body[data-mod="files"] .file-list.is-grid .file-thumb:hover { transform: none; }
body[data-mod="files"] .file-list.is-grid .file-thumb svg { width: 34px; height: 34px; }
body[data-mod="files"] .file-list.is-grid .file-ext { right: 8px; bottom: 8px; font-size: .62rem; padding: 3px 6px; box-shadow: none; }
body[data-mod="files"] .file-list.is-grid .item-main { flex: none; padding: 0 4px; }
body[data-mod="files"] .file-list.is-grid .file-name {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow-wrap: anywhere; font-size: .9rem; line-height: 1.3;
}
body[data-mod="files"] .file-list.is-grid .file-meta { font-size: .74rem; gap: 2px 8px; }
body[data-mod="files"] .file-list.is-grid .item-actions { position: absolute; top: 14px; right: 14px; }
body[data-mod="files"] .file-list.is-grid .file-open { display: none; }
body[data-mod="files"] .file-list.is-grid .row-more > summary {
    width: 36px; height: 36px; background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-1);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Menu ouvert : pas de backdrop-filter (il enfermerait le voile plein écran « fixed » de la feuille mobile dans le bouton) */
body[data-mod="files"] .file-list.is-grid .row-more[open] > summary { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
@media (min-width: 641px) {
    /* Menu déroulant ancré à droite de la vignette : jamais plus large qu'elle (pas de débordement à gauche de l'écran) */
    body[data-mod="files"] .file-list.is-grid .row-more-menu { min-width: 176px; }
}

/* Aperçu d'image */
body[data-mod="files"] .file-lightbox { align-items: center; justify-content: center; padding: 14px; background: rgba(8, 9, 16, .82); }
body[data-mod="files"] .file-lightbox-box {
    margin: 0; display: flex; flex-direction: column; gap: 12px; max-width: min(1100px, 100%); max-height: 100%;
    transform: scale(.97); transition: transform .25s var(--ease-spring);
}
body[data-mod="files"] .file-lightbox.show .file-lightbox-box { transform: none; }
body[data-mod="files"] .file-lightbox-img { display: grid; place-items: center; min-width: min(240px, 80vw); min-height: 180px; }
body[data-mod="files"] .file-lightbox-img > * { grid-area: 1 / 1; }
body[data-mod="files"] .file-lightbox-img img {
    max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 14px; box-shadow: var(--shadow-3);
    transition: opacity .2s;
}
body[data-mod="files"] .file-lightbox-img.is-loading img { opacity: 0; }
body[data-mod="files"] .file-lightbox-img.is-loading::after {
    content: ""; grid-area: 1 / 1; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: lists-spin .8s linear infinite;
}
body[data-mod="files"] .file-lightbox-img.is-error img { display: none; }
body[data-mod="files"] .file-lightbox-img.is-error::after { content: "Aperçu indisponible"; grid-area: 1 / 1; color: #fff; font-weight: 600; }
body[data-mod="files"] .file-lightbox figcaption {
    display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 18px;
    background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-2);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
body[data-mod="files"] .file-lightbox-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 600; color: var(--ink); }
body[data-mod="files"] .file-lightbox figcaption .btn { height: 40px; }

@media (max-width: 640px) {
    body[data-mod="files"] .page-header { row-gap: 8px; }
    body[data-mod="files"] .files-drop { padding: 14px; gap: 12px; }
    body[data-mod="files"] .files-drop-ico { width: 44px; height: 44px; border-radius: 14px; }
    body[data-mod="files"] .file-list:not(.is-grid) .file-open { display: none; }
    body[data-mod="files"] .file-list:not(.is-grid) .file-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
    body[data-mod="files"] .file-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body[data-mod="files"] .file-list.is-grid .file-row { padding: 6px 6px 10px; border-radius: 16px; }
    body[data-mod="files"] .file-list.is-grid .item-actions { top: 10px; right: 10px; }
    /* (le menu « ⋯ » devient une feuille d'actions plein largeur gérée par la coque : aucune largeur imposée ici) */
    body[data-mod="files"] .files-upload-row .btn { padding: 0 14px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    :is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) :is(.note-card, .shop-row, .file-row, .files-drop, .file-thumb, .file-lightbox-box) {
        transition: none !important; animation: none !important;
    }
    :is(body[data-mod="notes"], body[data-mod="shopping"], body[data-mod="files"]) :is(.note-card, .file-row, .files-drop):hover { transform: none; translate: none; }
    body[data-mod="shopping"] .shop-row.is-done::before { animation: none; transform: scaleX(.5); }
}

/* ====================== Zone : stock ====================== */
/* ==========================================================================
   UI4 — Stock (body[data-mod="inventory"])
   Bilan en une phrase + pré-filtres d'état, barre d'outils allégée (options repliées sur téléphone),
   fiches / liste / lignes / schéma plus soignés, carte mentale zoomable, fiche produit en feuille
   glissante, viseur du scanner corrigé. Uniquement des jetons de thème : clair et sombre suivent seuls
   (seules exceptions : blanc sur dégradé de marque et viseur caméra, sombres dans les deux modes).
   ========================================================================== */

/* ---------- En-tête : actions ---------- */
body[data-mod="inventory"] .inv-head-actions { gap: 8px; }
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-head-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
    body[data-mod="inventory"] .inv-head-actions .btn { width: 100%; height: 44px; padding: 0 10px; justify-content: center; font-size: .86rem; }
    body[data-mod="inventory"] .inv-head-actions #aiScanBtn { grid-column: 1 / -1; order: -1; height: 48px; font-size: .95rem; }
}

/* ---------- Ajouter au stock : bandeau repliable ---------- */
body[data-mod="inventory"] .inv-add { padding: 0; margin-bottom: 14px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
body[data-mod="inventory"] .inv-add.is-open { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
body[data-mod="inventory"] .inv-add-toggle {
    width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin: 0;
    border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
body[data-mod="inventory"] .inv-add-toggle:hover { background: var(--surface-2); }
body[data-mod="inventory"] .inv-add-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; border-radius: inherit; }
body[data-mod="inventory"] .inv-add-ico {
    flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--brand-gradient);
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .25s var(--ease-spring);
}
body[data-mod="inventory"] .inv-add.is-open .inv-add-ico { transform: rotate(45deg); }
body[data-mod="inventory"] .inv-add-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-mod="inventory"] .inv-add-txt b { font: 700 1rem var(--font-display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mod="inventory"] .inv-add-txt small { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mod="inventory"] .inv-add-chev {
    flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center;
    color: var(--muted); background: var(--surface-tint-strong); transition: transform .22s var(--ease-spring);
}
body[data-mod="inventory"] #invForm { padding: 16px 18px 18px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-add-toggle { padding: 12px 14px; gap: 12px; }
    body[data-mod="inventory"] #invForm { padding: 14px; }
    body[data-mod="inventory"] #invForm #scanBtn { width: 100%; height: 46px; }
    body[data-mod="inventory"] #invForm .btn-primary, body[data-mod="inventory"] #invCancelEditBtn { flex: 1; height: 46px; }
}

/* ---------- Bilan + pré-filtres d'état ---------- */
body[data-mod="inventory"] .inv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 18px; margin-bottom: 14px; }
body[data-mod="inventory"] .inv-ring, body[data-mod="inventory"] .inv-ring svg { width: 76px; height: 76px; }
body[data-mod="inventory"] .inv-ring circle { stroke-width: 10; }
body[data-mod="inventory"] .inv-ring-label { font-size: 1.3rem; }
body[data-mod="inventory"] .inv-sum-text { --t: var(--ok); flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body[data-mod="inventory"] .inv-sum-text.tone-warn { --t: var(--warn); }
body[data-mod="inventory"] .inv-sum-text.tone-bad { --t: var(--bad); }
body[data-mod="inventory"] .inv-sum-text.tone-exp { --t: var(--m-shopping); }
body[data-mod="inventory"] .inv-sum-text strong { display: flex; align-items: center; gap: 10px; font: 750 1.18rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
body[data-mod="inventory"] .inv-sum-text strong::before {
    content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--t);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 20%, transparent);
}
body[data-mod="inventory"] .inv-sum-text span { font-size: .82rem; color: var(--muted); line-height: 1.4; }
body[data-mod="inventory"] .inv-kpis {
    flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px; padding: 2px; margin: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body[data-mod="inventory"] .inv-kpis::-webkit-scrollbar { display: none; }
body[data-mod="inventory"] .inv-kpi {
    --k: var(--brand); flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; height: 40px;
    padding: 0 8px 0 13px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
    font: 600 .85rem var(--font-body); text-align: left; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-1);
    transition: background .15s, border-color .15s, color .15s, transform .2s var(--ease-spring);
}
body[data-mod="inventory"] .inv-kpi i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
body[data-mod="inventory"] .inv-kpi span { font: inherit; color: inherit; }
body[data-mod="inventory"] .inv-kpi b {
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center;
    font: 750 .76rem var(--font-body); font-variant-numeric: tabular-nums; background: var(--surface-tint-strong); color: var(--ink-2);
}
body[data-mod="inventory"] .inv-kpi.warn { --k: var(--warn); }
body[data-mod="inventory"] .inv-kpi.bad { --k: var(--bad); }
body[data-mod="inventory"] .inv-kpi.exp { --k: var(--m-shopping); }
body[data-mod="inventory"] .inv-kpi.warn:not(.is-zero) b,
body[data-mod="inventory"] .inv-kpi.bad:not(.is-zero) b,
body[data-mod="inventory"] .inv-kpi.exp:not(.is-zero) b { background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
body[data-mod="inventory"] .inv-kpi.is-zero { opacity: .62; }
body[data-mod="inventory"] .inv-kpi:active { transform: scale(.96); }
body[data-mod="inventory"] .inv-kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="inventory"] .inv-kpi[aria-pressed="true"] { opacity: 1; background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ink) 70%, transparent); }
body[data-mod="inventory"] .inv-kpi[aria-pressed="true"] b { background: color-mix(in srgb, var(--surface) 20%, transparent); color: var(--surface); }
@media (hover: hover) {
    body[data-mod="inventory"] .inv-kpi:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--k) 50%, var(--line-strong)); }
    body[data-mod="inventory"] .inv-kpi[aria-pressed="true"]:hover { border-color: var(--ink); }
}
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-sum { padding: 14px; gap: 12px 14px; flex-wrap: wrap; }
    body[data-mod="inventory"] .inv-ring, body[data-mod="inventory"] .inv-ring svg { width: 62px; height: 62px; }
    body[data-mod="inventory"] .inv-ring-label { font-size: 1.02rem; }
    body[data-mod="inventory"] .inv-ring-label small { font-size: .56rem; }
    body[data-mod="inventory"] .inv-sum-text { flex: 1 1 0; }
    body[data-mod="inventory"] .inv-sum-text strong { font-size: 1.02rem; gap: 8px; }
    body[data-mod="inventory"] .inv-sum-text span { font-size: .78rem; }
    body[data-mod="inventory"] .inv-kpis { display: flex; flex: 1 0 100%; }
}

/* ---------- Barre d'outils : recherche · vues · options ---------- */
body[data-mod="inventory"] .inv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
body[data-mod="inventory"] .inv-bar .inv-search { position: relative; flex: 1 1 260px; min-width: 0; }
body[data-mod="inventory"] .inv-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color .15s; }
body[data-mod="inventory"] .inv-search:focus-within > svg { color: var(--brand); }
body[data-mod="inventory"] .inv-bar .inv-search input {
    width: 100%; height: 44px; margin: 0; padding: 0 12px 0 40px; border-radius: 14px;
    border-color: var(--line-strong); background-color: var(--surface); box-shadow: var(--shadow-1); font-size: .92rem;
}
body[data-mod="inventory"] .inv-bar .inv-search input:focus { box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-1); }
body[data-mod="inventory"] .inv-bar .seg { flex: none; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-tint-strong); }
body[data-mod="inventory"] .inv-bar .seg button { height: 36px; padding: 0 12px; border-radius: 10px; font-size: .84rem; transition: background .15s, color .15s, box-shadow .15s; }
body[data-mod="inventory"] .inv-bar .seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
body[data-mod="inventory"] .inv-bar .seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: hover) {
    body[data-mod="inventory"] .inv-bar .seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
}
body[data-mod="inventory"] .inv-opts { display: flex; align-items: center; gap: 8px; }
body[data-mod="inventory"] .inv-opt { min-width: 0; }
body[data-mod="inventory"] .inv-opt-l { display: none; }
body[data-mod="inventory"] .inv-bar .inv-opts select {
    width: auto; height: 44px; margin: 0; padding: 0 34px 0 12px; border-radius: 14px; font-size: .86rem; font-weight: 560; cursor: pointer;
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7080' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    box-shadow: var(--shadow-1);
}
body[data-mod="inventory"] .inv-opts #colorBtn { width: 44px; height: 44px; border-radius: 14px; }
body[data-mod="inventory"] .inv-opts-btn { display: none; }
@media (max-width: 760px) {
    body[data-mod="inventory"] .inv-bar { gap: 8px; }
    body[data-mod="inventory"] .inv-bar .inv-search { order: 1; flex: 1 1 0; }
    body[data-mod="inventory"] .inv-opts-btn { order: 2; position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
    body[data-mod="inventory"] .inv-opts-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
    body[data-mod="inventory"] .inv-opts-dot { display: none; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface); }
    body[data-mod="inventory"] .inv-opts-btn.has-custom .inv-opts-dot { display: block; }
    body[data-mod="inventory"] .inv-opts {
        order: 3; flex: 1 0 100%; display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: end; gap: 8px;
        padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2);
    }
    body[data-mod="inventory"] .inv-bar.opts-open .inv-opts { display: grid; animation: invDrop .22s var(--ease-spring) both; }
    body[data-mod="inventory"] .inv-opt-l { display: block; margin: 0 0 5px 2px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    body[data-mod="inventory"] .inv-bar .inv-opts select { width: 100%; min-width: 0; padding-left: 10px; box-shadow: none; }
    body[data-mod="inventory"] .inv-bar .seg { order: 4; flex: 1 0 100%; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 16px; }
    body[data-mod="inventory"] .inv-bar .seg button { height: 52px; padding: 4px 2px; flex-direction: column; justify-content: center; gap: 3px; border-radius: 12px; font-size: .72rem; }
    body[data-mod="inventory"] .inv-bar .seg button span { display: inline; }
}
@keyframes invDrop { from { opacity: 0; transform: translateY(-6px); } }
/* iPhone : pas de zoom automatique au focus (16 px minimum dans les champs) */
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-bar .inv-search input,
    body[data-mod="inventory"] .inv-bar .inv-opts select { font-size: 16px; }
}

/* ---------- Puces de catégories ---------- */
body[data-mod="inventory"] .inv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body[data-mod="inventory"] .inv-chip {
    flex: none; height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface);
    box-shadow: var(--shadow-1); font: 600 .8rem var(--font-body); color: var(--ink-2); white-space: nowrap;
}
body[data-mod="inventory"] .inv-chip i { width: 9px; height: 9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
body[data-mod="inventory"] .inv-chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-color: color-mix(in srgb, var(--c) 70%, transparent); color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent);
}
body[data-mod="inventory"] .inv-chip[data-cat=""][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: none; }
body[data-mod="inventory"] .inv-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="inventory"] .inv-chip:active { transform: scale(.96); }
@media (hover: none) { body[data-mod="inventory"] .inv-chip:hover { transform: none; } }
@media (max-width: 760px) {
    body[data-mod="inventory"] .inv-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 4px; margin-bottom: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    body[data-mod="inventory"] .inv-chips::-webkit-scrollbar { display: none; }
    body[data-mod="inventory"] .inv-chip { height: 40px; padding: 0 15px; }
}

/* ---------- Éléments communs des produits ---------- */
body[data-mod="inventory"] .inv-txt { min-width: 0; display: flex; flex-direction: column; }
body[data-mod="inventory"] .inv-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mod="inventory"] .inv-emoji { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent), 0 6px 14px -9px color-mix(in srgb, var(--c) 70%, transparent); transition: transform .25s var(--ease-spring); }
body[data-mod="inventory"] .st-out_of_stock .inv-emoji { filter: grayscale(.65); opacity: .75; }
body[data-mod="inventory"] .inv-open:active .inv-emoji { transform: scale(.93); }
body[data-mod="inventory"] .inv-tags:empty { display: none; }
body[data-mod="inventory"] .inv-gauge { height: 6px; }
body[data-mod="inventory"] .inv-qtywrap { display: inline-flex; align-items: center; gap: 6px; }

/* compteur +/− : une seule pilule */
body[data-mod="inventory"] .inv-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: var(--surface-tint-strong); }
body[data-mod="inventory"] .inv-stepper .stepper-btn {
    width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-1); font-size: 1.15rem; line-height: 1;
}
body[data-mod="inventory"] .inv-stepper .stepper-btn:disabled { opacity: .45; box-shadow: none; }
body[data-mod="inventory"] .inv-stepper .stepper-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: hover) {
    body[data-mod="inventory"] .inv-stepper .stepper-btn:not(:disabled):hover { color: var(--brand); background: var(--surface); }
    body[data-mod="inventory"] .inv-stepper .stepper-btn.minus:not(:disabled):hover { color: var(--bad); }
}
body[data-mod="inventory"] .inv-qty {
    width: 52px; height: 34px; margin: 0; padding: 0 2px; border: 0; border-radius: 9px; background: transparent; box-shadow: none;
    text-align: center; color: var(--ink); font: 750 .98rem var(--font-display); font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield;
}
body[data-mod="inventory"] .inv-qty::-webkit-outer-spin-button,
body[data-mod="inventory"] .inv-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body[data-mod="inventory"] .inv-qty:focus { background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
body[data-mod="inventory"] .inv-qty.bump { animation: invBump .3s var(--ease-spring); }
@keyframes invBump { 40% { transform: scale(1.2); color: var(--brand); } }
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-stepper .stepper-btn { width: 40px; height: 40px; }
    body[data-mod="inventory"] .inv-qty { width: 44px; height: 40px; font-size: 16px; }
}

/* ---------- Vue « Fiches » ---------- */
body[data-mod="inventory"] .inv-sec { margin-bottom: 24px; }
body[data-mod="inventory"] .inv-sec-h { gap: 10px; margin: 0 2px 12px; font: 700 1rem var(--font-display); letter-spacing: -.01em; }
body[data-mod="inventory"] .inv-sec-h i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
body[data-mod="inventory"] .inv-sec-h em { font-family: var(--font-body); }
body[data-mod="inventory"] .inv-cards { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
body[data-mod="inventory"] .inv-card {
    gap: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow-1);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 11%, var(--surface)) 0, var(--surface) 88px);
}
body[data-mod="inventory"] .inv-card.st-low_stock { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
body[data-mod="inventory"] .inv-card.st-out_of_stock { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 8%, var(--surface)) 0, var(--surface) 88px); }
body[data-mod="inventory"] .inv-card-top { display: flex; align-items: flex-start; min-width: 0; }
body[data-mod="inventory"] .inv-card .inv-open { align-items: flex-start; gap: 12px; }
body[data-mod="inventory"] .inv-card .inv-txt { padding-top: 3px; }
body[data-mod="inventory"] .inv-card-foot { margin-top: auto; justify-content: flex-start; gap: 8px; }
@media (hover: hover) {
    body[data-mod="inventory"] .inv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
    body[data-mod="inventory"] .inv-card:hover .inv-emoji { transform: scale(1.06) rotate(-4deg); }
}
@media (hover: none) { body[data-mod="inventory"] .inv-card:hover { transform: none; box-shadow: var(--shadow-1); } }
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body[data-mod="inventory"] .inv-card { padding: 11px; gap: 10px; border-radius: 18px; }
    body[data-mod="inventory"] .inv-card .inv-open { flex-direction: column; gap: 8px; }
    body[data-mod="inventory"] .inv-card .inv-txt { padding-top: 0; width: 100%; }
    body[data-mod="inventory"] .inv-card .inv-name { font-size: .9rem; }
    body[data-mod="inventory"] .inv-card .inv-stepper { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; }
    body[data-mod="inventory"] .inv-card .inv-qty { width: 100%; }
}

/* ---------- Vue « Liste » ---------- */
body[data-mod="inventory"] .inv-group { border-radius: 20px; margin-bottom: 14px; }
body[data-mod="inventory"] .inv-group-head {
    min-height: 54px; gap: 12px; padding: 12px 16px; border-left: 0; background: color-mix(in srgb, var(--c) 9%, var(--surface)); transition: background .15s;
}
body[data-mod="inventory"] .inv-group-head::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
body[data-mod="inventory"] .inv-group-head .g-title { font: 700 .98rem var(--font-display); letter-spacing: -.01em; }
body[data-mod="inventory"] .inv-group-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
body[data-mod="inventory"] .inv-group-head .g-chev { width: 28px; height: 28px; border-radius: 9px; place-items: center; display: inline-grid; background: color-mix(in srgb, var(--surface) 60%, transparent); }
@media (hover: hover) { body[data-mod="inventory"] .inv-group-head:hover { background: color-mix(in srgb, var(--c) 14%, var(--surface)); } }
body[data-mod="inventory"] .inv-line { gap: 12px; padding: 10px 16px; transition: background .15s; }
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-group-head { padding: 12px 14px; }
    body[data-mod="inventory"] .inv-group-head .g-count { font-size: .72rem; }
    body[data-mod="inventory"] .inv-line {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "open qty" "tags tags";
        align-items: center; gap: 6px 10px; padding: 10px 12px;
    }
    body[data-mod="inventory"] .inv-line > .inv-open { grid-area: open; gap: 10px; }
    body[data-mod="inventory"] .inv-line > .inv-qtywrap { grid-area: qty; gap: 4px; }
    body[data-mod="inventory"] .inv-line > .inv-tags { grid-area: tags; padding-left: 48px; }
    body[data-mod="inventory"] .inv-line > .inv-gauge { display: none; }
    body[data-mod="inventory"] .inv-line .inv-stepper .stepper-btn { width: 38px; }
    body[data-mod="inventory"] .inv-line .inv-qty { width: 40px; }
    body[data-mod="inventory"] .inv-line .inv-unit { min-width: 0; max-width: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Vue « Lignes » (ordinateur) ---------- */
body[data-mod="inventory"] .inv-rows { border-radius: 18px; }
body[data-mod="inventory"] .inv-r { border-left-width: 3px; transition: background .15s; }
body[data-mod="inventory"] .inv-rg { font-family: var(--font-display); font-size: .86rem; border-left-width: 3px; }
body[data-mod="inventory"] .inv-r .inv-stepper { padding: 2px; border-radius: 11px; }
body[data-mod="inventory"] .inv-r .inv-stepper .stepper-btn { width: 28px; height: 28px; border-radius: 9px; font-size: 1rem; }
body[data-mod="inventory"] .inv-r .inv-qty { width: 46px; height: 28px; font-size: .9rem; }

/* ---------- Vue « Schéma » ---------- */
body[data-mod="inventory"] .inv-zone {
    border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 38%, var(--line)); box-shadow: var(--shadow-1);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--surface)), color-mix(in srgb, var(--c) 3%, var(--surface)));
}
body[data-mod="inventory"] .inv-zone-h .z-ico { width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--c) 20%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
body[data-mod="inventory"] .inv-zone-h .z-title { font: 700 .98rem var(--font-display); letter-spacing: -.01em; }
body[data-mod="inventory"] .inv-tile { min-height: 104px; border-radius: 16px; border-color: var(--line-strong); box-shadow: var(--shadow-1); }
body[data-mod="inventory"] .inv-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="inventory"] .inv-tile:active { transform: scale(.96); }
@media (hover: none) { body[data-mod="inventory"] .inv-tile:hover { transform: none; box-shadow: var(--shadow-1); } }
@media (max-width: 640px) {
    body[data-mod="inventory"] .inv-zone { padding: 10px 10px 12px; border-radius: 20px; }
    body[data-mod="inventory"] .inv-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
body[data-mod="inventory"] .inv-legend { gap: 6px 14px; margin: 2px 2px 12px; font-size: .74rem; }
body[data-mod="inventory"] .inv-legend i { width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 640px) { body[data-mod="inventory"] .inv-legend-note { display: none; } }

/* ---------- Carte mentale : zoom & déplacement ---------- */
body[data-mod="inventory"] .mm-box { position: relative; isolation: isolate; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
body[data-mod="inventory"] .mm-wrap {
    position: relative; display: flex; height: min(70vh, 760px); min-height: 340px; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    overflow: auto; background-color: var(--surface); background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.5px);
    background-size: 24px 24px; background-attachment: local; touch-action: pan-x pan-y; cursor: grab; scrollbar-width: thin;
}
body[data-mod="inventory"] .mm-wrap.dragging { cursor: grabbing; }
body[data-mod="inventory"] .mm { flex: none; margin: auto; width: 100%; min-width: 0; max-width: none; height: auto; user-select: none; -webkit-user-select: none; }
body[data-mod="inventory"] .mm .mm-item text,
body[data-mod="inventory"] .mm .mm-glabel { paint-order: stroke fill; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
body[data-mod="inventory"] .mm .mm-item.st-out_of_stock text { fill: var(--muted); }
body[data-mod="inventory"] .mm-item .mm-hit { transition: fill .15s; }
body[data-mod="inventory"] .mm-item:hover .mm-hit,
body[data-mod="inventory"] .mm-item:focus-visible .mm-hit { fill: var(--brand-soft); }
body[data-mod="inventory"] .mm-item:focus-visible text { fill: var(--brand); }
body[data-mod="inventory"] .mm-tools {
    position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: 15px;
    border: 1px solid var(--line); background: var(--glass-strong); box-shadow: var(--shadow-2);
    backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
body[data-mod="inventory"] .mm-tools button {
    width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2);
    display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, opacity .15s, transform .15s;
}
body[data-mod="inventory"] .mm-tools button:active { transform: scale(.92); }
body[data-mod="inventory"] .mm-tools button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: hover) { body[data-mod="inventory"] .mm-tools button:hover { background: var(--surface-tint-strong); color: var(--brand); } }
body[data-mod="inventory"] .mm-box.is-min [data-mm="out"],
body[data-mod="inventory"] .mm-box.is-max [data-mm="in"] { opacity: .35; pointer-events: none; }
body[data-mod="inventory"] .mm-hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
    body[data-mod="inventory"] .mm-hint-touch { display: none; }
    body[data-mod="inventory"] .mm-hint-mouse { display: inline; }
}
@media (max-width: 760px) {
    body[data-mod="inventory"] .mm { min-width: 0; }
    body[data-mod="inventory"] .mm-wrap { height: min(62vh, 560px); min-height: 300px; }
    body[data-mod="inventory"] .mm-box { border-radius: 20px; }
}

/* ---------- Fiche produit (feuille) ---------- */
body[data-mod="inventory"] .inv-sheet { width: min(480px, 100%); max-height: min(88vh, 780px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
body[data-mod="inventory"] .inv-sheet-top { position: relative; gap: 16px; padding: 24px 22px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface)); }
body[data-mod="inventory"] .inv-sheet-top .inv-emoji { width: 68px; height: 68px; font-size: 2.4rem; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
body[data-mod="inventory"] .inv-sheet-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
body[data-mod="inventory"] .inv-sheet-head h3 { margin: 0; font: 750 1.3rem/1.2 var(--font-display); letter-spacing: -.02em; word-break: break-word; }
body[data-mod="inventory"] .inv-sheet-top .icon-btn { flex: none; align-self: flex-start; width: 40px; height: 40px; }
body[data-mod="inventory"] .inv-sheet-body { gap: 14px; padding: 6px 22px 22px; }
body[data-mod="inventory"] .inv-sheet-qty { flex-wrap: wrap; gap: 14px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); }
body[data-mod="inventory"] .inv-sheet .inv-stepper .stepper-btn { width: 44px; height: 44px; border-radius: 12px; font-size: 1.3rem; }
body[data-mod="inventory"] .inv-sheet .inv-qty { width: 70px; height: 44px; font-size: 1.25rem; }
body[data-mod="inventory"] .inv-sheet .inv-unit { font-size: .82rem; font-weight: 600; }
body[data-mod="inventory"] .inv-sheet-gauge { flex: 1; min-width: 110px; display: flex; flex-direction: column; gap: 6px; }
body[data-mod="inventory"] .inv-sheet-gauge .inv-gauge { height: 8px; }
body[data-mod="inventory"] .inv-sheet-gauge small { font-size: .72rem; font-weight: 600; color: var(--muted); }
body[data-mod="inventory"] .inv-fact { padding: 10px 12px; border-radius: 14px; }
body[data-mod="inventory"] .inv-fact b { display: block; margin-top: 2px; }
body[data-mod="inventory"] .inv-sheet-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body[data-mod="inventory"] .inv-sheet-actions .btn { width: 100%; height: 44px; padding: 0 8px; justify-content: center; border-radius: 12px; }
/* téléphone : la coque fournit déjà la feuille flottante et sa poignée (.modal-box::before) */
@media (max-width: 960px) {
    body[data-mod="inventory"] .inv-sheet { max-height: 92vh; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    body[data-mod="inventory"] .inv-sheet-top { padding-top: 28px; }
}
@media (max-width: 720px) { body[data-mod="inventory"] .inv-sheet { width: 100%; } }
@media (max-width: 400px) {
    body[data-mod="inventory"] .inv-sheet-top { padding-left: 16px; padding-right: 16px; gap: 12px; }
    body[data-mod="inventory"] .inv-sheet-top .inv-emoji { width: 58px; height: 58px; font-size: 2rem; border-radius: 18px; }
    body[data-mod="inventory"] .inv-sheet-body { padding: 6px 16px 18px; }
    body[data-mod="inventory"] .inv-sheet-actions .btn { font-size: .8rem; gap: 5px; }
}

/* ---------- Scanner de code-barres : le cadre se superpose enfin à la caméra ---------- */
body[data-mod="inventory"] #scanViewport { min-height: 240px; background: #0b0c12; }
body[data-mod="inventory"] #scanReader video { display: block; width: 100% !important; height: auto; object-fit: cover; }
body[data-mod="inventory"] #scanViewport .scan-frame {
    position: absolute; inset: 0; z-index: 2; width: auto; aspect-ratio: auto; margin: 0; border-radius: 0;
    background: transparent; overflow: hidden; pointer-events: none;
}
body[data-mod="inventory"] #scanViewport .scan-corner { width: 30px; height: 30px; border-color: #fff; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45)); }
body[data-mod="inventory"] #scanViewport .scan-frame::after {
    content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #ff4d6d, transparent); box-shadow: 0 0 14px 2px rgba(255, 77, 109, .5);
    animation: invScan 1.6s ease-in-out infinite alternate;
}
@keyframes invScan { from { transform: translateY(-38px); } to { transform: translateY(38px); } }

/* ---------- Couleurs : pastilles plus faciles à toucher ---------- */
@media (max-width: 640px) {
    body[data-mod="inventory"] .col-swatches { gap: 8px; }
    body[data-mod="inventory"] .col-sw { width: 30px; height: 30px; }
    body[data-mod="inventory"] .col-row input[type="color"] { width: 34px; height: 34px; }
    body[data-mod="inventory"] .col-row [data-reset] { width: 34px; padding: 0; }
}

/* ---------- États vides ---------- */
body[data-mod="inventory"] .inv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 38px 22px; text-align: center; }
body[data-mod="inventory"] .inv-empty-ico {
    width: 76px; height: 76px; margin-bottom: 4px; border-radius: 24px; display: grid; place-items: center; font-size: 2.4rem;
    background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
body[data-mod="inventory"] .inv-empty .card-title { margin: 4px 0 0; font: 750 1.2rem var(--font-display); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
body[data-mod="inventory"] .inv-empty .empty-state { max-width: 420px; padding: 0 0 8px; }
body[data-mod="inventory"] .inv-none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; border: 1.5px dashed var(--line-strong); border-radius: 20px; }
body[data-mod="inventory"] .inv-none .empty-state { padding: 0; }

/* ---------- Apparition ---------- */
body[data-mod="inventory"] .fresh .mm-box { animation: rise .35s var(--ease-spring) both; }
body[data-mod="inventory"] .fresh .inv-cards > .inv-card:nth-child(2) { animation-delay: 25ms; }
body[data-mod="inventory"] .fresh .inv-cards > .inv-card:nth-child(3) { animation-delay: 50ms; }
body[data-mod="inventory"] .fresh .inv-cards > .inv-card:nth-child(4) { animation-delay: 75ms; }
body[data-mod="inventory"] .fresh .inv-cards > .inv-card:nth-child(5) { animation-delay: 100ms; }
body[data-mod="inventory"] .fresh .inv-cards > .inv-card:nth-child(6) { animation-delay: 125ms; }
body[data-mod="inventory"] .fresh .inv-cards > .inv-card:nth-child(n+7) { animation-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
    body[data-mod="inventory"] .inv-card, body[data-mod="inventory"] .inv-zone, body[data-mod="inventory"] .inv-group,
    body[data-mod="inventory"] .inv-rows, body[data-mod="inventory"] .inv-line, body[data-mod="inventory"] .mm-box,
    body[data-mod="inventory"] .inv-opts, body[data-mod="inventory"] .inv-qty.bump,
    body[data-mod="inventory"] #scanViewport .scan-frame::after { animation: none !important; }
    body[data-mod="inventory"] .inv-card:hover, body[data-mod="inventory"] .inv-tile:hover, body[data-mod="inventory"] .inv-kpi:hover,
    body[data-mod="inventory"] .inv-card:hover .inv-emoji { transform: none; }
    body[data-mod="inventory"] .inv-add-ico, body[data-mod="inventory"] .inv-add-chev { transition: none; }
}

/* ====================== Zone : money ====================== */
/* ==========================================================================
   MonCentre 4 — zone « argent » : Budget (body[data-mod="budget"]) et Statistiques (body[data-mod="stats"])
   Chargé après theme3.css. Tous les sélecteurs sont limités à ces deux pages.
   ========================================================================== */

/* ---------------------------------------------------------------- Budget */

/* En-tête : boutons d'import (libellés courts sur téléphone) */
body[data-mod="budget"] .mx-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body[data-mod="budget"] .mx-sm { display: none; }

/* Carte principale : montant dépensé, rythme, chiffres clés */
body[data-mod="budget"] .mx-hero {
    overflow: hidden; padding: 22px 24px 18px;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--mod) 13%, transparent), transparent 55%),
        var(--surface);
}
body[data-mod="budget"] .mx-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; }
body[data-mod="budget"] .mx-hero-head h3 { margin: 0; }
body[data-mod="budget"] .mx-month { gap: 6px; }
body[data-mod="budget"] .mx-month-label { min-width: 124px; text-align: center; font: 700 .92rem/1.2 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
body[data-mod="budget"] #prevMonthBtn svg { transform: rotate(180deg); }
body[data-mod="budget"] .mx-hero .budget-hero-top { align-items: center; }
body[data-mod="budget"] .mx-hero .budget-amount {
    font-size: clamp(2.4rem, 8vw, 3.3rem); line-height: 1; letter-spacing: -.045em; color: var(--ink);
    font-variant-numeric: tabular-nums; transition: opacity .2s;
}
body[data-mod="budget"] .mx-hero .budget-amount small { font-size: .5em; letter-spacing: -.02em; color: var(--muted); font-weight: 700; }
body[data-mod="budget"] .mx-hero .budget-amount.over,
body[data-mod="budget"] .mx-hero .budget-amount.over small { color: var(--bad); }
body[data-mod="budget"] .mx-pct {
    display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px; white-space: nowrap;
    font: 700 .78rem/1 var(--font-body); background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok);
}
body[data-mod="budget"] .mx-pct.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
body[data-mod="budget"] .mx-pct.bad { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
body[data-mod="budget"] .mx-pct.none { background: var(--surface-tint-strong); color: var(--muted); }

/* Barre + repère « aujourd'hui » (si la barre le dépasse, tu dépenses plus vite que le mois n'avance) */
body[data-mod="budget"] .mx-track { position: relative; margin: 24px 0 10px; }
body[data-mod="budget"] .mx-track .progress-bar { height: 12px; }
body[data-mod="budget"] .mx-pace {
    position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 45%, transparent); font-style: normal; pointer-events: none;
}
body[data-mod="budget"] .mx-pace::after {
    content: "aujourd'hui"; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    font: 700 .6rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
body[data-mod="budget"] .mx-pace.at-start::after { left: 0; transform: none; }
body[data-mod="budget"] .mx-pace.at-end::after { left: auto; right: 0; transform: none; }
body[data-mod="budget"] .mx-hero.mx-ahead .mx-pace { background: var(--warn); }
body[data-mod="budget"] .mx-hero.mx-ahead .mx-pace::after { content: "rythme trop rapide"; color: var(--warn); }

body[data-mod="budget"] .mx-hero-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
body[data-mod="budget"] #remainingLabel { font-size: .92rem; color: var(--ink-2); }
body[data-mod="budget"] #remainingLabel b { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
body[data-mod="budget"] #remainingLabel.t-bad b { color: var(--bad); }
body[data-mod="budget"] .mx-days { font-size: .78rem; font-weight: 600; color: var(--muted); }

body[data-mod="budget"] .mx-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
body[data-mod="budget"] .mx-split:empty { display: none; }
body[data-mod="budget"] .mx-stat { min-width: 0; padding: 11px 13px; border-radius: 14px; background: var(--surface-tint); border: 1px solid var(--line); }
body[data-mod="budget"] .mx-stat small {
    display: block; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-mod="budget"] .mx-stat b {
    display: block; margin-top: 3px; font: 800 1.08rem/1.15 var(--font-display); letter-spacing: -.02em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
body[data-mod="budget"] .mx-stat.ok b { color: var(--ok); }
body[data-mod="budget"] .mx-hero.is-loading .budget-amount,
body[data-mod="budget"] .mx-hero.is-loading .mx-split { opacity: .5; }
body[data-mod="budget"] .mx-split { transition: opacity .2s; }

body[data-mod="budget"] .mx-back {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 36px; padding: 0 13px; border-radius: 99px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand); font: 650 .8rem var(--font-body); cursor: pointer;
    box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s;
}
body[data-mod="budget"] .mx-back:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
body[data-mod="budget"] .mx-back[hidden] { display: none; }
body[data-mod="budget"] .mx-pace[hidden],
body[data-mod="budget"] .budget-insights[hidden] { display: none; }

/* Revenu (repliable) */
body[data-mod="budget"] .mx-hero .income-edit { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
body[data-mod="budget"] .mx-hero .income-edit > summary {
    display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-height: 40px; font-size: .84rem; color: var(--muted);
}
body[data-mod="budget"] .mx-hero .income-edit > summary u {
    margin-left: auto; padding: 6px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand);
    transition: background .15s;
}
body[data-mod="budget"] .mx-hero .income-edit > summary:hover u { background: color-mix(in srgb, var(--brand) 16%, transparent); }
body[data-mod="budget"] .mx-hero .income-edit[open] > summary u { background: var(--brand); color: #fff; }
body[data-mod="budget"] .mx-hero .income-edit[open] > *:not(summary) { animation: mxIn .22s ease both; }

/* Ce que je remarque (alerte de rythme incluse) */
body[data-mod="budget"] .budget-insights li { padding: 11px 14px 11px 40px; border-radius: 14px; }
body[data-mod="budget"] .budget-insights li.bi-bad { font-weight: 600; }

/* Formulaire d'ajout */
body[data-mod="budget"] .mx-form .mx-check { align-self: end; display: flex; align-items: center; gap: 10px; min-height: 44px; }
body[data-mod="budget"] .mx-form .mx-check label { margin: 0; }
body[data-mod="budget"] .mx-submit { margin-top: 14px; }

/* Répartition par catégorie */
body[data-mod="budget"] .mx-cats .card-head { flex-wrap: wrap; }
body[data-mod="budget"] .mx-cats-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: center; }
body[data-mod="budget"] .mx-donut { position: relative; height: 210px; min-width: 0; }
body[data-mod="budget"] .mx-cats.is-empty .mx-cats-body { grid-template-columns: minmax(0, 1fr); }
body[data-mod="budget"] .mx-cats.is-empty .mx-donut { display: none; }
body[data-mod="budget"] .mx-breakdown { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-mod="budget"] .mx-cat-row {
    width: 100%; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 12px; min-height: 44px; padding: 6px 10px; margin: 0;
    border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
body[data-mod="budget"] .mx-cat-row:hover { background: var(--surface-tint); }
body[data-mod="budget"] .mx-cat-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
body[data-mod="budget"] .mx-cat-row[aria-pressed="true"] {
    background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}
body[data-mod="budget"] .mx-cat-row .cat-label { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
body[data-mod="budget"] .mx-cat-row .cat-label i { display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; background: var(--c); vertical-align: 0; }
body[data-mod="budget"] .mx-cat-row .progress-bar { display: block; height: 8px; }
body[data-mod="budget"] .mx-cat-row .progress-fill { display: block; background: var(--c); }
body[data-mod="budget"] .mx-cat-row .cat-amount { font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
body[data-mod="budget"] .mx-cat-row .cat-amount small { display: inline-block; min-width: 36px; margin-left: 4px; font-size: .74rem; font-weight: 600; color: var(--muted); }

/* Sections (dépenses du mois, charges fixes, récurrentes probables) */
body[data-mod="budget"] .mx-sec { margin-top: 30px; }
body[data-mod="budget"] .mx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 2px 12px; }
body[data-mod="budget"] .mx-sec-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 1.2rem/1.2 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
body[data-mod="budget"] .mx-sec-ico {
    width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center;
    color: var(--mod); background: color-mix(in srgb, var(--mod) 14%, transparent);
}
body[data-mod="budget"] .stat-hint { padding: 4px 10px; border-radius: 99px; background: var(--surface-tint); font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
body[data-mod="budget"] .stat-hint:empty { display: none; }
body[data-mod="budget"] #mxFilters { margin-bottom: 6px; }
body[data-mod="budget"] #mxFilters[hidden] { display: none; }
body[data-mod="budget"] #mxFilters button span { font-size: .95rem; line-height: 1; }

/* Liste des dépenses, regroupée par jour */
body[data-mod="budget"] .mx-day { display: flex; flex-direction: column; gap: 6px; }
body[data-mod="budget"] .mx-day + .mx-day { margin-top: 8px; }
body[data-mod="budget"] .mx-day-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 6px;
    font: 700 .7rem var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
body[data-mod="budget"] .mx-day-head b { letter-spacing: 0; font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
body[data-mod="budget"] .mx-exp { flex-wrap: nowrap; gap: 12px; padding: 10px 8px 10px 10px; }
body[data-mod="budget"] .mx-exp .item-main { flex: 1 1 auto; min-width: 0; }
body[data-mod="budget"] .mx-exp .item-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mod="budget"] .mx-exp .item-title .badge { margin-left: 4px; vertical-align: 1px; }
body[data-mod="budget"] .mx-exp .item-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mod="budget"] .mx-ico {
    flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
    font: 800 1.05rem/1 var(--font-display); color: color-mix(in srgb, var(--c) 72%, var(--ink));
    background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
body[data-mod="budget"] .mx-amt { flex: none; font: 750 1rem/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-mod="budget"] .mx-del {
    flex: none; width: 36px; height: 36px; border-radius: 11px; padding: 0;
    background: transparent; border-color: transparent; box-shadow: none; color: var(--muted);
    transition: opacity .15s, background .15s, color .15s;
}
body[data-mod="budget"] .mx-del:hover,
body[data-mod="budget"] .mx-del:focus-visible { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: transparent; transform: none; }
@media (hover: hover) and (pointer: fine) {
    body[data-mod="budget"] .mx-exp .mx-del { opacity: .35; }
    body[data-mod="budget"] .mx-exp:hover .mx-del,
    body[data-mod="budget"] .mx-exp:focus-within .mx-del { opacity: 1; }
}
body[data-mod="budget"] .mx-pred .mx-amt { font-size: .95rem; }

/* Fenêtre « Importer depuis les courses » (la boîte n'avait pas de fond) */
body[data-mod="budget"] .import-modal-box {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-3);
    padding: 22px; transform: translateY(14px) scale(.98); transition: transform .25s var(--ease-spring);
}
body[data-mod="budget"] .modal-overlay.show .import-modal-box { transform: none; }
body[data-mod="budget"] .import-modal-box h3 { margin: 0 0 6px; font: 800 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-transform: none; }
body[data-mod="budget"] .mx-import-help { margin: 0 0 12px; font-size: .86rem; }
body[data-mod="budget"] .mx-import-list { display: flex; flex-direction: column; }
body[data-mod="budget"] .import-row { margin: 0; min-height: 52px; padding: 6px 2px; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); cursor: pointer; }
body[data-mod="budget"] .import-row input[type="number"] { width: 104px; height: 40px; flex: none; text-align: right; }
body[data-mod="budget"] .import-row .import-name { min-width: 0; overflow-wrap: anywhere; }
body[data-mod="budget"] .import-row .import-check { flex: none; }
body[data-mod="budget"] .import-modal-box .modal-actions { margin-top: 18px; }

@keyframes mxIn { from { opacity: 0; transform: translateY(-4px); } }

/* Budget — tablette */
@media (max-width: 960px) {
    body[data-mod="budget"] .import-modal-box {
        width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; border-bottom: 0;
        padding-bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateY(40px);
    }
}
/* Budget — téléphone */
@media (max-width: 720px) {
    body[data-mod="budget"] .mx-cats-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    body[data-mod="budget"] .mx-donut { width: min(240px, 100%); height: 190px; margin: 0 auto; }
    body[data-mod="budget"] .mx-cat-row { grid-template-columns: minmax(0, 1fr) 64px auto; gap: 10px; padding: 6px 8px; }
}
@media (max-width: 640px) {
    body[data-mod="budget"] .mx-head-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    body[data-mod="budget"] .mx-head-actions .btn { height: 42px; min-width: 0; padding: 0 10px; }
    body[data-mod="budget"] .mx-lg { display: none; }
    body[data-mod="budget"] .mx-sm { display: inline; }
    body[data-mod="budget"] .mx-hero { padding: 18px 16px 12px; }
    body[data-mod="budget"] .mx-month { width: 100%; justify-content: space-between; }
    body[data-mod="budget"] .mx-month .btn-icon { width: 40px; height: 40px; }
    body[data-mod="budget"] .mx-month-label { flex: 1; min-width: 0; }
    body[data-mod="budget"] .mx-back { min-height: 40px; }
    body[data-mod="budget"] .mx-split { gap: 8px; }
    body[data-mod="budget"] .mx-stat { padding: 9px 10px; border-radius: 12px; }
    body[data-mod="budget"] .mx-stat small { font-size: .58rem; letter-spacing: .05em; }
    body[data-mod="budget"] .mx-stat b { font-size: .95rem; }
    body[data-mod="budget"] .mx-sec { margin-top: 26px; }
    body[data-mod="budget"] .mx-sec-head h2 { font-size: 1.1rem; }
    body[data-mod="budget"] .mx-exp { gap: 10px; padding: 9px 4px 9px 9px; }
    body[data-mod="budget"] .mx-ico { width: 38px; height: 38px; border-radius: 12px; }
    body[data-mod="budget"] .mx-amt { font-size: .95rem; }
    body[data-mod="budget"] .mx-del { width: 40px; height: 40px; }
    body[data-mod="budget"] .mx-pred .item-actions { flex: 1 1 100%; justify-content: flex-end; }
    body[data-mod="budget"] .mx-pred .predicted-add-btn { height: 40px; }
    body[data-mod="budget"] .mx-hero .income-edit .income-inline input { flex: 1 1 140px; width: auto; }
    body[data-mod="budget"] .mx-hero .income-edit .income-inline .btn { height: 42px; }
    /* Saisie commencée : le formulaire reste déplié même si on touche ailleurs (défilement, clavier fermé) */
    body[data-mod="budget"] .mx-form:has(#expName:not(:placeholder-shown)) .grid > div:not(:first-child) { display: block !important; }
    body[data-mod="budget"] .mx-form:has(#expName:not(:placeholder-shown)) .grid > div.mx-check { display: flex !important; }
    body[data-mod="budget"] .mx-form:has(#expName:not(:placeholder-shown)) .grid > div:first-child > label { display: block; }
    body[data-mod="budget"] .mx-form .grid > div:nth-child(4),
    body[data-mod="budget"] .mx-form .mx-check { grid-column: 1 / -1; min-height: 40px; }
    body[data-mod="budget"] .mx-form .mx-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
}

/* ----------------------------------------------------------- Statistiques */

body[data-mod="stats"] .kpi-card { display: block; color: inherit; }
body[data-mod="stats"] .kpi-card::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--c), transparent 80%); opacity: .85;
}
body[data-mod="stats"] .kpi-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body[data-mod="stats"] .kpi-meter { display: block; height: 6px; margin-top: 12px; border-radius: 99px; background: var(--surface-tint-strong); overflow: hidden; }
body[data-mod="stats"] .kpi-meter i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .6s var(--ease-spring); }
body[data-mod="stats"] .kpi-meter.bad i { background: var(--bad); }
body[data-mod="stats"] .kpi-meter + .kpi-flag { margin-top: 8px; }

body[data-mod="stats"] .card-head { flex-wrap: wrap; }
body[data-mod="stats"] .stat-hint { padding: 4px 10px; border-radius: 99px; background: var(--surface-tint); font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Heures de travail */
body[data-mod="stats"] .hours-card .day-label { transition: opacity .2s; }
body[data-mod="stats"] .hours-card .hours-tiles,
body[data-mod="stats"] .hours-card .pay-box { transition: opacity .2s; }
body[data-mod="stats"] .hours-card.is-loading .day-label,
body[data-mod="stats"] .hours-card.is-loading .hours-tiles,
body[data-mod="stats"] .hours-card.is-loading .pay-box { opacity: .5; }
body[data-mod="stats"] .hours-banner { border-radius: 14px; }
body[data-mod="stats"] .hours-tile { padding: 13px 15px; border-radius: 16px; background: var(--surface-2); }
body[data-mod="stats"] .hours-tile:nth-child(3) {
    background: color-mix(in srgb, var(--c) 9%, var(--surface)); border-color: color-mix(in srgb, var(--c) 28%, var(--line));
}
body[data-mod="stats"] .hours-tile:nth-child(3) b { color: var(--c); }
body[data-mod="stats"] .hours-tile.bad { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
body[data-mod="stats"] .hours-tile.bad b { color: var(--bad); }

/* Paye estimée : chiffre vedette */
body[data-mod="stats"] .pay-box[hidden] { display: none; }
body[data-mod="stats"] .pay-box {
    padding: 18px 20px; border-radius: 18px; gap: 12px 28px; box-shadow: var(--shadow-1);
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 60%),
        var(--surface);
}
body[data-mod="stats"] .pay-main > b { font-size: clamp(2rem, 6vw, 2.5rem); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
body[data-mod="stats"] .pay-main span b { color: var(--ink); font-variant-numeric: tabular-nums; }
body[data-mod="stats"] .pay-meta { line-height: 1.5; }
body[data-mod="stats"] .hours-detail summary { min-height: 40px; display: flex; align-items: center; }
body[data-mod="stats"] .bar-row { min-height: 26px; }

/* Statistiques — téléphone */
@media (max-width: 720px) {
    body[data-mod="stats"] .hours-tiles { gap: 8px; }
    body[data-mod="stats"] .hours-tile { padding: 11px 12px; border-radius: 14px; }
    body[data-mod="stats"] .hours-tile b { font-size: 1.3rem; }
    body[data-mod="stats"] .hours-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
    body[data-mod="stats"] .hours-card .day-nav .btn-icon { width: 40px; height: 40px; }
    body[data-mod="stats"] .hours-card .day-nav .btn-small:not(.btn-icon) { height: 40px; }
    body[data-mod="stats"] .pay-box { padding: 16px; }
    body[data-mod="stats"] .bar-row-wide { grid-template-columns: minmax(0, 1fr) 90px 44px; }
}

/* Mouvements réduits */
@media (prefers-reduced-motion: reduce) {
    body[data-mod="budget"] .item-row,
    body[data-mod="budget"] .mx-hero .income-edit[open] > *:not(summary) { animation: none; }
    body[data-mod="budget"] .mx-cat-row,
    body[data-mod="budget"] .mx-back,
    body[data-mod="budget"] .mx-del,
    body[data-mod="budget"] .import-modal-box,
    body[data-mod="budget"] .progress-fill,
    body[data-mod="stats"] .kpi-meter i,
    body[data-mod="stats"] .progress-fill { transition: none; }
}

/* Ancres : le titre ne passe pas sous la barre du haut collante */
body[data-mod="budget"] #mxOneOffSec,
body[data-mod="budget"] #expenseForm,
body[data-mod="stats"] #heures { scroll-margin-top: 88px; }

/* ====================== Zone : mail ====================== */
/* ==========================================================================
   MonCentre 4 — zone « mail » : boîte mail intégrée (modules/mail.php)
   Concaténé après theme3.css. Toutes les règles sont limitées à body[data-mod="mail"].
   Ordinateur : une seule fenêtre à 3 volets (dossiers · liste · lecture), chaque volet défile seul.
   Téléphone : puces de dossiers, liste plein écran, lecteur plein écran (body.mbx-reading), bouton « Écrire » flottant.
   ========================================================================== */

body[data-mod="mail"] {
    --mbx-hover: color-mix(in srgb, var(--ink) 4%, var(--surface));
    --mbx-active: color-mix(in srgb, var(--brand) 10%, var(--surface));
    --mbx-ease: var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
body[data-mod="mail"] [hidden] { display: none !important; }
body[data-mod="mail"] .content { max-width: 1680px; }

@keyframes mbx-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes mbx-slide { from { opacity: .4; transform: translateX(42px); } }
@keyframes mbx-pop { from { opacity: 0; transform: translateY(-50%) scale(.94); } }

/* ==========================================================================
   Fenêtre à trois volets
   ========================================================================== */
body[data-mod="mail"] .mbx {
    grid-template-columns: 232px minmax(320px, 410px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    gap: 0; align-items: stretch; margin-top: 4px;
    height: calc(100vh - var(--topbar-h) - 40px);
    height: calc(100dvh - var(--topbar-h) - 40px);
    min-height: 540px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2); overflow: hidden;
}

/* ---------- Volet des dossiers ---------- */
body[data-mod="mail"] .mbx-folders {
    position: static; top: auto; min-height: 0; overflow-y: auto; gap: 14px; padding: 16px 12px 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--surface-2)), var(--surface-2) 40%);
    border-right: 1px solid var(--line); scrollbar-width: none;
}
body[data-mod="mail"] .mbx-folders::-webkit-scrollbar { display: none; }
body[data-mod="mail"] .mbx-compose {
    height: 46px; border-radius: 14px; gap: 8px; font-size: .95rem; letter-spacing: -.01em;
    transition: transform .2s var(--ease-spring), box-shadow .2s, filter .2s, opacity .2s;
}
body[data-mod="mail"] .mbx-compose:hover { filter: brightness(1.05); }
body[data-mod="mail"] .mbx-compose:active { transform: scale(.97); }
body[data-mod="mail"] .mbx-folders nav { gap: 2px; }
body[data-mod="mail"] .mbx-folders nav button {
    position: relative; min-height: 40px; padding: 0 10px 0 12px; border-radius: 12px; gap: 11px;
    font-weight: 580; color: var(--ink-2); transition: background .18s, color .18s, box-shadow .18s;
}
body[data-mod="mail"] .mbx-folders nav button svg { flex: none; color: var(--muted); transition: color .18s, transform .25s var(--ease-spring); }
body[data-mod="mail"] .mbx-folders nav button:hover { background: var(--surface-tint); color: var(--ink); }
body[data-mod="mail"] .mbx-folders nav button:hover svg { color: var(--ink-2); transform: scale(1.08); }
body[data-mod="mail"] .mbx-folders nav button.active {
    background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
body[data-mod="mail"] .mbx-folders nav button.active svg { color: var(--brand); }
body[data-mod="mail"] .mbx-folders nav button b {
    display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px;
    font-size: .7rem; font-weight: 750; line-height: 1; color: var(--brand); background: var(--brand-soft); font-variant-numeric: tabular-nums;
}
body[data-mod="mail"] .mbx-folders nav button b:empty { display: none; }
body[data-mod="mail"] .mbx-folders nav button.active b { color: #fff; background: var(--brand-gradient); }
body[data-mod="mail"] .mbx-accounts-link {
    margin-top: auto; min-height: 40px; border-radius: 12px; color: var(--muted);
    transition: color .18s, border-color .18s, background .18s;
}
body[data-mod="mail"] .mbx-accounts-link:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
body[data-mod="mail"] .mbx-accounts-link:has(b) { border-style: solid; border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, transparent); }

/* ---------- Volet de la liste ---------- */
body[data-mod="mail"] .mbx-list {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--surface);
}
body[data-mod="mail"] .mbx-list-head {
    position: relative; top: auto; flex: none; flex-direction: column; gap: 10px; padding: 16px 14px 12px;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
body[data-mod="mail"] .mbx-list-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; min-width: 0; }
body[data-mod="mail"] .mbx-list-title h2 {
    margin: 0; font: 750 1.32rem/1.2 var(--font-display); letter-spacing: -.035em; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-mod="mail"] #mbxListCount { flex: none; font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-mod="mail"] .mbx-list-tools { display: flex; align-items: center; gap: 8px; }
body[data-mod="mail"] .mbx-search {
    position: relative; display: block; flex: 1; min-width: 0; margin: 0;
    font: inherit; text-transform: none; letter-spacing: 0; color: inherit;
}
body[data-mod="mail"] .mbx-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color .15s; }
body[data-mod="mail"] .mbx-search input {
    width: 100%; height: 40px; margin: 0; padding-left: 38px; border-radius: 12px; font-size: .9rem;
    background: var(--surface-2); border-color: transparent; box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
body[data-mod="mail"] .mbx-search input:hover { border-color: var(--line); }
body[data-mod="mail"] .mbx-search input:focus { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); box-shadow: 0 0 0 4px var(--brand-soft); }
body[data-mod="mail"] .mbx-search:focus-within > svg { color: var(--brand); }
body[data-mod="mail"] #mailSyncBtn { flex: none; }
body[data-mod="mail"] #mailSyncBtn:disabled { cursor: progress; opacity: .8; }

body[data-mod="mail"] .mbx-items {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 6px;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}

/* ---------- Ligne de mail ---------- */
body[data-mod="mail"] .mbx-item {
    display: block; position: relative; isolation: isolate; padding: 0; gap: 0; margin: 0 0 1px;
    border: 0; border-radius: 14px; background: transparent; overflow: hidden; touch-action: pan-y; transition: background .2s;
}
body[data-mod="mail"] .mbx-item::before { content: none; }
body[data-mod="mail"] .mbx-item:hover, body[data-mod="mail"] .mbx-item.active { background: transparent; }
body[data-mod="mail"] .mbx-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 80%, transparent); outline-offset: -2px; }
body[data-mod="mail"] .mbx-item-in {
    position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 20px;
    border-radius: inherit; background: var(--surface);
    transform: translateX(var(--sx, 0px)); transition: transform .26s var(--mbx-ease), background .15s;
}
/* séparateur fin, aligné sur le texte (masqué autour de la ligne survolée / ouverte) */
body[data-mod="mail"] .mbx-item + .mbx-item .mbx-item-in::before {
    content: ""; position: absolute; top: -1px; left: 72px; right: 14px; height: 1px; background: var(--line); transition: opacity .15s;
}
body[data-mod="mail"] :is(.mbx-item:hover, .mbx-item.active, .mbx-item[data-swipe]) .mbx-item-in::before,
body[data-mod="mail"] :is(.mbx-item:hover, .mbx-item.active) + .mbx-item .mbx-item-in::before { opacity: 0; }
body[data-mod="mail"] .mbx-item:hover .mbx-item-in { background: var(--mbx-hover); }
body[data-mod="mail"] .mbx-item:active .mbx-item-in { background: var(--mbx-hover); }
body[data-mod="mail"] .mbx-item.active .mbx-item-in { background: var(--mbx-active); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); }
/* pastille « non lu » */
body[data-mod="mail"] .mbx-item.unread .mbx-item-in::after {
    content: ""; position: absolute; left: 7px; top: 21px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

body[data-mod="mail"] .mbx-avatar {
    width: 40px; height: 40px; font: 700 .95rem/1 var(--font-body); letter-spacing: 0; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--av) 70%, #fff), var(--av));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 10px -6px var(--av);
}
body[data-mod="mail"] .mbx-item-main { gap: 2px; padding-top: 1px; }
body[data-mod="mail"] .mbx-item-top { align-items: baseline; }
body[data-mod="mail"] .mbx-item-top b { font-size: .92rem; font-weight: 560; color: var(--ink-2); letter-spacing: -.005em; }
body[data-mod="mail"] .mbx-item-top time { font-size: .74rem; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; }
body[data-mod="mail"] .mbx-item-subj { font-size: .86rem; color: var(--ink-2); }
body[data-mod="mail"] .mbx-item-snip { font-size: .8rem; color: var(--muted); line-height: 1.4; }
body[data-mod="mail"] .mbx-item.unread .mbx-item-top b { font-weight: 760; color: var(--ink); }
body[data-mod="mail"] .mbx-item.unread .mbx-item-subj { font-weight: 660; color: var(--ink); }
body[data-mod="mail"] .mbx-item.unread time { color: var(--brand); font-weight: 750; }
body[data-mod="mail"] .mbx-item-side { position: absolute; right: 14px; bottom: 12px; flex-direction: row; align-items: center; gap: 6px; }
body[data-mod="mail"] .mbx-item-side:empty { display: none; }
body[data-mod="mail"] .mbx-item-in:has(.mbx-item-side:not(:empty)) .mbx-item-snip { padding-right: 62px; }
body[data-mod="mail"] .mbx-star { font-size: .92rem; line-height: 1; color: var(--warn); }
body[data-mod="mail"] .mbx-tag { font-size: .62rem; letter-spacing: .02em; padding: 2px 7px; color: var(--ink-2); background: var(--surface-tint-strong); }

/* actions rapides au survol (souris) */
body[data-mod="mail"] .mbx-qa {
    position: absolute; right: 10px; top: 50%; z-index: 2; display: flex; gap: 2px; padding: 3px;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
    opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.96); transition: opacity .15s, transform .18s var(--mbx-ease);
}
body[data-mod="mail"] .mbx-item:hover .mbx-qa,
body[data-mod="mail"] .mbx-item:focus-visible .mbx-qa,
body[data-mod="mail"] .mbx-qa:focus-within { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
body[data-mod="mail"] .mbx-item.swiping .mbx-qa { display: none; }
body[data-mod="mail"] .mbx-qa button {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px;
    background: none; color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s, transform .15s;
}
body[data-mod="mail"] .mbx-qa button:hover { background: var(--surface-tint-strong); color: var(--ink); }
body[data-mod="mail"] .mbx-qa button:active { transform: scale(.9); }
body[data-mod="mail"] .mbx-qa button[data-qa="trash"]:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
body[data-mod="mail"] .mbx-qa button.on { color: var(--warn); }
body[data-mod="mail"] .mbx-qa button.on svg { fill: currentColor; }
@media (hover: none) { body[data-mod="mail"] .mbx-qa { display: none; } }

/* glisser du doigt : l'action apparaît derrière la ligne */
body[data-mod="mail"] .mbx-item[data-swipe] { background: color-mix(in srgb, var(--ok) 45%, var(--surface-2)); }
body[data-mod="mail"] .mbx-item[data-swipe="read"] { background: color-mix(in srgb, var(--brand) 45%, var(--surface-2)); }
body[data-mod="mail"] .mbx-item[data-swipe].armed { background: var(--ok); }
body[data-mod="mail"] .mbx-item[data-swipe="read"].armed { background: var(--brand); }
body[data-mod="mail"] .mbx-item[data-swipe]::after {
    content: attr(data-swipe-label); position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end;
    padding: 0 22px; font: 750 .86rem var(--font-body); color: #fff; letter-spacing: .01em;
}
body[data-mod="mail"] .mbx-item[data-swipe="read"]::after { justify-content: flex-start; }
body[data-mod="mail"] .mbx-item.swiping .mbx-item-in { transition: background .15s; }
body[data-mod="mail"] .mbx-item.leaving .mbx-item-in { transition: transform .2s ease-in; }

/* liste vide / pas de compte */
body[data-mod="mail"] .mbx-list-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; }
body[data-mod="mail"] .mbx-list-empty > span {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; color: var(--brand); background: var(--brand-soft);
}
body[data-mod="mail"] .mbx-list-empty p { margin: 0; max-width: 260px; font-size: .9rem; font-weight: 560; color: var(--ink-2); }

/* ==========================================================================
   Volet de lecture
   ========================================================================== */
body[data-mod="mail"] .mbx-reader {
    position: relative; top: auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--surface);
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
body[data-mod="mail"] .mbx-empty { min-height: 100%; gap: 12px; padding: 32px 24px; }
body[data-mod="mail"] .mbx-empty svg { opacity: 1; }
body[data-mod="mail"] .mbx-empty-ico {
    display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 4px; border-radius: 26px; color: var(--brand);
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 70%), var(--brand-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
}
body[data-mod="mail"] .mbx-empty p { margin: 0; }
body[data-mod="mail"] .mbx-empty p b { font-size: 1rem; font-weight: 650; color: var(--ink); }
body[data-mod="mail"] .mbx-keys { font-size: .78rem; color: var(--muted); line-height: 2; }
body[data-mod="mail"] .mbx-keys kbd { margin: 0 2px; }

body[data-mod="mail"] #mbxArticle { display: flex; flex-direction: column; min-height: 100%; padding: 0 28px; }
body[data-mod="mail"] #mbxArticle.mbx-in > :not(.mbx-r-bar) { animation: mbx-fade .26s var(--mbx-ease) both; }

body[data-mod="mail"] .mbx-r-bar {
    position: sticky; top: 0; z-index: 3; margin: 0 -28px 4px; padding: 12px 20px;
    background: var(--glass-strong); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid var(--line);
}
body[data-mod="mail"] .mbx-r-actions { gap: 2px; padding: 3px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
body[data-mod="mail"] .mbx-r-actions .icon-btn {
    width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--ink-2);
}
body[data-mod="mail"] .mbx-r-actions .icon-btn:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); transform: none; }
body[data-mod="mail"] .mbx-r-actions .icon-btn:active { transform: scale(.9); }
body[data-mod="mail"] .mbx-r-actions .icon-btn[data-op="trash"]:hover { color: var(--bad); }
body[data-mod="mail"] .mbx-r-actions .icon-btn.on { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 0; }
body[data-mod="mail"] .mbx-r-actions .icon-btn.on svg { fill: currentColor; }
body[data-mod="mail"] .mbx-back { border-radius: 12px; }
/* mail envoyé (pas d'actions) : sur ordinateur la barre vide disparaît */
@media (min-width: 761px) {
    body[data-mod="mail"] .mbx-r-bar:has(> .mbx-r-actions[hidden]) { display: none; }
    body[data-mod="mail"] .mbx-r-bar:has(> .mbx-r-actions[hidden]) + .mbx-r-subject { margin-top: 26px; }
}

body[data-mod="mail"] .mbx-r-subject {
    margin: 16px 0 16px; font: 750 1.55rem/1.25 var(--font-display); letter-spacing: -.03em; color: var(--ink);
    overflow-wrap: anywhere; text-wrap: pretty;
}
body[data-mod="mail"] .mbx-r-meta { align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
body[data-mod="mail"] .mbx-r-meta .mbx-avatar { width: 44px; height: 44px; font-size: 1.02rem; }
body[data-mod="mail"] #mbxFrom { font-size: .98rem; font-weight: 720; color: var(--ink); overflow-wrap: anywhere; }
body[data-mod="mail"] .mbx-r-meta .item-sub { font-size: .8rem; line-height: 1.45; }
body[data-mod="mail"] .mbx-r-meta .item-sub:empty { display: none; }
body[data-mod="mail"] #mbxDate {
    flex: none; align-self: flex-start; padding: 4px 9px; border-radius: 99px; background: var(--surface-2);
    font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}

body[data-mod="mail"] .mbx-r-tools {
    padding: 10px 12px 10px 14px; border-radius: 14px; margin-bottom: 14px;
    background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 16%, var(--line));
    color: var(--ink-2); font-size: .82rem;
}
body[data-mod="mail"] .mbx-r-tools:has(.is-bad) { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 22%, var(--line)); }
body[data-mod="mail"] .mbx-tools-msg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
body[data-mod="mail"] .mbx-tools-msg svg { flex: none; color: var(--brand); }
body[data-mod="mail"] .mbx-tools-msg.is-bad svg { color: var(--bad); }

body[data-mod="mail"] .mbx-r-body { padding-bottom: 22px; }
body[data-mod="mail"] .mbx-r-body .skeleton { height: 220px !important; border-radius: 16px !important; }
body[data-mod="mail"] .mbx-frame { padding: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
body[data-mod="mail"] .mbx-frame.is-plain { background: transparent; box-shadow: none; border-radius: 0; }

body[data-mod="mail"] .mbx-r-att { gap: 8px; margin: 0 0 22px; }
body[data-mod="mail"] .mbx-r-att > b {
    display: flex; align-items: center; gap: 6px; width: 100%;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body[data-mod="mail"] .mbx-att {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 12px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--line); font-weight: 580; color: var(--ink-2); overflow-wrap: anywhere;
}
body[data-mod="mail"] .mbx-att svg { flex: none; color: var(--brand); }
body[data-mod="mail"] .mbx-att small { font-weight: 500; color: var(--muted); white-space: nowrap; }

/* barre de réponse : collée en bas du volet */
body[data-mod="mail"] .mbx-r-reply {
    position: sticky; bottom: 0; z-index: 3; margin: auto -28px 0; padding: 12px 28px 16px; gap: 8px; flex-wrap: nowrap;
    background: var(--glass-strong); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid var(--line);
}
body[data-mod="mail"] .mbx-r-reply .btn { height: 40px; padding: 0 16px; gap: 7px; border-radius: 99px; font-size: .86rem; white-space: nowrap; }
body[data-mod="mail"] .mbx-r-reply .btn:first-child {
    color: #fff; border-color: transparent; background: var(--brand-gradient);
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
}
body[data-mod="mail"] .mbx-r-reply .btn:first-child:hover { filter: brightness(1.06); }
body[data-mod="mail"] .mbx-lbl-short { display: none; }

/* ==========================================================================
   Rédaction
   ========================================================================== */
body[data-mod="mail"] .mbx-compose-box { width: min(720px, 100%); padding: 22px 24px 20px; }
body[data-mod="mail"] .mbx-compose-box .ai-head { align-items: center; }
body[data-mod="mail"] .mbx-compose-box h3 { font: 750 1.22rem/1.2 var(--font-display); letter-spacing: -.03em; }
body[data-mod="mail"] .mbx-c-row { gap: 8px; min-height: 48px; border-bottom: 1px solid var(--line); transition: border-color .15s; }
body[data-mod="mail"] .mbx-c-row:focus-within { border-bottom-color: color-mix(in srgb, var(--brand) 60%, var(--line)); }
body[data-mod="mail"] .mbx-c-row label { width: 46px; font-size: .8rem; font-weight: 650; transition: color .15s; }
body[data-mod="mail"] .mbx-c-row:focus-within label { color: var(--brand); }
body[data-mod="mail"] .mbx-c-row :is(input, select) { flex: 1; min-width: 0; height: 46px; font-size: .95rem; border: 0; background: transparent; box-shadow: none; }
body[data-mod="mail"] .mbx-c-row :is(input, select):focus { box-shadow: none; outline: none; }
body[data-mod="mail"] .mbx-c-cc {
    flex: none; height: 32px; padding: 0 10px; border-radius: 9px; font: 700 .82rem var(--font-body); transition: background .15s;
}
body[data-mod="mail"] .mbx-c-cc:hover { background: var(--brand-soft); }
body[data-mod="mail"] #composeBody {
    margin-top: 14px; min-height: 260px; padding: 14px 16px; border-radius: 14px; font-size: .96rem; line-height: 1.6;
    background: var(--surface-2); border-color: transparent; transition: background .15s, border-color .15s, box-shadow .15s;
}
body[data-mod="mail"] #composeBody:focus { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
body[data-mod="mail"] .mbx-compose-box .ai-actions { margin-top: 14px; }
body[data-mod="mail"] .mbx-compose-box .ai-quota kbd { font-size: .66rem; padding: 1px 5px; }
body[data-mod="mail"] #composeSend { height: 46px; padding: 0 22px; gap: 8px; border-radius: 14px; font-size: .95rem; }
body[data-mod="mail"] #composeSend.is-sending { opacity: .75; cursor: progress; }

/* ==========================================================================
   Tablette / petit ordinateur : dossiers en ligne au-dessus, liste + lecture
   ========================================================================== */
@media (max-width: 1100px) and (min-width: 761px) {
    body[data-mod="mail"] .mbx { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    body[data-mod="mail"] .mbx-folders {
        grid-column: 1 / -1; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 12px;
        overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); background: var(--surface-2);
    }
    body[data-mod="mail"] .mbx-folders nav { flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    body[data-mod="mail"] .mbx-folders nav::-webkit-scrollbar { display: none; }
    body[data-mod="mail"] .mbx-folders nav button { flex: none; min-height: 38px; padding: 0 12px; gap: 8px; border-radius: 99px; white-space: nowrap; }
    body[data-mod="mail"] .mbx-compose { flex: none; width: auto; height: 40px; padding: 0 16px; border-radius: 12px; order: 3; margin-left: 0; }
    body[data-mod="mail"] .mbx-accounts-link { flex: none; order: 4; margin-top: 0; white-space: nowrap; }
}
@media (max-width: 960px) and (min-width: 761px) {
    body[data-mod="mail"] .mbx {
        height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - 56px);
        height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 56px);
        min-height: 480px;
    }
}

/* ==========================================================================
   Téléphone
   ========================================================================== */
@media (max-width: 760px) {
    body[data-mod="mail"] .mbx {
        display: block; height: auto; min-height: 0; margin-top: 0;
        background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
    }

    /* dossiers : une rangée de puces qui défile, bord à bord */
    body[data-mod="mail"] .mbx-folders {
        flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden;
        margin: 0 -16px 10px; padding: 2px 16px 8px; background: none; border: 0; scroll-padding-inline: 16px;
    }
    body[data-mod="mail"] .mbx-folders nav { order: 1; flex: none; width: auto; flex-direction: row; gap: 8px; overflow: visible; }
    body[data-mod="mail"] .mbx-folders nav button {
        flex: none; height: 40px; min-height: 40px; padding: 0 14px; gap: 7px; border-radius: 99px; white-space: nowrap; font-size: .86rem;
        background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1);
    }
    body[data-mod="mail"] .mbx-folders nav button:hover { background: var(--surface); }
    body[data-mod="mail"] .mbx-folders nav button:hover svg { transform: none; }
    body[data-mod="mail"] .mbx-folders nav button.active {
        background: var(--ink); border-color: var(--ink); color: var(--surface);
        box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ink) 70%, transparent);
    }
    body[data-mod="mail"] .mbx-folders nav button.active svg { color: currentColor; }
    body[data-mod="mail"] .mbx-folders nav button.active b { color: var(--surface); background: color-mix(in srgb, var(--surface) 22%, transparent); }
    body[data-mod="mail"] .mbx-accounts-link { order: 2; flex: none; height: 40px; min-height: 40px; margin: 0; padding: 0 14px; border-radius: 99px; white-space: nowrap; }
    body[data-mod="mail"] .mbx-accounts-link:has(b) { order: 0; }

    /* « Écrire » : bouton flottant (remplace le bouton + sur cette page) */
    body[data-mod="mail"] .fab { display: none !important; }
    body[data-mod="mail"] .mbx-compose {
        position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); z-index: 96;
        order: 9; width: auto; height: 54px; margin: 0; padding: 0 22px 0 18px; border-radius: 18px; gap: 9px; font-size: 1rem;
        box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--brand) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
    }
    body[data-mod="mail"]:has(.modal-overlay.show) .mbx-compose,
    body[data-mod="mail"].mbx-reading .mbx-compose { opacity: 0; pointer-events: none; transform: translateY(20px); }

    /* liste */
    body[data-mod="mail"] .mbx-list {
        display: block; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-1);
    }
    body[data-mod="mail"] .mbx-list-head {
        position: sticky; top: var(--topbar-h); z-index: 5; padding: 10px;
        background: var(--glass-strong); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    }
    body[data-mod="mail"] .mbx-list-title { display: none; }
    body[data-mod="mail"] .mbx-search input { height: 42px; }
    body[data-mod="mail"] .mbx-items { overflow: visible; padding: 4px; }
    body[data-mod="mail"] .mbx-item-in { padding: 13px 12px 13px 18px; }
    body[data-mod="mail"] .mbx-item + .mbx-item .mbx-item-in::before { left: 70px; right: 12px; }
    body[data-mod="mail"] .mbx-item-side { right: 12px; }
    body[data-mod="mail"] .mbx-item-top b { font-size: .95rem; }
    body[data-mod="mail"] .mbx-item-subj { font-size: .88rem; }
    body[data-mod="mail"] .mbx-item-snip { font-size: .82rem; }

    /* lecteur plein écran */
    body[data-mod="mail"] .mbx-reader { display: none; }
    body[data-mod="mail"].mbx-reading .mbx-reader {
        display: block; position: fixed; inset: 0; z-index: 300; height: auto; min-height: 0; max-height: none;
        padding: 0; border: 0; border-radius: 0; background: var(--surface); overflow-y: auto; overscroll-behavior: contain;
        animation: mbx-slide .28s var(--mbx-ease) both;
    }
    body[data-mod="mail"] #mbxArticle { padding: 0 16px; }
    body[data-mod="mail"] #mbxArticle.mbx-in > :not(.mbx-r-bar) { animation: none; }
    body[data-mod="mail"] .mbx-r-bar { margin: 0 -16px 2px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
    body[data-mod="mail"].mbx-reading .mbx-back { display: inline-grid; width: 42px; height: 42px; flex: none; }
    body[data-mod="mail"] .mbx-r-actions .icon-btn { width: 40px; height: 40px; }
    body[data-mod="mail"] .mbx-r-subject { margin: 12px 0 14px; font-size: 1.32rem; }
    body[data-mod="mail"] .mbx-r-meta { gap: 10px; padding-bottom: 14px; margin-bottom: 14px; }
    body[data-mod="mail"] .mbx-r-meta .mbx-avatar { width: 40px; height: 40px; }
    body[data-mod="mail"] .mbx-frame:not(.is-plain) { border-radius: 14px; }
    body[data-mod="mail"] .mbx-r-reply { margin: auto -16px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    body[data-mod="mail"] .mbx-r-reply .btn { flex: 1 1 0; min-width: 0; height: 46px; padding: 0 10px; justify-content: center; font-size: .88rem; }
    body[data-mod="mail"] .mbx-lbl-long { display: none; }
    body[data-mod="mail"] .mbx-lbl-short { display: inline; }

    /* rédaction : plein écran, le texte prend toute la place */
    body[data-mod="mail"] .mbx-compose-box { display: flex; flex-direction: column; min-height: 100%; padding: 20px 16px calc(14px + env(safe-area-inset-bottom)); }
    body[data-mod="mail"] #composeBody { flex: 1 1 auto; min-height: 180px; resize: none; }
    body[data-mod="mail"] .mbx-compose-box .ai-actions { flex-wrap: nowrap; }
    body[data-mod="mail"] .mbx-compose-box .ai-quota { font-size: .72rem; }
    body[data-mod="mail"] #composeSend { flex: none; }
}
/* clavier virtuel ouvert : le bouton flottant s'efface */
@media (max-width: 760px) and (hover: none) {
    body[data-mod="mail"]:has(:is(input:not([type="checkbox"]), textarea, select):focus) .mbx-compose { opacity: 0; pointer-events: none; transform: translateY(20px); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-mod="mail"] .mbx-item-in,
    body[data-mod="mail"] .mbx-qa,
    body[data-mod="mail"] .mbx-compose,
    body[data-mod="mail"] .mbx-folders nav button svg { transition: none; }
    body[data-mod="mail"] #mbxArticle.mbx-in > :not(.mbx-r-bar),
    body[data-mod="mail"].mbx-reading .mbx-reader { animation: none; }
}

/* ====================== Zone : misc ====================== */
/* ==========================================================================
   MonCentre 4 — zone « misc » : Mon compte, Administration, Aide, connexion
   Concaténé après theme3.css. Tout est préfixé par body[data-mod="…"] ou par
   les classes des pages d'authentification (.auth-split).
   ========================================================================== */

/* Couleurs fixes (Android, aperçus de thème) : variantes sombres */
:root { --misc-android: #1f9d5c; --misc-android-bg: rgba(61, 220, 132, .16); }
:root[data-theme="dark"] { --misc-android: #3ddc84; --misc-android-bg: rgba(61, 220, 132, .14); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --misc-android: #3ddc84; --misc-android-bg: rgba(61, 220, 132, .14); }
}

@keyframes misc-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes misc-bar { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ==========================================================================
   Mon compte
   ========================================================================== */
/* L'attribut hidden doit toujours gagner (label, .ai-meter… ont un display propre) */
body[data-mod="account"] [hidden] { display: none !important; }
body[data-mod="account"] .eaw-pill:empty { display: none; }

/* ---------- Carte d'identité ---------- */
body[data-mod="account"] .acc-hero {
    position: relative; display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 20px 22px;
    border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 58%),
        radial-gradient(90% 140% at 100% 100%, color-mix(in srgb, var(--brand-2) 13%, transparent), transparent 60%),
        var(--surface);
    animation: misc-rise .3s var(--ease-spring) both;
}
body[data-mod="account"] .acc-avatar {
    width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 20px; color: #fff;
    font: 800 1.65rem/1 var(--font-display); background: var(--brand-gradient);
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--brand) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
body[data-mod="account"] .acc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-mod="account"] .acc-id > b { font: 750 1.28rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mod="account"] .acc-id > span { font-size: .88rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mod="account"] .acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
body[data-mod="account"] .acc-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px;
    font-size: .72rem; font-weight: 650; color: var(--ink-2); background: var(--surface-tint-strong); text-decoration: none; white-space: nowrap;
}
body[data-mod="account"] a.acc-chip.is-admin { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); transition: background .15s; }
body[data-mod="account"] a.acc-chip.is-admin:hover { background: color-mix(in srgb, var(--bad) 20%, transparent); }
body[data-mod="account"] .acc-logout { flex: none; align-self: flex-start; }

/* ---------- Puces de navigation entre sections (collantes) ---------- */
body[data-mod="account"] .acc-nav {
    position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 30; display: flex; gap: 4px; margin: 0 0 18px; padding: 5px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    border: 1px solid var(--line); border-radius: 16px; background: var(--glass-strong); box-shadow: var(--shadow-1);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
body[data-mod="account"] .acc-nav::-webkit-scrollbar { display: none; }
body[data-mod="account"] .acc-nav a {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 11px;
    font: 600 .84rem var(--font-body); color: var(--ink-2); text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .2s;
}
body[data-mod="account"] .acc-nav a svg { opacity: .65; transition: opacity .15s; }
body[data-mod="account"] .acc-nav a:hover { background: var(--surface-tint); color: var(--ink); }
body[data-mod="account"] .acc-nav a.active { background: var(--ink); color: var(--surface); box-shadow: 0 6px 14px -8px rgba(17, 19, 40, .5); }
body[data-mod="account"] .acc-nav a.active svg { opacity: 1; }

/* ---------- Cartes de réglages ---------- */
body[data-mod="account"] .acc-card { margin-bottom: 16px; scroll-margin-top: calc(var(--topbar-h) + 72px); }
body[data-mod="account"] .acc-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 16px; }
body[data-mod="account"] .acc-hico {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px;
    color: var(--mod); background: color-mix(in srgb, var(--mod) 13%, transparent);
}
body[data-mod="account"] .acc-htxt { flex: 1; min-width: 0; }
body[data-mod="account"] .acc-htxt h2 { margin: 2px 0 3px; font: 700 1.1rem/1.25 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
body[data-mod="account"] .acc-htxt p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
body[data-mod="account"] .acc-htxt p b { color: var(--ink-2); }
body[data-mod="account"] .acc-head .eaw-pill { flex: none; margin-top: 6px; }
body[data-mod="account"] .acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
body[data-mod="account"] .acc-hint { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
body[data-mod="account"] .acc-actions .acc-hint { margin: 0; }
body[data-mod="account"] .acc-sub { margin: 22px 0 8px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* ---------- Choix du thème : aperçus ---------- */
body[data-mod="account"] .acc-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body[data-mod="account"] .acc-theme {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 8px 8px 11px; margin: 0;
    border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--ink-2);
    font: 650 .86rem var(--font-body); text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .2s, transform .2s var(--ease-spring), color .15s;
}
body[data-mod="account"] .acc-theme:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
body[data-mod="account"] .acc-theme:active { transform: scale(.97); }
body[data-mod="account"] .acc-theme[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
body[data-mod="account"] .acc-theme::after {
    content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--brand) 80%, transparent); transform: scale(0); transition: transform .22s var(--ease-spring);
}
body[data-mod="account"] .acc-theme[aria-pressed="true"]::after { transform: scale(1); }
body[data-mod="account"] .acc-theme-lbl { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
/* Aperçus : couleurs fixes volontaires (ils représentent chaque thème, quel que soit le thème actif) */
body[data-mod="account"] .acc-prev { position: relative; display: block; height: 66px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(17, 19, 40, .1); }
body[data-mod="account"] .acc-prev.is-light { background: #f6f7fb; }
body[data-mod="account"] .acc-prev.is-dark { background: #0a0b11; border-color: rgba(255, 255, 255, .1); }
body[data-mod="account"] .acc-prev.is-auto { background: linear-gradient(115deg, #f6f7fb 0 50%, #0a0b11 50% 100%); }
body[data-mod="account"] .acc-prev i { position: absolute; display: block; }
body[data-mod="account"] .acc-prev i:nth-child(1) { left: 9px; top: 9px; width: 30%; height: 8px; border-radius: 99px; background: linear-gradient(135deg, #5b4dff, #a45cff); }
body[data-mod="account"] .acc-prev i:nth-child(2) { left: 9px; right: 9px; top: 25px; height: 14px; border-radius: 5px; }
body[data-mod="account"] .acc-prev i:nth-child(3) { left: 9px; width: 46%; top: 45px; height: 12px; border-radius: 5px; }
body[data-mod="account"] .acc-prev.is-light i:nth-child(n+2) { background: #fff; box-shadow: 0 1px 3px rgba(17, 19, 40, .12); }
body[data-mod="account"] .acc-prev.is-dark i:nth-child(n+2) { background: #1b1f2a; }
body[data-mod="account"] .acc-prev.is-auto i:nth-child(n+2) { background: linear-gradient(115deg, #fff 0 46%, #1b1f2a 46% 100%); box-shadow: 0 1px 3px rgba(17, 19, 40, .12); }

/* ---------- Listes de réglages avec interrupteurs ---------- */
body[data-mod="account"] .acc-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); overflow: hidden; }
body[data-mod="account"] .acc-list-solo { margin-top: 12px; }
body[data-mod="account"] .acc-list-solo:not(:has(> :not([hidden]))) { display: none; }
body[data-mod="account"] .acc-row {
    display: flex; align-items: center; gap: 13px; min-height: 62px; margin: 0; padding: 11px 14px;
    text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; color: var(--ink); cursor: pointer;
    transition: background .15s;
}
body[data-mod="account"] .acc-row + .acc-row { border-top: 1px solid var(--line); }
body[data-mod="account"] label.acc-row:hover { background: var(--surface-tint); }
body[data-mod="account"] .acc-row-static { cursor: default; }
body[data-mod="account"] .acc-row-static form { margin: 0; }
body[data-mod="account"] .acc-row-static .btn { flex: none; }
body[data-mod="account"] .acc-ico {
    width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px;
    color: var(--c, var(--mod)); background: color-mix(in srgb, var(--c, var(--mod)) 14%, transparent);
}
body[data-mod="account"] .acc-ico-google { background: var(--surface); border: 1px solid var(--line); }
body[data-mod="account"] .acc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-mod="account"] .acc-txt b { font-size: .93rem; font-weight: 650; color: var(--ink); line-height: 1.3; }
body[data-mod="account"] .acc-txt small { font-size: .8rem; font-weight: 450; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }

/* Interrupteur (case à cocher restylée : même nom, même id, même envoi du formulaire) */
body[data-mod="account"] .acc-switch {
    -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 0; padding: 0;
    border: none; border-radius: 99px; background: var(--line-strong); cursor: pointer; box-shadow: inset 0 1px 2px rgba(17, 19, 40, .12);
    transition: background .2s ease, box-shadow .2s ease;
}
body[data-mod="account"] .acc-switch::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22); transition: transform .24s var(--ease-spring);
}
body[data-mod="account"] .acc-switch:checked { background: var(--brand-gradient); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--brand) 85%, transparent); }
body[data-mod="account"] .acc-switch:checked::before { transform: translateX(20px); }
body[data-mod="account"] .acc-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
body[data-mod="account"] label.acc-row:active .acc-switch::before { width: 26px; }
body[data-mod="account"] label.acc-row:active .acc-switch:checked::before { transform: translateX(16px); }

/* ---------- Champs (heures calmes, plafond) ---------- */
body[data-mod="account"] .acc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body[data-mod="account"] .acc-field label { margin: 0 0 6px; }
body[data-mod="account"] .acc-field-num { max-width: 280px; }
body[data-mod="account"] .acc-suffix { position: relative; }
body[data-mod="account"] .acc-suffix input { padding-right: 78px; font-variant-numeric: tabular-nums; font-weight: 650; }
body[data-mod="account"] .acc-suffix span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: .84rem; font-weight: 600; color: var(--muted); pointer-events: none; }

/* ---------- Barre « Enregistrer » (collante dès qu'un réglage change) ---------- */
body[data-mod="account"] .acc-savebar {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
body[data-mod="account"] .acc-dirty-msg { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; color: var(--ink-2); }
body[data-mod="account"] .acc-dirty-msg:empty { display: none; }
body[data-mod="account"] .acc-dirty-msg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
body[data-mod="account"] .acc-prefs.is-dirty .acc-savebar {
    position: sticky; bottom: 16px; z-index: 20; margin: 22px -8px 0; padding: 10px 10px 10px 16px;
    border: 1px solid var(--line); border-radius: 18px; background: var(--glass-strong); box-shadow: var(--shadow-3);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    animation: misc-bar .25s var(--ease-spring) both;
}

/* ---------- Assistant IA ---------- */
body[data-mod="account"] .acc-feats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; }
body[data-mod="account"] .acc-feats li {
    position: relative; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
    font-size: .86rem; line-height: 1.45; color: var(--ink-2);
}
body[data-mod="account"] .acc-feats li::before {
    content: ""; position: absolute; left: 12px; top: 12px; width: 15px; height: 15px; background: var(--mod);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-mod="account"] .acc-feats b { color: var(--ink); }
body[data-mod="account"] .acc-feats a { color: var(--mod); font-weight: 650; }
body[data-mod="account"] .acc-keylabel { margin-top: 16px; }
body[data-mod="account"] .ai-meter .m { border-radius: 14px; padding: 11px 14px; }
body[data-mod="account"] .ai-meter .bar i { transition: width .5s var(--ease-spring); }

/* Détails repliables (Assistant IA, Easy@Work) */
body[data-mod="account"] .acc-more { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
body[data-mod="account"] .acc-more summary {
    display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; cursor: pointer; list-style: none;
    font-size: .88rem; font-weight: 650; color: var(--ink-2);
}
body[data-mod="account"] .acc-more summary::-webkit-details-marker { display: none; }
body[data-mod="account"] .acc-more summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; font-weight: 400; color: var(--muted); transition: transform .2s; }
body[data-mod="account"] .acc-more[open] summary::after { transform: rotate(45deg); }
body[data-mod="account"] .acc-more ul { margin: 0; padding: 0 16px 14px 34px; font-size: .84rem; line-height: 1.65; color: var(--ink-2); }
body[data-mod="account"] .eaw-methods summary { min-height: 48px; padding: 0; }
body[data-mod="account"] .eaw-methods details { transition: background .2s; }
body[data-mod="account"] .eaw-methods details[open] { box-shadow: var(--shadow-1); }

/* ---------- Copier un lien ---------- */
body[data-mod="account"] .acc-copy { display: flex; gap: 10px; }
body[data-mod="account"] .acc-copy input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); }
body[data-mod="account"] .btn.is-copied { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
body[data-mod="account"] #icsRegenForm { margin-top: 12px; }

/* ---------- Appli mobile ---------- */
body[data-mod="account"] .acc-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body[data-mod="account"] .acc-app {
    display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface-2); color: var(--ink); text-decoration: none;
    transition: border-color .15s, box-shadow .2s, transform .2s var(--ease-spring), background .15s;
}
body[data-mod="account"] a.acc-app:hover { border-color: color-mix(in srgb, var(--misc-android) 45%, var(--line)); background: var(--surface); box-shadow: var(--shadow-2); transform: translateY(-2px); }
body[data-mod="account"] a.acc-app:active { transform: scale(.98); }
body[data-mod="account"] a.acc-app > svg:last-child { flex: none; color: var(--muted); }
body[data-mod="account"] .acc-app-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; }
body[data-mod="account"] .acc-app-ico.is-android { color: var(--misc-android); background: var(--misc-android-bg); }
body[data-mod="account"] .acc-app-ico.is-ios { color: var(--ink); background: var(--surface-tint-strong); }

/* ---------- Téléphone ---------- */
@media (max-width: 960px) {
    body[data-mod="account"] .acc-prefs.is-dirty .acc-savebar { bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }
    /* La barre d'enregistrement prend la place du bouton + */
    body[data-mod="account"].acc-has-dirty .fab { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 40px)) !important; }
}
@media (max-width: 640px) {
    body[data-mod="account"] .acc-hero { padding: 16px; gap: 13px; border-radius: 22px; }
    body[data-mod="account"] .acc-avatar { width: 52px; height: 52px; border-radius: 17px; font-size: 1.4rem; }
    body[data-mod="account"] .acc-id > b { font-size: 1.12rem; }
    body[data-mod="account"] .acc-logout { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 13px; }
    body[data-mod="account"] .acc-logout span { display: none; }
    body[data-mod="account"] .acc-nav { margin-left: -4px; margin-right: -4px; border-radius: 15px; }
    body[data-mod="account"] .acc-nav a { height: 40px; padding: 0 12px; }
    body[data-mod="account"] .acc-card { scroll-margin-top: calc(var(--topbar-h) + 68px); }
    body[data-mod="account"] .acc-head { flex-wrap: wrap; gap: 12px; }
    body[data-mod="account"] .acc-hico { width: 38px; height: 38px; border-radius: 12px; }
    body[data-mod="account"] .acc-htxt { flex-basis: calc(100% - 50px); }
    body[data-mod="account"] .acc-head .eaw-pill { order: 3; margin: -4px 0 0 50px; }
    body[data-mod="account"] .acc-themes { gap: 8px; }
    body[data-mod="account"] .acc-theme { padding: 6px 6px 10px; font-size: .8rem; border-radius: 14px; }
    body[data-mod="account"] .acc-theme-lbl svg { display: none; }
    body[data-mod="account"] .acc-prev { height: 58px; }
    body[data-mod="account"] .acc-theme::after { top: 11px; right: 11px; width: 18px; height: 18px; background-size: 11px; }
    body[data-mod="account"] .acc-actions > .btn { flex: 1 1 auto; }
    body[data-mod="account"] .acc-row { padding: 11px 12px; gap: 12px; }
    body[data-mod="account"] .acc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-mod="account"] .acc-fields .acc-field:nth-child(3) { grid-column: 1 / -1; }
    body[data-mod="account"] .acc-field-num { max-width: none; }
    body[data-mod="account"] .acc-feats, body[data-mod="account"] .acc-apps { grid-template-columns: minmax(0, 1fr); }
    body[data-mod="account"] .acc-savebar .btn { flex: 1 1 auto; height: 46px; }
    body[data-mod="account"] .acc-prefs.is-dirty .acc-savebar { margin-left: -6px; margin-right: -6px; padding: 8px 8px 8px 14px; }
    body[data-mod="account"] .acc-prefs.is-dirty .acc-savebar .btn { flex: 0 0 auto; }
    body[data-mod="account"] .acc-copy .btn span { display: none; }
    body[data-mod="account"] .acc-copy .btn { width: 46px; padding: 0; justify-content: center; }
    body[data-mod="account"] .eaw-foot .btn { width: 100%; height: 42px; }
}

/* ==========================================================================
   Administration
   ========================================================================== */
body[data-mod="admin"] [hidden] { display: none !important; }
body[data-mod="admin"] .adm-title { margin: 30px 0 12px; font: 700 1.12rem var(--font-display); letter-spacing: -.02em; color: var(--ink); }
body[data-mod="admin"] .card + .card { margin-top: 16px; }
body[data-mod="admin"] .card-head { align-items: center; }
body[data-mod="admin"] .card-head form { margin: 0; }
body[data-mod="admin"] .adm-count {
    display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px;
    font: 750 .7rem var(--font-body); letter-spacing: 0; color: var(--ink-2); background: var(--surface-tint-strong);
}
body[data-mod="admin"] .adm-count.is-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }

/* Chiffres clés */
body[data-mod="admin"] .adm-kpis { margin-bottom: 18px; }
body[data-mod="admin"] .adm-kpis .kpi-card { animation: misc-rise .3s var(--ease-spring) both; }
body[data-mod="admin"] .adm-kpis .kpi-card:nth-child(2) { animation-delay: .04s; }
body[data-mod="admin"] .adm-kpis .kpi-card:nth-child(3) { animation-delay: .08s; }
body[data-mod="admin"] .adm-kpis .kpi-card:nth-child(4) { animation-delay: .12s; }
body[data-mod="admin"] .adm-kpi-sub { display: block; margin-top: 4px; font-size: .78rem; font-weight: 550; color: var(--muted); }

/* Comptes en attente */
body[data-mod="admin"] .adm-pending { border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 7%, var(--surface)), var(--surface) 70%); }
body[data-mod="admin"] .adm-pending .card-head h3 { color: var(--warn); }

/* Tuiles système */
body[data-mod="admin"] .adm-sys { align-items: stretch; }
body[data-mod="admin"] .adm-tile { display: flex; flex-direction: column; gap: 10px; margin: 0; }
body[data-mod="admin"] .adm-tile > p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
body[data-mod="admin"] .adm-tile > p code { font-size: .8em; padding: 1px 5px; border-radius: 5px; background: var(--surface-tint); }
body[data-mod="admin"] .adm-tile > form, body[data-mod="admin"] .adm-tile > .adm-copy { margin-top: auto; }
body[data-mod="admin"] .adm-tile > form .btn { width: 100%; }
body[data-mod="admin"] .adm-tile .adm-small { font-size: .76rem; color: var(--muted); }
body[data-mod="admin"] .adm-tile-head { display: flex; align-items: center; gap: 12px; }
body[data-mod="admin"] .adm-tile-head h3 { margin: 0 0 3px; font: 700 1rem var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
body[data-mod="admin"] .adm-tile-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--mod); background: color-mix(in srgb, var(--mod) 13%, transparent); }
body[data-mod="admin"] .adm-state { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--mod); }
body[data-mod="admin"] .adm-state.is-plain { color: var(--muted); font-weight: 600; }
body[data-mod="admin"] .adm-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod) 20%, transparent); }
body[data-mod="admin"] .adm-tile.is-on { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 7%, var(--surface)), var(--surface) 70%); }
body[data-mod="admin"] .adm-tile.is-on .adm-state i { animation: misc-pulse 1.6s ease-in-out infinite; }
@keyframes misc-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bad) 8%, transparent); } }
body[data-mod="admin"] .adm-sys > .card, body[data-mod="admin"] .adm-kpis > .card { margin-top: 0; }
body[data-mod="admin"] .adm-copy { display: flex; gap: 8px; }
body[data-mod="admin"] .adm-copy input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
body[data-mod="admin"] .adm-copy .btn { flex: none; width: 44px; height: 44px; }

/* Utilisateurs */
body[data-mod="admin"] .adm-user { flex-wrap: nowrap; align-items: center; }
body[data-mod="admin"] .adm-avatar {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px;
    font: 800 1.05rem/1 var(--font-display); color: var(--brand); background: var(--brand-soft);
}
body[data-mod="admin"] .adm-avatar.is-admin { color: #fff; background: var(--brand-gradient); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
body[data-mod="admin"] .adm-user .item-main { flex: 1 1 auto; }
body[data-mod="admin"] .adm-user .item-sub { overflow-wrap: anywhere; }
body[data-mod="admin"] .adm-meta { font-size: .74rem; opacity: .9; }
body[data-mod="admin"] .adm-user .item-actions { flex-wrap: nowrap; gap: 6px; }
body[data-mod="admin"] .adm-user .item-actions form { margin: 0; }
body[data-mod="admin"] .badge.adm-admin { color: var(--brand); background: var(--brand-soft); }
body[data-mod="admin"] .badge.adm-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
body[data-mod="admin"] .badge.adm-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

/* Journaux */
body[data-mod="admin"] .adm-table-wrap { overflow-x: auto; margin: 0 -4px; border: 1px solid var(--line); border-radius: 14px; }
body[data-mod="admin"] .adm-table { min-width: 100%; }
body[data-mod="admin"] .adm-table th { position: sticky; top: 0; background: var(--surface-2); padding-top: 10px; padding-bottom: 10px; }
body[data-mod="admin"] .adm-table td { padding-top: 10px; padding-bottom: 10px; }
body[data-mod="admin"] .adm-table tbody tr { transition: background .15s; }
body[data-mod="admin"] .adm-table tbody tr:hover { background: var(--surface-tint); }
body[data-mod="admin"] .adm-table tbody tr:last-child td { border-bottom: none; }
body[data-mod="admin"] .adm-table tr.is-bad td { background: color-mix(in srgb, var(--bad) 5%, transparent); }
body[data-mod="admin"] .adm-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-mod="admin"] .adm-mono { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
body[data-mod="admin"] .adm-log {
    margin: 0; max-height: 460px; overflow: auto; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font: .76rem/1.6 var(--font-mono); color: var(--ink-2);
}
body[data-mod="admin"] .adm-allgood { display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 16px; border-radius: 14px; font-size: .9rem; font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }

/* Quota IA */
body[data-mod="admin"] .aiq .aiq-g { transition: border-color .15s, box-shadow .2s; }
body[data-mod="admin"] .aiq .aiq-g:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
body[data-mod="admin"] .aiq details > summary { min-height: 40px; display: flex; align-items: center; }

@media (max-width: 960px) {
    body[data-mod="admin"] .adm-sys { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    body[data-mod="admin"] .adm-title { margin-top: 24px; }
    body[data-mod="admin"] .col-optional { display: none; }
    body[data-mod="admin"] .adm-table th, body[data-mod="admin"] .adm-table td { padding-left: 10px; padding-right: 10px; font-size: .82rem; }
    body[data-mod="admin"] .adm-user { flex-wrap: wrap; }
    body[data-mod="admin"] .adm-user .item-main { flex: 1 1 calc(100% - 56px); }
    body[data-mod="admin"] .adm-user .item-actions { flex: 1 1 100%; justify-content: flex-end; padding-left: 52px; }
    body[data-mod="admin"] .adm-user .item-actions .btn-icon { width: 42px; height: 42px; }
    body[data-mod="admin"] .adm-pending .item-actions form { flex: 1 1 0; }
    body[data-mod="admin"] .adm-pending .item-actions .btn { width: 100%; }
}

/* ==========================================================================
   Aide
   ========================================================================== */
body[data-mod="help"] [hidden] { display: none !important; }
body[data-mod="help"] .help-hero {
    padding: 34px 32px 30px; border-radius: 28px; isolation: isolate;
    background: radial-gradient(120% 120% at 0% 0%, #7a5cff 0%, transparent 55%), radial-gradient(90% 100% at 100% 100%, #ff6a4d 0%, transparent 60%), #3a2be0;
    box-shadow: 0 30px 60px -34px rgba(58, 43, 224, .7);
}
body[data-mod="help"] .help-hero::after { display: none; }
body[data-mod="help"] .help-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%);
}
body[data-mod="help"] .help-orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }
body[data-mod="help"] .help-orb.o1 { width: 260px; height: 260px; right: -70px; top: -80px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45), transparent 65%); }
body[data-mod="help"] .help-orb.o2 { width: 170px; height: 170px; right: 22%; bottom: -90px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .3), transparent 65%); animation-delay: -6s; }
body[data-mod="help"] .help-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -.035em; max-width: 22ch; }
body[data-mod="help"] .help-hero p { font-size: 1rem; }
body[data-mod="help"] .help-search {
    position: relative; display: flex; align-items: center; max-width: 560px; margin: 0 0 16px; color: var(--brand);
}
body[data-mod="help"] .help-search svg { position: absolute; left: 16px; pointer-events: none; }
body[data-mod="help"] .help-search input {
    height: 52px; padding: 0 16px 0 46px; border: none; border-radius: 16px; background: var(--surface); color: var(--ink); font-size: 1rem;
    box-shadow: 0 14px 30px -14px rgba(10, 6, 60, .55);
}
body[data-mod="help"] .help-search input::placeholder { color: var(--muted); }
body[data-mod="help"] .help-search input:hover { border: none; }
body[data-mod="help"] .help-search input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 14px 30px -14px rgba(10, 6, 60, .55); }
body[data-mod="help"] .help-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body[data-mod="help"] .help-hero .btn { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-mod="help"] .help-hero .btn:hover { background: rgba(255, 255, 255, .26); }
body[data-mod="help"] .help-noresult { margin: 0 0 18px; padding: 16px 18px; border: 1.5px dashed var(--line-strong); border-radius: 16px; text-align: center; font-size: .9rem; }

body[data-mod="help"] .section-title { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-size: 1.2rem; }
body[data-mod="help"] .section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
body[data-mod="help"] .help-card { transition: border-color .2s, box-shadow .25s, transform .25s var(--ease-spring); }
body[data-mod="help"] .help-card:hover { border-color: color-mix(in srgb, var(--c) 30%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
body[data-mod="help"] .help-card h3 { margin-bottom: 12px; }
body[data-mod="help"] .help-ico {
    width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px;
    color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
    box-shadow: 0 8px 16px -9px var(--c);
}
body[data-mod="help"] .help-modules .help-card h3 { font: 700 1rem var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); gap: 10px; }
body[data-mod="help"] .help-card ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }
body[data-mod="help"] .help-card li { position: relative; padding-left: 16px; }
body[data-mod="help"] .help-card li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: .7; }
body[data-mod="help"] .help-card a:not(.link-more) { color: var(--c); font-weight: 650; }
body[data-mod="help"] .help-steps .help-card { padding-top: 22px; }
body[data-mod="help"] .help-steps .help-card h3 { font: 700 1.05rem var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); padding-right: 36px; }
body[data-mod="help"] .step-num { width: 32px; height: 32px; font-size: .95rem; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); box-shadow: 0 8px 16px -9px var(--c); }
body[data-mod="help"] .example { transition: border-color .15s, background .15s; }
body[data-mod="help"] .example:hover { border-color: color-mix(in srgb, var(--c) 35%, var(--line)); background: var(--surface); }

body[data-mod="help"] .shortcuts div { padding: 10px 0; }
body[data-mod="help"] .shortcuts kbd { min-width: 26px; padding: 3px 7px; font-size: .74rem; box-shadow: 0 1px 0 var(--line-strong); }

body[data-mod="help"] .faq { gap: 8px; }
body[data-mod="help"] .faq details.card { overflow: hidden; transition: border-color .2s, box-shadow .2s; }
body[data-mod="help"] .faq details[open] { border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); box-shadow: var(--shadow-2); }
body[data-mod="help"] .faq summary { min-height: 54px; padding: 12px 18px 12px 20px; transition: background .15s, color .15s; }
body[data-mod="help"] .faq summary:hover { background: var(--surface-tint); }
body[data-mod="help"] .faq details[open] summary { color: var(--brand); }
body[data-mod="help"] .faq summary::after {
    content: ""; flex: none; width: 16px; height: 16px; background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s var(--ease-spring), background-color .15s;
}
body[data-mod="help"] .faq details[open] summary::after { transform: rotate(180deg); background: var(--brand); }
body[data-mod="help"] .faq details[open] p { animation: misc-rise .25s var(--ease-spring) both; }
body[data-mod="help"] .faq details p a { color: var(--brand); font-weight: 650; }

@media (max-width: 640px) {
    body[data-mod="help"] .help-hero { padding: 24px 18px 20px; border-radius: 24px; }
    body[data-mod="help"] .help-hero p { font-size: .94rem; }
    body[data-mod="help"] .help-search input { height: 50px; }
    body[data-mod="help"] .help-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    body[data-mod="help"] .section-title { margin-top: 28px; font-size: 1.1rem; }
    body[data-mod="help"] .faq summary { font-size: .92rem; padding-left: 16px; padding-right: 14px; }
    body[data-mod="help"] .faq details p { padding: 0 16px 16px; }
}

/* ==========================================================================
   Pages de connexion / inscription / mot de passe (auth_layout.php)
   Portée : .auth-split (la page de maintenance garde son propre style)
   ========================================================================== */
.auth-split .auth-mobile-brand { display: none; }

/* Panneau d'accueil (ordinateur) : trame de points + cartes en verre plus nettes */
.auth-split .auth-aside { padding: 44px 48px; }
.auth-split .auth-aside::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1.2px); background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(90% 70% at 30% 30%, #000, transparent 75%); mask-image: radial-gradient(90% 70% at 30% 30%, #000, transparent 75%);
}
.auth-split .auth-pitch h2 { text-wrap: balance; }
.auth-split .demo-card { border-radius: 18px; box-shadow: 0 24px 50px -26px rgba(10, 6, 60, .65), inset 0 1px 0 rgba(255, 255, 255, .22); }
.auth-split .auth-demo { animation: misc-rise .5s var(--ease-spring) .1s both; }

/* Côté formulaire : aurore douce + carte en relief */
.auth-split .auth-main {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    padding: 40px 28px; min-height: 100vh; min-height: 100dvh;
    background:
        radial-gradient(60% 45% at 85% 8%, var(--aurora-1), transparent 70%),
        radial-gradient(55% 40% at 10% 95%, var(--aurora-2), transparent 70%),
        var(--bg);
}
.auth-split .auth-card {
    width: min(440px, 100%); padding: 34px 34px 28px; border: 1px solid var(--line); border-radius: 28px;
    background: var(--surface); box-shadow: var(--shadow-3); animation: misc-rise .35s var(--ease-spring) both;
}
.auth-split .auth-card h1 { font-size: 2rem; letter-spacing: -.035em; margin-bottom: 6px; }
.auth-split .auth-card h2 { margin-bottom: 20px; }
.auth-split .auth-form label { margin-top: 16px; font-size: .84rem; font-weight: 650; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.auth-split .auth-form > label:first-of-type, .auth-split .auth-form > input[type="hidden"] + label { margin-top: 4px; }
.auth-split .auth-opt { margin-left: 6px; font-weight: 500; color: var(--muted); font-size: .78rem; }
.auth-split .auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 6px; }
.auth-split .auth-label-row label { margin: 0; }
.auth-split .auth-label-row a { font-size: .82rem; font-weight: 650; color: var(--brand); text-decoration: none; padding: 4px 0; }
.auth-split .auth-label-row a:hover { text-decoration: underline; }
.auth-split .auth-form input:not([type="checkbox"]), .auth-split .auth-form select { background: var(--surface-2); border-color: var(--line-strong); transition: border-color .15s, box-shadow .2s, background .15s; }
.auth-split .auth-form input:not([type="checkbox"]):focus, .auth-split .auth-form select:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.auth-split .auth-form .btn-primary, .auth-split .auth-cta {
    width: 100%; height: 52px; margin-top: 24px; border-radius: 15px; font-size: 1rem; font-weight: 700; letter-spacing: -.005em;
    box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--brand) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.auth-split .auth-cta { display: flex; align-items: center; justify-content: center; margin-top: 8px; text-decoration: none; color: #fff; }
.auth-split .auth-form .btn-primary:hover, .auth-split .auth-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.auth-split .auth-form .btn-primary:active { transform: scale(.98); }
.auth-split .google-btn { height: 50px; border-radius: 15px; font-weight: 650; }
.auth-split .auth-sep { margin: 22px 0 18px; }
.auth-split .auth-link { margin-top: 18px; }
.auth-split .auth-card .alert { border-radius: 14px; margin-bottom: 6px; }
.auth-split .form-hint { margin-top: 8px; }
.auth-split .apk-dl { margin-top: 18px; border-radius: 14px; transition: border-color .15s, transform .2s var(--ease-spring), box-shadow .2s; }
.auth-split .apk-dl svg { color: var(--misc-android); }
.auth-split .apk-dl:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--misc-android); }

/* Jauge de solidité du mot de passe + confirmation */
.auth-split .pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 18px; }
.auth-split .pw-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.auth-split .pw-bars i { height: 5px; border-radius: 99px; background: var(--surface-tint-strong); transition: background .25s; }
.auth-split .pw-label { min-width: 64px; text-align: right; font-size: .76rem; font-weight: 700; color: var(--muted); }
.auth-split .pw-meter[data-score="0"] .pw-bars i:nth-child(-n+1) { background: var(--bad); }
.auth-split .pw-meter[data-score="1"] .pw-bars i:nth-child(-n+1) { background: var(--bad); }
.auth-split .pw-meter[data-score="2"] .pw-bars i:nth-child(-n+2) { background: var(--warn); }
.auth-split .pw-meter[data-score="3"] .pw-bars i:nth-child(-n+3) { background: var(--ok); }
.auth-split .pw-meter[data-score="4"] .pw-bars i { background: var(--ok); }
.auth-split .pw-meter[data-score="0"] .pw-label, .auth-split .pw-meter[data-score="1"] .pw-label { color: var(--bad); }
.auth-split .pw-meter[data-score="2"] .pw-label { color: var(--warn); }
.auth-split .pw-meter[data-score="3"] .pw-label, .auth-split .pw-meter[data-score="4"] .pw-label { color: var(--ok); }
.auth-split .pw-match { margin-top: 7px; font-size: .8rem; font-weight: 650; }
.auth-split .pw-match[hidden] { display: none; }
.auth-split .pw-match.ok { color: var(--ok); }
.auth-split .pw-match.bad { color: var(--bad); }

/* Téléphone : bandeau dégradé avec la marque, carte posée dessus */
@media (max-width: 960px) {
    .auth-body.auth-split .auth-main {
        justify-content: flex-start; padding: calc(26px + env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom));
        background: var(--bg);
    }
    .auth-body.auth-split .auth-main::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 290px; z-index: -1; border-radius: 0 0 36px 36px;
        background: radial-gradient(120% 100% at 0% 0%, #7a5cff 0%, transparent 58%), radial-gradient(90% 90% at 100% 100%, #ff6a4d 0%, transparent 62%), #2b1fb8;
    }
    .auth-body.auth-split .auth-main::after {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 290px; z-index: -1; pointer-events: none; border-radius: 0 0 36px 36px;
        background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px); background-size: 22px 22px;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
    }
    .auth-split .auth-mobile-brand {
        display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 22px; color: #fff; text-align: center;
        animation: misc-rise .35s var(--ease-spring) both;
    }
    .auth-split .auth-mobile-brand .logo-mark { width: 54px; height: 54px; border-radius: 17px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -14px rgba(10, 6, 60, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .auth-split .auth-mobile-brand .logo-mark svg { width: 30px; height: 30px; }
    .auth-split .auth-mobile-brand .brand { font: 800 1.45rem/1.1 var(--font-display); letter-spacing: -.03em; color: #fff; }
    .auth-split .auth-mobile-brand .brand b { font-weight: 800; color: #fff; background: none; -webkit-text-fill-color: #fff; }
    .auth-split .auth-mobile-brand small { font-size: .86rem; color: rgba(255, 255, 255, .82); }
    .auth-split .auth-card .logo-mark { display: none; }
    .auth-split .auth-card { width: min(460px, 100%); padding: 26px 20px 22px; border-radius: 26px; animation-delay: .05s; }
    .auth-split .auth-card h1 { font-size: 1.65rem; }
    .auth-split .auth-card h2 { font-size: .95rem; margin-bottom: 16px; }
}
@media (max-width: 380px) {
    .auth-split .auth-card { padding: 22px 16px 20px; }
}

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body[data-mod="account"] .acc-hero, body[data-mod="account"] .acc-prefs.is-dirty .acc-savebar,
    body[data-mod="admin"] .adm-kpis .kpi-card, body[data-mod="admin"] .adm-tile.is-on .adm-state i,
    body[data-mod="help"] .help-orb, body[data-mod="help"] .faq details[open] p,
    .auth-split .auth-card, .auth-split .auth-demo, .auth-split .auth-mobile-brand { animation: none; }
    body[data-mod="account"] .acc-theme:hover, body[data-mod="account"] a.acc-app:hover, body[data-mod="help"] .help-card:hover,
    .auth-split .auth-form .btn-primary:hover, .auth-split .apk-dl:hover { transform: none; }
}