/* =========================================================
   Finances & Élevage — design chaleureux
   ========================================================= */
:root {
  --bg: #f6f8fc;
  --bg-glow: #e6edfb;
  --surface: #ffffff;
  --surface-2: #f1f4fa;
  --surface-3: #e7ecf5;
  --text: #0f172a;
  --muted: #5b6478;
  --faint: #94a0b5;
  --border: #e5eaf2;
  --border-strong: #d3dae6;
  --accent: #2563eb;
  --accent-2: #3b82f6;
  --accent-soft: #e8f0fe;
  --accent-ink: #ffffff;
  --partner: #7c3aed;
  --partner-2: #9f67f5;
  --partner-soft: #f1eafe;
  --pos: #059669;
  --pos-soft: #e3f5ee;
  --neg: #dc2626;
  --neg-soft: #fdecec;
  --amber: #b45309;
  --amber-soft: #fef3e2;
  --c-expense: #2563eb;
  --c-charge: #f59e0b;
  --c-credit: #7c3aed;
  --hero: linear-gradient(135deg, #0b1a40 0%, #1e3a8a 55%, #2563eb 100%);
  --hero-shadow: 0 18px 40px -20px rgba(30, 58, 138, .65);
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px -10px rgba(15, 23, 42, .12);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px -12px rgba(15, 23, 42, .2);
  --shadow-lg: 0 24px 60px -18px rgba(15, 23, 42, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1120; --bg-glow: #111d3a; --surface: #101a2e; --surface-2: #17233b; --surface-3: #1e2b46;
    --text: #e7edf8; --muted: #9ba9c2; --faint: #63728e; --border: #1d2840; --border-strong: #2b3a57;
    --accent: #60a5fa; --accent-2: #93c5fd; --accent-soft: #15284a; --accent-ink: #0a1120;
    --partner: #a78bfa; --partner-2: #c4b5fd; --partner-soft: #261f4d; --pos: #34d399; --pos-soft: #0e2e26; --neg: #f87171; --neg-soft: #3a1518;
    --amber: #fbbf24; --amber-soft: #33280c; --c-expense: #60a5fa; --c-charge: #fbbf24; --c-credit: #a78bfa;
    --hero: linear-gradient(135deg, #0b1a40 0%, #1e3a8a 60%, #2b5fd9 100%);
    --hero-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .55);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 36px -12px rgba(0, 0, 0, .65);
    --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1120; --bg-glow: #111d3a; --surface: #101a2e; --surface-2: #17233b; --surface-3: #1e2b46;
  --text: #e7edf8; --muted: #9ba9c2; --faint: #63728e; --border: #1d2840; --border-strong: #2b3a57;
  --accent: #60a5fa; --accent-2: #93c5fd; --accent-soft: #15284a; --accent-ink: #0a1120;
  --partner: #a78bfa; --partner-2: #c4b5fd; --partner-soft: #261f4d; --pos: #34d399; --pos-soft: #0e2e26; --neg: #f87171; --neg-soft: #3a1518;
  --amber: #fbbf24; --amber-soft: #33280c; --c-expense: #60a5fa; --c-charge: #fbbf24; --c-credit: #a78bfa;
  --hero: linear-gradient(135deg, #0b1a40 0%, #1e3a8a 60%, #2b5fd9 100%);
  --hero-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .55);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 36px -12px rgba(0, 0, 0, .65);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  background-image: radial-gradient(1200px 500px at 85% -10%, var(--bg-glow), transparent 70%);
  background-attachment: fixed;
  font: 15px/1.55 "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h1 { font-size: 28px; font-weight: 750; line-height: 1.2; }
h2 { font-size: 16.5px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
a { color: inherit; }
button { font-family: inherit; }
small, .small { font-size: 12.5px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 650; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.r { text-align: end; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-soft); }

/* ============ Layout ============ */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 16px; border-inline-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 15.5px; padding: 2px 8px 18px; letter-spacing: -.01em; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 19px;
  background: linear-gradient(140deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 14px -6px var(--accent);
}
.brand-mark::before { content: "🐄"; }
.side-add { margin: 0 4px 14px; height: 44px; border-radius: 14px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a svg.i { width: 19px; height: 19px; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.nav a.active svg.i { stroke-width: 2.2; }
#lang-slot { margin-top: auto; }
.btn.lang-btn { width: 100%; justify-content: flex-start; }
.sidebar-foot { margin: 6px 0 0; font-size: 12px; color: var(--faint); padding: 10px 12px; line-height: 1.5; border-radius: 12px; background: var(--surface-2); }
.main { min-width: 0; }
.view { max-width: 1140px; margin: 0 auto; padding: 34px 36px 80px; }
.view > * { animation: rise .45s var(--ease) both; }
.view > *:nth-child(2) { animation-delay: .04s; }
.view > *:nth-child(3) { animation-delay: .08s; }
.view > *:nth-child(4) { animation-delay: .12s; }
.view > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bottom-nav, .fab { display: none; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.eyebrow { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.desc { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 16px; padding: 6px 12px 6px 8px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); }
.back:hover { color: var(--text); }

/* ============ Hero (accueil) ============ */
.hero {
  position: relative; overflow: hidden; border-radius: 26px; padding: 28px 30px; margin-bottom: 18px;
  background: var(--hero); color: #fff;
  box-shadow: var(--hero-shadow);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
}
.hero::after { content: "🐄"; position: absolute; font-size: 150px; inset-inline-end: 24px; top: -28px; opacity: .14; transform: rotate(-8deg); pointer-events: none; }
[dir="rtl"] .hero::after { transform: rotate(8deg) scaleX(-1); }
.hero .eyebrow { color: rgba(255, 255, 255, .78); }
.hero h1 { font-size: 30px; color: #fff; }
.hero-txt { position: relative; z-index: 1; max-width: 560px; }
.hero-txt p.lead { margin: 10px 0 0; font-size: 15.5px; color: rgba(255, 255, 255, .9); }
.hero-txt p.lead b { color: #fff; font-weight: 750; }
.hero-actions { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.hero .btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(6px); }
.hero .btn:hover { background: rgba(255, 255, 255, .26); }
.hero .btn.white { background: #fff; color: var(--hero-ink, #1e3a8a); border-color: #fff; }
.hero .btn.white:hover { background: #f3f5f8; }

/* ============ Cards & KPIs ============ */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow); min-width: 0; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: var(--surface-2); flex: none; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.kpi-value { font-size: 25px; font-weight: 800; letter-spacing: -.025em; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  margin-bottom: 18px; box-shadow: var(--shadow); min-width: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.grid-2 > .card, .grid-main > .card, .grid-main > div > .card:last-child { margin-bottom: 0; }
.link { color: var(--accent); text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 6px 10px; border-radius: 99px; background: var(--accent-soft); }
.link:hover { filter: brightness(.97); }
.empty { text-align: center; padding: 26px 12px 18px; color: var(--muted); font-size: 14.5px; }
.empty-emo { font-size: 38px; width: 72px; height: 72px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 24px; background: var(--surface-2); }
.empty p { margin: 0 auto; max-width: 340px; }
.empty .btn { margin-top: 14px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 650; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s, filter .2s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 16px -8px var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.danger, .icon-btn.danger:hover { color: var(--neg); }
.btn svg.i { width: 17px; height: 17px; }
.icon-btn {
  width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--faint); cursor: pointer; transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg.i { width: 16px; height: 16px; }
.actions { white-space: nowrap; width: 1%; }

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
th { text-align: start; font-size: 12px; font-weight: 700; color: var(--faint); padding: 8px 10px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); }
th.r { text-align: end; }
td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:hover td:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
tbody tr:hover td:last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 1.5px dashed var(--border-strong); border-bottom: 0; font-weight: 750; padding-top: 14px; }
tr.off td { opacity: .45; }
.sub-sm { display: none; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.emo { font-size: 14px; line-height: 1; }
.cat-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--surface-2); flex: none; }
.cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Avatars */
.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 11.5px; font-weight: 800; color: var(--accent-ink); background: linear-gradient(140deg, var(--accent-2), var(--accent));
}
.avatar.pa { background: linear-gradient(140deg, var(--partner-2), var(--partner)); }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; box-shadow: 0 0 0 4px var(--surface); }
.who { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; }

/* Recap table */
.recap th, .recap td { padding: 13px 12px; }
.recap td:first-child { color: var(--muted); font-weight: 500; }
.recap td small { display: block; color: var(--faint); font-size: 12px; font-weight: 500; }
.recap th.col-me, .recap th.col-pa { font-size: 13px; }
.recap .col-me { color: var(--accent); }
.recap .col-pa { color: var(--partner); }
.recap th .who { font-weight: 750; }
.recap tbody tr:hover td { background: transparent; }
.recap tr.subtotal td { border-top: 1.5px dashed var(--border-strong); font-weight: 750; color: var(--text); }
.recap tr.total td { background: var(--accent-soft); font-size: 19px; font-weight: 800; color: var(--text); border-bottom: 0; }
.recap tr.total td:first-child { border-start-start-radius: 14px; border-end-start-radius: 14px; font-size: 15px; color: var(--accent); }
.recap tr.total td:last-child { border-start-end-radius: 14px; border-end-end-radius: 14px; }

/* ============ Badges & bars ============ */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.run { background: var(--amber-soft); color: var(--amber); }
.badge.run::before { animation: pulse 1.8s infinite; }
.badge.done { background: var(--pos-soft); color: var(--pos); }
@keyframes pulse { 50% { opacity: .35; } }
.bar { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transform-origin: 0 50%; animation: grow .8s var(--ease) both; }
[dir="rtl"] .bar > i { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--accent-2), var(--accent)); }
@keyframes grow { from { transform: scaleX(0); } }
.cat-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 12px; margin-bottom: 16px; font-size: 14px; }
.cat-row:last-child { margin-bottom: 0; }
.cat-row .cat-ic { width: 34px; height: 34px; font-size: 16px; grid-row: span 2; }
.cat-row .bar { grid-column: 2 / span 2; height: 8px; }
.cat-row .name { font-weight: 600; }
.stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--surface-2); gap: 3px; }
.stack > i { display: block; height: 100%; border-radius: 99px; animation: grow .8s var(--ease) both; transform-origin: 0 50%; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.legend > span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); font-weight: 600; }
.legend b { color: var(--text); font-weight: 800; font-size: 15.5px; }
.legend i { width: 10px; height: 10px; border-radius: 4px; display: inline-block; margin-inline-end: 6px; vertical-align: -1px; }

/* ============ Lists ============ */
.list { display: flex; flex-direction: column; gap: 2px; }
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 14px; text-decoration: none; transition: background .15s; }
.list-item:hover { background: var(--surface-2); }
.list-item .t { font-weight: 650; }
.list-item .s { font-size: 12.5px; color: var(--muted); }
a.list-item:hover .t { color: var(--accent); }

/* Crédits */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.credit-grid .card { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.stats > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.stats dt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stats dd { margin: 3px 0 0; font-weight: 800; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.progress-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 8px; font-weight: 600; }

/* Projets */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.proj-card { display: block; text-decoration: none; margin: 0; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.proj-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.proj-emo { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(140deg, var(--accent-soft), var(--surface-2)); }
.proj-with { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.mini > div { padding: 10px 12px; border-radius: 13px; background: var(--surface-2); min-width: 0; }
.mini dt { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mini dd { margin: 2px 0 0; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-foot { margin-top: 12px; padding: 11px 14px; border-radius: 13px; background: var(--accent-soft); font-size: 13.5px; color: var(--text); }
.proj-foot b { color: var(--accent); }

/* Étapes du projet */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0 0 18px; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 650; color: var(--muted); box-shadow: var(--shadow); min-width: 0; }
.steps li .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.steps li.done .n { background: var(--pos); color: var(--accent-ink); }
.steps li.done { color: var(--text); }
.steps li.current { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 4px var(--accent-soft); }
.steps li.current .n { background: var(--accent-soft); color: var(--accent); }
.steps li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bilan */
.bilan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.share { padding: 18px; border-radius: 18px; background: var(--surface-2); }
.share-title { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.share-labels { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; gap: 8px; }
.share-labels > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.share-labels .pa { flex-direction: row-reverse; }
.share-labels b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; display: block; line-height: 1.1; }
.share-labels .me b { color: var(--accent); }
.share-labels .pa b { color: var(--partner); text-align: end; }
.share-labels .nm { display: block; font-size: 12px; color: var(--muted); font-weight: 600; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-labels .pa .nm { text-align: end; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px; margin: 12px 0 14px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--partner) var(--p, 50%)); border: 0; padding: 0; }
[dir="rtl"] input[type="range"] { background: linear-gradient(270deg, var(--accent) var(--p, 50%), var(--partner) var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: grab; }
input[type="range"]:focus { box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: all .15s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sale-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.sale-line b { color: var(--text); }
.split { display: flex; height: 16px; border-radius: 99px; overflow: hidden; gap: 3px; margin: 4px 0 10px; }
.split i { display: block; height: 100%; border-radius: 99px; animation: grow .8s var(--ease) both; transform-origin: 0 50%; }
.split .me { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.split .pa { background: linear-gradient(90deg, var(--partner-2), var(--partner)); }
.split-legend { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--muted); font-weight: 600; }
.split-legend > span { display: flex; align-items: center; gap: 8px; }
.split-legend b { color: var(--text); font-weight: 800; font-size: 15px; }
.settle { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--partner-soft); margin-top: 18px; flex-wrap: wrap; }
.settle.solo { background: var(--accent-soft); }
.settle .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--accent); flex: none; }
.settle .txt { font-size: 14.5px; flex: 1; min-width: 180px; }
.settle .amount { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 2px 0; }
.flow { display: flex; align-items: center; gap: 6px; flex: none; }
.flow .arrow { width: 54px; height: 2px; background: repeating-linear-gradient(90deg, var(--partner) 0 6px, transparent 6px 10px); position: relative; animation: dash 1s linear infinite; }
.flow .arrow::after { content: ""; position: absolute; inset-inline-end: -2px; top: -4px; border: 5px solid transparent; border-inline-start: 7px solid var(--partner); }
@keyframes dash { to { background-position: 10px 0; } }
.note { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; line-height: 1.6; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pending { padding: 28px 22px; border: 2px dashed var(--border-strong); border-radius: 18px; text-align: center; }
.pending .big { font-size: 28px; font-weight: 800; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }

/* ============ Formulaires & modale ============ */
.modal { border: 0; padding: 0; background: transparent; width: calc(100% - 32px); max-width: 540px; color: var(--text); overflow: visible; }
.modal[open] { animation: pop .28s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal::backdrop { background: rgba(10, 17, 32, .45); backdrop-filter: blur(4px); }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 40px); overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 24px 6px; }
.modal-head h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
.modal-head .h-emo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--surface-2); }
.modal-body { padding: 14px 24px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.modal-body > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 15px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 22px; }
.modal-foot .btn { height: 44px; padding: 0 20px; }
.field { grid-column: 1 / -1; min-width: 0; }
.field.half { grid-column: auto; }
.field > label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.hint { font-size: 12px; color: var(--faint); margin-top: 6px; }
input, select, textarea {
  width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 13px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { height: auto; min-height: 80px; padding: 12px 14px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.money-input { position: relative; }
.money-input input { padding-inline-end: 56px; font-variant-numeric: tabular-nums; font-weight: 700; }
.money-input span { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 14px; font-weight: 700; pointer-events: none; }
.money-input.big input { height: 64px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; padding-inline-start: 18px; }
.money-input.big span { font-size: 17px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: var(--surface-2); border: 1.5px solid var(--border); }
.seg label { flex: 1; margin: 0; min-width: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label > span { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 8px 10px; border-radius: 11px; font-size: 14px; font-weight: 650; color: var(--muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .15s; }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px -2px rgba(15, 23, 42, .16); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset label { margin: 0; }
.chipset input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chipset label > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 650; color: var(--muted); cursor: pointer; transition: all .15s; }
.chipset label > span:hover { border-color: var(--border-strong); color: var(--text); }
.chipset input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chipset input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.month-input { width: auto; height: 40px; background: var(--surface); }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong); cursor: pointer; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
[dir="rtl"] .switch input:checked + span::after { transform: translateX(-18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; max-width: 600px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ajout rapide */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 24px 24px; }
.quick-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 18px;
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; text-align: start;
  font-size: 14.5px; font-weight: 700; transition: transform .15s var(--ease), border-color .15s, background .15s;
}
.quick-item:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.quick-item .q-emo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--surface); }
.quick-item > span:last-child { display: block; line-height: 1.35; }
.quick-item small { display: block; font-weight: 500; color: var(--muted); margin-top: 3px; font-size: 12.5px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; background: var(--text); color: var(--bg); padding: 12px 18px 12px 12px;
  border-radius: 16px; font-size: 14px; font-weight: 650; box-shadow: var(--shadow-lg);
  transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 50; max-width: calc(100% - 32px);
}
.toast .t-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pos); color: #fff; flex: none; }
.toast .t-ic svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ============ Palettes de couleurs (menu « Couleurs ») ============ */
:root[data-palette="noir"] {
  --bg: #f7f7f7;
  --bg-glow: #ebebeb;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --surface-3: #e8e8e8;
  --text: #111111;
  --muted: #5f5f5f;
  --faint: #9a9a9a;
  --border: #e8e8e8;
  --border-strong: #d4d4d4;
  --accent: #111111;
  --accent-2: #3a3a3a;
  --accent-soft: #efefef;
  --accent-ink: #ffffff;
  --partner: #6b7280;
  --partner-2: #9ca3af;
  --partner-soft: #f1f2f4;
  --pos: #059669;
  --pos-soft: #e3f5ee;
  --c-expense: #111111;
  --c-charge: #a3a3a3;
  --c-credit: #6b7280;
  --hero: linear-gradient(135deg, #0a0a0a 0%, #262626 60%, #404040 100%);
  --hero-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
  --hero-ink: #111111;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="noir"]:not([data-theme="light"]) {
    --bg: #0b0b0b;
    --bg-glow: #161616;
    --surface: #141414;
    --surface-2: #1c1c1c;
    --surface-3: #242424;
    --text: #f2f2f2;
    --muted: #a3a3a3;
    --faint: #6b6b6b;
    --border: #232323;
    --border-strong: #333333;
    --accent: #f5f5f5;
    --accent-2: #ffffff;
    --accent-soft: #262626;
    --accent-ink: #0b0b0b;
    --partner: #9ca3af;
    --partner-2: #d1d5db;
    --partner-soft: #1f2227;
    --c-expense: #f5f5f5;
    --c-charge: #a3a3a3;
    --c-credit: #6b7280;
    --hero: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 60%, #3a3a3a 100%);
    --hero-ink: #111111;
  }
}
:root[data-palette="noir"][data-theme="dark"] {
  --bg: #0b0b0b;
  --bg-glow: #161616;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #242424;
  --text: #f2f2f2;
  --muted: #a3a3a3;
  --faint: #6b6b6b;
  --border: #232323;
  --border-strong: #333333;
  --accent: #f5f5f5;
  --accent-2: #ffffff;
  --accent-soft: #262626;
  --accent-ink: #0b0b0b;
  --partner: #9ca3af;
  --partner-2: #d1d5db;
  --partner-soft: #1f2227;
  --c-expense: #f5f5f5;
  --c-charge: #a3a3a3;
  --c-credit: #6b7280;
  --hero: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 60%, #3a3a3a 100%);
  --hero-ink: #111111;
}
:root[data-palette="turquoise"] {
  --bg: #f3fbfa;
  --bg-glow: #dcf3ef;
  --surface: #ffffff;
  --surface-2: #eef7f6;
  --surface-3: #e2f0ee;
  --text: #102a2a;
  --muted: #557070;
  --faint: #93abab;
  --border: #e1efed;
  --border-strong: #cde2df;
  --accent: #0d9488;
  --accent-2: #14b8a6;
  --accent-soft: #ddf4f0;
  --accent-ink: #ffffff;
  --partner: #f26a55;
  --partner-2: #fb9a8a;
  --partner-soft: #feece8;
  --neg: #e11d48;
  --neg-soft: #fde8ee;
  --c-expense: #0d9488;
  --c-charge: #f59e0b;
  --c-credit: #f26a55;
  --hero: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #2dd4bf 100%);
  --hero-shadow: 0 18px 40px -20px rgba(13, 148, 136, .6);
  --hero-ink: #0f766e;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="turquoise"]:not([data-theme="light"]) {
    --bg: #071615;
    --bg-glow: #0d2523;
    --surface: #0d1f1e;
    --surface-2: #132a28;
    --surface-3: #1a3532;
    --text: #e6f4f2;
    --muted: #94b5b1;
    --faint: #5e7d79;
    --border: #183230;
    --border-strong: #24443f;
    --accent: #2dd4bf;
    --accent-2: #5eead4;
    --accent-soft: #0f3430;
    --accent-ink: #04201d;
    --partner: #fb8a76;
    --partner-2: #fdb4a6;
    --partner-soft: #3a1c17;
    --neg: #fb7185;
    --c-expense: #2dd4bf;
    --c-charge: #fbbf24;
    --c-credit: #fb8a76;
    --hero: linear-gradient(135deg, #0b3b37 0%, #0f766e 60%, #0d9488 100%);
    --hero-ink: #0f766e;
  }
}
:root[data-palette="turquoise"][data-theme="dark"] {
  --bg: #071615;
  --bg-glow: #0d2523;
  --surface: #0d1f1e;
  --surface-2: #132a28;
  --surface-3: #1a3532;
  --text: #e6f4f2;
  --muted: #94b5b1;
  --faint: #5e7d79;
  --border: #183230;
  --border-strong: #24443f;
  --accent: #2dd4bf;
  --accent-2: #5eead4;
  --accent-soft: #0f3430;
  --accent-ink: #04201d;
  --partner: #fb8a76;
  --partner-2: #fdb4a6;
  --partner-soft: #3a1c17;
  --neg: #fb7185;
  --c-expense: #2dd4bf;
  --c-charge: #fbbf24;
  --c-credit: #fb8a76;
  --hero: linear-gradient(135deg, #0b3b37 0%, #0f766e 60%, #0d9488 100%);
  --hero-ink: #0f766e;
}
:root[data-palette="blanc"] {
  --bg: #f5f5f7;
  --bg-glow: #eaf2fd;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #e8e8ed;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #86868b;
  --border: #e5e5ea;
  --border-strong: #d2d2d7;
  --accent: #0071e3;
  --accent-2: #2997ff;
  --accent-soft: #e8f2fd;
  --accent-ink: #ffffff;
  --partner: #af52de;
  --partner-2: #c77dea;
  --partner-soft: #f6ecfb;
  --pos: #248a3d;
  --pos-soft: #e9f7ec;
  --neg: #d70015;
  --neg-soft: #fdebec;
  --c-expense: #0071e3;
  --c-charge: #ff9f0a;
  --c-credit: #af52de;
  --hero: linear-gradient(135deg, #0058b9 0%, #0071e3 55%, #2997ff 100%);
  --hero-shadow: 0 18px 40px -20px rgba(0, 113, 227, .55);
  --hero-ink: #0071e3;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="blanc"]:not([data-theme="light"]) {
    --bg: #000000;
    --bg-glow: #0a1a2e;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --faint: #6e6e73;
    --border: #2c2c2e;
    --border-strong: #3a3a3c;
    --accent: #0a84ff;
    --accent-2: #409cff;
    --accent-soft: #0a2a4d;
    --accent-ink: #ffffff;
    --partner: #bf5af2;
    --partner-2: #d38bf5;
    --partner-soft: #2e1a3a;
    --pos: #30d158;
    --pos-soft: #0f2e19;
    --neg: #ff453a;
    --neg-soft: #3a1210;
    --c-expense: #0a84ff;
    --c-charge: #ffd60a;
    --c-credit: #bf5af2;
    --hero: linear-gradient(135deg, #003a7a 0%, #0060c7 60%, #0a84ff 100%);
    --hero-ink: #0071e3;
  }
}
:root[data-palette="blanc"][data-theme="dark"] {
  --bg: #000000;
  --bg-glow: #0a1a2e;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #6e6e73;
  --border: #2c2c2e;
  --border-strong: #3a3a3c;
  --accent: #0a84ff;
  --accent-2: #409cff;
  --accent-soft: #0a2a4d;
  --accent-ink: #ffffff;
  --partner: #bf5af2;
  --partner-2: #d38bf5;
  --partner-soft: #2e1a3a;
  --pos: #30d158;
  --pos-soft: #0f2e19;
  --neg: #ff453a;
  --neg-soft: #3a1210;
  --c-expense: #0a84ff;
  --c-charge: #ffd60a;
  --c-credit: #bf5af2;
  --hero: linear-gradient(135deg, #003a7a 0%, #0060c7 60%, #0a84ff 100%);
  --hero-ink: #0071e3;
}

/* Menu des couleurs */
.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.modal .palette-grid { grid-template-columns: 1fr 1fr; padding: 8px 24px 24px; }
.pal {
  display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 18px; cursor: pointer; text-align: start;
  border: 2px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 700;
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s;
}
.pal:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pal.on { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pal-preview { height: 64px; border-radius: 12px; position: relative; overflow: hidden; }
.pal-preview i { position: absolute; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; }
.pal-preview i:nth-child(1) { inset-inline-start: 10px; }
.pal-preview i:nth-child(2) { inset-inline-start: 30px; }
.pal-preview i:nth-child(3) { inset-inline-start: 50px; }
.pal-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 2px; }
.pal-name small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pal .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex: none; opacity: 0; }
.pal .tick svg.i { width: 13px; height: 13px; stroke-width: 3; }
.pal.on .tick { opacity: 1; }
.side-tools { display: flex; gap: 6px; }
.side-tools .btn { flex: 1; min-width: 0; padding: 0 10px; }
@media (max-width: 860px) { .palette-grid { grid-template-columns: 1fr 1fr; } }

/* ============ Arabe / RTL ============ */
[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .kpi-value, [dir="rtl"] .settle .amount,
[dir="rtl"] .money-input.big input, [dir="rtl"] .brand { letter-spacing: 0; }
[dir="rtl"] svg.i.flip { transform: scaleX(-1); }
[dir="rtl"] .stack > i, [dir="rtl"] .split i { transform-origin: 100% 50%; }
[dir="rtl"] .back { padding: 6px 8px 6px 12px; }
.mobile-lang { display: none; }

/* ============ Responsive ============ */
@media (max-width: 1060px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bilan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .view { padding: 18px 16px 120px; }
  .grid-2, .grid-main { grid-template-columns: 1fr; }
  .grid-main > div > .card:last-child { margin-bottom: 0; }
  .mobile-lang { display: inline-flex; }
  .bottom-nav {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 22px; padding: 6px; box-shadow: var(--shadow-lg);
  }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--faint); text-decoration: none; padding: 7px 0 6px; min-width: 0; border-radius: 16px; transition: all .2s; }
  .bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav a.active { color: var(--accent); background: var(--accent-soft); }
  .bottom-nav svg.i { width: 21px; height: 21px; }
  .fab {
    display: grid; place-items: center; position: fixed; inset-inline-end: 20px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 21;
    width: 58px; height: 58px; border-radius: 20px; border: 0; cursor: pointer; color: #fff;
    background: linear-gradient(140deg, var(--accent-2), var(--accent)); box-shadow: 0 12px 26px -10px var(--accent);
    transition: transform .15s var(--ease);
  }
  .fab:active { transform: scale(.94); }
  .fab svg.i { width: 26px; height: 26px; stroke-width: 2.4; }
  .toast { bottom: 160px; }
  .modal { width: 100%; max-width: none; margin: auto 0 0; }
  .modal[open] { animation: sheet .32s var(--ease); }
  @keyframes sheet { from { transform: translateY(40px); opacity: .4; } }
  .modal-card { border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); max-height: 92vh; }
  .modal-card::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 10px auto 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  h1 { font-size: 24px; }
  .hero { padding: 22px 20px; border-radius: 24px; }
  .hero h1 { font-size: 25px; }
  .hero::after { font-size: 110px; top: -16px; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; border-radius: 18px; }
  .kpi-value { font-size: 20px; margin-top: 10px; }
  .kpi-ic { width: 30px; height: 30px; font-size: 15px; }
  .card { padding: 18px; border-radius: 20px; }
  .table-wrap { margin: 0 -18px; padding: 0 18px; }
  .hide-sm { display: none; }
  .sub-sm { display: block; }
  td { padding: 11px 6px; }
  th { padding: 8px 6px 10px; }
  .cat-ic { width: 34px; height: 34px; font-size: 16px; }
  .recap th, .recap td { padding: 11px 6px; font-size: 13.5px; }
  .recap tr.total td { font-size: 15.5px; }
  .legend { grid-template-columns: 1fr; }
  .legend > span { flex-direction: row; justify-content: space-between; align-items: center; }
  .credit-grid, .proj-grid { grid-template-columns: 1fr; }
  .modal-body, .settings-form { grid-template-columns: 1fr; }
  .field.half { grid-column: 1 / -1; }
  .settle .amount { font-size: 22px; }
  .flow .arrow { width: 32px; }
  .steps li { padding: 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 600px) { .btn[data-action="palette-menu"] > span { display: none; } }

/* ============ Crédits entre personnes ============ */
.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.section-title h2 { font-size: 19px; }
.section-title p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.credit-card.is-done { opacity: .75; }
.credit-note { margin: -4px 0 14px; font-size: 13.5px; color: var(--muted); padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.credit-left { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.credit-left .big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.due { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.due.neg { color: var(--neg); }
.badge.late { background: var(--neg-soft); color: var(--neg); }
details.reps { margin-top: 12px; border-radius: 14px; background: var(--surface-2); padding: 4px 12px; }
details.reps summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--muted); list-style: none; }
details.reps summary::-webkit-details-marker { display: none; }
details.reps summary::before { content: "▸ "; }
details.reps[open] summary::before { content: "▾ "; }
details.reps .list-item { margin: 0 -6px; padding: 8px 6px; }
[dir="rtl"] .credit-left .big { letter-spacing: 0; }

/* =========================================================
   Motion & finitions premium
   ========================================================= */
:root { --spring: cubic-bezier(.34, 1.4, .5, 1); --smooth: cubic-bezier(.22, .8, .2, 1); }

/* ---------- Barre du haut ---------- */
.topbar {
  position: sticky; top: 0; z-index: 15; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 36px; max-width: 1212px; margin: 0 auto;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.topbar.scrolled { border-bottom-color: var(--border); box-shadow: 0 8px 24px -18px rgba(15, 23, 42, .35); }
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-logo { display: none; width: 32px; height: 32px; font-size: 16px; border-radius: 10px; flex: none; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); min-width: 0; white-space: nowrap; }
.crumbs b { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumb-sep { display: inline-grid; color: var(--faint); }
.crumb-sep svg.i { width: 15px; height: 15px; }
.tb-date { font-size: 13px; color: var(--muted); font-weight: 600; padding: 7px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); }
.tb-kbd {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 650; transition: all .2s;
}
[dir="rtl"] .tb-kbd { padding: 0 6px 0 12px; }
.tb-kbd:hover { color: var(--text); border-color: var(--border-strong); }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font: 700 11.5px/1 inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: inset 0 -1.5px 0 var(--border-strong); }
.tb-mobile { display: none; gap: 2px; }
.tb-user { display: inline-grid; border-radius: 50%; text-decoration: none; transition: transform .2s var(--spring); }
.tb-user:hover { transform: scale(1.06); }
.tb-user .avatar.lg { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.view { padding-top: 14px; }

/* ---------- Indicateur de menu glissant ---------- */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; }
.nav a.active { background: transparent; box-shadow: none; }
.nav-ind {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 13px; opacity: 0; pointer-events: none;
  background: var(--surface); box-shadow: var(--shadow); transition: transform .5s var(--spring), height .3s var(--smooth), width .3s var(--smooth), opacity .2s;
}
.nav-ind::before { content: ""; position: absolute; inset-inline-start: -16px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
[dir="rtl"] .nav-ind::before { border-radius: 4px 0 0 4px; }
.bottom-nav .nav-ind { left: 0; right: auto; background: var(--accent-soft); box-shadow: none; }
.bottom-nav .nav-ind::before { display: none; }
.bottom-nav a { position: relative; z-index: 1; }
.bottom-nav a.active { background: transparent !important; }
.nav a svg.i, .bottom-nav a svg.i { transition: transform .35s var(--spring); }
.nav a.active svg.i, .bottom-nav a.active svg.i { transform: scale(1.08); }

/* ---------- Transitions de page ---------- */
.main { view-transition-name: main; }
::view-transition-old(main) { animation: vt-out .2s var(--smooth) both; }
::view-transition-new(main) { animation: vt-in .38s var(--smooth) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px) scale(.995); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.vt-reveal .main { view-transition-name: none; }
.vt-reveal::view-transition-old(root), .vt-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vt-reveal::view-transition-old(root) { z-index: 1; }
.vt-reveal::view-transition-new(root) { z-index: 2; }

/* Cascade d'apparition */
.view > * { animation: rise .6s var(--smooth) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.view.static > * { animation: none; }
.kpis > .kpi, .proj-grid > .card, .credit-grid > .card, .steps > li { animation: rise .6s var(--smooth) both; }
.kpis > .kpi:nth-child(2), .proj-grid > :nth-child(2), .credit-grid > :nth-child(2), .steps > li:nth-child(2) { animation-delay: .05s; }
.kpis > .kpi:nth-child(3), .proj-grid > :nth-child(3), .credit-grid > :nth-child(3), .steps > li:nth-child(3) { animation-delay: .1s; }
.kpis > .kpi:nth-child(4), .proj-grid > :nth-child(n+4), .credit-grid > :nth-child(n+4), .steps > li:nth-child(4) { animation-delay: .15s; }
.view.static .kpis > .kpi, .view.static .proj-grid > .card, .view.static .credit-grid > .card, .view.static .steps > li { animation: none; }

/* ---------- Halo lumineux & relief des cartes ---------- */
.card, .kpi { transition: transform .35s var(--smooth), box-shadow .35s var(--smooth), border-color .35s, background .35s; }
.card:hover, .kpi:hover, .pal:hover, .quick-item:hover {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 7%, transparent), transparent 45%);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.kpi-ic { transition: transform .4s var(--spring); }
.kpi:hover .kpi-ic { transform: scale(1.12) rotate(-6deg); }
.flash { animation: flash 1s var(--smooth); }
@keyframes flash { 0% { background-color: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background-color: transparent; } }

/* ---------- Boutons : reflet & pression ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%);
}
.btn.primary:hover::after { transition: transform .7s var(--smooth); transform: translateX(120%); }
.btn:active { transform: scale(.96); }
.fab { transition: transform .3s var(--spring), box-shadow .3s; }
.fab:hover { transform: translateY(-2px) rotate(90deg); }
.icon-btn { transition: background .15s, color .15s, transform .25s var(--spring); }
.icon-btn:hover { transform: scale(1.1); }

/* ---------- Graphique ---------- */
.chart-card .card-head { margin-bottom: 8px; }
.trend { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 13px; font-weight: 750; }
.trend small { font-weight: 600; opacity: .75; font-size: 12px; }
.trend.up { background: var(--neg-soft); color: var(--neg); }
.trend.down { background: var(--pos-soft); color: var(--pos); }
.chart { position: relative; height: 220px; margin: 4px -4px 0; touch-action: pan-y; cursor: crosshair; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--smooth) .15s forwards; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 35%, transparent)); }
.chart .area { opacity: 0; animation: fade-in 1s ease .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
.chart .dot {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--surface);
  border: 2.5px solid var(--accent); opacity: 0; transform: scale(.4); animation: pop-dot .5s var(--spring) forwards; animation-delay: calc(.5s + var(--i) * .12s);
  transition: transform .2s var(--spring), box-shadow .2s;
}
.chart .dot.last { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.chart .dot.last::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ping 2.2s ease-out 1.6s infinite; }
.chart .dot.on { transform: scale(1.45); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); }
@keyframes pop-dot { to { opacity: 1; transform: scale(1); } }
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.chart .guide { position: absolute; top: 8px; bottom: 34px; width: 1.5px; margin-left: -.75px; background: linear-gradient(var(--accent), transparent); opacity: .5; pointer-events: none; }
.chart-x { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; pointer-events: none; }
.chart-x span { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 650; color: var(--faint); white-space: nowrap; }
.chart-tip {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 16px)); pointer-events: none; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; border-radius: 12px;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 12px; animation: tip-in .18s var(--smooth);
}
.chart-tip b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.chart-tip span { opacity: .7; font-weight: 600; }
.chart-tip::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; z-index: -1; }
.chart-tip.edge-l { transform: translate(-12%, calc(-100% - 16px)); }
.chart-tip.edge-l::after { left: 12%; }
.chart-tip.edge-r { transform: translate(-88%, calc(-100% - 16px)); }
.chart-tip.edge-r::after { left: 88%; }
@keyframes tip-in { from { opacity: 0; } }

/* ---------- Anneau ---------- */
.donut { position: relative; width: 184px; height: 184px; margin: 6px auto 4px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .track { fill: none; stroke: var(--surface-2); stroke-width: 13; }
.donut .seg {
  fill: none; stroke-width: 13; stroke-linecap: round; stroke-dasharray: var(--p) 100; stroke-dashoffset: var(--o);
  animation: donut-in 1.2s var(--smooth) both; animation-delay: var(--d);
}
@keyframes donut-in { from { stroke-dasharray: 0 100; } }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-c b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.donut-c span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
[dir="rtl"] .donut-c b { letter-spacing: 0; }
.legend.one { grid-template-columns: 1fr; }
.legend.one > span { flex-direction: row; justify-content: space-between; align-items: center; }

/* ---------- Fenetres : ouverture & fermeture ---------- */
.modal[open] { animation: modal-in .42s var(--spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.modal[open]::backdrop { animation: bd-in .3s ease both; }
@keyframes bd-in { from { opacity: 0; } }
.modal.closing { animation: modal-out .2s var(--smooth) forwards; }
.modal.closing::backdrop { animation: bd-out .2s ease forwards; }
@keyframes modal-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes bd-out { to { opacity: 0; } }
.modal-body > * { animation: rise .45s var(--smooth) both; }
.modal-body > :nth-child(2) { animation-delay: .04s; }
.modal-body > :nth-child(3) { animation-delay: .08s; }
.modal-body > :nth-child(n+4) { animation-delay: .12s; }
.chipset label > span { transition: all .2s var(--smooth); }
.chipset input:checked + span { transform: scale(1.04); }
.quick-item { transition: transform .3s var(--spring), border-color .2s, background .2s; }
.quick-grid > * { animation: rise .45s var(--smooth) both; }
.quick-grid > :nth-child(2) { animation-delay: .04s; }
.quick-grid > :nth-child(3) { animation-delay: .08s; }
.quick-grid > :nth-child(4) { animation-delay: .12s; }
.quick-grid > :nth-child(n+5) { animation-delay: .16s; }

/* ---------- Toast avec barre de progression ---------- */
.toast { overflow: hidden; transition: opacity .3s var(--smooth), transform .45s var(--spring); }
.toast .t-ic { animation: tick .5s var(--spring) .1s both; }
@keyframes tick { from { transform: scale(0) rotate(-45deg); } }
.toast .t-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent-2); transform-origin: 0 50%; }
.toast.show .t-bar { animation: shrink 2.4s linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }

/* ---------- Etapes : coche dessinee ---------- */
.steps li.done .n svg.i path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: check-draw .5s var(--smooth) forwards; animation-delay: .35s; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
.view.static .steps li.done .n svg.i path { animation: none; stroke-dashoffset: 0; }
.badge.late::before { animation: pulse 1.2s infinite; }

/* ---------- Bandeau d'accueil : leger mouvement ---------- */
.hero::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none; opacity: .5;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent 70%) 20% 30% / 45% 45% no-repeat,
              radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent 70%) 80% 70% / 40% 40% no-repeat;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(6%, -4%) rotate(8deg); } }
.hero::after { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -8px; } }

/* ---------- Responsive : barre du haut ---------- */
@media (max-width: 1060px) { .tb-date { display: none; } }
@media (max-width: 860px) {
  .topbar { padding: 0 12px 0 16px; height: 58px; }
  [dir="rtl"] .topbar { padding: 0 16px 0 12px; }
  .tb-logo { display: grid; }
  .crumb-app, .crumb-app + .crumb-sep, .tb-kbd, .crumb-mid, .crumb-mid + .crumb-sep { display: none; }
  .tb-mobile { display: inline-flex; }
  .tb-user .avatar.lg { width: 34px; height: 34px; font-size: 13px; }
  .view { padding-top: 10px; }
  .modal.closing { animation: sheet-out .22s var(--smooth) forwards; }
  .modal[open] { animation: sheet .42s var(--spring); }
  .chart { height: 190px; }
  .donut { width: 164px; height: 164px; }
}
@keyframes sheet-out { to { transform: translateY(60px); opacity: 0; } }
@media (max-width: 600px) {
  .tb-mobile .btn { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .main { view-transition-name: none; }
  .chart .line { stroke-dashoffset: 0; }
  .chart .area, .chart .dot { opacity: 1; transform: none; }
}

.chart-tip[hidden], .chart .guide[hidden] { display: none; }

/* =========================================================
   Tableau de bord « comme dans l'écran » (style du prototype)
   ========================================================= */
/* pas de barre du haut sur ordinateur : la page commence directement par le bandeau */
@media (min-width: 861px) {
  .topbar { display: none; }
  .view { padding-top: 30px; }
}

/* bandeau d'accueil compact */
.hero { padding: 26px 32px; border-radius: 24px; align-items: center; min-height: 0; }
.hero h1 { font-size: 30px; margin-top: 2px; }
.hero .eyebrow { margin-bottom: 2px; font-size: 13px; }
.hero::after { font-size: 150px; top: -34px; inset-inline-end: -10px; opacity: .1; }
.hero-actions:empty { display: none; }

/* cartes : bord fin, ombre douce, chiffres plus présents */
.kpi { border-radius: 20px; padding: 20px; }
.kpi-value { font-size: 26px; margin-top: 14px; }
.kpi-ic { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }

/* ligne graphique + partage (proportions de l'écran) */
.grid-main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.chart-card, .share-card { display: flex; flex-direction: column; }
.chart-card .chart { flex: 1; min-height: 260px; }
.share-card .donut { width: 210px; height: 210px; margin: 14px auto 10px; }
.share-card .donut-c b { font-size: 20px; }
.share-legend { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.share-legend span { display: inline-flex; align-items: center; gap: 7px; }
.share-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.share-legend b { color: var(--text); font-weight: 800; }
.share-card .card-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.share-card .card-head > div { min-width: 0; flex: 1; }

@media (max-width: 1060px) {
  .grid-main { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: 22px 20px; }
  .hero h1 { font-size: 24px; }
  .kpi-value { font-size: 20px; }
  .share-card .donut { width: 180px; height: 180px; }
}

.grid-main:has(> .chart-card) { align-items: stretch; }
.grid-main:has(> .chart-card) > .card { margin-bottom: 0; }

/* =========================================================
   Icônes au trait (remplacent les emojis)
   ========================================================= */
/* Logo : marque graphique (pousse stylisée) dans un carré dégradé */
.brand-mark::before {
  content: ""; width: 56%; height: 56%; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M12 20v-9'/%3E%3Cpath d='M12 11C12 7 9 5 4 5c0 4 3 6 8 6z'/%3E%3Cpath d='M12 14c0-4 3-6 8-6 0 4-3 6-8 6z'/%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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M12 20v-9'/%3E%3Cpath d='M12 11C12 7 9 5 4 5c0 4 3 6 8 6z'/%3E%3Cpath d='M12 14c0-4 3-6 8-6 0 4-3 6-8 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bandeau : motif graphique discret au lieu de l'animal */
.hero::after {
  content: ""; width: 220px; height: 220px; top: 50%; inset-inline-end: 28px; transform: translateY(-50%) rotate(-12deg);
  font-size: 0; opacity: .12; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M12 20v-9'/%3E%3Cpath d='M12 11C12 7 9 5 4 5c0 4 3 6 8 6z'/%3E%3Cpath d='M12 14c0-4 3-6 8-6 0 4-3 6-8 6z'/%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='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M12 20v-9'/%3E%3Cpath d='M12 11C12 7 9 5 4 5c0 4 3 6 8 6z'/%3E%3Cpath d='M12 14c0-4 3-6 8-6 0 4-3 6-8 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: none;
}
[dir="rtl"] .hero::after { transform: translateY(-50%) rotate(12deg) scaleX(-1); }

/* Pastilles d'icônes : teinte discrète, trait fin */
.kpi-ic, .cat-ic, .empty-emo, .h-emo, .q-emo, .proj-emo, .sec-ic { color: var(--muted); }
.kpi-ic { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.kpi-ic svg.i { width: 17px; height: 17px; stroke-width: 1.8; }
.kpi:hover .kpi-ic { transform: none; color: var(--accent); }
.cat-ic { background: var(--surface-2); border: 1px solid var(--border); }
.cat-ic svg.i { width: 18px; height: 18px; stroke-width: 1.7; }
.cat-row .cat-ic svg.i { width: 16px; height: 16px; }
.tag .emo { display: inline-grid; color: var(--faint); }
.tag .emo svg.i { width: 14px; height: 14px; stroke-width: 1.9; }
.chipset .emo svg.i { width: 16px; height: 16px; }
.chipset input:checked + span .emo { color: var(--accent); }
.empty-emo { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); color: var(--faint); }
.empty-emo svg.i { width: 24px; height: 24px; stroke-width: 1.6; }
.pending .empty-emo { margin: 0 auto 10px; display: grid; place-items: center; }
.h-emo { color: var(--accent); background: var(--accent-soft); }
.h-emo svg.i { width: 19px; height: 19px; }
.q-emo { color: var(--accent); background: var(--surface); border: 1px solid var(--border); }
.q-emo svg.i { width: 20px; height: 20px; }
.proj-emo { color: var(--accent); background: var(--accent-soft); width: 46px; height: 46px; border-radius: 14px; }
.proj-emo svg.i { width: 22px; height: 22px; stroke-width: 1.8; }
.sec-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; margin-inline-end: 10px; vertical-align: -6px; background: var(--surface); border: 1px solid var(--border); color: var(--accent); }
.sec-ic svg.i { width: 16px; height: 16px; }
.due { display: flex; align-items: center; gap: 6px; }
.due svg.i { width: 15px; height: 15px; flex: none; }
.late-inline { display: inline-flex; align-items: center; gap: 4px; }
.late-inline svg.i { width: 13px; height: 13px; }
.done-foot { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--pos); background: var(--pos-soft); }
.done-foot svg.i { width: 17px; height: 17px; }
.trend svg.i { width: 15px; height: 15px; stroke-width: 2.2; }
.settle .ico svg.i { width: 22px; height: 22px; }
.settle.solo .ico { color: var(--pos); }
.btn[data-action="palette-menu"] svg.i { width: 16px; height: 16px; }
.empty .empty-emo { display: grid; place-items: center; }

/* Type d'élevage du projet */
.type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 650; font-size: 12.5px; }
.type-badge svg.i { width: 15px; height: 15px; color: var(--accent); }
.proj-title { display: flex; align-items: center; gap: 14px; }
.proj-head-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.proj-head-ic svg.i { width: 28px; height: 28px; stroke-width: 1.6; }
.proj-emo svg.i { width: 26px; height: 26px; stroke-width: 1.6; }
@media (max-width: 600px) { .proj-head-ic { width: 44px; height: 44px; border-radius: 14px; } .proj-head-ic svg.i { width: 24px; height: 24px; } }

/* Emojis des types d'élevage (vaches, moutons) */
.animal-emo { display: inline-block; line-height: 1; font-size: 1.15em; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.proj-head-ic .animal-emo { font-size: 28px; }
.proj-emo .animal-emo { font-size: 26px; }
.cat-ic .animal-emo { font-size: 19px; }
.type-badge .animal-emo { font-size: 15px; }
.chipset .emo .animal-emo { font-size: 17px; }
.h-emo .animal-emo { font-size: 20px; }

/* =========================================================
   Passe de nettoyage (skill frontend-design)
   - un seul moment animé : la courbe des dépenses à l'arrivée
   - le reste ne bouge qu'en réponse à une action
   - surfaces à plat, arrondis hiérarchisés, fond uni
   ========================================================= */

/* Fond uni (plus de dégradé décoratif) */
body { background-image: none; }

/* Plus d'apparitions en cascade */
.view > *, .kpis > .kpi, .proj-grid > .card, .credit-grid > .card, .steps > li,
.modal-body > *, .quick-grid > * { animation: none; }

/* Survol : retour discret seulement sur ce qui est cliquable */
.card:hover, .kpi:hover, .pal:hover, .quick-item:hover { background-image: none; }
.card:hover { border-color: var(--border); }
.kpi:hover { transform: none; box-shadow: none; border-color: var(--border); }
.kpi:hover .kpi-ic { transform: none; color: var(--muted); }
.proj-card:hover, a.card:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
.quick-item:hover { transform: none; }
.icon-btn:hover { transform: none; }
.fab:hover { transform: none; }
.btn.primary::after { content: none; }
.btn.primary { box-shadow: none; background: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.side-add { box-shadow: none; }
.chipset input:checked + span { transform: none; }
.nav a.active svg.i, .bottom-nav a.active svg.i { transform: none; }

/* Éléments décoratifs qui bougeaient seuls */
.hero::before { content: none; }
.hero::after { animation: none; }
.badge.run::before { animation: none; }
.chart .dot.last::after { content: none; }
.steps li.done .n svg.i path { animation: none; stroke-dashoffset: 0; }
.toast .t-ic { animation: none; }
.toast .t-bar { display: none; }

/* Le seul moment animé : la courbe se trace, puis les points et l'aire apparaissent ensemble */
.chart .dot { opacity: 0; transform: none; animation: fade-in .5s ease 1.2s forwards; transition: transform .15s ease, box-shadow .15s ease; }
.chart .area { animation: fade-in .6s ease 1.1s forwards; }
.chart .line { filter: none; }

/* Surfaces : à plat, contour fin, arrondis selon la hiérarchie */
.card { box-shadow: none; border-radius: 20px; }
.kpi { box-shadow: none; border-radius: 16px; }
.hero { box-shadow: none; }
.stats > div, .mini > div, .legend > span, .note, .credit-note, .proj-foot, details.reps { border-radius: 10px; }
.kpi-ic, .cat-ic { border-radius: 9px; }
.steps li { box-shadow: none; border-radius: 12px; }
.steps li.current { box-shadow: none; }
.back { box-shadow: none; border: 1px solid var(--border); }
.nav-ind { box-shadow: none; border: 1px solid var(--border); }
.link { background: none; padding: 6px 4px; }
.link:hover { text-decoration: underline; filter: none; }

/* Carte Partage : légende en deux lignes alignées */
.share-legend { flex-direction: column; gap: 8px; }
.sl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); }
.sl-row span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.sl-row b { color: var(--text); font-weight: 800; font-size: 14.5px; }

/* Chevron discret en bout de ligne */
.row-chev { color: var(--faint); display: inline-grid; }
.row-chev svg.i { width: 16px; height: 16px; }

/* =========================================================
   Passe « sur mesure » (skill frontend-design)
   Une audace : le zellige du bandeau. Tout le reste discipliné.
   ========================================================= */

/* Typographie : IBM Plex Sans + Plex Sans Arabic (même famille, latin et arabe) */
body { font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "tnum" 1; }
[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
h1 { font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-weight: 600; }
.card-head p, .kpi-sub, .meta { letter-spacing: 0; }
.brand { font-weight: 600; letter-spacing: -.01em; }
.nav a { font-weight: 500; }
.btn { font-weight: 600; }

/* ---------- L'audace : bandeau au motif zellige ---------- */
.hero { padding: 30px 34px; min-height: 132px; }
.hero h1 { font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
.hero .eyebrow { font-weight: 500; color: rgba(255, 255, 255, .72); }
.hero::after {
  content: ""; position: absolute; inset: 0; inset-inline-start: 34%; width: auto; height: auto; top: 0;
  transform: none; opacity: .2; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='white' stroke-width='.9'%3E%3Crect x='8' y='8' width='24' height='24'/%3E%3Crect x='8' y='8' width='24' height='24' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='4.5'/%3E%3Cpath d='M20 0v3M20 37v3M0 20h3M37 20h3M0 0l8 8M40 0l-8 8M0 40l8-8M40 40l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 44px 44px; background-position: right center;
  -webkit-mask: none; mask: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%);
}
[dir="rtl"] .hero::after { transform: none; background-position: left center; -webkit-mask-image: linear-gradient(to left, transparent, #000 55%); mask-image: linear-gradient(to left, transparent, #000 55%); }

/* ---------- Les chiffres clés : une seule bande de registre ---------- */
.kpis { gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.kpi { border: 0; border-radius: 0; background: var(--surface); padding: 20px 22px 18px; }
.kpi:hover { border: 0; }
.kpi-top { gap: 8px; }
.kpi-ic { width: auto; height: auto; background: none; border: 0; padding: 0; color: var(--faint); }
.kpi-ic svg.i { width: 15px; height: 15px; stroke-width: 1.8; }
.kpi-label { font-size: 13px; font-weight: 500; }
.kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -.025em; margin-top: 10px; }
.kpi-sub { margin-top: 3px; font-size: 12.5px; }
[dir="rtl"] .kpi-value { letter-spacing: 0; }

/* ---------- Graphique : ligne de base seule, valeur écrite au bout de la courbe ---------- */
.chart .grid { stroke: transparent; }
.chart .grid:last-of-type { stroke: var(--border-strong); stroke-dasharray: none; }
.chart .dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 2px; }
.chart .dot.last { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.chart-last {
  position: absolute; transform: translate(-100%, calc(-100% - 14px)); padding: 3px 8px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; animation: fade-in .5s ease 1.3s forwards;
}
.chart:hover .chart-last { opacity: 0 !important; }
.chart-x span { font-weight: 500; }

/* ---------- Finitions : hiérarchie des chiffres et des titres ---------- */
.donut-c b { font-weight: 600; }
.sl-row b, .legend b, .stats dd, .mini dd { font-weight: 600; }
.recap tr.total td { font-weight: 600; }
.settle .amount, .credit-left .big, .pending .big { font-weight: 600; }
.list-item .t { font-weight: 500; }
.num.strong, td.strong, .strong { font-weight: 600; }

/* zellige plus calme : motif plus grand, moins dense */
.hero::after { background-size: 58px 58px; opacity: .15; }
@media (max-width: 600px) { .hero::after { inset-inline-start: 20%; background-size: 46px 46px; } }


/* =========================================================
   Tableau de bord « Bento »
   Grande tuile vedette + tuiles de tailles différentes
   ========================================================= */
.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px;
  grid-template-areas:
    "hero hero hero hero hero hero hero hero owe  owe  owe  owe"
    "hero hero hero hero hero hero hero hero lent lent lent lent"
    "share share share share share cats cats cats cats cats cats cats";
}
.b-hero { grid-area: hero; }
.b-owe { grid-area: owe; }
.b-lent { grid-area: lent; }
.b-share { grid-area: share; }
.b-cats { grid-area: cats; }

/* Tuiles */
.b-tile {
  display: flex; flex-direction: column; min-width: 0; padding: 22px 24px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: border-color .2s ease;
}
a.b-tile:hover { border-color: var(--border-strong); }
a.b-tile:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.b-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.b-label svg.i { width: 15px; height: 15px; color: var(--faint); }
.b-num { display: block; margin-top: auto; padding-top: 18px; font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.b-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--faint); }
.b-empty { margin: auto 0 0; padding-top: 14px; font-size: 14px; color: var(--muted); }
[dir="rtl"] .b-num, [dir="rtl"] .b-big { letter-spacing: 0; }

/* Je dois / On me doit : barre « déjà rendu » */
.b-meter { height: 6px; margin-top: 16px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.b-meter i { display: block; height: 100%; border-radius: inherit; background: var(--pos); }
.b-meter-l { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.b-owe { background: linear-gradient(180deg, color-mix(in srgb, var(--neg) 5%, var(--surface)), var(--surface) 60%); }
.b-lent { background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 5%, var(--surface)), var(--surface) 60%); }

/* Grande tuile vedette */
.b-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 430px;
  padding: 28px 30px 0; border-radius: 28px; color: #fff; background: var(--hero);
}
.b-hero::after {
  content: ""; position: absolute; inset: 0; inset-inline-start: 45%; pointer-events: none; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='white' stroke-width='.9'%3E%3Crect x='8' y='8' width='24' height='24'/%3E%3Crect x='8' y='8' width='24' height='24' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='4.5'/%3E%3Cpath d='M20 0v3M20 37v3M0 20h3M37 20h3M0 0l8 8M40 0l-8 8M0 40l8-8M40 40l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 58px 58px; background-position: right top;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 60%), linear-gradient(to bottom, #000 40%, transparent 85%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 60%), linear-gradient(to bottom, #000 40%, transparent 85%); mask-composite: intersect;
}
[dir="rtl"] .b-hero::after { background-position: left top; -webkit-mask-image: linear-gradient(to left, transparent, #000 60%), linear-gradient(to bottom, #000 40%, transparent 85%); mask-image: linear-gradient(to left, transparent, #000 60%), linear-gradient(to bottom, #000 40%, transparent 85%); }
.b-hero > * { position: relative; z-index: 1; }
.b-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.b-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.b-hero h1 { font-size: 22px; font-weight: 500; letter-spacing: -.015em; color: rgba(255, 255, 255, .92); }
.trend-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 500;
  color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
}
.trend-chip svg.i { width: 15px; height: 15px; }
.b-hero-figure { margin-top: 34px; }
.b-hero .b-label { color: rgba(255, 255, 255, .72); }
.b-big { display: block; margin-top: 8px; font-size: clamp(46px, 6.2vw, 78px); font-weight: 600; letter-spacing: -.045em; line-height: .95; color: #fff; }
.b-hero .b-sub { color: rgba(255, 255, 255, .6); }

/* Courbe blanche intégrée au bas de la tuile */
.chart.chart-hero { margin: auto -30px 0; height: 190px; cursor: crosshair; }
.chart-hero .grid { stroke: transparent !important; }
.chart-hero .line { stroke: #fff; stroke-width: 2.5; }
.chart-hero .dot { border-color: #fff; background: color-mix(in srgb, var(--accent) 70%, #000); }
.chart-hero .dot.last { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .22); }
.chart-hero .dot.on { box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); }
.chart-hero .guide { background: linear-gradient(rgba(255, 255, 255, .7), transparent); }
.chart-hero .chart-x { bottom: 8px; }
.chart-hero .chart-x span { color: rgba(255, 255, 255, .55); }
.chart-hero .chart-x span:first-child { transform: translateX(-10%); }
.chart-hero .chart-x span:last-child { transform: translateX(-90%); }
.chart-hero .chart-tip { background: #fff; color: #0f172a; }

/* Tuile projet / bénéfice élevage */
.b-share-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.b-share-head .b-num { padding-top: 14px; }
.b-animal { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.b-animal .animal-emo { font-size: 30px; }
.b-animal svg.i { width: 26px; height: 26px; color: var(--accent); }
.b-share-body { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.b-share-body .donut { width: 128px; height: 128px; margin: 0; flex: none; }
.b-share-body .donut-c b { font-size: 14px; }
.b-share-body .donut-c span { font-size: 11px; }
.b-share-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.b-proj { margin: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-share-side .b-sub { margin: -6px 0 4px; }
.b-share-side .sl-row i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Tuile « où part votre argent » */
.b-cats-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.b-cats-head .b-sub { margin: 0; }
.b-seg { display: flex; gap: 4px; height: 14px; margin-top: 22px; }
.b-seg i { display: block; height: 100%; border-radius: 4px; min-width: 6px; }
.b-seg i:first-child { border-start-start-radius: 99px; border-end-start-radius: 99px; }
.b-seg i:last-child { border-start-end-radius: 99px; border-end-end-radius: 99px; }
.b-cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin-top: 20px; }
.b-cat { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.b-cat-dot { width: 8px; height: 8px; border-radius: 2px; }
.b-cat-ic { display: inline-grid; color: var(--faint); }
.b-cat-ic svg.i { width: 16px; height: 16px; }
.b-cat-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-cat-pct { font-size: 12.5px; color: var(--faint); }
.b-cat b { font-weight: 600; }

/* Listes sous le bento */
.grid-2 > .span-all { grid-column: 1 / -1; }

/* Responsive */
@media (max-width: 1060px) {
  .bento { grid-template-areas: "hero hero hero hero hero hero hero hero hero hero hero hero" "owe owe owe owe owe owe lent lent lent lent lent lent" "share share share share share share share share share share share share" "cats cats cats cats cats cats cats cats cats cats cats cats"; }
  .b-hero { min-height: 380px; }
}
@media (max-width: 600px) {
  .bento { gap: 10px; }
  .b-tile { padding: 18px; border-radius: 20px; }
  .b-hero { padding: 22px 20px 0; border-radius: 24px; min-height: 340px; }
  .chart.chart-hero { margin: auto -20px 0; height: 150px; }
  .b-num { font-size: 26px; }
  .b-cat-list { grid-template-columns: 1fr; }
  .b-share-body { gap: 14px; }
  .b-share-body .donut { width: 108px; height: 108px; }
}

.b-cat-list { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
.b-cat { padding: 10px 0; }
.b-cat:last-child { border-bottom: 0; }

/* =========================================================
   Tableau de bord « Portefeuille de cartes »
   ========================================================= */
/* En-tête : salutation + trois chiffres */
.w-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.w-kicker { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.w-hello { font-size: 34px; font-weight: 600; letter-spacing: -.03em; }
.w-sum { display: flex; gap: 10px; flex-wrap: wrap; }
.w-sum a { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; min-width: 150px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: border-color .2s; }
.w-sum a:hover { border-color: var(--border-strong); }
.w-sum span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.w-sum b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

/* Deux colonnes : portefeuille + tickets */
.w-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-bottom: 26px; align-items: start; }
.w-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.w-head h2 { font-size: 17px; }
.w-hint { margin: 12px 2px 0; font-size: 12.5px; color: var(--faint); }

/* ---------- La pile de cartes ---------- */
.wallet { --card-h: 252px; --peek: 22px; position: relative; height: calc(var(--card-h) + (var(--n) - 1) * var(--peek)); }
.w-card {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--card-h); overflow: hidden;
  display: flex; flex-direction: column; padding: 22px 24px; border-radius: 26px; color: #fff; cursor: pointer;
  background: var(--hero);
  transform: translateY(calc(var(--i) * var(--peek) * -1)) scale(calc(1 - var(--i) * .05));
  transform-origin: 50% 0; z-index: calc(10 - var(--i));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 22px 40px -24px rgba(0, 0, 0, .55);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}
.w-card:not([data-i="0"]) { filter: brightness(.82) saturate(.9); }
.w-card:not([data-i="0"]):hover { filter: brightness(.95); }
.w-card:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
/* reflet satiné, comme une vraie carte */
.w-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%),
              linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
}
/* motif zellige discret dans le coin */
.w-card::after {
  content: ""; position: absolute; inset: 0; inset-inline-start: 55%; pointer-events: none; opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='white' stroke-width='.9'%3E%3Crect x='8' y='8' width='24' height='24'/%3E%3Crect x='8' y='8' width='24' height='24' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='4.5'/%3E%3Cpath d='M20 0v3M20 37v3M0 20h3M37 20h3M0 0l8 8M40 0l-8 8M0 40l8-8M40 40l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 52px; -webkit-mask-image: linear-gradient(to right, transparent, #000 70%); mask-image: linear-gradient(to right, transparent, #000 70%);
}
[dir="rtl"] .w-card::after { -webkit-mask-image: linear-gradient(to left, transparent, #000 70%); mask-image: linear-gradient(to left, transparent, #000 70%); }
.w-card > * { position: relative; z-index: 1; }
/* couleur de la carte selon le type d'élevage */
.w-card.w-moutons { background: linear-gradient(135deg, color-mix(in srgb, var(--partner) 55%, #000) 0%, var(--partner) 100%); }
.w-card.w-autre { background: linear-gradient(135deg, #1f2937 0%, #475569 100%); }

.w-card-top { display: flex; justify-content: space-between; align-items: center; }
.w-animal { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); }
.w-animal .animal-emo { font-size: 26px; }
.w-animal svg.i { width: 22px; height: 22px; color: #fff; }
.w-status { padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); }
.w-card-mid { margin-top: 14px; }
.w-name { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-meta { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.w-card-big { margin-top: auto; }
.w-card-big span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.w-card-big strong { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.w-card-split { margin-top: 12px; }
.w-split-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.w-split-bar i { display: block; height: 100%; background: #fff; border-radius: inherit; }
.w-split-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.w-split-row b { color: #fff; font-weight: 600; margin-inline-start: 4px; }
[dir="rtl"] .w-hello, [dir="rtl"] .w-card-big strong, [dir="rtl"] .w-name { letter-spacing: 0; }

.w-card-empty {
  width: 100%; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: 26px; border: 2px dashed var(--border-strong); background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.w-card-empty:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Les tickets de crédit ---------- */
.tickets { display: flex; flex-direction: column; gap: 12px; }
.ticket {
  --stub: 128px; --notch: 9px;
  position: relative; display: flex; align-items: stretch; min-height: 82px; text-decoration: none; color: var(--text);
  background: var(--surface); border-radius: 16px;
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform .2s ease;
}
[dir="rtl"] .ticket {
  -webkit-mask: radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket:hover { transform: translateX(3px); }
[dir="rtl"] .ticket:hover { transform: translateX(-3px); }
.t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 18px; border-inline-start: 4px solid var(--neg); border-start-start-radius: 16px; border-end-start-radius: 16px; }
.t-in .t-main { border-inline-start-color: var(--pos); }
.t-dir { font-size: 12px; color: var(--muted); font-weight: 500; }
.t-name { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-meta { font-size: 12.5px; color: var(--muted); }
.t-meta span { display: inline-flex; align-items: center; gap: 5px; }
.t-meta svg.i { width: 13px; height: 13px; }
.t-stub {
  width: var(--stub); flex: none; display: grid; place-items: center; padding: 0 12px;
  border-inline-start: 2px dashed var(--border-strong); background: var(--surface-2);
  border-start-end-radius: 16px; border-end-end-radius: 16px;
}
.t-stub strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.t-out .t-stub strong { color: var(--neg); }
.t-in .t-stub strong { color: var(--pos); }

/* Dépenses sous le portefeuille */
.w-spend { margin-bottom: 18px; }
.w-spend .b-cats { height: 100%; }

@media (max-width: 1060px) {
  .w-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .w-hello { font-size: 26px; }
  .w-sum { width: 100%; }
  .w-sum a { flex: 1; min-width: 0; padding: 10px 12px; }
  .w-sum b { font-size: 15.5px; }
  .wallet { --card-h: 228px; --peek: 18px; }
  .w-card { padding: 18px 20px; border-radius: 22px; }
  .w-card-big strong { font-size: 28px; }
  .ticket { --stub: 108px; }
  .t-stub strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .w-card, .ticket { transition: none; } }

.w-spend .b-cats, .w-spend .chart-card { grid-area: auto; }

/* =========================================================
   Finitions finales : rythme, relief en mode sombre, survols
   ========================================================= */
:root {
  --gap: 20px;            /* écart entre deux blocs voisins */
  --section: 28px;        /* écart entre deux sections */
  --pad: 24px;            /* marge intérieure des cartes */
  --edge: var(--border);  /* contour des cartes */
  --sheen: transparent;   /* reflet sur le haut des cartes (mode sombre) */
  --lift: 0 10px 28px -16px rgba(15, 23, 42, .28);
  --ease-out: cubic-bezier(.22, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge: rgba(255, 255, 255, .075); --sheen: rgba(255, 255, 255, .04);
    --lift: 0 14px 34px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --edge: rgba(255, 255, 255, .075); --sheen: rgba(255, 255, 255, .04);
  --lift: 0 14px 34px -16px rgba(0, 0, 0, .7);
}

/* ---------- Rythme : mêmes marges partout ---------- */
.view { padding: 32px 36px 80px; }
.w-top { margin-bottom: var(--section); }
.w-grid { gap: var(--gap); margin-bottom: var(--section); }
.w-col { min-width: 0; }
.w-head { margin-bottom: 16px; min-height: 28px; }
.grid-main, .grid-2 { gap: var(--gap); margin-bottom: var(--section); }
.w-spend { margin-bottom: var(--section); align-items: stretch; }
.card, .b-tile { padding: var(--pad); border-radius: 22px; }
.view > .card { margin-bottom: var(--section); }
.grid-main > .card, .grid-main > .b-tile, .grid-2 > .card { margin-bottom: 0; }
.card-head { margin-bottom: 18px; }
.chart-card .card-head { margin-bottom: 10px; }
.chart-card .chart { min-height: 240px; margin-inline: -6px; }
.w-spend .b-cats { display: flex; flex-direction: column; }
.b-cats .b-seg { margin-top: 20px; }
.b-cat-list { margin-top: 14px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.b-cat { padding: 13px 0; }
.tickets { gap: 14px; }
.list-item { padding: 12px 10px; }

/* ---------- Relief : contour fin + reflet + verre dépoli (sombre) ---------- */
.card, .b-tile, .w-sum a, .kpi, .steps li, .stats > div {
  border-color: var(--edge);
  background-image: linear-gradient(180deg, var(--sheen), transparent 38%);
}
.card, .b-tile, .w-sum a { box-shadow: inset 0 1px 0 var(--sheen); }
.ticket { box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--sheen); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: radial-gradient(900px 520px at 85% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), radial-gradient(700px 500px at 10% 110%, color-mix(in srgb, var(--partner) 6%, transparent), transparent 70%); background-attachment: fixed; }
  :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .b-tile, :root:not([data-theme="light"]) .w-sum a {
    background-color: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  }
}
:root[data-theme="dark"] body { background-image: radial-gradient(900px 520px at 85% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), radial-gradient(700px 500px at 10% 110%, color-mix(in srgb, var(--partner) 6%, transparent), transparent 70%); background-attachment: fixed; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .b-tile, :root[data-theme="dark"] .w-sum a {
  background-color: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}

/* ---------- Survols fluides ---------- */
.card, .b-tile, .w-sum a, .ticket, .list-item, .kpi, .pal, .quick-item, .chip, .link {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out), color .2s ease;
}
/* cartes d'information : la bordure s'éclaire, sans bouger */
.card:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--edge)); }
/* éléments cliquables : léger soulèvement */
a.card:hover, a.b-tile:hover, .w-sum a:hover, .proj-card:hover, .pal:hover, .quick-item:hover {
  transform: translateY(-2px); box-shadow: var(--lift), inset 0 1px 0 var(--sheen);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--edge));
}
.ticket:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--edge)), var(--lift); }
[dir="rtl"] .ticket:hover { transform: translateY(-2px); }
.list-item:hover { background: var(--surface-2); }
a.list-item:hover .row-chev { color: var(--accent); transform: translateX(2px); }
.row-chev { transition: transform .25s var(--ease-out), color .2s ease; }
/* pile de cartes : la carte survolée se soulève un peu */
.w-card { transition: transform .5s var(--ease-out), filter .3s ease, box-shadow .3s ease; }
.w-card[data-i="0"]:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 30px 50px -26px rgba(0, 0, 0, .65); }
.w-card:not([data-i="0"]):hover { transform: translateY(calc(var(--i) * var(--peek) * -1 - 8px)) scale(calc(1 - var(--i) * .05)); }
/* boutons */
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease, transform .15s var(--ease-out), box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 8px 20px -10px var(--accent); }
.btn.ghost:hover, .btn:not(.primary):hover { border-color: var(--border-strong); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.link { border-radius: 6px; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; text-decoration: none; padding: 2px 0; transition: background-size .3s var(--ease-out), color .2s ease; }
.link:hover { text-decoration: none; background-size: 100% 1.5px; }
[dir="rtl"] .link { background-position: 100% 100%; }
.nav a { transition: color .2s ease, background-color .2s ease; }
.chip:hover { transform: translateY(-1px); }

/* Mobile : un peu moins d'air */
@media (max-width: 860px) {
  :root { --gap: 14px; --section: 22px; --pad: 18px; }
  .view { padding: 14px 16px 120px; }
}
@media (hover: none) {
  a.card:hover, a.b-tile:hover, .w-sum a:hover, .ticket:hover, .btn:hover, .w-card[data-i="0"]:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .b-tile, .w-sum a, .ticket, .btn, .w-card, .link, .row-chev { transition: none !important; }
}

/* =========================================================
   Colonne Crédits : hauteur alignée sur la pile de projets + défilement interne
   ========================================================= */
/* dimensions de la pile partagées par les deux colonnes */
.w-grid { --card-h: 252px; --peek: 22px; }
.wallet { --card-h: inherit; --peek: inherit; }
.w-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-inline-start: 6px;
  border-radius: 99px; font-size: 12px; font-weight: 600; vertical-align: 2px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--edge);
}
.tickets-scroll {
  /* même hauteur que la pile « Mes projets » */
  max-height: calc(var(--card-h) + (var(--n) - 1) * var(--peek));
  overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  /* place pour l'effet de survol et le contour de focus, sans décaler la grille */
  padding: 4px 8px 4px 4px; margin: -4px -8px -4px -4px;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  transition: scrollbar-color .3s ease;
}
[dir="rtl"] .tickets-scroll { padding: 4px 4px 4px 8px; margin: -4px -4px -4px -8px; }
.tickets-scroll:hover, .tickets-scroll:focus-visible { scrollbar-color: var(--border-strong) transparent; }
.tickets-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
/* barre de défilement ultra-fine (Chrome, Edge, Safari) */
.tickets-scroll::-webkit-scrollbar { width: 6px; }
.tickets-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.tickets-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.tickets-scroll:hover::-webkit-scrollbar-thumb, .tickets-scroll:focus-visible::-webkit-scrollbar-thumb { background: var(--border-strong); }
.tickets-scroll::-webkit-scrollbar-thumb:hover { background: var(--faint); }
/* fondus en haut / en bas pour signaler la suite de la liste */
.tickets-scroll.can-scroll:not(.at-end) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.tickets-scroll.can-scroll:not(.at-top):not(.at-end) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 36px), transparent); }
.tickets-scroll.can-scroll.at-end:not(.at-top) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }

@media (max-width: 600px) {
  .w-grid { --card-h: 228px; --peek: 18px; }
  /* sur mobile les colonnes s'empilent : on garde une hauteur confortable */
  .tickets-scroll { max-height: max(calc(var(--card-h) + (var(--n) - 1) * var(--peek)), 300px); }
}
@media (prefers-reduced-motion: reduce) { .tickets-scroll { scroll-behavior: auto; } }

/* =========================================================
   Direction artistique haut de gamme
   ambiance lumineuse · verre · bordures lumineuses · chiffres · survols
   ========================================================= */
:root {
  /* mode clair : sobre, mêmes principes en plus discret */
  --glass-bg: var(--surface);
  --glass-blur: 0px;
  --ring: linear-gradient(var(--border), var(--border));
  --ring-hover: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 45%, color-mix(in srgb, var(--partner) 40%, transparent));
  --glow: 0 18px 40px -24px rgba(15, 23, 42, .28);
  --inner: color-mix(in srgb, var(--surface-2) 100%, transparent);
  --num-weight: 700;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: rgba(9, 9, 11, .7);              /* bg-zinc-950/70 */
    --glass-blur: 24px;                          /* backdrop-blur-xl */
    --ring: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .12));
    --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 26px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent);
    --inner: rgba(255, 255, 255, .035);
    --muted: #a1a1aa;                            /* text-zinc-400 */
    --faint: #71717a;                            /* text-zinc-500 */
  }
}
:root[data-theme="dark"] {
  --glass-bg: rgba(9, 9, 11, .7);
  --glass-blur: 24px;
  --ring: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .12));
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 26px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent);
  --inner: rgba(255, 255, 255, .035);
  --muted: #a1a1aa;
  --faint: #71717a;
}

/* ---------- Ambiance lumineuse : halos diffus derrière tout ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: #050508;
    background-image:
      radial-gradient(60vw 45vw at 8% -10%, rgba(79, 70, 229, .22), transparent 65%),
      radial-gradient(55vw 40vw at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%),
      radial-gradient(50vw 40vw at 60% 115%, color-mix(in srgb, var(--partner) 12%, transparent), transparent 70%);
    background-attachment: fixed;
  }
  :root:not([data-theme="light"]) .sidebar { background: rgba(9, 9, 11, .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-inline-end-color: rgba(255, 255, 255, .06); }
}
:root[data-theme="dark"] body {
  background-color: #050508;
  background-image:
    radial-gradient(60vw 45vw at 8% -10%, rgba(79, 70, 229, .22), transparent 65%),
    radial-gradient(55vw 40vw at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%),
    radial-gradient(50vw 40vw at 60% 115%, color-mix(in srgb, var(--partner) 12%, transparent), transparent 70%);
  background-attachment: fixed;
}
:root[data-theme="dark"] .sidebar { background: rgba(9, 9, 11, .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-inline-end-color: rgba(255, 255, 255, .06); }

/* ---------- Cartes de verre + bordure lumineuse ---------- */
.card, .b-tile, .w-sum a {
  position: relative; isolation: isolate;
  background-color: var(--glass-bg); background-image: none;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border-color: transparent; box-shadow: none;
}
/* filet de 1 px en dégradé (plus lumineux sur les angles), puis halo coloré au survol */
.card::before, .b-tile::before, .w-sum a::before,
.card::after, .b-tile::after, .w-sum a::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card::before, .b-tile::before, .w-sum a::before { background: var(--ring); }
.card::after, .b-tile::after, .w-sum a::after { background: var(--ring-hover); opacity: 0; transition: opacity .35s var(--ease-out); }
/* surfaces intérieures (blocs de stats, légendes, notes) */
.stats > div, .mini > div, .legend > span, .note, .credit-note, details.reps { background: var(--inner); }
/* tickets de crédit : verre + contour lumineux */
.ticket { background: var(--glass-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06); }
.t-stub { background: var(--inner); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ticket { box-shadow: inset 0 0 0 1px var(--border); } }
:root[data-theme="light"] .ticket { box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- Typographie des chiffres ---------- */
.kpi-value, .w-sum b, .b-num, .b-big, .w-card-big strong, .t-stub strong, .donut-c b, .settle .amount,
.credit-left .big, .pending .big, .recap tr.total td, .proj-foot b, .stats dd, .mini dd {
  font-weight: var(--num-weight); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.w-sum b { font-size: 22px; }
.w-card-big strong { font-size: 36px; }
.t-stub strong { font-size: 18px; }
.list-item .num.strong, .sl-row b, .b-cat b, td.num.strong { font-weight: 650; letter-spacing: -.02em; }
[dir="rtl"] .kpi-value, [dir="rtl"] .w-sum b, [dir="rtl"] .b-num, [dir="rtl"] .w-card-big strong, [dir="rtl"] .t-stub strong { letter-spacing: 0; }
/* sous-titres adoucis */
.card-head p, .kpi-sub, .b-sub, .list-item .s, .t-meta, .t-dir, .w-kicker, .w-sum span, .meta, .progress-line, .b-meter-l, .w-hint { color: var(--muted); }
.w-sum span, .t-dir, .kpi-label { font-weight: 500; letter-spacing: .005em; }

/* ---------- Survols : élévation légère + halo ---------- */
.card, .b-tile, .w-sum a, .ticket {
  transition: transform .3s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s ease;
}
.card:hover, .b-tile:hover, .w-sum a:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.card:hover::after, .b-tile:hover::after, .w-sum a:hover::after { opacity: 1; }
.ticket:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--accent) 60%, transparent); }
.w-card[data-i="0"]:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 30px 70px -28px color-mix(in srgb, var(--accent) 70%, #000); }
/* les grandes cartes de contenu (tableaux, listes longues) restent posées : halo seul */
.view > .card:hover { transform: none; }

@media (hover: none) {
  .card:hover, .b-tile:hover, .w-sum a:hover, .ticket:hover { transform: none; box-shadow: none; }
  .card:hover::after, .b-tile:hover::after, .w-sum a:hover::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .b-tile, .w-sum a, .ticket, .card::after, .b-tile::after, .w-sum a::after { transition: none !important; }
}

/* =========================================================
   Tableau de bord Bento asymétrique (refonte complète)
   ========================================================= */
/* Grain très fin sur tout le fond : casse l'aplat sans se voir */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body::before { opacity: .035; } }
:root[data-theme="light"] body::before { opacity: .035; }
/* halo très discret en mode clair aussi */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body { background-image: radial-gradient(60vw 40vw at 0% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), radial-gradient(50vw 40vw at 100% 0%, color-mix(in srgb, var(--partner) 5%, transparent), transparent 70%); background-attachment: fixed; }
}
:root[data-theme="light"] body { background-image: radial-gradient(60vw 40vw at 0% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), radial-gradient(50vw 40vw at 100% 0%, color-mix(in srgb, var(--partner) 5%, transparent), transparent 70%); background-attachment: fixed; }

.bx-top { margin-bottom: 22px; }

/* ---------- La grille : héros à gauche, trois blocs à droite, asymétrie inversée en bas ---------- */
.bx-grid {
  display: grid; gap: 18px; margin-bottom: 28px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero spend spend spend spend spend"
    "hero hero hero hero hero hero hero cred  cred  cred  cred  cred"
    "hero hero hero hero hero hero hero part  part  part  part  part"
    "cats cats cats cats cats rec   rec   rec   rec   rec   rec   rec";
}
.bx-hero { grid-area: hero; }
.bx-spend { grid-area: spend; }
.bx-cred { grid-area: cred; }
.bx-part { grid-area: part; }
.bx-grid > .b-cats { grid-area: cats; }
.bx-recent { grid-area: rec; }
.bx { min-width: 0; }

/* En-têtes de blocs */
.bx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bx-num { display: block; font-size: 34px; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
[dir="rtl"] .bx-num { letter-spacing: 0; }

/* ---------- Carte héros : le projet principal ---------- */
.bx-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 22px;
  padding: 28px; border-radius: 30px; color: #fff; text-decoration: none; min-height: 560px;
  background: var(--hero);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -34px color-mix(in srgb, var(--accent) 70%, #000);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.bx-hero.bx-moutons { background: linear-gradient(140deg, color-mix(in srgb, var(--partner) 50%, #000) 0%, var(--partner) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -34px color-mix(in srgb, var(--partner) 70%, #000); }
.bx-hero.bx-autre { background: linear-gradient(140deg, #18181b 0%, #3f3f46 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -34px rgba(0, 0, 0, .7); }
/* lumière douce + zellige en filigrane */
.bx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 60% at 0% 0%, rgba(255, 255, 255, .2), transparent 60%), radial-gradient(70% 50% at 100% 100%, rgba(0, 0, 0, .25), transparent 70%);
}
.bx-hero::after {
  content: ""; position: absolute; inset: 0; inset-inline-start: 40%; z-index: -1; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='white' stroke-width='.9'%3E%3Crect x='8' y='8' width='24' height='24'/%3E%3Crect x='8' y='8' width='24' height='24' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='4.5'/%3E%3Cpath d='M20 0v3M20 37v3M0 20h3M37 20h3M0 0l8 8M40 0l-8 8M0 40l8-8M40 40l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px; background-position: right top;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%);
}
[dir="rtl"] .bx-hero::after { background-position: left top; -webkit-mask-image: linear-gradient(160deg, #000, transparent 60%); mask-image: linear-gradient(160deg, #000, transparent 60%); }
a.bx-hero:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 40px 80px -36px color-mix(in srgb, var(--accent) 85%, #000); }
a.bx-hero:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hx-top { display: flex; justify-content: space-between; align-items: center; }
.hx-animal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hx-animal .animal-emo { font-size: 36px; }
.hx-animal svg.i { width: 30px; height: 30px; color: #fff; }
.hx-chips { display: flex; gap: 8px; }
.hx-chip { padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.hx-chip.is-live::before, .hx-chip.is-done::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-inline-end: 7px; vertical-align: 1px; background: #fbbf24; }
.hx-chip.is-done::before { background: #34d399; }
.hx-kicker { margin: 0; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .65); }
.hx-name { margin-top: 4px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.hx-meta { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
.hx-figure span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .7); font-weight: 500; }
.hx-figure strong { display: block; margin-top: 4px; font-size: clamp(44px, 5.4vw, 68px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.hx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin: 0; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); }
.hx-stats > div { padding: 14px 16px; background: rgba(0, 0, 0, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hx-stats dt { font-size: 12px; color: rgba(255, 255, 255, .65); font-weight: 500; }
.hx-stats dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.hx-split-bar { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.hx-split-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.hx-split-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.hx-split-row > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hx-split-row b { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.hx-split-row .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.hx-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); flex-wrap: wrap; }
.hx-steps { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); flex-wrap: wrap; }
.hx-steps li { display: inline-flex; align-items: center; gap: 7px; }
.hx-steps i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); }
.hx-steps li.ok { color: #fff; }
.hx-steps li.ok i { background: #fff; border-color: #fff; }
.hx-open { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px 9px 16px; border-radius: 99px; background: #fff; color: #0f172a; font-size: 13.5px; font-weight: 600; transition: gap .25s var(--ease-out); }
.hx-open svg.i { width: 16px; height: 16px; }
a.bx-hero:hover .hx-open { gap: 8px; }
[dir="rtl"] .hx-open { padding: 9px 16px 9px 14px; }
[dir="rtl"] .hx-name, [dir="rtl"] .hx-figure strong, [dir="rtl"] .hx-stats dd { letter-spacing: 0; }
.bx-hero-empty { align-items: flex-start; justify-content: center; gap: 14px; }
.bx-hero-empty .btn.white { background: #fff; color: #0f172a; border-color: #fff; }

/* ---------- Dépenses du mois + mini-courbe ---------- */
.bx-spend .bx-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: auto; padding-top: 18px; }
.spark { width: 46%; max-width: 180px; height: 56px; flex: none; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.spark-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.bx-spend .trend { padding: 4px 9px; font-size: 12.5px; }

/* ---------- Crédits : deux colonnes séparées par un filet ---------- */
.bx-duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; padding-top: 18px; }
.bx-duo > div + div { padding-inline-start: 20px; border-inline-start: 1px solid var(--edge); }
.bx-duo .bx-num { font-size: 28px; margin-top: 6px; }
.bx-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.bx-cap svg.i { width: 14px; height: 14px; }
.bx-late { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--neg); background: var(--neg-soft); }
.bx-late svg.i { width: 13px; height: 13px; }

/* ---------- Associés ---------- */
.px-list { display: flex; flex-direction: column; margin-top: 12px; }
.px-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--edge); }
.px-row:last-child { border-bottom: 0; }
.px-row .avatar { width: 34px; height: 34px; font-size: 13px; }
.px-mid { display: flex; flex-direction: column; min-width: 0; }
.px-mid b { font-weight: 600; font-size: 14.5px; }
.px-mid span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.px-mid .animal-emo { font-size: 13px; }
.px-mid svg.i { width: 13px; height: 13px; }
.px-amt { text-align: end; display: flex; flex-direction: column; }
.px-amt span { font-size: 12px; color: var(--muted); }
.px-amt b { font-size: 16px; font-weight: 700; letter-spacing: -.03em; }

/* ---------- Dernières dépenses ---------- */
.rx-list { display: flex; flex-direction: column; margin-top: 10px; }
.rx-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); }
.rx-row:last-child { border-bottom: 0; }
.rx-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--inner); color: var(--muted); }
.rx-ic svg.i { width: 16px; height: 16px; }
.rx-mid { display: flex; flex-direction: column; min-width: 0; }
.rx-mid b { font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-mid span { font-size: 12.5px; color: var(--muted); }
.rx-row > b { font-weight: 650; letter-spacing: -.02em; }

/* les blocs de droite s'étirent pour égaler la hauteur du héros */
.bx-spend, .bx-cred, .bx-part { display: flex; flex-direction: column; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bx-grid {
    grid-template-areas:
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "spend spend spend spend spend spend cred cred cred cred cred cred"
      "part part part part part part part part part part part part"
      "cats cats cats cats cats cats rec rec rec rec rec rec";
  }
  .bx-hero { min-height: 0; }
}
@media (max-width: 700px) {
  .bx-grid { gap: 12px; grid-template-areas: "hero" "spend" "cred" "part" "cats" "rec"; grid-template-columns: 1fr; }
  .bx-hero { padding: 22px; border-radius: 26px; gap: 18px; }
  .hx-name { font-size: 24px; }
  .bx-num { font-size: 28px; }
  .bx-duo .bx-num { font-size: 22px; }
  .hx-stats { grid-template-columns: 1fr 1fr; }
}
@media (hover: none) { a.bx-hero:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bx-hero, .hx-open { transition: none; } }

/* héros « moutons » : violet profond, aussi en mode sombre */
.bx-hero.bx-moutons { background: linear-gradient(140deg, color-mix(in srgb, var(--partner) 38%, #050508) 0%, color-mix(in srgb, var(--partner) 78%, #050508) 100%); }
/* catégories : lignes regroupées en haut du bloc */
.bx-grid > .b-cats .b-cat-list { justify-content: flex-start; flex: 0 0 auto; }
.bx-grid > .b-cats .b-cat { padding: 12px 0; }

/* =========================================================
   Centre multi-projets (grande carte de gauche)
   ========================================================= */
/* violet profond, quel que soit le type de projet */
.bx-hero.bx-hub {
  background: linear-gradient(150deg, color-mix(in srgb, var(--partner) 34%, #050508) 0%, color-mix(in srgb, var(--partner) 72%, #050508) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 60px -34px color-mix(in srgb, var(--partner) 75%, #000);
  gap: 20px; min-height: 0;
}
.bx-hub .hx-body { display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; }
.bx-hub.swap .hx-body { animation: hx-in .4s var(--ease-out); }
@keyframes hx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Onglets : vue d'ensemble + un par projet, défilement horizontal */
.hx-tabs {
  display: flex; gap: 6px; padding: 4px; margin: -4px -4px 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
[dir="rtl"] .hx-tabs { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.hx-tabs::-webkit-scrollbar { display: none; }
.hx-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 210px; height: 36px; padding: 0 14px;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .2s ease, border-color .25s ease;
}
.hx-tab span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hx-tab svg.i { width: 15px; height: 15px; }
.hx-tab .animal-emo { font-size: 16px; }
.hx-tab-emo { display: inline-grid; }
.hx-tab:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hx-tab[aria-selected="true"] { background: #fff; color: #0f172a; border-color: #fff; font-weight: 600; }
.hx-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hx-name { display: flex; align-items: center; gap: 12px; }
.hx-name-emo { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.hx-name-emo .animal-emo { font-size: 24px; }
.hx-name-emo svg.i { width: 22px; height: 22px; color: #fff; }
.hx-open { text-decoration: none; }
.hx-open:hover { gap: 8px; }

/* Rangée de mini-cartes de projets */
.hx-proj-head { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 500; }
.hx-proj-hint { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.hx-proj-hint svg.i { width: 14px; height: 14px; }
[dir="rtl"] .hx-proj-hint svg.i { transform: scaleX(-1); }
.hx-projects {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: -10px -2px -8px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.hx-projects::-webkit-scrollbar { height: 5px; }
.hx-projects::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 99px; }
.hx-mini {
  flex: 0 0 min(220px, 72%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-align: start;
  padding: 14px 16px; border-radius: 18px; cursor: pointer; color: #fff; font: inherit;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .25s var(--ease-out), background-color .25s ease, border-color .25s ease;
}
.hx-mini:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.hx-mini:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hx-mini-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hx-mini-emo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .14); }
.hx-mini-emo .animal-emo { font-size: 19px; }
.hx-mini-emo svg.i { width: 17px; height: 17px; color: #fff; }
.hx-mini-status { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .8); display: inline-flex; align-items: center; gap: 5px; }
.hx-mini-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; }
.hx-mini-status.is-done::before { background: #34d399; }
.hx-mini-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-mini-label { font-size: 11.5px; color: rgba(255, 255, 255, .6); margin-top: 4px; }
.hx-mini-num { font-size: 20px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
[dir="rtl"] .hx-mini-num { letter-spacing: 0; }
.hx-mini-steps { display: flex; gap: 4px; margin-top: 10px; }
.hx-mini-steps i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.hx-mini-steps i.ok { background: #fff; }

/* Ajustements : la carte grandit avec son contenu, les blocs de droite s'alignent */
.bx-grid { align-items: stretch; }
.bx-hub .hx-figure strong { font-size: clamp(40px, 4.6vw, 60px); }
@media (max-width: 700px) {
  .hx-tab { height: 34px; padding: 0 12px; font-size: 13px; }
  .hx-mini { flex-basis: 70%; }
}
@media (prefers-reduced-motion: reduce) { .bx-hub.swap .hx-body { animation: none; } .hx-mini, .hx-tab { transition: none; } }

/* =========================================================
   Grille épurée : bloc multi-projets + 2 widgets à droite,
   large courbe et répartition en bas
   ========================================================= */
.bx-grid {
  grid-template-areas:
    "hero hero hero hero hero hero hero spend spend spend spend spend"
    "hero hero hero hero hero hero hero cred  cred  cred  cred  cred"
    "chart chart chart chart chart chart chart chart cats cats cats cats";
  gap: 20px;
}
.bx-grid > .chart-card { grid-area: chart; margin: 0; display: flex; flex-direction: column; }
.bx-grid > .chart-card .chart { flex: 1; min-height: 260px; }
.bx-grid > .b-cats { grid-area: cats; }
.bx-grid > .b-cats .b-cat-list { justify-content: flex-start; }

/* widgets de droite : contenu aéré, chiffres en bas */
.bx-spend, .bx-cred { padding: 26px; }
.bx-spend .bx-row { padding-top: 22px; }
.bx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px 0 0; border-radius: 14px; overflow: hidden; background: var(--edge); border: 1px solid var(--edge); }
.bx-facts > div { padding: 12px 14px; background: var(--inner); }
.bx-facts dt { font-size: 12px; color: var(--muted); font-weight: 500; }
.bx-facts dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
[dir="rtl"] .bx-facts dd { letter-spacing: 0; }
.bx-cred .bx-duo { padding-top: 24px; }
.bx-cred .bx-duo .bx-num { font-size: 32px; }

@media (max-width: 1100px) {
  .bx-grid {
    grid-template-areas:
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "spend spend spend spend spend spend cred cred cred cred cred cred"
      "chart chart chart chart chart chart chart chart chart chart chart chart"
      "cats cats cats cats cats cats cats cats cats cats cats cats";
  }
}
@media (max-width: 700px) {
  .bx-grid { grid-template-areas: "hero" "spend" "cred" "chart" "cats"; grid-template-columns: 1fr; gap: 12px; }
  .bx-spend, .bx-cred { padding: 20px; }
  .bx-cred .bx-duo .bx-num { font-size: 24px; }
}

/* widgets de droite : chiffres juste sous le titre, compléments en bas */
.bx-spend .bx-row, .bx-cred .bx-duo { margin-top: 0; padding-top: 22px; }
.bx-spend .bx-facts { margin-top: auto; }
.bx-spend .bx-num { font-size: 40px; }
.bx-next {
  margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--inner); border: 1px solid var(--edge);
}
.bx-next svg.i { width: 18px; height: 18px; color: var(--muted); }
.bx-next-l { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); min-width: 0; }
.bx-next-l b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-next > b { font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.bx-cred .bx-duo { margin-bottom: 20px; }

/* =========================================================
   Refonte harmonieuse : une palette, un style de carte, une typographie
   ========================================================= */
/* ---------- Palette sombre unique : anthracite / ardoise ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f17; --surface: #111827; --surface-2: #1a2232; --text: #e5e7eb; --muted: #9ca3af; --faint: #6b7280;
    --border: rgba(255, 255, 255, .1); --border-strong: rgba(255, 255, 255, .16);
    --glass-bg: rgba(17, 24, 39, .6); --edge: rgba(255, 255, 255, .1); --inner: rgba(255, 255, 255, .04);
  }
  :root:not([data-theme="light"]) body {
    background-color: #0b0f17;
    background-image: radial-gradient(70vw 50vw at 15% -15%, rgba(99, 102, 241, .10), transparent 65%), radial-gradient(60vw 40vw at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%);
  }
  :root:not([data-theme="light"]) .sidebar { background: rgba(11, 15, 23, .7); border-inline-end-color: rgba(255, 255, 255, .08); }
}
:root[data-theme="dark"] {
  --bg: #0b0f17; --surface: #111827; --surface-2: #1a2232; --text: #e5e7eb; --muted: #9ca3af; --faint: #6b7280;
  --border: rgba(255, 255, 255, .1); --border-strong: rgba(255, 255, 255, .16);
  --glass-bg: rgba(17, 24, 39, .6); --edge: rgba(255, 255, 255, .1); --inner: rgba(255, 255, 255, .04);
}
:root[data-theme="dark"] body {
  background-color: #0b0f17;
  background-image: radial-gradient(70vw 50vw at 15% -15%, rgba(99, 102, 241, .10), transparent 65%), radial-gradient(60vw 40vw at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%);
}
:root[data-theme="dark"] .sidebar { background: rgba(11, 15, 23, .7); border-inline-end-color: rgba(255, 255, 255, .08); }

/* ---------- Un seul style de carte, partout ---------- */
.card, .b-tile, .w-sum a, .bx-hub {
  background: var(--glass-bg) !important; border: 1px solid var(--edge) !important; border-radius: 20px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: none !important; color: var(--text);
}
.card::before, .b-tile::before, .w-sum a::before, .card::after, .b-tile::after, .w-sum a::after { content: none !important; }
.card:hover, .b-tile:hover, .w-sum a:hover, .bx-hub:hover { border-color: var(--border-strong) !important; transform: none; }
a.b-tile:hover, .w-sum a:hover { transform: translateY(-2px); }

/* ---------- Carte Projets d'élevage (plus de violet) ---------- */
.bx-hub { padding: 24px; gap: 18px; min-height: 0; overflow: hidden; }
.bx-hub::before, .bx-hub::after { content: none !important; }
.bx-hub .hx-body { gap: 18px; }
.hx-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.hx-tab { height: 32px; padding: 0 12px; font-size: 13px; color: var(--muted); background: var(--inner); border: 1px solid var(--edge); }
.hx-tab:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.hx-tab[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hx-tab:hover { background: var(--surface-2); } }
:root[data-theme="light"] .hx-tab:hover { background: var(--surface-2); }

/* indicateurs de la vue d'ensemble */
.pj-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 14px; overflow: hidden; background: var(--edge); border: 1px solid var(--edge); }
.pj-metrics > div { padding: 14px 16px; background: var(--glass-bg); }
.pj-metrics dt { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.pj-list-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-bottom: -8px; }
.pj-list { display: flex; flex-direction: column; }
.pj-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px;
  padding: 12px 10px; margin: 0 -10px; border: 0; border-bottom: 1px solid var(--edge); border-radius: 0; background: none;
  color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background-color .2s ease;
}
.pj-row:last-child { border-bottom: 0; }
.pj-row:hover { background: var(--inner); border-radius: 12px; }
.pj-row:hover .row-chev { color: var(--accent); transform: translateX(2px); }
.pj-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.pj-emo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--inner); border: 1px solid var(--edge); }
.pj-emo .animal-emo { font-size: 20px; }
.pj-emo svg.i { width: 18px; height: 18px; color: var(--accent); }
.pj-mid { display: flex; flex-direction: column; min-width: 0; }
.pj-mid b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-mid span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-prog { display: flex; gap: 3px; }
.pj-prog i { width: 14px; height: 4px; border-radius: 99px; background: var(--edge); }
.pj-prog i.ok { background: var(--accent); }
.pj-amt { display: flex; flex-direction: column; align-items: flex-end; min-width: 96px; }
.pj-amt span { font-size: 11.5px; color: var(--muted); }
.pj-more { align-self: flex-start; font-size: 13px; }
.pj-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: auto 0; }
.pj-empty p { margin: 0; color: var(--muted); max-width: 40ch; }

/* détail d'un projet dans la carte : mêmes couleurs que le reste */
.bx-hub .hx-kicker, .bx-hub .hx-meta, .bx-hub .hx-figure span, .bx-hub .hx-stats dt, .bx-hub .hx-steps { color: var(--muted); }
.bx-hub .hx-name { color: var(--text); font-size: 24px; }
.bx-hub .hx-name-emo { background: var(--inner); border-color: var(--edge); width: 40px; height: 40px; }
.bx-hub .hx-stats { background: var(--edge); border-color: var(--edge); }
.bx-hub .hx-stats > div { background: var(--glass-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bx-hub .hx-split-bar { background: var(--edge); }
.bx-hub .hx-split-bar i { background: var(--accent); }
.bx-hub .hx-split-row { color: var(--muted); }
.bx-hub .hx-split-row b { color: var(--text); }
.bx-hub .hx-split-row .avatar { box-shadow: none; }
.bx-hub .hx-foot { border-top-color: var(--edge); }
.bx-hub .hx-steps i { border-color: var(--faint); }
.bx-hub .hx-steps li.ok { color: var(--text); }
.bx-hub .hx-steps li.ok i { background: var(--accent); border-color: var(--accent); }
.bx-hub .hx-open { background: var(--inner); color: var(--text); border: 1px solid var(--edge); }
.bx-hub .hx-open:hover { border-color: var(--border-strong); }

/* ---------- Grille : 2 rangées égales en haut, 2 blocs égaux en bas ---------- */
.bx-grid {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "hero hero hero hero hero hero hero spend spend spend spend spend"
    "hero hero hero hero hero hero hero cred  cred  cred  cred  cred"
    "chart chart chart chart chart chart chart cats cats cats cats cats";
  gap: 20px; align-items: stretch;
}
.bx-grid > .bx-cats2 { grid-area: cats; display: flex; flex-direction: column; }
.bx-grid > .chart-card { min-height: 360px; }
.bx-spend, .bx-cred { padding: 24px; }

/* ---------- Anneau « Où part votre argent » ---------- */
.cd-body { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 26px; padding-top: 18px; }
.cd-body .donut { width: 172px; height: 172px; margin: 0; }
.cd-body .donut .track { stroke: var(--inner); }
.cd-body .donut-c span { font-size: 11.5px; }
.cd-legend { display: flex; flex-direction: column; gap: 4px; }
.cd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--edge); font-size: 14px; }
.cd-row:last-child { border-bottom: 0; }
.cd-row i { width: 9px; height: 9px; border-radius: 3px; }
.cd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-pct { font-size: 12.5px; color: var(--muted); }

/* ---------- Courbe : fine et sobre ---------- */
.chart-card .chart .line { stroke-width: 2.5; filter: none; }
.chart-card .chart .area { opacity: .8; }
.chart-card .trend, .bx-spend .trend { background: var(--inner); border: 1px solid var(--edge); color: var(--muted); }
.chart-card .trend.down, .bx-spend .trend.down { color: var(--pos); }
.chart-card .trend.up, .bx-spend .trend.up { color: var(--neg); }

/* ---------- Typographie des montants : une seule règle, trois tailles ---------- */
.bx-grid .num, .bx-grid bdi.m { font-variant-numeric: tabular-nums; }
.bx-num, .hx-figure strong, .pj-metrics dd, .hx-stats dd, .bx-facts dd, .bx-next > b, .pj-amt b, .cd-row b, .donut-c b, .chart-last {
  font-weight: 600; letter-spacing: -.025em;
}
.bx-num, .bx-hub .hx-figure strong { font-size: 32px; line-height: 1.1; }
.pj-metrics dd, .hx-stats dd, .bx-facts dd { margin: 4px 0 0; font-size: 19px; }
.bx-next > b, .pj-amt b, .cd-row b { font-size: 15px; }
.bx-cred .bx-duo .bx-num { font-size: 28px; }
.bx-spend .bx-num { font-size: 32px; }
.donut-c b { font-size: 17px; }
[dir="rtl"] .bx-num, [dir="rtl"] .hx-figure strong, [dir="rtl"] .pj-metrics dd { letter-spacing: 0; }
/* libellés adoucis */
.b-label { color: var(--muted); font-weight: 500; }
.b-label svg.i { color: var(--faint); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bx-grid {
    grid-template-rows: auto;
    grid-template-areas:
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "spend spend spend spend spend spend cred cred cred cred cred cred"
      "chart chart chart chart chart chart chart chart chart chart chart chart"
      "cats cats cats cats cats cats cats cats cats cats cats cats";
  }
}
@media (max-width: 700px) {
  .bx-grid { grid-template-columns: 1fr; grid-template-areas: "hero" "spend" "cred" "chart" "cats"; gap: 12px; }
  .bx-hub { padding: 18px; }
  .pj-metrics { grid-template-columns: 1fr 1fr; }
  .pj-metrics > div:last-child { grid-column: 1 / -1; }
  .pj-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pj-prog, .pj-row .row-chev { display: none; }
  .cd-body { grid-template-columns: 1fr; justify-items: center; }
  .cd-legend { width: 100%; }
}

/* légende de l anneau : nom lisible, montant et pourcentage empilés */
.cd-body { grid-template-columns: 148px minmax(0, 1fr); gap: 22px; }
.cd-body .donut { width: 148px; height: 148px; }
.cd-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px 0; }
.cd-amt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.cd-amt .cd-pct { font-size: 11.5px; }
.cd-row b { font-size: 14.5px; }
@media (max-width: 700px) { .cd-body { grid-template-columns: 1fr; } .cd-body .donut { width: 170px; height: 170px; } }

/* ---------- Dépenses sans doublons : chaque bloc a son rôle ---------- */
.chart .avg { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 5; opacity: .7; }
.chart-avg { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.2; }
.chart-avg span { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.chart-avg span::before { content: ""; width: 14px; border-top: 1px dashed var(--muted); }
.chart-avg b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.bx-facts > div { min-width: 0; }
.donut-c b { font-size: 20px; }
.donut-c span { font-size: 12px; }

/* =========================================================
   Formulaires : erreurs visibles dans la fenêtre + notification au premier plan
   ========================================================= */
/* La notification est un popover : on neutralise les styles par défaut du navigateur. */
#toast[popover] {
  inset: auto auto 28px 50%; margin: 0; border: 0; overflow: hidden;
  background: var(--text); color: var(--bg);
}
#toast[popover]:not(:popover-open) { display: none; }
#toast[popover]:popover-open { display: flex; }
.toast.err .t-ic { background: var(--neg); }
.toast.err .t-bar { background: var(--neg); }

.field.has-err input, .field.has-err select, .field.has-err textarea, .field.has-err .money-input {
  border-color: var(--neg) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 18%, transparent) !important;
}
.field.has-err .money-input input { border-color: transparent !important; box-shadow: none !important; }
.field.has-err > label { color: var(--neg); }
.field-err, .form-err {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--neg);
}
.field-err svg.i, .form-err svg.i { width: 15px; height: 15px; flex: none; }
.form-err { margin: 0 0 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--neg) 12%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .field.has-err { animation: field-shake .32s ease; }
}
@keyframes field-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Dépenses du mois : un seul chiffre, mis en avant */
.bx-spend-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-top: 12px; }
.bx-spend .bx-spend-main .bx-num { font-size: 46px; line-height: 1.05; }
.bx-spend-main .b-sub { font-size: 13.5px; color: var(--muted); }
@media (max-width: 700px) { .bx-spend .bx-spend-main .bx-num { font-size: 38px; } }

/* =========================================================
   Page Dépenses : résumé du mois sur toute la largeur (plus de case vide)
   ========================================================= */
.exp-sum { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 26px; margin-bottom: 18px; }
.exp-sum-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-sum-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.exp-sum-num { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.exp-sum-sub { font-size: 13px; color: var(--muted); }
.exp-sum-cmp { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.exp-sum .trend { padding: 4px 10px; font-size: 13px; background: var(--inner); border: 1px solid var(--edge); }
.exp-sum .trend.down { color: var(--pos); }
.exp-sum .trend.up { color: var(--neg); }
[dir="rtl"] .exp-sum-num { letter-spacing: 0; }
@media (max-width: 600px) {
  .exp-sum { padding: 20px; align-items: flex-start; }
  .exp-sum-num { font-size: 34px; }
  .exp-sum-cmp { align-items: flex-start; }
}

/* =========================================================
   Touche marocaine : zellige (khatam, étoile à 8 branches)
   Motif en trait fin, teinté par la couleur d'accent de la palette,
   à très faible opacité. Trois emplacements seulement.
   ========================================================= */
:root { --zellige: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2756%27%20viewBox%3D%270%200%2056%2056%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%2228%2C11%2032.98%2C15.98%2040.02%2C15.98%2040.02%2C23.02%2045%2C28%2040.02%2C32.98%2040.02%2C40.02%2032.98%2C40.02%2028%2C45%2023.02%2C40.02%2015.98%2C40.02%2015.98%2C32.98%2011%2C28%2015.98%2C23.02%2015.98%2C15.98%2023.02%2C15.98%22%2F%3E%3Cpolygon%20points%3D%2230.73%2C21.4%2034.6%2C25.27%2034.6%2C30.73%2030.73%2C34.6%2025.27%2C34.6%2021.4%2C30.73%2021.4%2C25.27%2025.27%2C21.4%22%2F%3E%3Cpolygon%20points%3D%220%2C-17%204.98%2C-12.02%2012.02%2C-12.02%2012.02%2C-4.98%2017%2C0%2012.02%2C4.98%2012.02%2C12.02%204.98%2C12.02%200%2C17%20-4.98%2C12.02%20-12.02%2C12.02%20-12.02%2C4.98%20-17%2C0%20-12.02%2C-4.98%20-12.02%2C-12.02%20-4.98%2C-12.02%22%2F%3E%3Cpolygon%20points%3D%222.73%2C-6.6%206.6%2C-2.73%206.6%2C2.73%202.73%2C6.6%20-2.73%2C6.6%20-6.6%2C2.73%20-6.6%2C-2.73%20-2.73%2C-6.6%22%2F%3E%3Cpolygon%20points%3D%2256%2C-17%2060.98%2C-12.02%2068.02%2C-12.02%2068.02%2C-4.98%2073%2C0%2068.02%2C4.98%2068.02%2C12.02%2060.98%2C12.02%2056%2C17%2051.02%2C12.02%2043.98%2C12.02%2043.98%2C4.98%2039%2C0%2043.98%2C-4.98%2043.98%2C-12.02%2051.02%2C-12.02%22%2F%3E%3Cpolygon%20points%3D%2258.73%2C-6.6%2062.6%2C-2.73%2062.6%2C2.73%2058.73%2C6.6%2053.27%2C6.6%2049.4%2C2.73%2049.4%2C-2.73%2053.27%2C-6.6%22%2F%3E%3Cpolygon%20points%3D%220%2C39%204.98%2C43.98%2012.02%2C43.98%2012.02%2C51.02%2017%2C56%2012.02%2C60.98%2012.02%2C68.02%204.98%2C68.02%200%2C73%20-4.98%2C68.02%20-12.02%2C68.02%20-12.02%2C60.98%20-17%2C56%20-12.02%2C51.02%20-12.02%2C43.98%20-4.98%2C43.98%22%2F%3E%3Cpolygon%20points%3D%222.73%2C49.4%206.6%2C53.27%206.6%2C58.73%202.73%2C62.6%20-2.73%2C62.6%20-6.6%2C58.73%20-6.6%2C53.27%20-2.73%2C49.4%22%2F%3E%3Cpolygon%20points%3D%2256%2C39%2060.98%2C43.98%2068.02%2C43.98%2068.02%2C51.02%2073%2C56%2068.02%2C60.98%2068.02%2C68.02%2060.98%2C68.02%2056%2C73%2051.02%2C68.02%2043.98%2C68.02%2043.98%2C60.98%2039%2C56%2043.98%2C51.02%2043.98%2C43.98%2051.02%2C43.98%22%2F%3E%3Cpolygon%20points%3D%2258.73%2C49.4%2062.6%2C53.27%2062.6%2C58.73%2058.73%2C62.6%2053.27%2C62.6%2049.4%2C58.73%2049.4%2C53.27%2053.27%2C49.4%22%2F%3E%3Cpolygon%20points%3D%2228%2C-6.5%2034.5%2C0%2028%2C6.5%2021.5%2C0%22%2F%3E%3Cpolygon%20points%3D%220%2C21.5%206.5%2C28%200%2C34.5%20-6.5%2C28%22%2F%3E%3Cpolygon%20points%3D%2256%2C21.5%2062.5%2C28%2056%2C34.5%2049.5%2C28%22%2F%3E%3Cpolygon%20points%3D%2228%2C49.5%2034.5%2C56%2028%2C62.5%2021.5%2C56%22%2F%3E%3Cline%20x1%3D%2715.98%27%20y1%3D%2715.98%27%20x2%3D%2712.02%27%20y2%3D%2712.02%27%2F%3E%3Cline%20x1%3D%2740.02%27%20y1%3D%2715.98%27%20x2%3D%2743.98%27%20y2%3D%2712.02%27%2F%3E%3Cline%20x1%3D%2715.98%27%20y1%3D%2740.02%27%20x2%3D%2712.02%27%20y2%3D%2743.98%27%2F%3E%3Cline%20x1%3D%2740.02%27%20y1%3D%2740.02%27%20x2%3D%2743.98%27%20y2%3D%2743.98%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --khatam: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpolygon%20points%3D%226%2C0%207.76%2C1.76%2010.24%2C1.76%2010.24%2C4.24%2012%2C6%2010.24%2C7.76%2010.24%2C10.24%207.76%2C10.24%206%2C12%204.24%2C10.24%201.76%2C10.24%201.76%2C7.76%200%2C6%201.76%2C4.24%201.76%2C1.76%204.24%2C1.76%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --zl-op: .16; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --zl-op: .13; } }
:root[data-theme="light"] { --zl-op: .13; }

/* 1. En-tête : panneau de zellige derrière la salutation, qui s'efface vers le texte */
.bx-top { position: relative; isolation: isolate; padding: 6px 0 4px; }
.bx-top .zl-panel {
  position: absolute; z-index: -1; pointer-events: none;
  inset: -48px -8px -6px 30%;
  background: var(--accent); opacity: calc(var(--zl-op) * 1.5);
  -webkit-mask: var(--zellige) 0 0 / 56px 56px repeat, radial-gradient(ellipse 55% 75% at 72% 45%, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: var(--zellige) 0 0 / 56px 56px repeat intersect, radial-gradient(ellipse 55% 75% at 72% 45%, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
}
[dir="rtl"] .bx-top .zl-panel {
  inset: -48px 30% -6px -8px;
  -webkit-mask: var(--zellige) 0 0 / 56px 56px repeat, radial-gradient(ellipse 55% 75% at 28% 45%, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: var(--zellige) 0 0 / 56px 56px repeat intersect, radial-gradient(ellipse 55% 75% at 28% 45%, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
}

/* frise de trois khatams sous la date */
.zl-kicker { display: inline-flex; align-items: center; gap: 10px; }
.zl-stars { display: inline-flex; gap: 5px; }
.zl-stars i {
  width: 12px; height: 12px; background: var(--accent);
  -webkit-mask: var(--khatam) center / contain no-repeat; mask: var(--khatam) center / contain no-repeat;
}
.zl-stars i:nth-child(2) { opacity: .6; } .zl-stars i:nth-child(3) { opacity: .3; }

/* 2. Carte Projets : rosace de zellige dans l'angle, effacée en arc */
.bx-hub { position: relative; isolation: isolate; }
.bx-hub .zl-corner {
  position: absolute; z-index: -1; pointer-events: none; top: 0; inset-inline-end: 0; width: 300px; height: 230px;
  background: var(--accent); opacity: calc(var(--zl-op) * 1.1);
  -webkit-mask: var(--zellige) 100% 0 / 56px 56px repeat, radial-gradient(circle at 100% 0, #000 0, rgba(0,0,0,.6) 38%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask: var(--zellige) 100% 0 / 56px 56px repeat intersect, radial-gradient(circle at 100% 0, #000 0, rgba(0,0,0,.6) 38%, transparent 72%);
}
[dir="rtl"] .bx-hub .zl-corner {
  -webkit-mask: var(--zellige) 0 0 / 56px 56px repeat, radial-gradient(circle at 0 0, #000 0, rgba(0,0,0,.6) 38%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask: var(--zellige) 0 0 / 56px 56px repeat intersect, radial-gradient(circle at 0 0, #000 0, rgba(0,0,0,.6) 38%, transparent 72%);
}
.bx-hub > :not(.zl-corner) { position: relative; }

@media (max-width: 700px) {
  .bx-top .zl-panel { inset: -30px -16px -10px 30%; }
  [dir="rtl"] .bx-top .zl-panel { inset: -30px 30% -10px -16px; }
  .bx-hub .zl-corner { width: 200px; height: 160px; }
}
@media print { .zl-panel, .zl-corner, .zl-stars { display: none; } }

/* Page projet : « Charges & dépenses » et « Capital de départ » de même hauteur */
.grid-main.proj-pair { align-items: stretch; }
.proj-pair > .card { margin: 0; display: flex; flex-direction: column; }
.proj-pair > .card > .empty, .proj-pair > .card > .empty-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* =========================================================
   Rigueur + signature marocaine haut de gamme (laiton)
   ========================================================= */
/* ---------- Laiton patiné : couleur réservée aux ornements ---------- */
:root { --brass: var(--accent); --brass-soft: color-mix(in srgb, var(--accent) 35%, transparent); } /* laiton réservé à la palette Majorelle ; ailleurs, l’accent de la palette */

.bx-top .zl-panel, .bx-hub .zl-corner, .zl-stars i { background: var(--brass); }
:root { --zl-op: .2; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --zl-op: .17; } }
:root[data-theme="light"] { --zl-op: .17; }

/* ---------- Logo : la pousse inscrite dans un khatam ---------- */
.brand-mark {
  width: 40px; height: 40px; border-radius: 0; box-shadow: none !important;
  clip-path: polygon(50.00% 0.00%, 64.64% 14.64%, 85.36% 14.64%, 85.36% 35.36%, 100.00% 50.00%, 85.36% 64.64%, 85.36% 85.36%, 64.64% 85.36%, 50.00% 100.00%, 35.36% 85.36%, 14.64% 85.36%, 14.64% 64.64%, 0.00% 50.00%, 14.64% 35.36%, 14.64% 14.64%, 35.36% 14.64%);
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  position: relative;
}
.brand-mark::before { width: 46%; height: 46%; }
.brand { gap: 12px; }

/* ---------- Salutation bilingue ---------- */
.w-hello-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.w-hello-alt {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  font-size: 20px; font-weight: 400; color: var(--brass); letter-spacing: 0;
  padding-inline-start: 16px; border-inline-start: 1px solid var(--brass-soft); line-height: 1.2;
}
.w-hello-alt[lang="fr"] { font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 18px; }

/* ---------- Filet zellige sous l'en-tête ---------- */
.bx-top { margin-bottom: 0; }
.zl-rule { display: flex; align-items: center; gap: 10px; margin: 18px 0 24px; }
.zl-rule i {
  width: 11px; height: 11px; flex: none; background: var(--brass);
  -webkit-mask: var(--khatam) center / contain no-repeat; mask: var(--khatam) center / contain no-repeat;
}
.zl-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--brass-soft), transparent 85%); }
[dir="rtl"] .zl-rule::after { background: linear-gradient(to left, var(--brass-soft), transparent 85%); }

/* ---------- Hiérarchie des chiffres : un chiffre fort par carte, couleur = signal ---------- */
.bx-cred .bx-num, .bx-cred .bx-num.neg, .bx-cred .bx-num.pos { color: var(--text); }
.bx-cap.is-out svg.i { color: var(--neg); }
.bx-cap.is-in svg.i { color: var(--pos); }
.bx-next > b { color: var(--text); font-weight: 600; }
.pj-metrics dd, .hx-stats dd { font-weight: 500; font-size: 18px; }
.pj-metrics dd.pos, .pj-metrics dd.neg { color: var(--text); display: flex; align-items: center; gap: 8px; }
.pj-metrics dd.pos::before, .pj-metrics dd.neg::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: none; }
.pj-metrics dd.neg::before { background: var(--neg); }
.pj-amt b, .cd-row b { font-weight: 500; }
.pj-amt b.pos, .pj-amt b.neg { color: var(--text); }

/* ---------- Grille équilibrée : la tuile Dépenses prend sa hauteur, Crédits s'étire ---------- */
.bx-grid { grid-template-rows: auto minmax(0, 1fr) auto; }
.bx-spend { min-height: 0; }
.bx-spend .bx-spend-main { padding: 22px 0 6px; }
.bx-grid > .chart-card { min-height: 0; }
.bx-cats2 .cd-body { padding-top: 6px; }

/* ---------- Barre latérale sobre ---------- */
.side-add.btn {
  height: 40px; border-radius: 12px; font-weight: 600; background: transparent !important;
  border: 1px solid var(--border-strong) !important; color: var(--text) !important; box-shadow: none !important;
}
.side-add.btn:hover { background: var(--inner) !important; border-color: var(--brass-soft) !important; }
.side-add.btn svg.i { color: var(--brass); }
.nav-ind { background: var(--inner) !important; border: 0 !important; box-shadow: none !important; }
.nav a.active { color: var(--text); }
.nav a.active svg.i { color: var(--accent); }

@media (max-width: 1100px) { .bx-grid { grid-template-rows: auto; } }
@media (max-width: 700px) {
  .w-hello-alt { font-size: 17px; padding-inline-start: 12px; }
  .zl-rule { margin: 14px 0 18px; }
}
/* trait entre les deux salutations : côté physique, selon le sens de la page */
.w-hello-alt { border: 0; padding: 0 0 0 16px; border-left: 1px solid var(--brass-soft); }
[dir="rtl"] .w-hello-alt { padding: 0 16px 0 0; border-left: 0; border-right: 1px solid var(--brass-soft); }
@media (max-width: 700px) { .w-hello-alt { padding-left: 12px; } [dir="rtl"] .w-hello-alt { padding-left: 0; padding-right: 12px; } }

/* =========================================================
   Palette « Majorelle » : bleu Majorelle, nuit profonde, laiton
   ========================================================= */
html:root[data-palette="majorelle"] {
  --bg: #f7f5ef; --bg-glow: #ece8f8;
  --surface: #ffffff; --surface-2: #f1eff8; --surface-3: #e7e4f4;
  --text: #17153a; --muted: #5f5c7d; --faint: #9a97b4;
  --border: #e7e3ef; --border-strong: #d6d1e6;
  --accent: #4b3cc9; --accent-2: #6050dc; --accent-soft: #ebe8fb; --accent-ink: #ffffff;
  --partner: #a8782a; --partner-2: #c9a96b; --partner-soft: #f6eedd;
  --neg: #c8324a; --neg-soft: #fbe9ec;
  --c-expense: #4b3cc9; --c-charge: #a8782a; --c-credit: #c8324a;
  --hero: linear-gradient(135deg, #0c0e2b 0%, #2c2493 55%, #6050dc 100%);
  --hero-shadow: 0 18px 40px -20px rgba(75, 60, 201, .55); --hero-ink: #2c2493;
  --brass: #9a7535; --brass-soft: rgba(154, 117, 53, .35);
}
html:root[data-palette="majorelle"] body { background-color: #f7f5ef; background-image: radial-gradient(60vw 40vw at 0% -10%, rgba(96, 80, 220, .07), transparent 70%), radial-gradient(50vw 40vw at 100% 0%, rgba(201, 169, 107, .08), transparent 70%); }
@media (prefers-color-scheme: dark) {
  html:root[data-palette="majorelle"]:not([data-theme="light"]) {
  --bg: #090b22; --bg-glow: #12153a;
  --surface: #10133a; --surface-2: #171a48; --surface-3: #1f2356;
  --text: #ecebf8; --muted: #a3a1c4; --faint: #6c6a91;
  --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .15);
  --glass-bg: rgba(18, 21, 62, .62); --edge: rgba(255, 255, 255, .09); --inner: rgba(255, 255, 255, .04);
  --accent: #8577f2; --accent-2: #a69bf7; --accent-soft: #24206a; --accent-ink: #ffffff;
  --partner: #d6b273; --partner-2: #e6cb98; --partner-soft: #33280f;
  --neg: #f27a8c; --neg-soft: rgba(242, 122, 140, .14); --pos-soft: rgba(52, 211, 153, .12);
  --c-expense: #8577f2; --c-charge: #d6b273; --c-credit: #f27a8c;
  --hero: linear-gradient(135deg, #0c0e2b 0%, #2c2493 60%, #6050dc 100%); --hero-ink: #2c2493;
  --brass: #d1b273; --brass-soft: rgba(209, 178, 115, .34); --zl-op: .22;
  }
  html:root[data-palette="majorelle"]:not([data-theme="light"]) body { background-color: #090b22; background-image: radial-gradient(70vw 50vw at 15% -15%, rgba(96, 80, 220, .16), transparent 65%), radial-gradient(50vw 40vw at 100% 0%, rgba(201, 169, 107, .07), transparent 65%); }
  html:root[data-palette="majorelle"]:not([data-theme="light"]) .sidebar { background: rgba(9, 11, 34, .72); border-inline-end-color: rgba(255, 255, 255, .07); }
}
html:root[data-palette="majorelle"][data-theme="dark"] {
  --bg: #090b22; --bg-glow: #12153a;
  --surface: #10133a; --surface-2: #171a48; --surface-3: #1f2356;
  --text: #ecebf8; --muted: #a3a1c4; --faint: #6c6a91;
  --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .15);
  --glass-bg: rgba(18, 21, 62, .62); --edge: rgba(255, 255, 255, .09); --inner: rgba(255, 255, 255, .04);
  --accent: #8577f2; --accent-2: #a69bf7; --accent-soft: #24206a; --accent-ink: #ffffff;
  --partner: #d6b273; --partner-2: #e6cb98; --partner-soft: #33280f;
  --neg: #f27a8c; --neg-soft: rgba(242, 122, 140, .14); --pos-soft: rgba(52, 211, 153, .12);
  --c-expense: #8577f2; --c-charge: #d6b273; --c-credit: #f27a8c;
  --hero: linear-gradient(135deg, #0c0e2b 0%, #2c2493 60%, #6050dc 100%); --hero-ink: #2c2493;
  --brass: #d1b273; --brass-soft: rgba(209, 178, 115, .34); --zl-op: .22;
}
html:root[data-palette="majorelle"][data-theme="dark"] body { background-color: #090b22; background-image: radial-gradient(70vw 50vw at 15% -15%, rgba(96, 80, 220, .16), transparent 65%), radial-gradient(50vw 40vw at 100% 0%, rgba(201, 169, 107, .07), transparent 65%); }
html:root[data-palette="majorelle"][data-theme="dark"] .sidebar { background: rgba(9, 11, 34, .72); border-inline-end-color: rgba(255, 255, 255, .07); }
/* le logo khatam : bleu Majorelle cerclé d'un liseré laiton */
html:root[data-palette="majorelle"] .brand-mark { background: linear-gradient(140deg, #6050dc, #2c2493); }
html:root[data-palette="majorelle"] .w-hello-alt { color: var(--brass); }

/* =========================================================
   Version en ligne : écran de déverrouillage + état de synchronisation
   ========================================================= */
.is-locked body { overflow: hidden; }
.is-locked .app, .is-locked .bottom-nav, .is-locked .fab { visibility: hidden; }
.lock {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.lock-card {
  width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 36px 28px 30px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
}
.lock-mark { width: 56px; height: 56px; margin-bottom: 6px; }
.lock-card h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.lock-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lock-field { width: 100%; }
.lock-field input {
  width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); text-align: center;
}
.lock-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lock-err { min-height: 18px; color: var(--neg) !important; font-weight: 500; }
.lock-btn { width: 100%; height: 46px; justify-content: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sync-line { display: inline-flex; align-items: center; gap: 8px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.sync-dot.is-ok { background: var(--pos); }
.sync-dot.is-saving, .sync-dot.is-idle { background: var(--accent); }
.sync-dot.is-offline { background: #f59e0b; }
.sync-dot.is-error { background: var(--neg); }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }