/* Tally — DA Dealyx Studio (mêmes couleurs, police, composants) */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/dm-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/dm-mono-latin-500-normal.woff2) format('woff2'); }
:root {
  --bg: #E8EEF2;
  --surface: #FFFFFF;
  --fg: #10232D;
  --muted: #F2F5F8;
  --muted-fg: #5A6D77;
  --faint: #8DA0A9;
  --border: #D8E2E8;
  --brand: #0F888A;
  --brand-deep: #0A6466;
  --brand-soft: #E1F4F2;
  --positive: #0A7B59;
  --positive-soft: #D7F3EA;
  --negative: #C1532F;
  --negative-soft: #FDE5DD;
  --warning: #8A6115;
  --warning-soft: #FDF0CE;
  --shadow-card: 0 1px 2px rgba(16,34,44,.04), 0 8px 24px -12px rgba(16,34,44,.12);
  --shadow-lift: 0 2px 4px rgba(16,34,44,.04), 0 18px 40px -16px rgba(16,34,44,.28);
  --shadow-glow: 0 10px 26px -8px rgba(15,136,138,.55);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --surface-a: rgba(255,255,255,.8); --glass-bg: rgba(255,255,255,.58); --sunken: rgba(242,245,248,.6); --hover: rgba(255,255,255,.6); --side-m: #F2F6F8;
  --active-bg: var(--brand-soft); --active-fg: var(--brand-deep); --ink-tile: var(--fg); --on-accent: #fff;
  --tile-dark: var(--fg); --accent-2: #E8913F; --chart-2: rgba(15,136,138,.28); --chart-3: rgba(58,143,214,.35); --track: var(--muted); --c-pos: #16A37A; --c-teal: #0F766E;
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  /* anciens noms gardés pour le code existant */
  --ink: var(--fg); --ink-2: var(--muted-fg); --blue: var(--brand); --blue-soft: var(--brand-soft);
  --green: var(--positive); --green-soft: var(--positive-soft); --orange: var(--warning); --red: var(--negative); --line: var(--border);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--fg); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.noscroll { overflow: hidden; }
::selection { background: rgba(15,136,138,.18); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3 { margin: 0; }
svg { flex: none; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(141,160,169,.35); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.soft { color: var(--muted-fg); }
.faint { color: var(--faint); }
.muted-12 { color: var(--muted-fg); font-size: 12px; }
.r { text-align: right; }
.c-accent, .c-brand { color: var(--brand); } .c-green { color: var(--positive); } .c-orange { color: var(--warning); } .c-red { color: var(--negative); }
.k { font-size: 12px; color: var(--muted-fg); }
.lab { display: block; font-size: 12px; font-weight: 600; color: var(--fg); }

/* ---------- Animations ---------- */
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,60px) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,-40px) scale(1.15); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,-60px) scale(.95); } }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes headIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ringIn { from { stroke-dashoffset: var(--c); } }
.breathe { animation: breathe 2.2s ease-in-out infinite; }

.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.backdrop i { position: absolute; border-radius: 50%; }
.backdrop .b1 { left: -160px; top: -160px; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(20,163,164,.20), transparent); animation: drift1 24s ease-in-out infinite; }
.backdrop .b2 { right: -192px; top: 25%; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(120,170,220,.22), transparent); animation: drift2 30s ease-in-out infinite; }
.backdrop .b3 { left: 33%; bottom: -220px; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(180,225,215,.35), transparent); animation: drift3 36s ease-in-out infinite; }

.glass { background: var(--glass-bg); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }

/* ---------- Boutons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-card); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .25s var(--spring), background .2s, box-shadow .2s, color .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary, .btn-orange { background: var(--brand); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover, .btn-orange:hover { background: var(--brand-deep); box-shadow: var(--shadow-glow); }
.btn-soft { background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }
.btn-soft:hover { background: rgba(15,136,138,.15); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--muted-fg); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-a); color: var(--fg); box-shadow: none; }
.btn-outline { background: var(--surface-a); box-shadow: inset 0 0 0 1px var(--border); }
.btn-outline:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.btn-danger { color: var(--negative); }
.btn-danger:hover { background: var(--negative-soft); }
.btn-warn { background: var(--negative); color: #fff; box-shadow: 0 10px 26px -8px rgba(193,83,47,.55); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 6px; border-radius: 10px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn.spin svg { animation: spin 1s linear infinite; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--surface-a); box-shadow: var(--shadow-card); display: grid; place-items: center; cursor: pointer; color: var(--muted-fg); flex: none; transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--surface); color: var(--brand); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.ghost { background: transparent; box-shadow: none; color: var(--faint); border-radius: 8px; width: 30px; height: 30px; }
.icon-btn.ghost:hover { background: var(--surface-a); color: var(--fg); }
.icon-btn.ghost svg { width: 16px; height: 16px; }
.link { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ---------- Champs ---------- */
.field { display: block; margin-bottom: 14px; }
.field label, .field .label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--fg); }
.field .hint, .hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.input, select.input, textarea.input { height: 40px; width: 100%; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-a); font-size: 13.5px; outline: none; transition: all .2s; }
.input:hover { border-color: rgba(141,160,169,.6); }
.input:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px rgba(15,136,138,.12); }
.input::placeholder { color: var(--faint); }
.input:disabled { opacity: .6; cursor: not-allowed; }
select.input { appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238DA0A9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
textarea.input { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; }
.input-code { font-family: var(--mono); font-size: 22px; letter-spacing: .4em; text-align: center; height: 52px; }
.with-icon { position: relative; display: block; }
.with-icon > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.with-icon .input { padding-left: 40px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
.inline { display: flex; gap: 8px; align-items: flex-end; }
.inline .field { flex: 1; margin-bottom: 0; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 12px; background: var(--muted); font-weight: 600; font-size: 13px; color: var(--muted-fg); cursor: pointer; transition: all .2s var(--ease); }
.choice span:hover { background: var(--surface); color: var(--fg); }
.choice input:checked + span { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--brand); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(15,136,138,.12); }

/* Interrupteur */
.switch { position: relative; display: inline-flex; width: 44px; height: 24px; flex: none; border-radius: 999px; padding: 2px; background: rgba(141,160,169,.35); border: 0; cursor: pointer; transition: background .3s; }
.switch::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px rgba(16,34,44,.25); transition: transform .3s var(--spring); }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- Badges, notes ---------- */
.pill, .badge-s { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; line-height: 1; background: var(--muted); color: var(--muted-fg); }
.pill svg { width: 12px; height: 12px; }
.pill.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-brand { background: var(--brand-soft); color: var(--brand-deep); }
.pill-green { background: var(--positive-soft); color: var(--positive); }
.pill-orange { background: var(--warning-soft); color: var(--warning); }
.pill-red { background: var(--negative-soft); color: var(--negative); }
.pill-grey { background: var(--muted); color: var(--muted-fg); }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: var(--muted); color: var(--muted-fg); margin-right: 6px; white-space: nowrap; }
.tag.red { background: var(--negative-soft); color: var(--negative); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.chip svg { width: 13px; height: 13px; }
.chip button { border: 0; background: none; padding: 0; display: inline-grid; cursor: pointer; color: var(--faint); }
.notice, .error, .note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; margin-bottom: 14px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--fg); animation: popIn .4s var(--ease) both; }
.notice svg, .error svg, .note svg { width: 16px; height: 16px; margin-top: 1px; }
.error { background: var(--negative-soft); color: var(--negative); box-shadow: none; }
.notice.ok, .note.ok { background: var(--positive-soft); color: var(--positive); box-shadow: none; }
.notice.warn { background: var(--warning-soft); color: var(--warning); box-shadow: none; }

/* ---------- Coque ---------- */
.shell { display: flex; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; width: 248px; flex: none; padding: 12px 0 12px 12px; }
.sidebar { height: 100%; border-radius: 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 32px; height: 32px; filter: drop-shadow(0 6px 12px rgba(15,139,141,.35)); animation: floaty 3.2s ease-in-out infinite; }
.logo b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.logo small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--brand); line-height: 1; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-top { height: 64px; display: flex; align-items: center; padding: 0 16px; }
.side-search { margin: 0 12px 8px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface-a); box-shadow: var(--shadow-card); color: var(--faint); font-size: 13px; cursor: text; transition: background .2s, color .2s; }
.side-search:hover, .side-search:focus-within { background: var(--surface); color: var(--muted-fg); }
.side-search svg { width: 16px; height: 16px; }
.side-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13px; color: var(--fg); }
.side-search input::placeholder { color: var(--faint); }
.side-search kbd { font-family: var(--mono); font-size: 10.5px; background: var(--muted); border-radius: 6px; padding: 2px 6px; color: var(--faint); }
.company-switch { margin: 0 12px 4px; }
.company-switch select { height: 34px; font-size: 12.5px; font-weight: 600; background-color: rgba(255,255,255,.6); border-color: transparent; border-radius: 10px; }
.nav { flex: 1; overflow-y: auto; padding: 0 12px 16px; scrollbar-width: thin; }
.nav-section { padding: 20px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 2px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--muted-fg); transition: color .2s, background .2s; }
.nav a:hover { background: var(--surface-a); color: var(--fg); }
.nav a.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-card); }
.nav a svg { width: 18px; height: 18px; stroke-width: 2; }
.nav a.active svg { color: var(--brand); }
.nav a .badge { margin-left: auto; border-radius: 6px; background: var(--brand-soft); color: var(--brand-deep); font-family: var(--mono); font-size: 11px; padding: 0 6px; line-height: 18px; }
.nav a .badge.orange { background: var(--warning-soft); color: var(--warning); }
.side-foot { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.month-ring { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-a); box-shadow: var(--shadow-card); color: var(--fg); }
.month-ring .ring-svg { position: relative; width: 44px; height: 44px; flex: none; }
.month-ring .ring-svg svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.month-ring .ring-svg circle { fill: none; stroke-width: 4; }
.month-ring .ring-svg .t { stroke: var(--border); }
.month-ring .ring-svg .v { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .9s linear; animation: ringIn 1.2s var(--ease) both; }
.month-ring .ring-svg i { position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.month-ring small { display: block; font-size: 11px; font-weight: 600; color: var(--muted-fg); }
.month-ring b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 1.2; }
.month-ring b em { font-style: normal; font-size: 12px; color: var(--faint); }
.side-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0; }
.side-row a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); }
.side-row a:hover { color: var(--fg); }
.side-row a.active { color: var(--brand); }
.side-row a svg { width: 16px; height: 16px; }
.sync-line { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 11px; color: var(--faint); }
.sync-line.warn { color: var(--warning); font-weight: 600; }
.led { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.led.on { background: var(--positive); }
.sync-line.warn .led { background: var(--warning); }

.main { flex: 1; min-width: 0; }
.m-head { display: none; }
.page { width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px 32px 40px; }
.fresh .page { animation: pageIn .32s var(--ease) both; }

/* En-tête de page */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head > div:first-child { animation: headIn .5s var(--ease) both; min-width: 0; }
.eyebrow { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.page-head h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.page-head p { margin: 6px 0 0; max-width: 672px; font-size: 13.5px; color: var(--muted-fg); }
.ph-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; animation: popIn .5s var(--ease) .1s both; }
.tour-btn { width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--surface-a); box-shadow: var(--shadow-card); color: var(--muted-fg); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.tour-btn:hover { background: var(--surface); color: var(--brand); }
.tour-btn svg { width: 18px; height: 18px; }

/* ---------- Cartes ---------- */
.card, .tile, .panel { position: relative; isolation: isolate; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px; min-width: 0; transition: transform .45s var(--spring), box-shadow .35s var(--ease); }
.fresh .card, .fresh .tile, .fresh .panel { animation: cardIn .55s var(--ease) both; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(360px circle at var(--mx, -300px) var(--my, -300px), rgba(15,136,138,.09), transparent 60%); opacity: 0; transition: opacity .35s; }
.spot:hover::before { opacity: 1; }
.card-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-h b, .tile h3, .panel h2 { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.card-h span, .panel > .sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-fg); }
.panel > .sub { margin: 2px 0 18px; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .1s; } .d3 { animation-delay: .15s; } .d4 { animation-delay: .2s; } .d5 { animation-delay: .25s; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-top span { font-size: 12.5px; font-weight: 500; color: var(--muted-fg); }
.stat-top i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.stat-top i svg { width: 16px; height: 16px; }
.stat-v { margin-top: 8px; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-v small { font-size: 15px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.stat-sub { margin-top: 8px; font-size: 12px; color: var(--muted-fg); }
.stat.tone-negative { background: linear-gradient(to bottom right, var(--surface), rgba(253,229,221,.6)); }
.stat.tone-warning { background: linear-gradient(to bottom right, var(--surface), rgba(253,240,206,.6)); }
.stat.tone-negative .stat-v { color: var(--negative); } .stat.tone-warning .stat-v { color: var(--warning); } .stat.tone-positive .stat-v { color: var(--positive); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.soon { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--faint); }
.soon svg { width: 14px; height: 14px; }
.tile.dark, .card.dark { background: var(--fg); color: #fff; }
.tile.dark .k, .card.dark .k { color: rgba(255,255,255,.6); }

.progress { height: 6px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #3a8fd6); transition: width .9s var(--ease); }
.card.dark .progress, .tile.dark .progress { background: rgba(255,255,255,.12); }
.ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(#7fe0c9 calc(var(--p) * 1%), rgba(255,255,255,.12) 0); display: grid; place-items: center; flex: none; }
.ring b { width: 48px; height: 48px; border-radius: 50%; background: var(--fg); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500; }

/* Segmenté */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; padding: 4px; border-radius: 12px; background: var(--surface-a); box-shadow: var(--shadow-card); scrollbar-width: none; }
.seg button, .seg a { position: relative; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; border: 0; border-radius: 9px; background: none; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); cursor: pointer; transition: color .2s, background .25s var(--ease), box-shadow .25s; }
.seg button:hover, .seg a:hover { color: var(--fg); }
.seg .on { background: var(--fg); color: #fff !important; box-shadow: 0 4px 12px -4px rgba(16,34,44,.5); }
.seg em { font-style: normal; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.seg .on em { color: rgba(255,255,255,.65); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.toolbar .with-icon { flex: 1; min-width: 240px; }

/* Vide, chargement */
.empty { padding: 28px; text-align: center; color: var(--muted-fg); font-size: 13px; }
.empty-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; animation: popIn .4s var(--ease) both; }
.empty-box .ico { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.empty-box .ico svg { width: 24px; height: 24px; }
.empty-box b { font-size: 15px; font-weight: 700; }
.empty-box span { margin-top: 6px; max-width: 448px; font-size: 13px; color: var(--muted-fg); }
.empty-box .btn { margin-top: 20px; }
.gate { min-height: 55vh; display: grid; place-items: center; }

/* Lignes de liste */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 -12px; border-radius: 12px; transition: background .2s, box-shadow .2s; }
.list-row:hover { background: var(--surface); box-shadow: var(--shadow-card); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .grow b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .grow span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.list-row > .mono, .list-row > b.mono { font-weight: 500; }

.avatar { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted-fg); background: linear-gradient(to bottom right, var(--muted), rgba(216,226,232,.6)); box-shadow: inset 0 0 0 1px rgba(216,226,232,.7); transition: transform .3s; }

/* Lignes courtes (tableau de bord, pièces) */
.tx { display: grid; grid-template-columns: 64px 1fr auto 120px; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; transition: background .25s, box-shadow .3s var(--ease), transform .35s var(--spring); }
.fresh .tx, .tx.in { animation: rowIn .45s var(--ease) both; }
.tx:hover { background: var(--surface); box-shadow: var(--shadow-card); }
.tx:hover .avatar { transform: scale(1.1); }
.tx-date { font-family: var(--mono); font-size: 12.5px; color: var(--muted-fg); }
.tx-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tx-main > span { min-width: 0; }
.tx-main b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-main span span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tx-amt { font-family: var(--mono); font-weight: 500; text-align: right; }
.tx-amt.in { color: var(--positive); }

/* ---------- Banque ---------- */
.table-box { background: var(--surface-a); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; box-shadow: var(--shadow-card); padding: 6px; }
.fresh .table-box { animation: cardIn .55s var(--ease) .1s both; }
.ledger-head, .op-line { display: grid; grid-template-columns: 60px minmax(180px, 1.3fr) minmax(180px, 1.1fr) 120px 118px 104px; gap: 12px; align-items: center; padding: 0 16px; }
.ledger-head { padding-top: 12px; padding-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.ledger-month { display: flex; align-items: center; gap: 12px; padding: 16px 16px 6px; }
.ledger-month > span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.ledger-month .line { flex: 1; height: 1px; background: var(--border); }
.ledger-month .sum { font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.op { position: relative; border-radius: 12px; transition: background .25s, box-shadow .3s var(--ease), transform .35s var(--spring); }
.rows-in .op { animation: rowIn .45s var(--ease) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }
.op:hover { background: var(--surface); box-shadow: var(--shadow-card); }
.op.is-open { background: var(--surface); box-shadow: var(--shadow-lift); z-index: 1; }
.op.locked { opacity: .7; }
.op-line { min-height: 60px; padding-top: 10px; padding-bottom: 10px; cursor: pointer; outline: none; border-radius: 12px; }
.op-line:focus-visible { box-shadow: 0 0 0 3px rgba(15,136,138,.2); }
.op-line > .mono.soft { font-size: 12.5px; }
.op-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.op:hover .avatar { transform: scale(1.1); }
.who-txt { min-width: 0; flex: 1; }
.who-txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-txt > span { display: flex; align-items: center; min-width: 0; margin-top: 3px; }
.who-txt small { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cat { min-width: 0; }
.cat-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-a); cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; color: var(--fg); transition: all .2s; }
.cat-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-btn::after { content: ''; flex: none; width: 14px; height: 14px; background: currentColor; color: var(--faint); -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' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%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' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.cat-btn:hover { border-color: rgba(141,160,169,.6); background: var(--surface); }
.cat-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15,136,138,.12); }
.cat-btn.empty { border-style: dashed; color: var(--faint); font-weight: 500; }
.cat-btn:disabled { cursor: default; opacity: .7; }
.cat-btn:disabled::after { display: none; }
.cat-btn em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-soft); padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.cat-multi, .cat-static { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-static { color: var(--muted-fg); }
.op-vat { font-size: 12px; white-space: nowrap; color: var(--muted-fg); }
.op-amt { text-align: right; font-weight: 500; white-space: nowrap; font-size: 13.5px; }
.op-act { display: flex; justify-content: flex-end; }
.op-act .btn { min-width: 84px; }
.lock { color: var(--faint); display: grid; place-items: center; width: 32px; height: 32px; }
.lock svg { width: 15px; height: 15px; }
.op.flash { animation: flashOk .5s var(--spring) both; }
.op.flash .op-line { background: var(--positive-soft); transition: background .2s; }
@keyframes flashOk { 0% { transform: none; } 35% { transform: scale(1.012); } 100% { transform: translateX(10px); opacity: .6; } }

/* Détail d'une opération (ligne dépliée) */
.op-open { margin: 0 8px 8px; padding: 16px 20px; border-radius: 12px; background: var(--sunken); display: flex; flex-direction: column; gap: 14px; animation: popIn .3s var(--ease) both; }
.op-bank { margin: 0; font-size: 12px; color: var(--muted-fg); }
.sec-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.lines { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.lines-head, .lrow { display: grid; grid-template-columns: minmax(200px, 1fr) 120px 110px 110px 32px; gap: 8px; align-items: center; }
.lines-head { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.money { position: relative; display: block; }
.money .input { font-family: var(--mono); text-align: right; padding-right: 30px; height: 36px; }
.money i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 500; color: var(--faint); pointer-events: none; }
.lrow select.input { height: 36px; }
.split-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 760px; font-size: 12.5px; }
.files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 12.5px; font-weight: 600; max-width: 300px; transition: all .2s; }
.file i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--negative); background: var(--negative-soft); padding: 2px 6px; border-radius: 6px; }
.file a { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file a:hover { color: var(--brand); }
.file button { border: 0; background: none; padding: 0; display: grid; cursor: pointer; color: var(--faint); }
.file button svg { width: 13px; height: 13px; }
.file.add { background: var(--surface-a); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-fg); cursor: pointer; border: 0; }
.file.add:hover { background: var(--surface); color: var(--brand); transform: translateY(-1px); }
.file.add svg { width: 15px; height: 15px; }
.pick { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card); padding: 4px 16px; max-width: 760px; }
.pick .list-row { margin: 0; padding: 10px 0; border-radius: 0; box-shadow: none !important; background: none !important; border-bottom: 1px solid var(--muted); }
.pick .list-row:last-child { border-bottom: 0; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f.memo { max-width: 760px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.open-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 760px; }

/* Facture lue */
.inv { max-width: 760px; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); animation: popIn .35s var(--ease) both; }
.inv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.inv-h span { display: flex; align-items: center; gap: 6px; }
.inv-h svg { width: 15px; height: 15px; }
.inv.ok .inv-h span { color: var(--positive); }
.inv.warn .inv-h span { color: var(--warning); }
.inv-h em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.inv-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.inv-g div { padding: 8px 10px; border-radius: 10px; background: var(--muted); }
.inv-g span { display: block; font-size: 11px; font-weight: 600; color: var(--faint); }
.inv-g b { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; }
.inv p { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--warning); }
.file.reading { pointer-events: none; color: var(--brand); }
.file.reading svg { animation: spin 1s linear infinite; }

/* Liste des catégories (comme le menu déroulant Dealyx) */
.catpick { position: fixed; z-index: 70; display: flex; flex-direction: column; max-height: 400px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(216,226,232,.7); background: var(--surface-a); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 18px 44px -14px rgba(16,34,44,.35); animation: popIn .14s var(--ease) both; }
.cp-search { display: flex; align-items: center; gap: 10px; margin: 6px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--muted); color: var(--faint); }
.cp-search svg { width: 16px; height: 16px; }
.cp-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13.5px; color: var(--fg); }
.cp-list { flex: 1; overflow-y: auto; padding: 0 6px 6px; scrollbar-width: thin; }
.cp-group { padding: 12px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cp-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.cp-item b { display: block; font-size: 13px; font-weight: 600; }
.cp-item span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted-fg); line-height: 1.35; }
.cp-item.on { background: var(--muted); }
.cp-item.sel b { color: var(--brand); }
.cp-item.sel b::after { content: ' ✓'; }
.cp-empty { padding: 16px 12px; color: var(--faint); font-size: 12.5px; }
.cp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--muted); font-size: 11.5px; color: var(--faint); }
.cp-foot label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted-fg); }
.cp-foot input { accent-color: var(--brand); }

/* Fenêtre du bas (téléphone) — comme la Modal Dealyx */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(16,34,44,0); backdrop-filter: blur(0); transition: background .25s, backdrop-filter .25s; }
.sheet.open { background: rgba(16,34,44,.25); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 30px 80px -20px rgba(16,34,44,.45); padding: 8px 20px 0; display: flex; flex-direction: column; gap: 16px; transform: translateY(100%); transition: transform .35s var(--spring); }
.sheet.open .sheet-panel { transform: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); align-self: center; flex: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-head b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sheet-head span:not(.mono) { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-fg); }
.sheet-head .mono { font-size: 17px; font-weight: 500; white-space: nowrap; }
.cat-card { display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface-a); cursor: pointer; }
.cat-card b { display: block; font-weight: 600; font-size: 14px; }
.cat-card span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-fg); }
.file.big { height: 48px; flex: 1 1 calc(50% - 4px); justify-content: center; max-width: none; font-size: 14px; }
.file.big.dark { background: var(--brand); color: #fff; box-shadow: var(--shadow-glow); }
.sheet-foot { position: sticky; bottom: 0; background: var(--surface); display: flex; gap: 8px; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); margin-top: auto; }
.sheet-foot .btn { height: 48px; font-size: 14.5px; }
.sheet-foot .btn-primary { flex: 1; }
.catpick.as-sheet { left: 0 !important; right: 0; bottom: 0; top: auto; width: auto !important; max-height: 80vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.catpick.as-sheet .cp-search { height: 44px; margin: 12px; }
.catpick.as-sheet .cp-search input { font-size: 16px; }

/* ---------- Tutoriel / tiroir (Drawer Dealyx) ---------- */
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(16,34,44,.15); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.tuto { visibility: hidden; position: fixed; top: 12px; bottom: 12px; right: 12px; z-index: 40; width: min(420px, calc(100vw - 24px)); background: var(--surface); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(16,34,44,.45); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateX(60px); transition: transform .35s var(--spring), opacity .25s, visibility 0s .35s; }
.tuto.open { visibility: visible; opacity: 1; transform: none; transition: transform .35s var(--spring), opacity .25s; }
.tuto header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; }
.tuto header h2 { font-size: 16px; font-weight: 700; }
.tuto header p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-fg); }
.tuto header .icon-btn { background: none; box-shadow: none; width: 30px; height: 30px; color: var(--faint); }
.tuto header .icon-btn:hover { background: var(--muted); color: var(--fg); }
.tuto ol { list-style: none; padding: 0 24px 24px; margin: 0; overflow-y: auto; counter-reset: s; }
.tuto li { counter-increment: s; position: relative; padding: 12px 12px 12px 52px; margin-bottom: 8px; border-radius: 16px; background: var(--sunken); font-size: 13px; }
.tuto li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-family: var(--mono); font-weight: 500; display: grid; place-items: center; font-size: 12.5px; }
.tuto li b { display: block; font-weight: 700; margin-bottom: 2px; }
.tuto li span { color: var(--muted-fg); }

/* Toasts — en haut au centre, sombres */
.toasts { position: fixed; inset: 16px 0 auto; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; max-width: 448px; padding: 12px 16px; border-radius: 16px; background: var(--fg); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 18px 40px -12px rgba(16,34,44,.45); opacity: 0; transform: translateY(-16px) scale(.95); transition: opacity .3s, transform .4s var(--spring); }
.toast svg { width: 16px; height: 16px; margin-top: 1px; color: #7fe0c9; }
.toast.show { opacity: 1; transform: none; }
.toast-err { background: var(--surface); color: var(--negative); box-shadow: 0 18px 40px -12px rgba(16,34,44,.45), inset 0 0 0 1px rgba(193,83,47,.2); }
.toast-err svg { color: var(--negative); }

/* ---------- Écrans d'accès (comme Dealyx Login) ---------- */
.auth { position: relative; display: flex; min-height: 100vh; overflow: hidden; }
.auth .backdrop .b1 { width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(20,163,164,.28), transparent); }
.auth .backdrop .b2 { width: 680px; height: 680px; background: radial-gradient(closest-side, rgba(120,170,220,.28), transparent); }
.auth-side { position: relative; flex: 1; }
.float-card { position: absolute; padding: 16px 20px; border-radius: 16px; box-shadow: var(--shadow-lift); animation: cardIn .6s var(--ease) both, floatCard 6s ease-in-out infinite; }
@keyframes floatCard { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.float-card span { display: block; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.float-card b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.float-card b svg { width: 20px; height: 20px; }
.auth-pitch { position: absolute; left: 8%; bottom: 12%; max-width: 460px; animation: cardIn .8s var(--ease) .5s both; }
.auth-pitch h2 { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.auth-pitch h2 em { font-style: normal; background: linear-gradient(90deg, var(--brand), #3a8fd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-pitch p { margin: 12px 0 0; font-size: 14px; color: var(--muted-fg); }
.auth-main { display: flex; align-items: center; justify-content: center; width: 520px; flex: none; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; padding: 32px; border-radius: 26px; background: var(--surface-a); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 40px 100px -30px rgba(16,34,44,.45); animation: cardIn .6s var(--ease) both; }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-logo img { width: 44px; height: 44px; filter: drop-shadow(0 8px 16px rgba(15,139,141,.4)); animation: wob 4s ease-in-out infinite; }
@keyframes wob { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
.auth-logo b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.auth-logo span { display: block; font-size: 12.5px; color: var(--muted-fg); }
.auth-card h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.auth-card .sub { margin: 4px 0 20px; font-size: 13px; color: var(--muted-fg); }
.auth-card ol { padding-left: 18px; color: var(--muted-fg); margin: 0 0 16px; font-size: 13px; }
.qr { display: flex; gap: 16px; align-items: center; padding: 12px; margin-bottom: 16px; border-radius: 16px; background: var(--muted); }
.qr img { width: 120px; height: 120px; border-radius: 10px; background: var(--surface); }
.secret { font-family: var(--mono); font-size: 11.5px; word-break: break-all; background: var(--surface); padding: 6px 8px; border-radius: 8px; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.codes code { font-family: var(--mono); background: var(--muted); border-radius: 10px; padding: 8px; text-align: center; font-size: 13px; }

/* ---------- Parcours d'arrivée ---------- */
.wizard { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.steps { position: sticky; top: 28px; }
.steps-prog { display: flex; justify-content: space-between; padding: 0 12px 6px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.steps-prog b { font-family: var(--mono); font-weight: 500; color: var(--brand); }
.steps .progress { margin: 0 12px 12px; }
.step-link { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; margin-bottom: 2px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted-fg); cursor: pointer; transition: all .2s; }
.step-link:hover { color: var(--fg); }
.step-link.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-card); }
.step-link:disabled { opacity: .5; cursor: not-allowed; }
.step-num { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 11.5px; background: var(--muted); color: var(--faint); flex: none; }
.step-link.done .step-num { background: var(--positive-soft); color: var(--positive); }
.step-link.skipped .step-num { background: var(--warning-soft); color: var(--warning); }
.step-link.active .step-num { background: var(--brand); color: #fff; }
.panel h2 { font-size: 16px; }
.panel-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--muted); }
.q { margin-bottom: 18px; }
.q .label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.method label { position: relative; display: block; padding: 14px; border-radius: 16px; background: var(--sunken); cursor: pointer; transition: all .25s var(--spring); }
.method label:hover { background: var(--surface); transform: translateY(-2px); }
.method input { position: absolute; opacity: 0; }
.method label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--brand); }
.method b { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 700; }
.method span { font-size: 12px; color: var(--muted-fg); }
.howto { padding-left: 18px; margin: 0 0 16px; color: var(--muted-fg); line-height: 1.75; font-size: 13px; }

/* ---------- Paramètres (comme Dealyx) ---------- */
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.set-nav { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--muted-fg); transition: all .2s; }
.set-nav a:hover { color: var(--fg); }
.set-nav a.on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-card); }
.set-nav a svg { width: 16px; height: 16px; }
.set-nav a.on svg { color: var(--brand); }
.set-body { min-width: 0; max-width: 896px; display: flex; flex-direction: column; gap: 20px; padding-bottom: 96px; }
.set-body section { scroll-margin-top: 24px; }
.jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.job { position: relative; overflow: hidden; padding: 16px; border-radius: 16px; background: var(--sunken); transition: background .2s; }
.job:hover { background: var(--muted); }
.job-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.job-h b { display: block; font-size: 13.5px; font-weight: 700; }
.job-h small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.job-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted-fg); }
.alive { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--positive); }
.alive::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 2.2s ease-in-out infinite; }
.alive.off { color: var(--warning); } .alive.off::before { animation: none; }
.set-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; background: var(--sunken); margin-bottom: 8px; }
.set-row .grow { flex: 1; min-width: 0; }
.set-row .grow b { display: block; font-size: 13.5px; font-weight: 600; }
.set-row .grow span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-fg); }
.tiles2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.co-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--sunken); text-align: left; border: 0; cursor: pointer; transition: all .25s var(--spring); color: var(--fg); }
.co-tile:hover { background: var(--surface); transform: translateY(-2px); }
.co-tile.on { background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--brand); }
.co-tile b { display: block; font-size: 13.5px; font-weight: 700; }
.co-tile small { display: block; font-size: 11px; font-weight: 600; color: var(--faint); }
.co-tile .ok { position: absolute; right: 10px; top: 10px; color: var(--brand); }
.co-tile .ok svg { width: 16px; height: 16px; }
.dirty-bar { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 30; margin: 0 auto; width: calc(100% - 24px); max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 16px; background: var(--fg); color: #fff; box-shadow: 0 24px 60px -12px rgba(16,34,44,.6); transform: translateY(100px); opacity: 0; transition: transform .45s var(--spring), opacity .3s; }
.dirty-bar.show { transform: none; opacity: 1; }
.dirty-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #f0c060; animation: breathe 2.2s ease-in-out infinite; }
.dirty-bar > span { font-size: 13px; font-weight: 600; }
.dirty-bar .acts { margin-left: auto; display: flex; gap: 6px; }
.dirty-bar .undo { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dirty-bar .undo:hover { background: rgba(255,255,255,.1); color: #fff; }
.dirty-bar .undo svg { width: 14px; height: 14px; }
.dirty-bar .btn { height: 36px; }
@media (min-width: 1024px) { .dirty-bar { left: 260px; } }

/* Choix de l'apparence */
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .themes { grid-template-columns: 1fr 1fr; } }
.theme-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 0; border-radius: 16px; background: var(--sunken); cursor: pointer; text-align: left; color: var(--fg); transition: transform .35s var(--spring), box-shadow .3s, background .2s; }
.theme-tile:hover { transform: translateY(-2px); background: var(--surface); }
.theme-tile.on { background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--brand); }
.th-prev { position: relative; display: block; height: 92px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.th-prev i { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 26%; border-radius: 8px; }
.th-prev b { position: absolute; left: calc(26% + 16px); right: 8px; top: 8px; height: 46px; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.th-prev em { display: block; height: 7px; width: 60%; border-radius: 4px; }
.th-txt b { display: block; font-size: 13.5px; font-weight: 700; }
.th-txt small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.theme-tile .ok { position: absolute; right: 16px; top: 16px; color: var(--brand); }
.theme-tile .ok svg { width: 18px; height: 18px; }
[data-vt="theme"]::view-transition-old(root) { animation: vtFade .35s ease both; }
[data-vt="theme"]::view-transition-new(root) { animation: vtFadeIn .45s ease both; }
@media (max-width: 760px) { .themes { grid-template-columns: 1fr; } }

/* ---------- Motion design ---------- */
html { scroll-behavior: smooth; }
/* Transitions entre pages (View Transitions) : la page glisse, la pastille du menu se déplace */
.page { view-transition-name: page; }
.side .sidebar { view-transition-name: side; }
.vt-nav { view-transition-name: navpill; }
.vt-seg { view-transition-name: segpill; }
.vt-step { view-transition-name: steppill; }
.page-head h1 { view-transition-name: ptitle; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-group(navpill), ::view-transition-group(segpill), ::view-transition-group(steppill) { animation-duration: .5s; animation-timing-function: cubic-bezier(.34,1.3,.64,1); }
::view-transition-old(navpill), ::view-transition-new(navpill), ::view-transition-old(segpill), ::view-transition-new(segpill), ::view-transition-old(steppill), ::view-transition-new(steppill) { animation: none; mix-blend-mode: normal; height: 100%; }
::view-transition-old(page) { animation: vtOut .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(page) { animation: vtIn .42s cubic-bezier(.22,1,.36,1) both; }
::view-transition-old(ptitle) { animation: vtOut .18s ease both; }
::view-transition-new(ptitle) { animation: vtTitle .5s cubic-bezier(.22,1,.36,1) both; }
[data-vt="tab"]::view-transition-old(page) { animation: vtFade .16s ease both; }
[data-vt="tab"]::view-transition-new(page) { animation: vtFadeIn .3s ease both; }
[data-vt="tab"] .page-head h1 { view-transition-name: none; }
::view-transition-old(side), ::view-transition-new(side) { animation: none; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.995); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes vtTitle { from { opacity: 0; transform: translateX(-14px); } }
@keyframes vtFade { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }
.fresh .page { animation: none; }
@supports not (view-transition-name: a) { .fresh .page { animation: pageIn .38s var(--ease) both; } }

/* Pastilles actives (menu, onglets, étapes) */
.nav a.active, .step-link.active { background: transparent; box-shadow: none; }
.pill-bg { position: absolute; inset: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); z-index: 0; }
.nav a > svg, .nav a > span, .nav a > .badge, .step-link > :not(.pill-bg) { position: relative; z-index: 1; }
.seg .on { background: transparent; box-shadow: none; }
.seg-bg { position: absolute; inset: 0; border-radius: 9px; background: var(--fg); box-shadow: 0 4px 12px -4px rgba(16,34,44,.5); z-index: 0; }
.seg button > span, .seg button > em { position: relative; z-index: 1; }
.seg button:active { transform: scale(.96); }

/* Survols */
.nav a { transition: color .2s, background .25s, transform .3s var(--spring); }
.nav a:hover:not(.active) { transform: translateX(3px); }
.nav a svg { transition: transform .35s var(--spring), color .2s; }
.nav a:hover svg { transform: scale(1.12) rotate(-4deg); }
.logo:hover img { animation: wob .6s var(--spring); }
.side-search:focus-within { box-shadow: 0 0 0 4px rgba(15,136,138,.12), var(--shadow-card); }
.side-search kbd { transition: opacity .2s; }
.side-search:focus-within kbd { opacity: 0; }
.month-ring { transition: transform .35s var(--spring), box-shadow .3s; }
.month-ring:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card.spot:hover, .stat:hover, .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.set-body .card.spot:hover { transform: none; box-shadow: var(--shadow-card); }
.stat-top i { transition: transform .5s var(--spring), background .3s; }
.stat:hover .stat-top i { transform: rotate(-10deg) scale(1.12); }
.stat-v { transition: color .3s; }
.stat.bump .stat-v { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.06); } }
.btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 60%); opacity: 0; transition: opacity .3s; }
.btn-primary:hover::after { opacity: 1; }
.btn svg { transition: transform .4s var(--spring); }
.btn:hover svg { transform: translateX(1px) scale(1.08); }
#bSync:hover svg, #qSync:hover svg { transform: rotate(180deg); }
.btn-primary:hover svg { transform: scale(1.15) rotate(-8deg); }
.tour-btn svg { transition: transform .5s var(--spring); }
.tour-btn:hover svg { transform: rotate(18deg) scale(1.1); }
.icon-btn:active, .tour-btn:active, .file.add:active, .choice span:active, .cp-item:active, .co-tile:active { transform: scale(.96); }
.op:hover { transform: translateY(-1px); }
.op.is-open { transform: none; }
.op-line .op-amt { transition: transform .35s var(--spring); }
.op:hover .op-amt { transform: translateX(-2px); }
.op-act .btn { transition: transform .3s var(--spring), background .2s, box-shadow .2s, opacity .2s; }
.tx:hover { transform: translateX(3px); }
.cat-btn { transition: border-color .2s, background .2s, box-shadow .25s, transform .3s var(--spring); }
.cat-btn:active { transform: scale(.98); }
.cat-btn em { transition: transform .4s var(--spring); }
.op:hover .cat-btn em { transform: scale(1.06); }
.list-row { transition: background .25s, box-shadow .3s var(--ease), transform .35s var(--spring); }
.list-row:hover { transform: translateX(3px); }
.set-nav a { transition: color .2s, transform .3s var(--spring); }
.set-nav a:hover:not(.on) { transform: translateX(3px); }
.set-nav a.on { transition: color .2s, background .3s var(--ease), box-shadow .3s; }
.job { transition: background .25s, transform .35s var(--spring); }
.job:hover { transform: translateY(-2px); }
.cp-item { transition: background .15s, padding-left .25s var(--spring); }
.cp-item.on { padding-left: 16px; }
.catpick .cp-item { animation: rowIn .3s var(--ease) both; }
.choice span { transition: all .3s var(--spring); }
.choice input:checked + span { animation: pop .35s var(--spring); }
@keyframes pop { 50% { transform: scale(1.06); } }
.input { transition: border-color .2s, background .2s, box-shadow .25s var(--ease); }
.inv-g div { transition: transform .35s var(--spring); }
.inv:hover .inv-g div { transform: translateY(-1px); }
.inv-g div:nth-child(2) { transition-delay: .03s; } .inv-g div:nth-child(3) { transition-delay: .06s; }
.empty-box .ico { animation: floaty 3.2s ease-in-out infinite; }
.pill.dot::before { transition: transform .3s; }
.op-open > * { animation: rowIn .4s var(--ease) both; }
.op-open > *:nth-child(2) { animation-delay: .04s; } .op-open > *:nth-child(3) { animation-delay: .08s; } .op-open > *:nth-child(4) { animation-delay: .12s; } .op-open > *:nth-child(n+5) { animation-delay: .16s; }
/* Toast : petite barre de temps */
.toast { position: relative; overflow: hidden; }
.toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(127,224,201,.7); transform-origin: left; animation: toastBar var(--t, 3.8s) linear forwards; }
.toast-err::after { background: rgba(193,83,47,.4); }
@keyframes toastBar { to { transform: scaleX(0); } }
/* Tactile : retour au toucher */
@media (hover: none) {
  .card.spot:hover, .stat:hover, .op:hover, .tx:hover, .list-row:hover, .nav a:hover:not(.active) { transform: none; }
  .op-line:active, .tx:active, .card.spot:active { transform: scale(.985); transition: transform .15s; }
}


/* ---------- Tableau de bord ---------- */
.setup-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; color: #fff; text-decoration: none; }
.setup-card .btn { pointer-events: none; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-l { font-size: 12.5px; font-weight: 600; color: var(--muted-fg); }
.kpi-v { margin-top: 10px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fresh .kpi-v { animation: blurIn .9s var(--ease) .15s both; }
@keyframes blurIn { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }
.kpi-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; min-height: 34px; }
.kpi-f .pill { white-space: normal; line-height: 1.25; padding: 5px 10px; max-width: 60%; }
.spark { width: 110px; height: 34px; flex: none; overflow: visible; }
.spark .sp-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.4s var(--ease) .3s forwards; vector-effect: non-scaling-stroke; }
.spark .sp-area { opacity: 0; animation: fadeIn .8s ease 1s forwards; }
.spark .sp-flat { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 3 3; }
.spark.c1 .sp-line { stroke: var(--brand); } .spark.c1 .sp-area { fill: var(--brand); fill-opacity: .1; }
.spark.c2 .sp-line { stroke: var(--c-pos); } .spark.c2 .sp-area { fill: var(--c-pos); fill-opacity: .1; }
.spark.c3 .sp-line { stroke: var(--c-teal); } .spark.c3 .sp-area { fill: var(--c-teal); fill-opacity: .1; }
.spark.c4 .sp-line { stroke: var(--accent-2); } .spark.c4 .sp-area { fill: var(--accent-2); fill-opacity: .12; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* Frise des 6 prochains mois */
.frise-card { margin-bottom: 16px; }
.frise { position: relative; padding: 4px 0 6px; }
.fr-months { display: grid; grid-template-columns: repeat(6, 1fr); }
.fr-months span { padding-left: 8px; border-left: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }
.fr-track { position: relative; height: 6px; margin: 64px 0 64px; border-radius: 3px; background: var(--track); }
.fr-past { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--brand); transform-origin: left; animation: growX 1s var(--ease) .3s both; }
@keyframes growX { from { transform: scaleX(0); } }
.fr-today { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.fr-today b { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px var(--brand-soft); animation: pulseRing 1.8s ease-out infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--brand-soft), 0 0 0 6px var(--brand-soft); } 100% { box-shadow: 0 0 0 14px transparent, 0 0 0 6px var(--brand-soft); } }
.fr-today em { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.fr-mk { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1; animation: popIn .5s var(--spring) both; }
.fr-mk > i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--brand); transition: transform .3s var(--spring); }
.fr-mk:hover > i { transform: scale(1.35); }
.fr-mk.k-impot > i, .fr-mk.k-bilan > i { border-color: var(--accent-2); }
.fr-mk.k-juridique > i { border-color: var(--c-pos); }
.fr-tip { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; text-align: center; }
.fr-mk.up .fr-tip { bottom: 22px; } .fr-mk.down .fr-tip { top: 22px; }
.fr-mk.up .fr-tip::after, .fr-mk.down .fr-tip::before { content: ''; display: block; width: 1.5px; height: 10px; margin: 2px auto; background: currentColor; opacity: .25; }
.fr-mk.down .fr-tip::before { margin: 0 auto 4px; }
.fr-tip b { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; }
.fr-tip small { display: block; font-size: 10.5px; color: var(--muted-fg); }

/* Mosaïque */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.b-2 { grid-column: span 2; } .b-4 { grid-column: span 4; } .b-6 { grid-column: span 6; } .b-r2 { grid-row: span 2; align-self: stretch; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tchart-wrap { height: 240px; }
.col-flex { display: flex; flex-direction: column; }
.col-flex .tchart-wrap { flex: 1; min-height: 240px; height: auto; }
.fr-mk.edge-r .fr-tip { left: auto; right: -6px; transform: none; text-align: right; }
.fr-mk.edge-l .fr-tip { left: -6px; transform: none; text-align: left; }
.fr-mk.edge-r .fr-tip::after, .fr-mk.edge-r .fr-tip::before { margin-right: 10px; } .fr-mk.edge-l .fr-tip::after, .fr-mk.edge-l .fr-tip::before { margin-left: 10px; }
.tchart { width: 100%; height: 100%; overflow: visible; }
.ch-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-zero { stroke: var(--negative); stroke-width: 1; stroke-dasharray: 3 4; opacity: .5; vector-effect: non-scaling-stroke; }
.ch-area { fill: var(--brand); fill-opacity: .1; opacity: 0; animation: fadeIn 1s ease .9s forwards; }
.ch-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.6s cubic-bezier(.6,0,.2,1) .25s forwards; vector-effect: non-scaling-stroke; }
.ch-fc { fill: none; stroke: var(--brand); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 5 5; opacity: 0; animation: fadeIn .8s ease 1.5s forwards; vector-effect: non-scaling-stroke; }
.ch-today { stroke: var(--border); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ch-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.ch-ping { fill: var(--brand); opacity: .4; animation: ping 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ping { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.2); opacity: 0; } }
.ch-lab { font-size: 10.5px; fill: var(--faint); font-family: var(--font); }

/* Contrôle du mois (tuile sombre) */
.ctrl { background: var(--tile-dark); color: #fff; }
.ctrl-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ctrl-h b { display: block; font-size: 15px; font-weight: 700; }
.ctrl-h span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.62); }
.ring.big { width: 68px; height: 68px; background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); }
.ring.big b { width: 54px; height: 54px; background: var(--tile-dark); font-size: 19px; }
.ctrl-list { display: flex; flex-direction: column; gap: 8px; }
.ctrl-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 12.5px; font-weight: 600; transition: background .2s, transform .3s var(--spring); }
.ctrl-row:hover { background: rgba(255,255,255,.1); transform: translateX(2px); }
.ctrl-row > svg { width: 18px; height: 18px; color: #7fe0a8; flex: none; }
.ctrl-row.bad { background: rgba(232,145,63,.16); }
.ctrl-row.bad > svg { color: var(--accent-2); }
.ctrl-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl-btn { background: var(--accent-2); color: #fff; box-shadow: none; flex: none; }
.ctrl-btn:hover { background: var(--accent-2); filter: brightness(1.08); }

/* Clôture du mois */
.clo-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.clo-h b { font-size: 15px; font-weight: 700; }
.clo-pct { font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.clo-steps { margin-top: 12px; display: flex; flex-direction: column; }
.clo-step { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.clo-step i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--muted); color: var(--muted-fg); }
.clo-step i svg { width: 14px; height: 14px; }
.clo-step.ok i { background: var(--positive); color: #fff; }
.clo-step.wait i { background: var(--warning-soft); color: var(--warning); }
.clo-step b { flex: 1; font-weight: 600; }
.clo-step span { font-size: 12px; font-weight: 600; color: var(--muted-fg); font-variant-numeric: tabular-nums; }

/* Démarches */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kb-col { padding: 12px; border-radius: 16px; background: var(--sunken); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kb-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kb-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.k-doing .kb-h i { background: var(--accent-2); } .k-done .kb-h i { background: var(--positive); } .k-todo .kb-h i { background: var(--faint); }
.kb-h em { margin-left: auto; font-style: normal; color: var(--muted-fg); }
.kb-card { display: block; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--fg); text-decoration: none; transition: transform .3s var(--spring), box-shadow .3s; }
.kb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.kb-card b { display: block; font-size: 13px; font-weight: 700; }
.kb-card span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.kb-empty { padding: 10px 4px; font-size: 12px; color: var(--faint); }

/* Dernières opérations, frais du mois */
.ops-h, .ops-r { display: grid; grid-template-columns: 70px minmax(90px, .8fr) minmax(0, 1.4fr) 110px; gap: 10px; align-items: center; padding: 0 8px; }
.ops-h { padding-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.ops-r { width: 100%; min-height: 40px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 13px; color: var(--fg); cursor: pointer; transition: background .2s, transform .3s var(--spring); }
.ops-r:hover { background: var(--sunken); transform: translateX(2px); }
.ops-r b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-r .r { font-weight: 700; font-variant-numeric: tabular-nums; }
.fresh .ops-r { animation: rowIn .45s var(--ease) both; animation-delay: calc(.3s + var(--i) * 40ms); }
.chip-s { display: inline-block; max-width: 100%; font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: var(--muted); color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.tot { font-size: 15px; font-weight: 800; }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hb { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.hb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb i { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.hb i b, .plat i b, .vatbar b, .vatbar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.gx { transform-origin: left; animation: growX 1s var(--ease) .4s both; }
.hb em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Analyses */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted-fg); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.lg1 { background: var(--brand); } .lg2 { background: var(--chart-2); } .lg3 { background: var(--accent-2); height: 3px !important; border-radius: 2px !important; }
.bchart-wrap { height: 220px; }
.bchart { width: 100%; height: 100%; overflow: visible; }
.bchart .b1 { fill: var(--brand); } .bchart .b2 { fill: var(--chart-2); }
.bchart .grow { transform-box: fill-box; transform-origin: bottom; animation: growY .8s var(--ease) both; }
@keyframes growY { from { transform: scaleY(0); } }
.bchart .b3 { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.4s var(--ease) .6s forwards; vector-effect: non-scaling-stroke; }
.bchart .b3d { fill: var(--accent-2); opacity: 0; animation: fadeIn .4s ease 1.6s forwards; }
.bchart .hz-g:hover rect { filter: brightness(1.1); }
.dn-wrap { display: grid; place-items: center; margin-bottom: 8px; }
.donut { width: 150px; height: 150px; transform: rotate(-90deg); }
.donut text { transform: rotate(90deg); transform-origin: 70px 70px; }
.dn-t { fill: none; stroke: var(--track); stroke-width: 20; }
.dn { fill: none; stroke-width: 20; animation: dnIn 1.3s cubic-bezier(.3,0,.2,1) .4s both; }
@keyframes dnIn { from { stroke-dasharray: 0 999; } }
.dn.s0, .plat .s0 { stroke: var(--brand); background: var(--brand); } .dn.s1, .plat .s1 { stroke: var(--chart-3); background: var(--chart-3); } .dn.s2, .plat .s2 { stroke: var(--accent-2); background: var(--accent-2); } .dn.s3, .plat .s3 { stroke: var(--c-teal); background: var(--c-teal); }
.dn-v { font-size: 18px; font-weight: 800; fill: var(--fg); font-family: var(--font); }
.dn-s { font-size: 10.5px; fill: var(--muted-fg); font-family: var(--font); }
.plats { display: flex; flex-direction: column; gap: 10px; }
.plat > div { display: flex; align-items: baseline; gap: 2px; font-size: 12.5px; }
.plat > div span { color: var(--muted-fg); }
.plat > div em { margin-left: auto; font-style: normal; font-weight: 700; }
.plat i { display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-w { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--faint); }
.cal-d { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; font-size: 11.5px; font-weight: 600; background: var(--muted); color: var(--muted-fg); animation: popIn .35s var(--ease) both; transition: transform .25s var(--spring); }
.cal-d:hover { transform: scale(1.1); z-index: 2; }
.cal-d.l1 { background: var(--chart-3); color: var(--fg); } .cal-d.l2 { background: color-mix(in srgb, var(--brand) 65%, transparent); color: #fff; } .cal-d.l3 { background: var(--brand); color: #fff; }
.cal-d.today { box-shadow: 0 0 0 2px var(--accent-2); }
.cal-d.future { opacity: .45; }
.cal-d .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 8px; border-radius: 8px; background: var(--ink-tile); color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.cal-d:hover .tip { opacity: 1; }
.vatbar { display: flex; gap: 3px; height: 12px; margin-top: 14px; }
.vatbar b { border-radius: 6px 0 0 6px; }
.vatbar i { background: var(--chart-3); border-radius: 0 6px 6px 0; }
.vatleg { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted-fg); }
.dl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.dl { display: grid; grid-template-columns: 64px 10px minmax(0, auto) 1fr; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.dl.past { opacity: .45; }
.dl-d { font-weight: 700; font-variant-numeric: tabular-nums; }
.dl-k { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.dl-k.k-impot, .dl-k.k-bilan { background: var(--accent-2); } .dl-k.k-juridique { background: var(--c-pos); }

@media (max-width: 1100px) {
  .col-flex .tchart-wrap { flex: none; height: 220px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: auto !important; grid-row: auto !important; }
  .dl-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kpis { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-v { font-size: 22px; }
  .kpi-f { flex-direction: column; align-items: flex-start; }
  .kpi-f .pill { max-width: 100%; }
  .spark { width: 100%; }
  .fr-months span { font-size: 9.5px; padding-left: 4px; letter-spacing: .02em; }
  .fr-tip { max-width: 90px; }
  .fr-tip small { display: none; }
  .kanban { grid-template-columns: 1fr; }
  .ops-h { display: none; }
  .ops-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l a" "s d"; row-gap: 0; padding: 8px; }
  .ops-r > :nth-child(1) { grid-area: d; font-size: 11.5px; text-align: right; }
  .ops-r > :nth-child(2) { grid-area: s; }
  .ops-r > :nth-child(3) { grid-area: l; }
  .ops-r > :nth-child(4) { grid-area: a; }
  .tchart-wrap, .bchart-wrap { height: 190px; }
}
/* Tuiles Studio : orange un peu plus doux */
[data-look="mix"] { --accent-2: #F08A3C; --c-pos: #16A34A; --c-teal: #0F766E; }
[data-look="mix"][data-mode="dark"] { --accent-2: #F39A55; --c-pos: #4ADE80; --c-teal: #2DD4BF; }

/* Confettis (mois entièrement rangé) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 11px; border-radius: 2px; animation: fall 2.6s cubic-bezier(.25,.6,.4,1) var(--d) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }

.tabbar { display: none; }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1280px) {
  .ledger-head, .op-line { grid-template-columns: 54px minmax(160px, 1.2fr) minmax(160px, 1fr) 112px 96px; }
  .ledger-head > :nth-child(4), .op-vat { display: none; }
}
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3, .span-4, .span-5 { grid-column: span 6; }
  .span-6, .span-7, .span-8 { grid-column: span 12; }
}

/* ---------- Téléphone (en dessous de 1024 px : menu caché, comme Dealyx) ---------- */
@media (max-width: 1023px) {
  .side { position: fixed; inset: 0 auto 0 0; z-index: 45; width: 272px; padding: 12px; transform: translateX(-110%); transition: transform .35s var(--spring); }
  .side.open { transform: none; }
  .side .sidebar { background: var(--side-m); box-shadow: var(--shadow-lift); backdrop-filter: none; }
  .scrim.menu { z-index: 44; }
  .m-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; }
  .m-head::before { content: ''; position: absolute; left: 8px; right: 8px; top: 8px; height: 48px; z-index: -1; border-radius: 16px; background: var(--glass-bg); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
  .m-head .hb { padding: 8px; border: 0; border-radius: 12px; background: none; cursor: pointer; display: grid; place-items: center; color: var(--fg); }
  .m-head .hb:hover { background: var(--surface-a); }
  .m-head .hb svg { width: 20px; height: 20px; }
  .m-head .logo { min-width: 0; }
  .m-head .end { margin-left: auto; display: flex; align-items: center; }
  .page { padding: 16px 16px 40px; }
  .settings { grid-template-columns: 1fr; }
  .set-nav { display: none; }
  .wizard { grid-template-columns: 1fr; }
  .steps { position: static; }
  .auth-side { display: none; }
  .auth-main { width: 100%; padding: 24px; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .page-head { margin-bottom: 18px; gap: 12px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { font-size: 13px; }
  .ph-r .btn span { display: none; }
  .ph-r .btn { width: 40px; padding: 0; }
  .ph-r .btn.keep-label { width: auto; padding: 0 16px; }
  .ph-r .btn.keep-label span { display: inline; }
  .stats { gap: 10px; margin-bottom: 16px; }
  .stat { padding: 14px; }
  .stat-top span { font-size: 12px; }
  .stat-top i { width: 28px; height: 28px; }
  .stat-v { font-size: 22px; margin-top: 6px; }
  .stat-sub { display: none; }
  .grid { gap: 12px; }
  .span-3, .span-4, .span-5, .span-6 { grid-column: span 12; }
  .card, .tile, .panel { padding: 16px; }
  .row { flex-direction: column; gap: 0; }
  .method, .tiles2, .jobs { grid-template-columns: 1fr; }
  .input { height: 44px; font-size: 16px; }
  .toolbar .with-icon { min-width: 100%; }
  .tx { grid-template-columns: 1fr auto; }
  .tx-date { display: none; }
  .tx-flags { grid-column: 1 / -1; justify-content: flex-start; padding-left: 50px; }

  /* Banque */
  .seg { width: 100%; }
  .seg button { flex: 1; justify-content: center; padding: 8px 6px; }
  .table-box { padding: 4px; }
  .ledger-head { display: none; }
  .ledger-month { padding: 14px 12px 6px; }
  .ledger-month .sum { display: none; }
  .op-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av who amt" "av cat cat"; column-gap: 12px; row-gap: 2px; padding: 12px; min-height: 0; }
  .op-line > .mono.soft { display: none; }
  .op-who { display: contents; }
  .op-who .avatar { grid-area: av; align-self: center; width: 42px; height: 42px; }
  .who-txt { grid-area: who; }
  .who-txt b { font-size: 14.5px; }
  .who-txt > span { position: absolute; right: 12px; top: 36px; margin: 0; }
  .who-txt small { display: none; }
  .who-txt .tag { margin: 0 0 0 4px; }
  .op-cat { grid-area: cat; min-width: 0; padding-right: 92px; }
  .cat-btn, .cat-btn:disabled { pointer-events: none; height: auto; padding: 0; border: 0 !important; background: none; font-size: 12.5px; font-weight: 500; color: var(--muted-fg); justify-content: flex-start; gap: 6px; opacity: 1; }
  .cat-btn::after { display: none; }
  .cat-btn.empty span { color: var(--faint); }
  .cat-btn em { margin-left: 0; padding: 2px 7px; font-size: 10.5px; }
  .cat-multi, .cat-static { font-size: 12.5px; font-weight: 500; color: var(--muted-fg); }
  .op-vat, .op-act { display: none; }
  .op-amt { grid-area: amt; font-size: 14.5px; }
  .op-open { display: none !important; }
  .op:hover { background: none; box-shadow: none; }
  .op-line:active { background: var(--surface); box-shadow: var(--shadow-card); }
  .lines-head { display: none; }
  .lrow { position: relative; grid-template-columns: 1fr 1fr; padding: 12px; border-radius: 16px; background: var(--sunken); }
  .lrow .cat-btn { grid-column: 1 / -1; pointer-events: auto; height: 44px; padding: 0 14px; border: 1px solid var(--border) !important; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--fg); }
  .lrow .l-del { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); }
  .money .input { height: 44px; }
  .files .file:not(.big):not(.add) { flex: 1 1 100%; max-width: none; height: 44px; }
  .files #pickPiece { flex: 1 1 100%; max-width: none; justify-content: center; height: 44px; }
  .tuto { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .auth-card { padding: 24px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   VARIANTE « Version mixée » (Atelier + Prisme + Horizon, validée le 06/10/2026)
   Manrope, fond crème, menu blanc, accent cobalt, cartes arrondies 20 px.
   Activée par <html data-look="mix"> (+ data-mode="dark" pour la version sombre).
   ===================================================================== */
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

[data-look="mix"] {
  --bg: #F3F4F1; --surface: #FFFFFF; --fg: #15171A; --muted: #F0F1EE; --muted-fg: #5A6068; --faint: #8A9098; --border: #E7E8E4;
  --brand: #2952E3; --brand-deep: var(--active-fg); --brand-soft: var(--active-bg);
  --positive: #157A3C; --positive-soft: #E7F5EC; --negative: #C2392D; --negative-soft: #FCEBEA; --warning: #9A4A12; --warning-soft: #FFF1E6;
  --orange: #F08A3C;
  --shadow-card: 0 1px 2px rgba(21,23,26,.05), 0 0 0 1px #E7E8E4;
  --shadow-lift: 0 18px 40px rgba(21,23,26,.09), 0 0 0 1px #E7E8E4;
  --shadow-glow: 0 6px 18px rgba(41,82,227,.28);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --surface-a: #FFFFFF; --glass-bg: #FFFFFF; --sunken: #F7F8F5; --hover: #FAFAF8; --side-m: #FFFFFF;
  --active-bg: #EAF0FF; --active-fg: #1E46C8; --ink-tile: #15171A; --tile-dark: #15171A;
  --chart-2: #C9D4F7; --chart-3: #9DB2F7; --track: #F0F1EE;
}
[data-look="mix"] body { font-size: 14px; }
[data-look="mix"] ::selection { background: rgba(41,82,227,.16); }
[data-look="mix"] .backdrop { display: none; }
/* Pas de dégradés : la mise en avant se fait par les couleurs pleines */
[data-look="mix"] .spot::before, [data-look="mix"] .btn::after { display: none; }
[data-look="mix"] .stat.tone-negative, [data-look="mix"] .stat.tone-warning { background: var(--surface); }
[data-look="mix"] .progress > i { background: var(--brand); }

/* Menu latéral blanc, collé à gauche */
[data-look="mix"] .side { width: 232px; padding: 0; }
[data-look="mix"] .sidebar { border-radius: 0; background: var(--surface); border: 0; border-right: 1px solid var(--border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-look="mix"] .logo img { content: url(/icon-tally.svg); width: 30px; height: 30px; filter: none; animation: none; }
[data-look="mix"] .logo small { color: var(--muted-fg); }
[data-look="mix"] .side-search { box-shadow: none; background: var(--muted); border-radius: 12px; height: 44px; }
[data-look="mix"] .side-search:focus-within { background: var(--surface); box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px rgba(41,82,227,.12); }
[data-look="mix"] .nav-section { padding: 14px 12px 6px; letter-spacing: .06em; font-size: 11px; }
[data-look="mix"] .nav-section:not(:first-child) { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; }
[data-look="mix"] .nav a { min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--muted-fg); }
[data-look="mix"] .nav a svg { width: 19px; height: 19px; stroke-width: 1.8; }
[data-look="mix"] .nav a:hover { background: var(--muted); }
[data-look="mix"] .pill-bg { background: var(--active-bg); box-shadow: none; }
[data-look="mix"] .nav a.active, [data-look="mix"] .nav a.active svg { color: var(--active-fg); }
[data-look="mix"] .nav a .badge { background: var(--brand); color: #fff; border-radius: 10px; font-family: var(--font); font-weight: 700; padding: 0 7px; }
[data-look="mix"] .nav a .badge.orange { background: var(--orange); color: #fff; }
[data-look="mix"] .month-ring { background: var(--muted); box-shadow: none; border-radius: 14px; }
[data-look="mix"] .month-ring:hover { box-shadow: none; }
[data-look="mix"] .month-ring .ring-svg .v { stroke: var(--orange); }
[data-look="mix"] .month-ring .ring-svg .t { stroke: #E3E5E0; }
[data-look="mix"] .month-ring b { font-family: var(--font); font-weight: 800; }

/* Page, en-tête, cartes */
[data-look="mix"] .page { padding: 28px 30px 40px; }
[data-look="mix"] .eyebrow { color: var(--muted-fg); letter-spacing: .08em; }
[data-look="mix"] .page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
[data-look="mix"] .page-head p { font-size: 14px; }
[data-look="mix"] .card, [data-look="mix"] .tile, [data-look="mix"] .panel { border-radius: 20px; padding: 22px; }
[data-look="mix"] .card.spot:hover, [data-look="mix"] .stat:hover, [data-look="mix"] .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
[data-look="mix"] .card.dark { background: var(--tile-dark); box-shadow: none; }
[data-look="mix"] .card.dark .progress { background: #2C3036; }
[data-look="mix"] .card.dark .progress > i { background: var(--orange); }
[data-look="mix"] .ring { background: conic-gradient(var(--orange) calc(var(--p) * 1%), #2C3036 0); }
[data-look="mix"] .ring b { background: var(--tile-dark); font-family: var(--font); font-weight: 800; }
[data-look="mix"] .card-h b, [data-look="mix"] .panel h2 { font-size: 16px; font-weight: 700; }
[data-look="mix"] .stats { gap: 18px; }
[data-look="mix"] .stat-top span { font-size: 13px; font-weight: 600; }
[data-look="mix"] .stat-top i { border-radius: 12px; background: var(--active-bg); color: var(--brand); }
[data-look="mix"] .stat-v { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
[data-look="mix"] .fresh .stat-v { animation: blurIn .9s var(--ease) both; }
@keyframes blurIn { from { opacity: 0; filter: blur(6px); } }
[data-look="mix"] .fresh .card, [data-look="mix"] .fresh .tile, [data-look="mix"] .fresh .panel { animation: mixIn .6s var(--ease) both; }
@keyframes mixIn { from { opacity: 0; transform: translateY(12px); } }
[data-look="mix"] .d1 { animation-delay: .06s; } [data-look="mix"] .d2 { animation-delay: .12s; } [data-look="mix"] .d3 { animation-delay: .18s; } [data-look="mix"] .d4 { animation-delay: .24s; } [data-look="mix"] .d5 { animation-delay: .3s; }

/* Boutons, champs, pastilles */
[data-look="mix"] .btn { height: 44px; border-radius: 12px; font-weight: 700; font-size: 14px; }
[data-look="mix"] .btn-sm { height: 34px; font-size: 13px; border-radius: 10px; }
[data-look="mix"] .btn-lg { height: 50px; }
[data-look="mix"] .btn-primary:hover { background: var(--active-fg); }
[data-look="mix"] .tour-btn, [data-look="mix"] .icon-btn { border-radius: 12px; width: 44px; height: 44px; background: var(--surface); }
[data-look="mix"] .input { height: 44px; border-radius: 12px; background: var(--surface); border-color: var(--border); font-size: 14px; }
[data-look="mix"] .input:focus { box-shadow: 0 0 0 4px rgba(41,82,227,.12); }
[data-look="mix"] .pill { border-radius: 20px; font-size: 12px; font-weight: 700; }
[data-look="mix"] .seg { background: var(--surface); box-shadow: var(--shadow-card); border-radius: 12px; }
[data-look="mix"] .seg button { font-weight: 700; font-size: 13px; }
[data-look="mix"] .seg-bg { background: var(--active-bg); box-shadow: none; }
[data-look="mix"] .seg .on { color: var(--active-fg) !important; }
[data-look="mix"] .seg .on em { color: #5D7BE8; }
[data-look="mix"] .choice span { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
[data-look="mix"] .choice input:checked + span { background: var(--active-bg); color: var(--active-fg); box-shadow: 0 0 0 1px var(--brand); }
[data-look="mix"] .toast { background: var(--ink-tile); border-radius: 14px; }
[data-look="mix"] .toast svg { color: #9DB2F7; }
[data-look="mix"] .toast::after { background: rgba(157,178,247,.7); }
[data-look="mix"] .notice.warn { background: #FFF1E6; color: #9A4A12; }
[data-look="mix"] .notice.warn svg { color: #C2410C; }

/* Banque */
[data-look="mix"] .table-box { background: var(--surface); backdrop-filter: none; border-radius: 20px; padding: 8px; }
[data-look="mix"] .ledger-month > span:first-child { color: var(--fg); letter-spacing: .06em; }
[data-look="mix"] .ledger-month .sum { font-family: var(--font); font-variant-numeric: tabular-nums; }
[data-look="mix"] .op:hover { background: var(--hover); box-shadow: none; }
[data-look="mix"] .op.is-open { background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(21,23,26,.09); }
[data-look="mix"] .op-open { background: var(--sunken); }
[data-look="mix"] .mono, [data-look="mix"] .op-amt, [data-look="mix"] .tx-amt, [data-look="mix"] .money .input, [data-look="mix"] .who-txt small, [data-look="mix"] .tx-date { font-family: var(--font); font-variant-numeric: tabular-nums; }
[data-look="mix"] .op-amt, [data-look="mix"] .tx-amt { font-weight: 700; }
[data-look="mix"] .avatar { border-radius: 12px; background: var(--muted); box-shadow: none; color: var(--muted-fg); font-weight: 800; }
[data-look="mix"] .cat-btn { border-radius: 12px; background: var(--surface); }
[data-look="mix"] .cat-btn em { background: var(--active-bg); color: var(--active-fg); border-radius: 20px; }
[data-look="mix"] .file { box-shadow: 0 0 0 1px var(--border); }
[data-look="mix"] .file i { color: #9A4A12; background: #FFF1E6; }
[data-look="mix"] .file.big.dark { background: var(--brand); }
[data-look="mix"] .catpick { border-radius: 18px; background: var(--surface); backdrop-filter: none; border-color: var(--border); box-shadow: 0 18px 40px rgba(21,23,26,.14); }
[data-look="mix"] .cp-item.on { background: var(--active-bg); }
[data-look="mix"] .inv { box-shadow: 0 0 0 1px var(--border); border-radius: 16px; }
[data-look="mix"] .inv-g b { font-family: var(--font); font-weight: 800; }

/* Paramètres, parcours */
[data-look="mix"] .set-nav a.on { background: var(--active-bg); color: var(--active-fg); box-shadow: none; }
[data-look="mix"] .set-nav a.on svg { color: var(--active-fg); }
[data-look="mix"] .set-row, [data-look="mix"] .job, [data-look="mix"] .method label, [data-look="mix"] .co-tile { background: var(--sunken); }
[data-look="mix"] .co-tile.on, [data-look="mix"] .method label:has(input:checked) { background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
[data-look="mix"] .step-num { font-family: var(--font); font-weight: 800; }
[data-look="mix"] .dirty-bar { background: var(--ink-tile); border-radius: 16px; }
@media (min-width: 1024px) { [data-look="mix"] .dirty-bar { left: 232px; } }

/* Connexion */
[data-look="mix"] .auth-card { background: var(--surface); backdrop-filter: none; border-radius: 24px; box-shadow: 0 0 0 1px var(--border), 0 30px 70px -30px rgba(21,23,26,.25); }
[data-look="mix"] .auth-logo img { content: url(/icon-tally.svg); filter: none; }
[data-look="mix"] .auth-pitch h2 em { background: none; color: var(--brand); }
[data-look="mix"] .float-card { background: var(--surface); border: 0; box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(21,23,26,.09); backdrop-filter: none; }

/* Téléphone */
@media (max-width: 1023px) {
  [data-look="mix"] .side { padding: 0; width: 272px; }
  [data-look="mix"] .side .sidebar { background: var(--surface); border-radius: 0 20px 20px 0; }
  [data-look="mix"] .m-head::before { background: rgba(243,244,241,.9); border: 0; box-shadow: 0 0 0 1px var(--border); }
  [data-look="mix"] .page { padding: 16px 16px 40px; }
}
@media (max-width: 760px) {
  [data-look="mix"] .stat-v { font-size: 24px; }
  [data-look="mix"] .page-head h1 { font-size: 23px; }
}
[data-vt="theme"]::view-transition-old(*) { animation: vtFade .3s ease both; }
[data-vt="theme"]::view-transition-new(*) { animation: vtFadeIn .45s ease both; }

/* ---------- Version sombre (même design, gris très foncé) ---------- */
[data-look="mix"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #121316; --surface: #1B1C20; --surface-a: #1F2025; --glass-bg: #1B1C20; --sunken: #222328; --hover: #1F2024; --side-m: #18191C;
  --fg: #ECEDEF; --muted: #25272C; --muted-fg: #A3A8B0; --faint: #70767F; --border: #2A2C32;
  --brand: #5D7EFA; --brand-deep: #7D97FF; --brand-soft: rgba(93,126,250,.16);
  --active-bg: rgba(93,126,250,.16); --active-fg: #AFC0FF;
  --positive: #5CC98A; --positive-soft: rgba(92,201,138,.14); --negative: #F0806F; --negative-soft: rgba(240,128,111,.14);
  --warning: #F2B26B; --warning-soft: rgba(242,178,107,.14); --orange: #F39A55;
  --ink-tile: #2B2D33; --tile-dark: #0D0E10;
  --chart-2: #2C3550; --chart-3: #4A5DA8; --track: #26282D;
  --shadow-card: 0 0 0 1px #2A2C32;
  --shadow-lift: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px #34363D;
  --shadow-glow: 0 6px 18px rgba(93,126,250,.3);
}
[data-look="mix"][data-mode="dark"] body { background: var(--bg); }
[data-look="mix"][data-mode="dark"] .input, [data-look="mix"][data-mode="dark"] select.input { background-color: var(--surface); }
[data-look="mix"][data-mode="dark"] .input:focus { background-color: var(--surface); }
[data-look="mix"][data-mode="dark"] .card.dark .progress { background: #26282D; }
[data-look="mix"][data-mode="dark"] .ring { background: conic-gradient(var(--orange) calc(var(--p) * 1%), #26282D 0); }
[data-look="mix"][data-mode="dark"] .logo img, [data-look="mix"][data-mode="dark"] .auth-logo img { content: url(/icon-tally-dark.svg); }
[data-look="mix"][data-mode="dark"] .th-prev { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
[data-look="mix"][data-mode="dark"] .m-head::before { background: rgba(18,19,22,.9); }
[data-look="mix"][data-mode="dark"] .sheet.open { background: rgba(0,0,0,.5); }
[data-look="mix"][data-mode="dark"] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; }
[data-look="mix"][data-mode="dark"] .qr img { background: #fff; }
[data-look="mix"][data-mode="dark"] .month-ring .ring-svg .t { stroke: #2F3137; }

/* =====================================================================
   TALLY · DA « Le t point » (validée le 07/10/2026)
   Bleu-vert #0F888A, jaune #F2B33D, Plus Jakarta Sans, cartes sombres bleu nuit.
   + 2 détails de la piste « Ticket » : pointillés sous les titres de cartes,
     bord dentelé sur la carte « Contrôle du mois ».
   S'applique aux apparences Clair / Sombre / Auto (data-look="mix").
   ===================================================================== */
html[data-look="mix"] {
  --bg: #E8EEF2; --surface: #FFFFFF; --fg: #10232D; --muted: #EEF3F6; --muted-fg: #5A6D77; --faint: #8DA0A9; --border: #DCE5EA;
  --brand: #0F888A; --orange: #F2B33D; --yellow: #F2B33D;
  --active-bg: #E1F4F2; --active-fg: #0A6466; --ink-tile: #10232D; --tile-dark: #10232D;
  --chart-2: #BFE6E2; --chart-3: #6CC3BF; --track: #E3EAEE; --accent-2: #F2B33D; --c-teal: #0F888A;
  --surface-a: #FFFFFF; --glass-bg: #FFFFFF; --sunken: #F4F7F9; --hover: #F7FAFB; --side-m: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(16,35,45,.05), 0 0 0 1px #DCE5EA;
  --shadow-lift: 0 18px 40px rgba(16,35,45,.10), 0 0 0 1px #DCE5EA;
  --shadow-glow: 0 6px 18px rgba(15,136,138,.30);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dash: #DCE5EA; --zig-track: #1F3A47;
}
html[data-look="mix"] body { font-family: var(--font); }
html[data-look="mix"] ::selection { background: rgba(15,136,138,.18); }
/* Le nom s'écrit « tally. » avec un point jaune ; les titres de page aussi */
html[data-look="mix"] .logo b, html[data-look="mix"] .auth-logo b { text-transform: lowercase; font-weight: 800; letter-spacing: -.045em; }
html[data-look="mix"] .logo b { font-size: 20px; }
html[data-look="mix"] .logo b::after, html[data-look="mix"] .auth-logo b::after, html[data-look="mix"] .page-head h1::after { content: "."; color: var(--yellow); }
html[data-look="mix"] .page-head h1 { font-weight: 800; letter-spacing: -.035em; }
html[data-look="mix"] .kpi-v, html[data-look="mix"] .stat-v { letter-spacing: -.04em; }
html[data-look="mix"] .card, html[data-look="mix"] .tile, html[data-look="mix"] .panel { border-radius: 24px; }
/* Boutons, champs */
html[data-look="mix"] .btn-primary { background: var(--brand); }
html[data-look="mix"] .btn-primary:hover { background: var(--active-fg); }
html[data-look="mix"] .side-search:focus-within { box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px rgba(15,136,138,.14); }
html[data-look="mix"] .input:focus { box-shadow: 0 0 0 4px rgba(15,136,138,.14); }
html[data-look="mix"] .nav a .badge { background: var(--brand); color: #fff; }
html[data-look="mix"] .nav a .badge.orange { background: var(--yellow); color: #10232D; }
html[data-look="mix"] .seg .on em { color: #14A3A4; }
html[data-look="mix"] .stat-top i { background: var(--active-bg); color: var(--brand); }
html[data-look="mix"] .toast svg { color: var(--yellow); }
html[data-look="mix"] .toast::after { background: rgba(242,179,61,.7); }
html[data-look="mix"] .auth-pitch h2 em { color: var(--brand); }
/* Anneaux et barres */
html[data-look="mix"] .month-ring .ring-svg .t { stroke: #D6E0E6; }
html[data-look="mix"] .card.dark .progress { background: var(--zig-track); }
html[data-look="mix"] .ring { background: conic-gradient(var(--orange) calc(var(--p) * 1%), var(--zig-track) 0); }
/* Détail Ticket n°1 : pointillés sous les titres de cartes */
html[data-look="mix"] .card-h { border-bottom: 1.5px dashed var(--dash); padding-bottom: 12px; margin-bottom: 14px; }
html[data-look="mix"] .card.dark .card-h { border-bottom-color: rgba(255,255,255,.14); }
/* Détail Ticket n°2 : bord dentelé en bas de la carte « Contrôle du mois » */
html[data-look="mix"] .card.ctrl {
  border-radius: 24px 24px 0 0; padding-bottom: 32px;
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/20px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/20px 10px repeat-x;
}
html[data-look="mix"] .card.ctrl:hover { transform: none; }

/* ---------- Tally sombre (bleu nuit) ---------- */
html[data-look="mix"][data-mode="dark"] {
  --bg: #0B181F; --surface: #12242E; --surface-a: #152833; --glass-bg: #12242E; --sunken: #172B36; --hover: #152833; --side-m: #10202A;
  --fg: #E8EEF2; --muted: #1A2F3B; --muted-fg: #9AB0BA; --faint: #6B8591; --border: #1F3542;
  --brand: #2EC4C2; --brand-deep: #7FDCD8; --brand-soft: rgba(46,196,194,.16);
  --active-bg: rgba(46,196,194,.15); --active-fg: #8FE3DF;
  --orange: #F2B33D; --yellow: #F2B33D; --accent-2: #F2B33D; --c-teal: #2EC4C2;
  --ink-tile: #1F3A47; --tile-dark: #07131A;
  --chart-2: #1C3F48; --chart-3: #2A8E8D; --track: #1A2E39;
  --shadow-card: 0 0 0 1px #1F3542;
  --shadow-lift: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px #28424F;
  --shadow-glow: 0 6px 18px rgba(46,196,194,.28);
  --dash: #24404E; --zig-track: #1A2E39;
}
html[data-look="mix"][data-mode="dark"] .btn-primary { color: #07131A; }
html[data-look="mix"][data-mode="dark"] .btn-primary:hover { background: #7FDCD8; }
html[data-look="mix"][data-mode="dark"] .nav a .badge { color: #07131A; }
html[data-look="mix"][data-mode="dark"] .month-ring .ring-svg .t { stroke: #24404E; }
html[data-look="mix"][data-mode="dark"] .card.dark .progress { background: var(--zig-track); }
html[data-look="mix"][data-mode="dark"] .ring { background: conic-gradient(var(--orange) calc(var(--p) * 1%), var(--zig-track) 0); }
html[data-look="mix"][data-mode="dark"] .m-head::before { background: rgba(11,24,31,.9); }
@media (max-width: 1023px) { html[data-look="mix"] .m-head::before { background: rgba(232,238,242,.9); } html[data-look="mix"][data-mode="dark"] .m-head::before { background: rgba(11,24,31,.9); } }

/* ---------- Page de connexion centrée (07/10/2026) ---------- */
.auth { display: grid; place-items: center; }
.auth-side { position: absolute; inset: 0; pointer-events: none; }
.auth-main { position: relative; z-index: 1; width: 100%; max-width: 460px; padding: 48px 16px; flex-direction: column; gap: 26px; }
.auth-card { max-width: 420px; }
.auth-pitch { position: static; max-width: none; text-align: center; }
.auth-pitch h2 { font-size: 34px; }
.auth-pitch p { margin-top: 8px; }
.fc-1 { left: 9%; top: 18%; }
.fc-2 { right: 9%; top: 24%; }
.fc-3 { left: 13%; bottom: 20%; }
.fc-4 { right: 12%; bottom: 16%; }
@media (max-width: 1180px) { .auth-side { display: none; } }
@media (max-width: 760px) { .auth-pitch h2 { font-size: 27px; } .auth-main { padding: 28px 16px; gap: 20px; } }
.remember { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; font-size: 13px; color: var(--muted-fg); cursor: pointer; user-select: none; }
.remember input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
/* Rappel « à compléter » en haut des Paramètres */
.later-note { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin-bottom: 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); border-left: 4px solid var(--yellow, #F2B33D); }
.later-note > svg { flex: none; margin-top: 2px; color: #C98A12; }
.later-note > div { flex: 1; min-width: 0; }
.later-note b { display: block; font-size: 14px; }
.later-note small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-fg); }
.later-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.later-pills span { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--muted); color: var(--muted-fg); }
@media (max-width: 760px) { .later-note { flex-wrap: wrap; } .later-note .btn { width: 100%; } }

/* =====================================================================
   Tableau de bord (refait le 07/10/2026) : À faire · Prochaine échéance · Ton argent
   ===================================================================== */
.b-3 { grid-column: span 3; }
.home { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.home-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.home-h b { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted-fg); text-transform: uppercase; }
.home-h em { font-style: normal; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--brand); color: #fff; }
.home-h .home-link { margin-left: auto; }
html[data-look="mix"] .home .card-h, html[data-look="mix"] .home-money .card-h { border: 0; }
.home-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
.home-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.home-link:hover svg { transform: translateX(3px); }

/* À faire */
.home-todo { display: flex; flex-direction: column; }
.todo-row { display: flex; align-items: center; gap: 14px; padding: 12px; margin: 0 -12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .18s; animation: mixIn .5s var(--ease) both; animation-delay: calc(120ms + var(--i) * 60ms); }
.todo-row + .todo-row { border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; }
.todo-row:hover { background: var(--hover); border-radius: 14px; }
.todo-row:hover + .todo-row { border-top-color: transparent; }
.todo-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.todo-ic svg { width: 18px; height: 18px; }
.t-brand { background: var(--active-bg); color: var(--brand); }
.t-yellow { background: #FDF3DC; color: #B37A0C; }
.t-red { background: var(--negative-soft); color: var(--negative); }
.t-green { background: var(--positive-soft); color: var(--positive); }
.todo-txt { flex: 1; min-width: 0; }
.todo-txt b { display: block; font-size: 14.5px; font-weight: 700; }
.todo-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-go { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--brand); background: var(--active-bg); transition: background .18s, color .18s; }
.todo-go svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.todo-row:hover .todo-go { background: var(--brand); color: #fff; }
.todo-row:hover .todo-go svg { transform: translateX(2px); }
.todo-done { display: flex; align-items: center; gap: 14px; padding: 18px 0 6px; }
.todo-done i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--positive-soft); color: var(--positive); }
.todo-done b { display: block; font-size: 15px; } .todo-done small { font-size: 12.5px; color: var(--muted-fg); }

/* Prochaine échéance */
.home-next { display: flex; flex-direction: column; }
.nx-main { display: flex; gap: 14px; align-items: flex-start; }
.nx-date { flex: none; width: 58px; padding: 8px 0 7px; border-radius: 14px; text-align: center; background: var(--tile-dark); color: #fff; }
.nx-date b { display: block; font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.nx-date span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--yellow, #F2B33D); }
.nx-txt b { display: block; font-size: 15px; font-weight: 700; }
.nx-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-fg); }
.nx-in { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--muted); color: var(--muted-fg); }
.nx-in.soon { background: #FDF3DC; color: #9A6608; }
.nx-list { margin: 16px 0 14px; border-top: 1.5px dashed var(--dash, var(--border)); padding-top: 10px; }
.nx-list div { display: flex; gap: 12px; padding: 5px 0; font-size: 13px; }
.nx-list span { width: 54px; flex: none; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.nx-list b { font-weight: 600; }
.home-next .home-link { margin-top: auto; }

/* Ton argent */
.money-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home .money { padding: 2px 20px; }
.home .money:first-child { padding-left: 0; }
.home .money + .money { border-left: 1px solid var(--border); }
.home .money > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); }
.home .money b { display: block; margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home .money > small { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }
.home-chart-wrap { position: relative; margin-top: 20px; padding-top: 16px; border-top: 1.5px dashed var(--dash, var(--border)); }
.hc-l { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.hc { position: relative; padding-bottom: 22px; }
.home-chart { width: 100%; height: 130px; display: block; overflow: visible; }
.hc-dot { position: absolute; right: 0; width: 0; height: 0; }
.hc-dot i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--brand); box-sizing: border-box; opacity: 0; animation: fadeIn .4s ease 1.5s forwards; }
.hc-dot i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--brand); opacity: .25; animation: ping 1.8s ease-out 1.6s infinite; }
.hc-x { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); }
.nx-list em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1024px) {
  .home { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .money-row { grid-template-columns: 1fr; }
  .home .money { padding: 12px 0; } .home .money + .money { border-left: 0; border-top: 1px solid var(--border); }
  .home .money b { font-size: 22px; }
  .todo-txt small { white-space: normal; }
  .todo-go { padding: 0 10px; } .todo-go svg { display: none; }
  .b-3 { grid-column: span 6; }
}

/* Courbes : le trait se dessine de gauche à droite (fonctionne aussi avec un SVG étiré) */
.ch-line { stroke-dasharray: none; stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); animation: revealX 1.5s cubic-bezier(.6,0,.2,1) .2s forwards; }
@keyframes revealX { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .ch-line { clip-path: none; animation: none; } }

/* Tableau de bord, partie compta : résultat, trésorerie, TVA, avancement */
.home-2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.home-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.res-cmp { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--dash, var(--border)); font-size: 12.5px; color: var(--muted-fg); }
.res-cmp svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
.res-cmp b { font-weight: 700; }
.res-note { margin: 10px 0 0; font-size: 12px; color: var(--faint); }
.home .money.solo { padding: 0; margin-bottom: 14px; }
.home-treso .hc { margin-top: auto; }
.home-treso { display: flex; flex-direction: column; }
.vat-lines div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 9px 0; }
.vat-lines div + div { border-top: 1px solid var(--border); }
.vat-lines span { font-size: 13.5px; font-weight: 600; }
.vat-lines small { grid-row: 2; font-size: 12px; color: var(--faint); }
.vat-lines b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vat-lines .tot { border-top: 1.5px dashed var(--dash, var(--border)) !important; margin-top: 2px; }
.vat-lines .tot span, .vat-lines .tot b { font-weight: 800; }
.vat-lines .tot b { font-size: 19px; letter-spacing: -.02em; }
.prog { display: grid; grid-template-columns: 92px minmax(60px, 1fr) auto 118px; align-items: center; gap: 14px; padding: 10px 0; }
.prog + .prog { border-top: 1px solid var(--border); }
.prog-m { font-size: 13.5px; font-weight: 700; }
.prog-bar { height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; }
.prog-bar i { display: block; height: 100%; border-radius: 6px; background: var(--brand); transform-origin: left; animation: growX .9s var(--ease) .3s both; }
@keyframes growX { from { transform: scaleX(0); } }
.prog-v { font-size: 12px; color: var(--muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog-s { justify-self: end; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.s-ok { background: var(--positive-soft); color: var(--positive); }
.s-wip { background: #FDF3DC; color: #9A6608; }
.s-none { background: var(--muted); color: var(--faint); }
@media (max-width: 1024px) { .home-2, .home-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .prog { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .prog-bar { grid-column: 1 / -1; grid-row: 2; }
  .prog-v { grid-column: 1 / -1; grid-row: 3; }
  .prog-s { grid-column: 2; grid-row: 1; }
}
.res-hist { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--dash, var(--border)); }
.rh { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 120px; }
.rh-c { display: grid; grid-template-rows: 1fr 1fr auto; position: relative; }
.rh-c::before { content: ""; position: absolute; left: -5px; right: -5px; top: calc((100% - 18px) / 2); border-top: 1px solid var(--border); }
.rh-up, .rh-dn { display: flex; justify-content: center; }
.rh-up { align-items: flex-end; } .rh-dn { align-items: flex-start; }
.rh-up i, .rh-dn i { display: block; width: min(34px, 60%); animation: growY .7s var(--ease) .3s both; }
.rh-up i { background: var(--positive); border-radius: 6px 6px 2px 2px; opacity: .8; transform-origin: bottom; }
.rh-dn i { background: var(--negative); border-radius: 2px 2px 6px 6px; opacity: .75; transform-origin: top; }
.rh-c.cur i { opacity: 1; }
.rh-c span { text-align: center; font-size: 11.5px; color: var(--faint); padding-top: 4px; }
.rh-c.cur span { color: var(--fg); font-weight: 700; }
@keyframes growY { from { transform: scaleY(0); } }
.hc-dot i::after { inset: -4px; }
/* Rangée 3 : exercice, TVA, avancement */
.home-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-meta { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ex-prog { display: flex; align-items: center; gap: 10px; margin: -2px 0 8px; }
.ex-prog .prog-bar { flex: 1; height: 5px; }
.ex-prog .prog-bar i { background: var(--yellow, #F2B33D); }
.ex-prog small { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.ex-tax { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sunken); }
.ex-tax div { flex: 1; min-width: 0; }
.ex-tax span { display: block; font-size: 13px; font-weight: 700; }
.ex-tax small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.ex-tax b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.res-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--faint); }
.res-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.home-3 .prog { grid-template-columns: 74px minmax(40px, 1fr) auto; gap: 10px; }
.home-3 .prog-v { grid-column: 1 / -1; grid-row: 2; line-height: 1.4; }
.home-3 .prog-v br { display: none; }
.home-3 .prog-v { font-size: 11.5px; }
.home-3 .prog-s { grid-column: 3; grid-row: 1; }
@media (max-width: 1280px) { .home-3 { grid-template-columns: 1fr 1fr; } .home-3 .home-prog { grid-column: 1 / -1; } }
@media (max-width: 760px) { .home-3 { grid-template-columns: 1fr; } }
.treso-fc { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); font-size: 12.5px; color: var(--muted-fg); margin-bottom: 14px; }
.treso-fc svg { width: 15px; height: 15px; flex: none; color: var(--brand); }
.treso-fc b { color: var(--fg); font-weight: 700; }
.home-treso .hc { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.home-treso .home-chart { height: 150px; }
.vat-lines .tot small { font-weight: 500; }
/* Sombre : pastilles jaunes lisibles */
html[data-mode="dark"] .t-yellow, html[data-mode="dark"] .s-wip, html[data-mode="dark"] .nx-in.soon { background: rgba(242,179,61,.14); color: #F2C66D; }
html[data-mode="dark"] .nx-date { background: #07131A; box-shadow: inset 0 0 0 1px #1F3542; }
@media (max-width: 760px) {
  .home-3 .prog { grid-template-columns: 1fr auto; }
  .home-3 .prog-m { grid-column: 1; grid-row: 1; }
  .home-3 .prog-s { grid-column: 2; grid-row: 1; }
  .home-3 .prog-bar { grid-column: 1 / -1; grid-row: 2; }
  .home-3 .prog-v { grid-column: 1 / -1; grid-row: 3; }
  .home .money { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  .home .money > span { grid-column: 1; grid-row: 1; }
  .home .money > small { grid-column: 1; grid-row: 2; margin-top: 1px; }
  .home .money b { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 19px; }
  .home .money.solo b { font-size: 24px; }
}
/* Résultat 6 mois : montant sur chaque barre */
.rh { height: 150px; }
.rh-up, .rh-dn { flex-direction: column; align-items: center; min-height: 0; }
.rh-up { justify-content: flex-end; } .rh-dn { justify-content: flex-start; }
.rh-c em { font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 16px; animation: fadeIn .4s ease .8s both; opacity: 0; }
.rh-c em.z { color: var(--faint); font-weight: 600; }
.rh-c::before { top: calc((100% - 20px) / 2); }
/* Raccourcis sous « À faire » */
.todo-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1.5px dashed var(--dash, var(--border)); }
.home-todo .todo-row:last-of-type { margin-bottom: 14px; }
.todo-quick a, .todo-quick button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--muted); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .18s, transform .18s var(--ease); }
.todo-quick a:hover, .todo-quick button:hover { background: var(--active-bg); color: var(--active-fg); transform: translateY(-1px); }
.todo-quick svg { width: 15px; height: 15px; }
.todo-quick .spin svg { animation: spin 1s linear infinite; }
/* Survol de la courbe de trésorerie */
.hc-line { position: absolute; top: 0; bottom: 22px; width: 0; border-left: 1px dashed var(--faint); pointer-events: none; }
.hc-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 6px 10px; border-radius: 10px; background: var(--ink-tile); color: #fff; font-size: 11.5px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lift); z-index: 2; }
.hc-tip b { display: block; font-size: 13px; font-weight: 800; }
.hc-tip span { color: rgba(255,255,255,.7); }
.home-chart { cursor: crosshair; }
.vat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 6px; }
.vat-head b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.vat-head .nx-in { margin: 0; }
@media (max-width: 760px) {
  .todo-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .todo-quick a, .todo-quick button { flex-direction: column; height: auto; padding: 10px 4px; gap: 5px; font-size: 11px; text-align: center; line-height: 1.2; }
  .todo-quick svg { width: 17px; height: 17px; }
}

/* ---------- Guide pas à pas (surbrillance) ---------- */
.tour { position: fixed; inset: 0; z-index: 200; opacity: 0; transition: opacity .3s; }
.tour.on { opacity: 1; }
.tour-hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(7, 19, 26, .62); outline: 2px solid rgba(255,255,255,.9); outline-offset: 0; transition: top .45s var(--spring, cubic-bezier(.3,1.3,.5,1)), left .45s var(--spring, cubic-bezier(.3,1.3,.5,1)), width .45s var(--spring, cubic-bezier(.3,1.3,.5,1)), height .45s var(--spring, cubic-bezier(.3,1.3,.5,1)), border-radius .45s; pointer-events: none; }
.tour-hole.still { transition: none; }
.tour-hole::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(242,179,61,.55); animation: tourPulse 1.8s ease-out infinite; }
@keyframes tourPulse { 0% { box-shadow: 0 0 0 0 rgba(242,179,61,.5); } 100% { box-shadow: 0 0 0 14px rgba(242,179,61,0); } }
.tour-pop { position: fixed; width: 340px; padding: 16px 18px; border-radius: 18px; background: var(--surface); color: var(--fg); box-shadow: 0 30px 70px -20px rgba(0,0,0,.5), 0 0 0 1px var(--border); opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .25s, transform .3s var(--ease), top .45s var(--ease), left .45s var(--ease); }
.tour-pop.in { opacity: 1; transform: none; }
.tp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tp-n { font-size: 12px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.tp-n em { font-style: normal; color: var(--faint); font-weight: 600; }
.tp-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; }
.tp-x:hover { background: var(--muted); color: var(--fg); }
.tp-x svg { width: 16px; height: 16px; }
.tp-t { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.tp-t::after { content: "."; color: var(--yellow, #F2B33D); }
.tp-p { margin: 6px 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted-fg); }
.tp-dots { display: flex; gap: 4px; margin-bottom: 14px; }
.tp-dots i { height: 4px; flex: 1; border-radius: 4px; background: var(--track); transition: background .3s; }
.tp-dots i.done { background: var(--chart-3, var(--brand)); }
.tp-dots i.on { background: var(--brand); }
.tp-btns { display: flex; justify-content: space-between; gap: 8px; }
.tp-btns .btn svg { width: 15px; height: 15px; }
.tour-pop.sheet-mode { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-pop { transition: none; } .tour-hole::after { animation: none; } }

/* =====================================================================
   Banque (refaite le 07/10/2026) : À ranger en haut, Rangées par mois en dessous
   ===================================================================== */
.page-head p .mono, .page-head p b.mono { font-family: var(--font); font-weight: 700; color: var(--fg); }
.bk-tools { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bk-search { flex: 1; max-width: 560px; }
.bk-search .input { height: 42px; background: var(--surface); }
.bk-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.bk-hint svg { width: 15px; height: 15px; }
.bk-sec { padding: 20px 18px 12px; margin-bottom: 16px; }
.bk-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 12px; }
.bk-h > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.bk-h b { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted-fg); text-transform: uppercase; }
.bk-h em { font-style: normal; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--brand); color: #fff; align-self: center; }
.bk-h em.grey { background: var(--muted); color: var(--muted-fg); }
.bk-h small { flex-basis: 100%; font-size: 12.5px; color: var(--faint); }
html[data-look="mix"] .bk-sec .card-h { border: 0; }
.bk-cols, .bk-sec .op-line { display: grid; grid-template-columns: 70px minmax(0, 1.35fr) minmax(0, 1.05fr) 112px 46px 92px; gap: 14px; align-items: center; padding: 0 12px; }
.bk-cols { padding-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--faint); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.bk-cols .r { text-align: right; } .bk-cols .c { text-align: center; }
.bk-sec .op-line { min-height: 58px; padding-top: 9px; padding-bottom: 9px; }
.bk-sec .op + .op { border-top: 1px solid var(--border); }
.bk-sec .op:hover + .op, .bk-sec .op.is-open + .op { border-top-color: transparent; }
.op-date { font-size: 12.5px; color: var(--muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-sec .who-txt b { font-size: 14px; }
.bk-sec .who-txt small { display: block; margin-top: 2px; font-family: var(--font); font-size: 12px; color: var(--faint); }
.bk-sec .cat-btn { height: 36px; gap: 8px; justify-content: flex-start; }
.bk-sec .cat-btn span { flex: 1; min-width: 0; }
.bk-sec .cat-btn em { margin-left: 0; }
.op .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); display: inline-block; }
.bk-sec .cat-static { display: flex; align-items: center; gap: 8px; color: var(--muted-fg); font-weight: 600; }
.bk-sec .op-amt { font-family: var(--font); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.op-pc { display: flex; justify-content: center; }
.pc { position: relative; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; }
.pc svg { width: 15px; height: 15px; }
.pc.ok { background: var(--positive-soft); color: var(--positive); }
.pc.ok small { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--positive); color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }
.pc.miss { background: var(--negative-soft); color: var(--negative); }
.pc.miss::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--negative); box-shadow: 0 0 0 2px var(--surface); }
.pc.none { color: var(--faint); }
.bk-sec .op-act .btn { min-width: 0; padding: 0 16px; }
.op-edit, .op-lock { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--faint); }
.op-edit:hover { background: var(--muted); color: var(--fg); }
.op-edit svg, .op-lock svg { width: 16px; height: 16px; }
.bk-done .op.is-done .who-txt b { font-weight: 600; }
.bk-done .op.locked { opacity: 1; }
.bk-done .op.locked .op-line { color: var(--muted-fg); }

/* Mois (section Rangées) */
.month + .month { border-top: 1px solid var(--border); }
.mh { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 12px 12px; }
.mh-t { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--fg); cursor: pointer; text-align: left; }
.mh-t b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.mh-t svg { width: 16px; height: 16px; color: var(--faint); transform: rotate(-90deg); transition: transform .25s var(--ease); }
.month.open .mh-t svg { transform: none; }
.mh-n { font-size: 12.5px; color: var(--muted-fg); white-space: nowrap; }
.mh-n em { font-style: normal; font-weight: 600; }
.mh-sum { display: inline-flex; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mstate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.mstate svg { width: 13px; height: 13px; }
.s-lock { background: var(--tile-dark); color: #fff; }
.mh .btn svg { width: 14px; height: 14px; }
.month-body { padding-bottom: 6px; }
.month-empty { padding: 4px 12px 12px; }
.btn-warn { background: var(--warning) !important; color: #fff !important; border-color: transparent !important; }

/* Glisser-déposer */
.op-drop { display: none; }
body.drag-file .bk-sec .op { outline: 1.5px dashed transparent; outline-offset: -3px; }
body.drag-file .bk-sec .op:not(.is-done):not(.locked) .op-line { opacity: .85; }
.op.drop-on { outline: 2px dashed var(--brand) !important; background: var(--active-bg) !important; box-shadow: none !important; }
.op.drop-on .op-line { opacity: .25 !important; }
.op.drop-on .op-drop { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--active-fg); pointer-events: none; z-index: 2; }
.op.drop-on .op-drop svg { width: 18px; height: 18px; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.op.uploading .op-pc .pc { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
body.drag-file .bk-hint { color: var(--brand); font-weight: 700; }
body.drag-file .bk-hint svg { animation: bob 1s ease-in-out infinite; }

@media (max-width: 1280px) {
  .bk-cols, .bk-sec .op-line { grid-template-columns: 60px minmax(0, 1.3fr) minmax(0, 1fr) 100px 40px 84px; gap: 10px; }
  .bk-hint { display: none; }
}
@media (max-width: 1100px) {
  .bk-cols { display: none; }
  .bk-sec { padding: 16px 10px 8px; }
  .bk-sec .op-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av who amt" "av cat pc"; column-gap: 12px; row-gap: 4px; padding: 12px 8px; }
  .op-date { display: none; }
  .bk-sec .op-pc { grid-area: pc; justify-content: flex-end; }
  .bk-sec .op-cat { padding-right: 0; }
  .pc { width: 24px; height: 24px; border-radius: 8px; }
  .pc svg { width: 13px; height: 13px; }
  .bk-sec .who-txt small { display: block; position: static; }
  .mh { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .mh-n { grid-column: 1; grid-row: 2; }
  .mh-sum { grid-column: 2; grid-row: 2; justify-self: end; }
  .mh > .mstate, .mh > .btn { grid-column: 2; grid-row: 1; justify-self: end; }
}
.month.empty .mh-t { cursor: default; }
.month.empty .mh-t svg { visibility: hidden; }
.month.empty .mh-t b { color: var(--muted-fg); }
@media (max-width: 760px) {
  .bk-sec .cat-btn em { display: none; }
  .bk-h { flex-direction: column; align-items: stretch; }
  .bk-h .btn { width: 100%; justify-content: center; }
  .bk-tools { margin-bottom: 12px; }
}

/* Banque : bandeau du haut */
.pulse { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); padding: 0; margin-bottom: 16px; overflow: hidden; }
.pl { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl + .pl { border-left: 1px solid var(--border); }
.pl-l { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted-fg); }
.pl-v { font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-v small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--muted-fg); }
.pl > small { font-size: 12px; color: var(--faint); }
.pl > small.c-green, .pl > small.c-red { font-weight: 600; }
.pl-bal .hc { margin-top: 4px; padding-bottom: 18px; }
.pl-bal .home-chart { height: 54px; }
.pl-bal .hc-x { font-size: 10.5px; }
.flow { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; margin-top: 4px; }
.flow > span { color: var(--muted-fg); }
.flow i { height: 8px; border-radius: 6px; background: var(--track); overflow: hidden; }
.flow i b { display: block; height: 100%; border-radius: 6px; transform-origin: left; animation: growX .9s var(--ease) .25s both; }
.flow b.in { background: var(--positive); opacity: .85; }
.flow b.out { background: var(--negative); opacity: .7; }
.flow em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 72px; text-align: right; }
.flow-net { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1.5px dashed var(--dash, var(--border)); font-size: 12.5px; color: var(--muted-fg); }
.flow-net b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-prog { align-items: flex-start; }
.pl-ring { position: relative; width: 64px; height: 64px; margin: 2px 0; }
.pl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 5; }
.pl-ring .t { stroke: var(--track); }
.pl-ring .v { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); animation: ringIn 1.1s var(--ease) .2s both; }
@keyframes ringIn { from { stroke-dashoffset: 120; } }
.pl-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.pl-ring b small { font-size: 10px; margin-left: 1px; }
.pl-bar { display: block; height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; margin: 4px 0 2px; }
.pl-bar b { display: block; height: 100%; background: var(--yellow, #F2B33D); border-radius: 6px; transform-origin: left; animation: growX .9s var(--ease) .3s both; }
.pl-docs .home-link { margin-top: auto; }
/* Hors banque */
.bk-add { position: relative; margin-left: auto; }
.bk-add > .btn svg:last-child { width: 14px; height: 14px; transition: transform .2s; }
.bk-add > .btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.bk-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(16,35,45,.16); animation: popIn .2s var(--ease) both; }
.bk-menu p { margin: 4px 8px 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.bk-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: left; color: var(--fg); cursor: pointer; }
.bk-menu button:hover:not(:disabled) { background: var(--hover); }
.bk-menu button:disabled { cursor: default; }
.bk-menu button > svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--active-bg); color: var(--brand); }
.bk-menu b { display: block; font-size: 13.5px; } .bk-menu small { display: block; font-size: 12px; color: var(--faint); }
.bk-menu em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--muted); color: var(--faint); }
@media (max-width: 1280px) { .pulse { grid-template-columns: 1fr 1fr; } .pl:nth-child(3) { border-left: 0; } .pl:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 760px) {
  .pulse { grid-template-columns: 1fr 1fr; }
  .pl { padding: 14px; } .pl-bal { grid-column: 1 / -1; } .pl-flow { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--border); }
  .pl-prog { border-left: 0 !important; } .pl-docs { border-left: 1px solid var(--border) !important; }
  .pl-v { font-size: 22px; }
  .bk-tools { flex-wrap: wrap; } .bk-search { flex-basis: 100%; max-width: none; } .bk-add { margin-left: 0; }
}
.pl-ring b { display: flex; align-items: center; justify-content: center; }
.pl-ring .v.zero { stroke: none; }

/* Banque : lignes aérées sur deux niveaux (07/10/2026) */
.bk-cols, .bk-sec .op-line { grid-template-columns: 46px minmax(0, 1.35fr) minmax(0, 1fr) 150px 96px; gap: 18px; padding: 0 16px; }
.bk-cols { padding-top: 4px; padding-bottom: 10px; margin-bottom: 0; }
.bk-sec .op { margin: 0; border-radius: 16px; }
.bk-sec .op + .op { border-top: 1px solid var(--border); }
.bk-sec .op-line { min-height: 0; padding-top: 18px; padding-bottom: 6px; }
.op-av .avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 13px; }
.op-main { min-width: 0; }
.op-main b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-main small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sec .cat-btn { height: 40px; border-radius: 12px; }
.bk-sec .op-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bk-sec .op-amt b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-sec .op-amt small { font-size: 11.5px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.bk-sec .op-act .btn { height: 38px; padding: 0 18px; }
.op-extra { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 18px calc(16px + 46px + 18px); }
.ochip { display: inline-flex; align-items: center; gap: 7px; max-width: 340px; height: 30px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--muted); color: var(--muted-fg); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, transform .18s var(--ease); }
.ochip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ochip svg { flex: none; width: 14px; height: 14px; }
.ochip em { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 8px; background: rgba(0,0,0,.06); }
.ochip:hover { transform: translateY(-1px); }
.ochip.ok { background: var(--positive-soft); color: var(--positive); }
.ochip.miss { background: transparent; color: var(--negative); box-shadow: inset 0 0 0 1.5px rgba(194,57,45,.35); border-radius: 10px; }
.ochip.miss { background-image: none; outline: 1.5px dashed rgba(194,57,45,.45); outline-offset: -1.5px; box-shadow: none; }
.ochip.miss:hover { background: var(--negative-soft); }
.ochip.none { cursor: default; color: var(--faint); background: none; padding-left: 0; }
.ochip.none:hover { transform: none; }
.ochip.memo { background: #FDF3DC; color: #8A5A06; font-weight: 500; font-style: italic; }
.ochip.add { background: none; color: var(--faint); box-shadow: inset 0 0 0 1px var(--border); }
.ochip.add:hover { color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ochip.warn { background: var(--negative-soft); color: var(--negative); cursor: default; }
html[data-mode="dark"] .ochip.memo { background: rgba(242,179,61,.14); color: #F2C66D; }
.bk-sec .op.is-open .op-extra { padding-bottom: 10px; }
.bk-sec .op-open { margin: 0 12px 14px; }
.op.flash-soft { animation: flashSoft 1s ease both; }
@keyframes flashSoft { 0%, 40% { background: var(--positive-soft); } 100% { background: transparent; } }
.bk-done .op-line { padding-top: 14px; }
.bk-done .op-extra { padding-bottom: 14px; }
@media (max-width: 1280px) {
  .bk-cols, .bk-sec .op-line { grid-template-columns: 42px minmax(0, 1.3fr) minmax(0, 1fr) 130px 88px; gap: 14px; }
  .op-extra { padding-left: calc(16px + 42px + 14px); }
}
@media (max-width: 1100px) {
  .bk-sec .op-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av main amt" "av cat cat"; row-gap: 8px; padding: 16px 10px 6px; }
  .op-av { grid-area: av; align-self: start; } .op-main { grid-area: main; } .bk-sec .op-amt { grid-area: amt; } .bk-sec .op-cat { grid-area: cat; }
  .bk-sec .op-act { display: none; }
  .op-extra { padding: 4px 10px 16px calc(10px + 46px + 12px); }
  .bk-sec .cat-btn { pointer-events: none; height: auto; padding: 0; border: 0 !important; background: none; }
  .bk-sec .cat-btn::after { display: none; }
}
@media (max-width: 760px) {
  .op-extra { padding-left: 10px; }
  .ochip { max-width: 100%; }
}
.ochip i.hide-phone { font-style: normal; }
@media (max-width: 760px) {
  .ochip i.hide-phone, .ochip.add, .bk-sec .op-amt small { display: none; }
  .op-extra { padding: 2px 10px 14px; }
}

/* Tableau de bord : bandeau d'accueil */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 20px; margin-bottom: 16px; padding: 26px 30px; border-radius: 26px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 85% 10%, #14A3A4 0%, #0F888A 38%, #0A6466 100%); box-shadow: 0 18px 40px -20px rgba(10,100,102,.6); animation: mixIn .6s var(--ease) both; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 12% 110%, rgba(242,179,61,.28), transparent 70%); pointer-events: none; }
.hero-txt { position: relative; z-index: 1; min-width: 0; }
.hero-date { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.hero-h { margin: 6px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.hero-h i { font-style: normal; color: var(--yellow, #F2B33D); }
.hero-p { margin: 8px 0 0; font-size: 15px; color: rgba(255,255,255,.88); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-tags span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.14); backdrop-filter: blur(4px); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hero-tags svg { width: 14px; height: 14px; opacity: .85; }
.hero-art { position: relative; z-index: 1; height: 170px; }
.hero-art svg { width: 100%; height: 100%; overflow: visible; }
.ha-halo { fill: rgba(255,255,255,.08); }
.ha-bars rect { fill: rgba(255,255,255,.22); transform-box: fill-box; transform-origin: bottom; animation: growY .8s var(--ease) both; }
.ha-bars rect:nth-child(2) { animation-delay: .12s; } .ha-bars rect:nth-child(3) { animation-delay: .24s; }
.ha-trend { fill: none; stroke: var(--yellow, #F2B33D); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.2s var(--ease) .5s forwards; }
.ha-tip { fill: var(--yellow, #F2B33D); opacity: 0; animation: fadeIn .3s ease 1.6s forwards, haPulse 2.2s ease-in-out 2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes haPulse { 50% { transform: scale(1.5); } }
.ha-ticket { animation: haFloat 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ha-ticket > path:first-child { fill: #fff; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
.ha-ticket .ln { fill: #DCE5EA; }
.ha-ticket .ck { fill: none; stroke: #0F888A; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ckDraw .6s var(--ease) .9s forwards; }
@keyframes ckDraw { to { stroke-dashoffset: 0; } }
@keyframes haFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(-2deg); } }
.ha-coins ellipse { fill: #E6A22E; stroke: #F6C766; stroke-width: 2; }
.ha-coins ellipse.top { fill: #F2B33D; }
.ha-coins { animation: haFloat2 6s ease-in-out .5s infinite; }
@keyframes haFloat2 { 50% { transform: translateY(-4px); } }
.ha-dot { fill: var(--yellow, #F2B33D); animation: haFloat2 4s ease-in-out infinite; }
.ha-dot.sm { fill: rgba(255,255,255,.6); animation-delay: 1s; }
.hero-help { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: none !important; border: 0; width: 38px !important; height: 38px !important; }
.hero-help:hover { background: rgba(255,255,255,.26) !important; }
html[data-mode="dark"] .hero { background: radial-gradient(120% 140% at 85% 10%, #1A5A5E 0%, #12393F 45%, #0D2229 100%); box-shadow: 0 0 0 1px #1F3542; }
@media (prefers-reduced-motion: reduce) { .hero *, .hero { animation: none !important; } .ha-trend, .ha-ticket .ck { stroke-dashoffset: 0; } .ha-tip { opacity: 1; } }
@media (max-width: 1024px) { .hero { grid-template-columns: minmax(0, 1fr) 220px; } .hero-art { height: 130px; } }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 22px 20px; border-radius: 22px; }
  .hero-art { position: absolute; right: -40px; top: 10px; width: 210px; height: 130px; opacity: .35; }
  .hero-h { font-size: 26px; }
  .hero-tags span { height: 28px; font-size: 12px; }
}

/* =====================================================================
   Un peu de fantaisie (07/10/2026) : couleurs, mascotte, petits mouvements
   ===================================================================== */
/* Fond vivant : taches de couleur douces + trame de points */
html[data-look="mix"] .backdrop { display: block; }
html[data-look="mix"] .backdrop .b1 { background: radial-gradient(closest-side, rgba(20,163,164,.16), transparent); }
html[data-look="mix"] .backdrop .b2 { background: radial-gradient(closest-side, rgba(242,179,61,.14), transparent); }
html[data-look="mix"] .backdrop .b3 { background: radial-gradient(closest-side, rgba(232,118,110,.10), transparent); }
html[data-look="mix"] body { background-color: var(--bg); background-image: radial-gradient(rgba(16,35,45,.07) 1px, transparent 1.2px); background-size: 22px 22px; background-attachment: fixed; }
html[data-look="mix"][data-mode="dark"] body { background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px); }
html[data-look="mix"][data-mode="dark"] .backdrop i { opacity: .5; }

/* Bulles d'icônes colorées devant les titres */
.hbub { flex: none; width: 26px; height: 26px; border-radius: 9px; display: inline-grid; place-items: center; margin-right: 2px; transform: rotate(-6deg); transition: transform .35s var(--spring); }
.hbub svg { width: 14px; height: 14px; }
.card:hover .hbub { transform: rotate(6deg) scale(1.1); }
.hb-teal { background: #D9F2F0; color: #0A6466; } .hb-yellow { background: #FDEFC8; color: #9A6608; } .hb-green { background: #DDF3E5; color: #157A3C; }
.hb-blue { background: #DDE9FB; color: #2A5DB0; } .hb-lilac { background: #ECE3FB; color: #6A44C2; } .hb-coral { background: #FCE3DF; color: #B8443A; }
html[data-mode="dark"] .hbub { filter: saturate(.9); }
html[data-mode="dark"] .hb-teal { background: rgba(46,196,194,.16); color: #7FDCD8; } html[data-mode="dark"] .hb-yellow { background: rgba(242,179,61,.16); color: #F2C66D; }
html[data-mode="dark"] .hb-green { background: rgba(92,201,138,.16); color: #7FDBA3; } html[data-mode="dark"] .hb-blue { background: rgba(120,160,240,.16); color: #9DB9F5; }
html[data-mode="dark"] .hb-lilac { background: rgba(160,130,240,.16); color: #C2AEF5; } html[data-mode="dark"] .hb-coral { background: rgba(240,128,111,.16); color: #F5A79B; }

/* Cartes : se soulèvent et penchent un tout petit peu au survol */
html[data-look="mix"] .home .card { transition: transform .4s var(--spring), box-shadow .3s; }
html[data-look="mix"] .home .card:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: var(--shadow-lift); }
html[data-look="mix"] .home .card:nth-child(even):hover { transform: translateY(-3px) rotate(.25deg); }

/* Mini calendrier de l'échéance, avec ses anneaux */
.nx-date { position: relative; transform: rotate(-4deg); transition: transform .4s var(--spring); padding-top: 12px !important; }
.home-next:hover .nx-date { transform: rotate(3deg) scale(1.05); }
.nx-rings { position: absolute; top: -5px; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 12px; }
.nx-rings i { width: 6px; height: 12px; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 2px var(--tile-dark); }

/* Trait dessiné sous le prénom */
.scribble { position: relative; display: inline-block; }
.scribble svg { position: absolute; left: -2px; right: -2px; bottom: -6px; width: calc(100% + 4px); height: 12px; overflow: visible; }
.scribble path { fill: none; stroke: var(--yellow, #F2B33D); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine .8s var(--ease) .5s forwards; }
/* Étiquettes du bandeau façon autocollants */
.hero-tags span { transition: transform .3s var(--spring), background .2s; }
.hero-tags span:nth-child(1) { transform: rotate(-1.5deg); } .hero-tags span:nth-child(2) { transform: rotate(1deg); } .hero-tags span:nth-child(3) { transform: rotate(-.8deg); }
.hero-tags span:hover { transform: rotate(0) scale(1.06); background: rgba(255,255,255,.22); }

/* La mascotte */
.mascot { width: 52px; height: 52px; flex: none; overflow: visible; }
.mascot .mb { fill: var(--brand); }
.mascot .mt { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.mascot .me ellipse { fill: #10232D; transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.mascot .mm { fill: none; stroke: #10232D; stroke-width: 3.5; stroke-linecap: round; }
.mascot .mc { fill: #F59A8B; opacity: .7; }
.mascot .md { fill: var(--yellow, #F2B33D); }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.mascot.bounce { animation: mBounce 2.4s var(--ease) infinite; }
@keyframes mBounce { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-6px) rotate(-4deg); } 24% { transform: translateY(0); } }
.mascot.wave { width: 64px; height: 64px; animation: mWave 3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes mWave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-10deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } }
.hero .mascot .mb { fill: #F2B33D; }
.hero .mascot .md { fill: #fff; }
.todo-done .mascot { width: 56px; height: 56px; }

/* Barres des 6 mois en pastilles arrondies */
.rh-up i { border-radius: 8px 8px 3px 3px; } .rh-dn i { border-radius: 3px 3px 8px 8px; }
.rh-c:hover i { filter: brightness(1.08); transform: scaleX(1.12); transition: transform .25s var(--spring); }

/* Bouton Valider : petit rebond au clic */
.btn-primary:active { transform: scale(.94); }
.todo-go, .ochip { will-change: transform; }

@media (prefers-reduced-motion: reduce) { .mascot, .mascot *, .scribble path, .nx-date, .hbub { animation: none !important; transition: none !important; } .scribble path { stroke-dashoffset: 0; } }
.nx-rings { display: none; }
.nx-date { padding-top: 8px !important; }
.nx-pin { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE09A, #E6A22E 60%); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.bk-h > div > .hbub { align-self: center; }

/* Fantaisie partout (07/10/2026) */
/* Icône de page devant le titre */
.page-head h1 { display: flex; align-items: center; gap: 12px; }
.ph-ic { flex: none; width: 38px; height: 38px; border-radius: 13px; display: inline-grid; place-items: center; transform: rotate(-8deg); transition: transform .4s var(--spring); animation: phIn .6s var(--spring) both; }
.ph-ic svg { width: 19px; height: 19px; }
.page-head:hover .ph-ic { transform: rotate(8deg) scale(1.08); }
@keyframes phIn { from { transform: rotate(-40deg) scale(.4); opacity: 0; } }
/* Titres de cartes avec leur bulle */
.card-h { align-items: flex-start; }
.card-h > .hbub { margin: 1px 10px 0 0; }
.card-h > div { flex: 1; min-width: 0; }
.stat-top i.hbub { width: 32px; height: 32px; border-radius: 11px; }
.stat-top i.hbub svg { width: 16px; height: 16px; }
.pl-l { display: inline-flex; align-items: center; gap: 8px; }
.pl-l .hbub { width: 22px; height: 22px; border-radius: 8px; }
.pl-l .hbub svg { width: 12px; height: 12px; }
.pulse:hover .hbub, .bk-sec:hover .hbub, .card.spot:hover .hbub, .stat:hover .hbub { transform: rotate(6deg) scale(1.1); }
/* Toutes les cartes penchent un tout petit peu au survol */
html[data-look="mix"] .card.spot:hover, html[data-look="mix"] .stat:hover { transform: translateY(-3px) rotate(-.2deg); }
html[data-look="mix"] .bento > .card:nth-child(even).spot:hover { transform: translateY(-3px) rotate(.2deg); }
/* États vides : la mascotte */
.empty-box .eb-art { position: relative; margin-bottom: 14px; }
.empty-box .eb-art .mascot { width: 72px; height: 72px; }
.eb-badge { position: absolute; right: -10px; bottom: -6px; width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--brand); box-shadow: 0 4px 10px rgba(16,35,45,.15); transform: rotate(10deg); }
.eb-badge svg { width: 15px; height: 15px; }
/* Connexion : la mascotte salue au bord de la carte */
.auth-card { position: relative; }
.auth-mascot { position: absolute; top: -34px; right: 26px; z-index: 2; }
.auth-mascot .mascot { width: 62px; height: 62px; }
.auth-mascot .mascot .mb { fill: #F2B33D; }
.auth-mascot .mascot .md { fill: #fff; }
html[data-look="mix"] .float-card { transition: transform .4s var(--spring); }
html[data-look="mix"] .fc-1 { rotate: -3deg; } html[data-look="mix"] .fc-2 { rotate: 2.5deg; } html[data-look="mix"] .fc-3 { rotate: 2deg; } html[data-look="mix"] .fc-4 { rotate: -2deg; }
/* Menu : l'icône frétille au survol */
.nav a:hover svg { animation: wiggle .5s var(--ease); }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
/* Paramètres : l'élément actif du menu a sa pastille jaune */
.set-nav a.on { position: relative; }
.set-nav a.on::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--yellow, #F2B33D); }
/* Message : petit rebond à l'arrivée */
.toast.show { animation: toastPop .5s var(--spring); }
@keyframes toastPop { 0% { transform: translateY(16px) scale(.9); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph-ic, .nav a:hover svg, .toast.show { animation: none !important; } }
@media (max-width: 760px) { .ph-ic { width: 32px; height: 32px; border-radius: 11px; } .ph-ic svg { width: 16px; height: 16px; } }
.card-h > .hbub { margin-right: -2px; }
html[data-look="mix"] .page-head h1::after { margin-left: -12px; }

/* =====================================================================
   Coffre-fort (07/10/2026)
   ===================================================================== */
.vault-drop { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 30px; margin-bottom: 16px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .3s var(--spring), box-shadow .3s; }
.vault-drop::before { content: ""; position: absolute; inset: 10px; border-radius: 18px; border: 2px dashed var(--dash, var(--border)); pointer-events: none; transition: border-color .25s, background .25s; }
body.vault-drag .vault-drop { transform: scale(1.01); box-shadow: 0 0 0 3px var(--brand), var(--shadow-lift); }
body.vault-drag .vault-drop::before { border-color: var(--brand); background: var(--active-bg); }
body.vault-drag .vs-door { transform: perspective(300px) rotateY(-28deg); }
body.vault-drag .vs-paper { animation-duration: 1s; }
.vd-art { height: 160px; position: relative; z-index: 1; }
.vd-svg { width: 100%; height: 100%; overflow: visible; }
.vs-body { fill: var(--tile-dark); }
.vs-door { fill: var(--brand); transform-origin: 52px 92px; transition: transform .5s var(--spring); }
.vs-dial circle:first-child { fill: none; stroke: #fff; stroke-width: 4; opacity: .9; }
.vs-dial path { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.vs-dial { transform-box: fill-box; transform-origin: center; animation: dialTurn 6s var(--ease) infinite; }
@keyframes dialTurn { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(90deg); } 90% { transform: rotate(-30deg); } }
.vs-knob { fill: var(--yellow, #F2B33D); }
.vs-foot { fill: var(--tile-dark); }
.vs-paper rect { fill: #fff; stroke: var(--border); stroke-width: 1.5; }
.vs-paper path { stroke: #C7D3DA; stroke-width: 3; stroke-linecap: round; }
.vs-paper { filter: drop-shadow(0 6px 10px rgba(16,35,45,.15)); transform-box: fill-box; transform-origin: center; }
.vs-paper.p1 { animation: paperIn 3.4s ease-in-out infinite; }
.vs-paper.p2 { animation: paperIn2 4s ease-in-out .6s infinite; }
@keyframes paperIn { 0%, 100% { transform: translate(0, 0) rotate(12deg); } 50% { transform: translate(-8px, 8px) rotate(4deg); } }
@keyframes paperIn2 { 0%, 100% { transform: translate(0, 0) rotate(-14deg); } 50% { transform: translate(8px, 6px) rotate(-4deg); } }
.vs-dot { fill: var(--yellow, #F2B33D); animation: haFloat2 3s ease-in-out infinite; } .vs-dot.sm { fill: var(--brand); opacity: .5; animation-delay: 1s; }
.vd-txt { position: relative; z-index: 1; }
.vd-txt > b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.vd-txt > small { display: block; margin-top: 6px; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--muted-fg); }
.vd-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vd-btns label { cursor: pointer; }
.vd-queue { grid-column: 1 / -1; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; padding-top: 4px; }
.vq { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sunken); animation: popIn .3s var(--ease) both; }
.vq-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--muted); color: var(--muted-fg); }
.vq-ic svg { width: 15px; height: 15px; }
.vq.done .vq-ic { background: var(--positive-soft); color: var(--positive); }
.vq.error .vq-ic { background: var(--negative-soft); color: var(--negative); }
.vq-t { min-width: 0; } .vq-t b { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vq-t small { display: block; font-size: 12px; color: var(--muted-fg); }
.spin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand); border-right-color: transparent; animation: spin .8s linear infinite; }

.vault-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vault-stats > * { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform .3s var(--spring); }
.vault-stats > *:hover { transform: translateY(-2px) rotate(-.4deg); }
.vault-stats b { display: block; font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.vault-stats small { font-size: 12px; color: var(--muted-fg); }
.vault-stats a > svg { width: 15px; height: 15px; color: var(--brand); margin-left: 4px; }
.vault-stats .hbub { width: 34px; height: 34px; border-radius: 12px; }
.vault-stats .hbub svg { width: 17px; height: 17px; }

.v-sec { padding: 20px 18px 10px; margin-bottom: 16px; }
.bk-h em.red { background: var(--negative); }
.vrow { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 12px; border-radius: 16px; animation: mixIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background .2s; }
.vrow + .vrow { border-top: 1px solid var(--border); }
.vrow:hover { background: var(--hover); }
.vrow.vs { grid-template-columns: 46px minmax(0, 1fr) 130px auto auto; align-items: center; padding: 12px; }
.vtile { width: 46px; height: 54px; border-radius: 10px 16px 10px 10px; display: grid; place-items: end center; padding-bottom: 8px; position: relative; transform: rotate(-3deg); transition: transform .3s var(--spring); }
.vtile::before { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: linear-gradient(225deg, var(--surface) 50%, rgba(0,0,0,.08) 50%); border-radius: 0 16px 0 4px; }
.vtile b { font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.vrow:hover .vtile { transform: rotate(3deg) scale(1.05); }
.vr-main { min-width: 0; }
.vr-main > b { display: block; font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-main > small { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-amt { text-align: right; } .vr-amt b { display: block; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .vr-amt small { font-size: 11.5px; color: var(--faint); }
.vr-state { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.vr-act { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.vr-act .btn svg { width: 14px; height: 14px; }
.vr-act .icon-btn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--faint); }
.vr-act .icon-btn:hover { background: var(--muted); color: var(--fg); }
.vr-act .icon-btn svg { width: 16px; height: 16px; }
.v-al { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v-al li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.v-al li svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.v-al li span { flex: 1; }
.v-al li .link { font-size: 12px; white-space: nowrap; }
.al-danger { background: var(--negative-soft); color: var(--negative); }
.al-warn { background: #FDF3DC; color: #8A5A06; }
html[data-mode="dark"] .al-warn { background: rgba(242,179,61,.12); color: #F2C66D; }
.v-sug { margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--sunken); display: flex; flex-direction: column; gap: 6px; }
.vs-q { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); }
.vs-q svg { width: 14px; height: 14px; }
.vs-op { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.vs-op.alt { background: transparent; box-shadow: none; opacity: .85; }
.vs-op span b { display: block; font-size: 13.5px; } .vs-op span small { font-size: 12px; color: var(--faint); }
.vs-op em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.v-none { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
.v-none svg { width: 15px; height: 15px; }
.v-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 6px 12px; }
.v-search { flex: 1; min-width: 220px; max-width: 360px; }
.v-search .input { height: 40px; }
.v-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vcat { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--muted); color: var(--muted-fg); transition: transform .25s var(--spring), box-shadow .2s; }
.vcat em { font-style: normal; font-size: 11px; opacity: .7; }
.vcat:hover { transform: translateY(-1px) rotate(-1deg); }
.vcat.on { box-shadow: 0 0 0 2px currentColor inset; }
.vcat[data-cat="all"].on { background: var(--tile-dark); color: #fff; box-shadow: none; }
.v-month header { display: flex; align-items: baseline; gap: 10px; padding: 14px 12px 6px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.v-month header span { font-size: 12px; font-weight: 500; color: var(--faint); }
.v-month + .v-month { border-top: 1.5px dashed var(--dash, var(--border)); margin-top: 6px; }
.v-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.v-empty .mascot { width: 64px; height: 64px; margin-bottom: 6px; }
.v-empty small { color: var(--muted-fg); font-size: 13px; }
.v-editor { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 4px; padding: 14px; border-radius: 14px; background: var(--sunken); animation: popIn .25s var(--ease) both; }
.v-editor .f { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.v-editor .input { height: 38px; }
.v-ed-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 1100px) {
  .vrow.vs { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .vrow.vs .vr-state { grid-column: 2; justify-content: flex-start; }
  .vrow.vs .vr-act { grid-column: 3; grid-row: 1; }
  .vrow.vs .vr-amt { grid-column: 3; grid-row: 2; }
  .v-editor { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .vault-drop { grid-template-columns: 1fr; padding: 20px; text-align: center; }
  .vd-art { height: 110px; } .vd-btns { justify-content: center; } .vd-txt > b { font-size: 19px; }
  .vrow { grid-template-columns: 40px minmax(0, 1fr); } .vrow .vr-act { grid-column: 1 / -1; justify-content: flex-start; }
  .vs-op { grid-template-columns: auto minmax(0, 1fr) auto; } .vs-op .btn { grid-column: 1 / -1; }
  .vtile { width: 40px; height: 48px; }
  .v-editor { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vs-dial, .vs-paper, .vs-dot { animation: none !important; } }
@media (max-width: 640px) { .vault-stats { display: grid; grid-template-columns: 1fr 1fr; } .vault-stats > a { grid-column: 1 / -1; } }

/* Coffre-fort : finitions (08/10/2026) */
.al-info { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); }
.v-export { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v-export .input { width: auto; height: 34px; padding: 0 30px 0 12px; font-size: 13px; border-radius: 12px; }
.v-sec .bk-h { gap: 12px; flex-wrap: wrap; }
.v-missing { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; padding: 10px 14px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--brand) 35%, transparent); font-size: 13px; color: var(--muted-fg); }
.v-missing > svg { width: 16px; height: 16px; color: #F2B33D; }
.vm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--fg); font-weight: 600; cursor: pointer; transition: transform .3s var(--spring); }
.vm-chip:hover { transform: translateY(-2px) rotate(-1deg); }
.vm-chip svg { width: 13px; height: 13px; color: var(--brand); }
.v-del:hover, .v-del.sure { color: var(--negative) !important; }
.v-del.sure { background: var(--negative-soft) !important; animation: vdel .35s var(--spring); }
@keyframes vdel { 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
.vrow.gone { transition: opacity .25s, transform .25s; opacity: 0; transform: translateX(24px) scale(.98); }
@media (max-width: 760px) {
  .vrow.vs { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; }
  .vrow.vs .vr-main { grid-column: 2 / -1; }
  .vrow.vs .vr-amt { grid-column: 2; grid-row: 2; text-align: left; }
  .vrow.vs .vr-state { grid-column: 2 / -1; grid-row: 3; }
  .vrow.vs .vr-act { grid-column: 3; grid-row: 2; justify-content: flex-end; }
  .vrow.vs .vr-main b { white-space: normal; }
}