/* Chez nous · Warm Minimal
   One layer, in reading order: tokens, base, controls, shell, the four screens, dialogs.
   Reference: preview.html (Warm Minimal v1.0), adapted to a full-screen app. */

@font-face {
  font-family: 'DM Sans';
  src: url('/dm-sans.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/* Handwriting for the little notes and the shopping pad (SIL OFL, caveat-OFL.txt). */
@font-face {
  font-family: 'Caveat';
  src: url('/caveat.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F8F6F1;
  --paper: #FFFDFC;
  --forest: #2F4A3A;
  --forest-deep: #243A2E;
  --sage: #E1E9DF;
  --sage-dark: #799483;
  --terracotta: #D58E74;
  --peach: #FAEBE4;
  --ink: #2D332E;
  --muted: #6D796F;
  --faint: #8C978D;
  --border: #E8E6E0;
  --danger: #A84E44;
  --shadow: 0 8px 30px rgba(42, 53, 41, .045);
  --gutter: 20px;
  --radius-card: 22px;
  --radius-control: 14px;
  --radius-pill: 99px;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-body);
  font-family: var(--font-body);
  font-synthesis: none;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--bg); }
h1, h2, h3, p { margin: 0; }
p { line-height: 1.5; }
a { color: inherit; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: wait; opacity: .6; }
:focus-visible { outline: 3px solid var(--sage-dark); outline-offset: 3px; }
svg { width: 19px; height: 19px; flex: 0 0 auto; display: block; }
h2 { font-size: 17px; font-weight: 750; letter-spacing: -.04em; }
h3 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.desc { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 6px; }
.empty { padding: 10px 0; }
.over { color: var(--danger) !important; }
.loading { padding: 30px var(--gutter); color: var(--muted); }

/* ---------- Controls ---------- */
.button, .icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border-radius: var(--radius-control); font-weight: 750; font-size: 14px; text-decoration: none;
}
.button { padding: 10px 16px; background: var(--forest); color: #fff; }
.button:hover { background: var(--forest-deep); }
.button svg { width: 16px; height: 16px; }
.button.secondary, .button.lime { background: var(--sage); color: var(--forest); }
.button.secondary:hover, .button.lime:hover { background: #D3DFD1; }
.button.ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1px var(--border); }
.button.ghost:hover { background: var(--sage); }
.button.danger { background: #F7E4DF; color: var(--danger); }
.button.text-button { background: transparent; color: var(--forest); font-size: 13px; padding: 8px 4px; }
.button.text-button:hover { text-decoration: underline; }
.button.chip { min-height: 40px; padding: 8px 13px; border-radius: var(--radius-pill); background: var(--paper); color: var(--forest); font-size: 13px; box-shadow: var(--shadow), inset 0 0 0 1px var(--border); }
.button.chip svg { width: 14px; height: 14px; }
.icon-button { width: 44px; padding: 0; background: var(--sage); color: var(--forest); flex: 0 0 44px; }
.icon-button:hover { background: #D3DFD1; }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%; min-height: 46px; padding: 11px 13px; font-size: 15px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #A2A99F; }
input:focus, textarea:focus, select:focus { border-color: var(--sage-dark); outline: none; box-shadow: 0 0 0 3px #79948326; }
textarea { min-height: 100px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--forest); }
/* Reference checkbox: 22px rounded square, 44px touch target. */
input.tick {
  appearance: none; -webkit-appearance: none; width: 44px; height: 44px; flex: 0 0 44px; margin: 0; cursor: pointer;
  border-radius: 12px; background: transparent;
  position: relative;
}
input.tick::before {
  content: ''; position: absolute; inset: 11px; border-radius: 8px; background: #fff; border: 1.5px solid #C9D1C5; transition: background .15s, border-color .15s;
}
input.tick::after {
  content: ''; position: absolute; left: 18px; top: 15px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0;
}
input.tick:checked::before { background: var(--forest); border-color: var(--forest); }
input.tick:checked::after { opacity: 1; }
progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 7px; border: 0; border-radius: 99px; background: #EFEFEA; overflow: hidden; }
progress::-webkit-progress-bar { background: #EFEFEA; border-radius: 99px; }
progress::-webkit-progress-value { background: #55795F; border-radius: 99px; }
progress::-moz-progress-bar { background: #55795F; border-radius: 99px; }

/* ---------- Shell ---------- */
.app { max-width: 560px; min-height: 100vh; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(18px, env(safe-area-inset-top)) var(--gutter) 10px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand strong { font-size: 16px; font-weight: 800; letter-spacing: -.055em; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--forest); color: #fff; }
.brand-mark svg { width: 18px; height: 18px; }
.identity { display: flex; align-items: center; gap: 6px; }
.identity > .icon-button { background: transparent; color: var(--muted); }
.avatars { display: flex; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--bg); background: #DADED4; color: var(--forest); font-size: 11px; font-weight: 800; }
.avatar + .avatar { margin-left: -8px; background: #F4DDCF; color: #855E4D; }
main, #main { display: block; padding: 6px var(--gutter) calc(104px + env(safe-area-inset-bottom)); }
.sync-status { position: fixed; z-index: 7; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: block; margin: 0; padding: 9px 16px; min-height: 40px;
  border-radius: 99px; background: var(--peach); color: #7E5341; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px #1C302430; animation: drop .3s cubic-bezier(.2, .8, .2, 1); }

.nav-shell { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--border); }
.nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 560px; margin: 0 auto; padding: 9px 12px max(10px, env(safe-area-inset-bottom)); }
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 54px; border-radius: var(--radius-control); color: #89948C; font-size: 11px; font-weight: 700; }
.nav button[aria-current="page"] { background: var(--sage); color: var(--forest); }
.nav svg { width: 20px; height: 20px; }

/* ---------- Page heads (the four "hero" titles) ---------- */
#main .hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-top: 4px; }
#main .hero .eyebrow, .date { display: block; color: #819084; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#main .hero h1, .greeting { font-size: 28px; font-weight: 800; line-height: 1.12; letter-spacing: -.06em; margin-top: 7px; }
#main .hero p { color: var(--muted); font-size: 13px; margin-top: 6px; }
#main .hero > .icon-button { margin-top: 6px; background: var(--forest); color: #fff; }
#main .hero > .icon-button:hover { background: var(--forest-deep); }
.section { margin-top: 22px; }
.section-heading { margin: 24px 0 11px; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 11px; }
.section-title.section-heading { margin: 24px 0 8px; }
.panel { background: var(--paper); border-radius: var(--radius-card); padding: 15px; box-shadow: var(--shadow); min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quantity-chips { margin-top: -4px; }
.activity { list-style: none; margin: 0; padding: 0; }

/* Week and month switcher shared by Repas and Finances. */
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 0; padding: 2px; background: #ECEFE8; border-radius: 14px; }
.week-nav .icon-button { background: transparent; color: var(--forest); }
.week-nav .icon-button:hover { background: var(--paper); }
.week-now { font-size: 13px; font-weight: 750; color: var(--forest); }

/* ---------- Accueil ---------- */
.hero-card { position: relative; overflow: hidden; margin-top: 20px; min-height: 200px; padding: 20px 17px 18px; border-radius: 26px; background: linear-gradient(120deg, #E5EDE2, #D5E2D2); }
.hero-copy { position: relative; z-index: 1; max-width: 59%; }
.hero-copy .eyebrow { display: block; color: #58725F; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-card h2 { font-size: 22px; line-height: 1.1; letter-spacing: -.06em; margin-top: 10px; overflow-wrap: anywhere; }
.hero-card p { color: #617566; font-size: 12px; margin-top: 8px; }
.hero-card .plate { position: absolute; right: -33px; top: 30px; width: 202px; height: 165px; transform: rotate(10deg); filter: drop-shadow(0 12px 12px rgba(59, 69, 48, .17)); }
.button.small-action { margin-top: 16px; padding: 9px 14px; border-radius: 99px; font-size: 12px; gap: 7px; }
.button.small-action svg { width: 14px; height: 14px; }
.home-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.metric-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 128px; padding: 15px 14px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.metric-card strong { font-size: 22px; letter-spacing: -.055em; overflow-wrap: anywhere; }
.metric-card .desc { font-size: 12px; margin-top: 2px; }
.bubble { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 13px; background: #F3E8DD; color: #986950; }
.metric-card:nth-child(2) .bubble { background: #E5EEE4; color: #52755C; }
.bubble svg { width: 17px; height: 17px; }
.notice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 13px; border-radius: 19px; background: #FCF0E8; border: 1px solid #F1DDD1; text-align: left; color: var(--ink); }
.notice strong { display: block; font-size: 13px; }
.notice .desc { color: #906D60; font-size: 12px; margin-top: 3px; }
.notice > svg { margin-left: auto; width: 16px; color: #9C664C; }
.notice-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: #F7E0D3; color: #9C664C; }
.timeline-card { padding: 5px 15px; }
.timeline-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.timeline-row + .timeline-row { border-top: 1px solid var(--border); }
.timeline-text { flex: 1; min-width: 0; }
.timeline-row strong { font-size: 13px; }
.timeline-row .desc { font-size: 12px; margin-top: 2px; }
.timeline-row time { flex-shrink: 0; font-size: 11px; color: #9A9E93; }
.mini-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: #F0F1EB; color: #657B69; }
.mini-icon svg { width: 17px; height: 17px; }

/* ---------- Repas ---------- */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 12px 0 6px; }
.day-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; border-radius: 15px; background: var(--paper); color: #859085; }
.day-chip span { font-size: 11px; text-transform: uppercase; }
.day-chip strong { font-size: 13px; font-weight: 800; }
.day-chip.selected { background: var(--forest); color: #fff; box-shadow: 0 5px 13px #2F4A3A20; }
.slot-head { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 9px; }
.slot-head strong { font-size: 13px; }
.slot-head span { font-size: 11px; color: var(--faint); }
.meal-detail { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 92px; padding: 14px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.meal-text { min-width: 0; }
.meal-detail strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.meal-detail .desc { font-size: 12px; margin-top: 4px; }
.meal-thumb { width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(135deg, #EEDFCB, #D9C2A5); }
.meal-thumb.green { background: linear-gradient(135deg, #E6EDD8, #C4D6BC); }
.meal-thumb svg { width: 64px; height: 64px; }
.pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 5px 9px; border-radius: 99px; background: var(--sage); color: #526B56; font-size: 11px; font-weight: 800; }
.pill svg { width: 12px; height: 12px; }
.empty-meal { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 60px; padding: 15px; border: 1px dashed #CFD7CC; border-radius: 21px; background: #F5F7F2; color: #718270; font-size: 13px; }
.stock-panel { padding: 4px 15px; }
.stock-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.stock-row + .stock-row { border-top: 1px solid var(--border); }
.stock-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: #F1EEE8; font-size: 19px; }
.stock-label { flex: 1; min-width: 0; }
.stock-label strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.stock-label small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.stock-label small.soon { color: #9C664C; font-weight: 700; }
.consume { flex-shrink: 0; min-height: 44px; padding: 0 11px; border-radius: 11px; background: var(--sage); color: var(--forest); font-size: 11px; font-weight: 800; white-space: nowrap; }
.consume:hover { background: #D3DFD1; }
.recipe-grid { display: grid; gap: 8px; }
.recipe { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 12px 15px; border-radius: calc(var(--radius-card) - 4px); background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.recipe strong { font-size: 14px; }
.recipe .desc, .recipe .muted { font-size: 12px; margin-top: 2px; }
.recipe > svg { width: 16px; color: var(--faint); }

/* ---------- Courses ---------- */
.progress-box { margin-top: 20px; padding: 19px; border-radius: 23px; background: var(--forest); color: #fff; }
.progress-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.progress-top p, .progress-top > span { font-size: 12px; color: #D4E1D5; }
.progress-top strong { display: block; font-size: 31px; font-weight: 800; letter-spacing: -.065em; }
.progress-top small { font-size: 16px; font-weight: 500; opacity: .7; }
.progress-box progress { margin-top: 18px; background: #FFFFFF35; }
.progress-box progress::-webkit-progress-bar { background: #FFFFFF35; }
.progress-box progress::-webkit-progress-value { background: #DFE9D4; }
.progress-box progress::-moz-progress-bar { background: #DFE9D4; }
.quick-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin: 15px 0 6px; }
.quick-add .button { background: var(--terracotta); padding: 0 16px; font-size: 13px; }
.quick-add .button:hover { background: #C77D63; }
.quick-add datalist { display: none; }
.quick-details { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px; }
.quick-details input.quantity-input, .quick-details select { min-height: 44px; padding: 8px 11px; font-size: 13px; background: #F3F2EC; border-color: transparent; color: var(--muted); }
.aisle-header { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 7px; }
.aisle-header h3 { font-size: 13px; }
.aisle-header small { font-size: 11px; color: #A4AAA0; }
.shopping-list { list-style: none; margin: 0; padding: 0; }
.shopping-list.panel { padding: 2px 8px 2px 4px; }
.shopping-row { display: flex; align-items: center; gap: 4px; min-height: 58px; }
.shopping-row + .shopping-row { border-top: 1px solid var(--border); }
.item-check { display: flex; flex: 0 0 44px; }
.item-name { flex: 1; min-width: 0; min-height: 52px; padding: 8px 0 8px 4px; text-align: left; color: var(--ink); }
.item-name strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.item-name small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.done .item-name strong { color: #9DA89E; text-decoration: line-through; }
.item-quantity { flex-shrink: 0; max-width: 84px; font-size: 12px; font-weight: 800; color: #7C897C; text-align: right; overflow-wrap: anywhere; }
.shopping-row .icon-button { width: 36px; flex-basis: 36px; background: transparent; color: #B4BBB1; }
.shopping-row .icon-button:hover { background: var(--sage); color: var(--forest); }
.shopping-row .icon-button svg { width: 14px; height: 14px; }
.button.bottom-cta { width: 100%; min-height: 48px; margin-top: 20px; border-radius: 15px; font-size: 13px; }

/* ---------- Finances ---------- */
.budget-panel { margin-top: 14px; padding: 20px; border-radius: 22px; background: linear-gradient(125deg, #E1EAE0, #EDF2E8); }
.budget-label { display: block; color: #69806E; font-size: 11px; font-weight: 800; }
.budget-value { display: block; margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -.07em; }
.budget-panel .desc { font-size: 12px; margin-top: 3px; color: #677D6C; }
.budget-panel progress { margin-top: 16px; background: #CAD8C8; }
.budget-panel progress::-webkit-progress-bar { background: #CAD8C8; }
.budget-bottom { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 800; color: #526F5B; }
.balance-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; margin-top: 10px; padding: 13px 15px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.balance-card .desc { font-size: 12px; margin-top: 2px; }
.balance-card strong { font-size: 16px; white-space: nowrap; color: var(--forest); }
.budget-list { list-style: none; margin: 0; padding: 0; }
.budget-list li { padding: 11px 0; }
.budget-list li + li { border-top: 1px solid #F1EFEA; }
.budget-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; }
.budget-line span:last-child { color: #687A6E; text-align: right; white-space: nowrap; }
.budget-line span.limit { color: #AFB6AB; font-weight: 700; }
.bar { margin-top: 8px; --bar: #668771; }
.bar::-webkit-progress-value { background: var(--bar); }
.bar::-moz-progress-bar { background: var(--bar); }
.cat-groceries { --bar: #D58E74; } .cat-home { --bar: #668771; } .cat-utilities { --bar: #A7B6A8; }
.cat-internet { --bar: #8FA79A; } .cat-outings { --bar: #C2A98D; } .cat-other { --bar: #B9B2A3; }
.cat-condo { --bar: #4F6E5B; } .cat-water { --bar: #7FA3B5; } .cat-restaurants { --bar: #C98B6B; }
.bar.over { --bar: var(--danger); }
.cat-goal { --bar: var(--terracotta); }
.goal-list { display: grid; gap: 10px; }
.goal-card { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px; border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.goal-icon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 15px; background: var(--peach); font-size: 23px; }
.goal-text { flex: 1; min-width: 0; }
.goal-text strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.goal-amount { display: block; margin-top: 3px; font-size: 13px; font-weight: 800; }
.goal-amount .limit { color: #AFB6AB; }
.goal-text .bar { margin-top: 8px; }
.goal-text small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.goal-summary { padding: 18px; border-radius: 20px; background: linear-gradient(125deg, #F8E6DC, #FCF0E8); }
.goal-summary .budget-label { color: #9C664C; }
.goal-summary .bar { margin-top: 12px; background: #F1D7C8; }
.goal-summary .bar::-webkit-progress-bar { background: #F1D7C8; }
.goal-summary .desc { color: #8E6A5B; }
.goal-moves .tx { min-height: 54px; padding: 6px 0; }
.goal-moves li + li { border-top: 1px solid var(--border); }
.goal-moves .icon-button { width: 36px; flex-basis: 36px; background: transparent; color: #B4BBB1; }
.goal-moves .icon-button svg { width: 14px; height: 14px; }
.icon-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.icon-picker legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.icon-picker label { display: block; cursor: pointer; }
.icon-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icon-picker span { display: grid; place-items: center; min-height: 44px; border-radius: 13px; background: var(--bg); font-size: 21px; border: 1.5px solid transparent; }
.icon-picker input:checked + span { background: var(--peach); border-color: var(--terracotta); }
.icon-picker input:focus-visible + span { outline: 3px solid var(--sage-dark); outline-offset: 2px; }
.transaction-panel { padding: 4px 15px; }
.transaction-panel li + li { border-top: 1px solid var(--border); }
.tx { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 60px; padding: 10px 0; text-align: left; color: var(--ink); }
.tx-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; background: #F7E9DF; color: #A56D56; }
.tx-icon.green { background: #E8EDE4; color: #62816B; }
.tx-text { flex: 1; min-width: 0; }
.tx-text strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.tx-text small { display: block; font-size: 11px; color: #8A9489; margin-top: 2px; }
.tx-amount { flex-shrink: 0; font-size: 13px; font-weight: 800; }
.tx-side { flex-shrink: 0; text-align: right; }
.tx-side small { display: block; font-size: 11px; color: #8A9489; margin-top: 2px; white-space: nowrap; }
.button.text-button svg { width: 14px; height: 14px; }
.empty-meal span { text-align: left; line-height: 1.45; }

/* ---------- Login ---------- */
.login { max-width: 440px; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.login-brand { padding: 0 6px; }
.login-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 18px; background: var(--forest); color: #fff;
  box-shadow: 0 12px 26px #2F4A3A33; }
.login-mark svg { width: 26px; height: 26px; }
.login-brand .eyebrow { display: block; color: #5E6A60; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.login-brand h1 { font-size: 40px; font-weight: 800; letter-spacing: -.065em; line-height: 1.02; margin-top: 8px; }
.login-brand p { color: var(--muted); font-size: 15px; line-height: 1.45; margin-top: 10px; max-width: 30ch; }
.login-panel { margin-top: 28px; }
.login-panel h2 { font-size: 17px; }
.login-hint { font-size: 13px; line-height: 1.45; }
.account-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.account-pick legend { margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.form-grid .account-pick .account-option { position: relative; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 12px 6px 8px; border-radius: 16px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font-size: 14px; font-weight: 750; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.form-grid .account-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.form-grid .account-pick .account-option:has(input:checked) { background: var(--sage); box-shadow: inset 0 0 0 2px var(--sage-dark); }
.form-grid .account-pick .account-option:has(input:focus-visible) { outline: 3px solid var(--sage-dark); outline-offset: 2px; }

/* ---------- Dialogs and forms ---------- */
dialog { width: min(calc(100% - 24px), 480px); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 19px; border: 0; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 70px #243A2E26; }
dialog::backdrop { background: #1D30255E; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.dialog-head h2 { font-size: 21px; letter-spacing: -.045em; }
.form-grid { display: grid; gap: 12px; }
.form-grid label:not(.check-row) { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.check-row { display: flex; align-items: center; gap: 11px; min-height: 44px; cursor: pointer; font-size: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.two > label, .two input { min-width: 0; }
input[type="month"], input[type="date"] { min-width: 0; -webkit-appearance: none; appearance: none; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.form-error { color: var(--danger); font-size: 13px; line-height: 1.4; }
.checkout-sheet .receipt-amount { font-size: 28px !important; font-weight: 800; letter-spacing: -.04em; background: var(--bg) !important; }
.checkout-sheet fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-sheet legend { margin: 8px 0 10px; font-weight: 750; }
.payer-options { display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-form .payer-options label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; color: var(--ink); }
.payer-options label:has(input:checked) { background: var(--sage); border-color: var(--sage-dark); }
.fresh-choice { padding: 10px 0; border-bottom: 1px solid var(--border); }
.batch-fields { display: grid; gap: 10px; padding: 8px 0 0 31px; }
.batch-quantity { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checkout-form .actions .button { width: 100%; min-height: 52px; }

.toast { position: fixed; z-index: 6; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); padding: 9px 9px 9px 15px; border-radius: 14px; background: #273D30; color: #fff; font-size: 13px; box-shadow: 0 8px 20px #1C302450; }
.toast .button { min-height: 36px; padding: 6px 12px; font-size: 12px; }

/* ---------- Sizes ---------- */
@media (max-width: 560px) {
  .checkout-sheet { width: 100%; max-width: none; max-height: calc(100dvh - 16px); margin: auto 0 0; border-radius: 26px 26px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  :root { --gutter: 16px; }
  .hero-copy { max-width: 64%; }
  .hero-card h2 { font-size: 20px; }
  .hero-card .plate { width: 180px; right: -50px; }
  .metric-card { padding: 14px 12px; }
  .metric-card strong { font-size: 20px; }
  .week-strip { gap: 4px; }
}
@media (min-width: 700px) {
  .app { margin-top: 18px; }
  .hero-card .plate { right: 0; width: 240px; height: 196px; top: 10px; }
  .hero-copy { max-width: 55%; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---------- Google sign-in ---------- */
.google-button { gap: 10px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); min-height: 50px; }
.google-button:hover { background: #F3F2EC; }
.google-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--forest); color: #fff; font-size: 13px; font-weight: 800; }
.password-login summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: 13px; font-weight: 700; }
.password-login[open] summary { margin-bottom: 8px; }

/* ---------- Passkeys ---------- */
.passkey-button { min-height: 52px; gap: 10px; }
.passkey-button svg { width: 20px; height: 20px; }
.passkey-prompt { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 14px 13px; border-radius: 19px; background: var(--sage); }
.passkey-prompt .notice-icon { background: var(--paper); color: var(--forest); }
.passkey-prompt strong { display: block; font-size: 13px; }
.passkey-prompt .desc { margin-top: 2px; font-size: 12px; }
.passkey-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.passkey-actions .small-action { margin-top: 0; }
.passkey-list li { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.passkey-list li + li { border-top: 1px solid var(--border); }
.passkey-list li > span:first-child { color: var(--forest); }

/* ---------- Compte commun ---------- */
.bank-card { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.bank-card + .bank-card { margin-top: 8px; }
.bank-card .tx-text small { display: block; }
.bank-balance { flex-shrink: 0; font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
.bank-warning { color: var(--danger) !important; font-weight: 700; }
.bank-renew { display: block; min-height: 32px; margin-top: 4px; color: #9C664C; font-size: 11px; font-weight: 800; text-align: left; text-decoration: underline; }
.tx-amount.credit { color: #52755C; }
.bank-summary { background: linear-gradient(125deg, #E1EAE0, #EDF2E8); }
.bank-summary .budget-label { color: #69806E; }
.bank-summary .desc { color: #677D6C; overflow-wrap: anywhere; }
.section-title > .icon-button { background: transparent; color: var(--forest); }

/* ---------- Courses : rayons ---------- */
.aisle-hint { grid-column: 1 / -1; font-size: 11px; margin-top: -1px; }

/* ---------- Repas : envies ---------- */
.wish-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 10px; }
.wish-add .button { background: var(--terracotta); padding: 0 16px; font-size: 13px; }
.wish-add .button:hover { background: #C77D63; }
.wish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wish { display: flex; align-items: center; max-width: 100%; border-radius: 99px; background: var(--peach); padding-right: 2px; }
.wish-text { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 6px 4px 6px 7px; color: #6E4A3B; font-size: 13px; font-weight: 700; text-align: left; }
.wish-text > span:nth-child(2) { overflow-wrap: anywhere; }
.wish-text small { font-size: 11px; color: #52755C; white-space: nowrap; }
.wish .icon-button { width: 34px; flex-basis: 34px; min-height: 34px; background: transparent; color: #B08F80; }
.wish .icon-button svg { width: 13px; height: 13px; }
.wish.done { background: var(--sage); }
.wish.done .wish-text { color: #6D796F; }
.wish.done .wish-text > span:nth-child(2) { text-decoration: line-through; }
.avatar.small { width: 24px; height: 24px; flex: 0 0 24px; border: 0; font-size: 10px; background: #fff; }
.wish-empty { padding: 2px 2px 0; }
.wish-reminder { padding: 11px 13px; border-radius: 14px; background: var(--peach); color: #6E4A3B; font-size: 13px; line-height: 1.5; }

/* ---------- Finances : détail et analyses ---------- */
.budget-row { display: block; width: 100%; text-align: left; color: var(--ink); min-height: 44px; }
.budget-row .budget-line > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.budget-row .budget-line svg { width: 13px; height: 13px; color: var(--faint); }
.analysis-link { margin-top: 10px; background: var(--paper); border-color: var(--border); }
.analysis-link .notice-icon { background: var(--sage); color: var(--forest); }
.analysis-link .desc { color: var(--muted); }
.analysis-link > svg { color: var(--faint); }
.split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.split-cell { padding: 12px; border-radius: 16px; background: var(--bg); }
.split-cell strong { display: block; margin-top: 4px; font-size: 18px; letter-spacing: -.04em; }
.split-cell small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 14px; padding: 2px; border-radius: 14px; background: #ECEFE8; }
.segmented button { min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 750; color: var(--muted); }
.segmented button[aria-pressed="true"] { background: var(--paper); color: var(--forest); box-shadow: var(--shadow); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 14px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
.stat:first-child { background: linear-gradient(125deg, #E1EAE0, #EDF2E8); }
.stat strong { display: block; margin-top: 6px; font-size: 21px; font-weight: 800; letter-spacing: -.06em; overflow-wrap: anywhere; }
.stat small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.month-chart { position: relative; display: flex; align-items: stretch; gap: 6px; overflow: hidden; }
.month-bar { flex: 1; min-width: 0; display: grid; grid-template-rows: 18px 120px 18px; gap: 4px; text-align: center; }
.month-bar .value { font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; }
.month-bar .track { position: relative; display: block; }
.month-bar .fill { position: absolute; left: 12%; right: 12%; bottom: 0; border-radius: 8px 8px 4px 4px; background: #A7B6A8; }
.month-bar.current .fill { background: var(--terracotta); }
.month-bar .fill.projected { background: transparent; border: 1.5px dashed #D58E74; }
.month-bar .label { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: capitalize; }
.month-bar.current .label { color: var(--ink); }
.average-line { position: absolute; left: 15px; right: 15px; height: 0; border-top: 1.5px dashed var(--sage-dark); pointer-events: none; }
.average-line span { position: absolute; right: 0; top: -17px; padding: 0 4px; border-radius: 6px; background: var(--paper); font-size: 10px; font-weight: 800; color: var(--sage-dark); }
.chart-note { margin-top: 8px; font-size: 11px; }
.trend { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.trend.up { color: var(--danger); font-weight: 700; }
.trend.down { color: #52755C; font-weight: 700; }
.tips { display: grid; gap: 8px; }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border-radius: 17px; background: #FCF0E8; border: 1px solid #F1DDD1; font-size: 13px; color: #6E4A3B; }
.tip svg { width: 16px; height: 16px; margin-top: 2px; color: #9C664C; }

/* ---------- Courses : prix, habitudes, mode magasin ---------- */
.item-quantity small { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--faint); }
.estimate { margin-top: 12px; font-size: 12px; color: #D4E1D5; }
.shopping-tools { margin-top: 12px; }
.habits { margin: 14px 0 4px; }
.habits h3 { font-size: 13px; }
.habits .chips { margin-top: 8px; }
.button.chip.habit { background: var(--peach); color: #6E4A3B; box-shadow: none; }
.store-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: var(--bg); }
.store-head .eyebrow { display: block; color: #819084; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.store-head strong { display: block; font-size: 20px; letter-spacing: -.05em; }
.store-head small { display: block; font-size: 12px; color: var(--muted); }
.store-head { flex-wrap: wrap; }
.store-head > div { flex: 1; min-width: 0; }
.store-progress { flex-basis: 100%; height: 4px; margin: 2px 0 0; border: 0; border-radius: 4px; background: var(--sage); -webkit-appearance: none; appearance: none; overflow: hidden; }
.store-progress::-webkit-progress-bar { background: var(--sage); }
.store-progress::-webkit-progress-value { background: var(--forest); border-radius: 4px; transition: width .25s ease; }
.store-progress::-moz-progress-bar { background: var(--forest); }
.store-aisle { margin-top: 14px; }
.store-aisle h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 15px; }
.store-aisle h3 small { font-size: 12px; color: var(--muted); }
.store-aisle h3.complete { color: var(--faint); }
.store-aisle ul { list-style: none; margin: 0; padding: 2px 6px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.store-row + .store-row { border-top: 1px solid var(--border); }
.store-row label { display: flex; align-items: center; gap: 8px; min-height: 64px; cursor: pointer; }
.store-name { flex: 1; min-width: 0; }
.store-name strong { display: block; font-size: 17px; overflow-wrap: anywhere; }
.store-name small { font-size: 12px; color: var(--faint); }
.store-quantity { flex-shrink: 0; padding-right: 10px; font-size: 15px; font-weight: 800; color: #7C897C; }
.store-row.done .store-name strong { color: #9DA89E; text-decoration: line-through; }
.store-row.done .store-quantity { color: #B4BBB1; }

/* ---------- Repas : semaine, repas mangé ---------- */
.button.chip.week-shopping { width: 100%; margin-top: 10px; }
.pill.eaten { background: var(--forest); color: #fff; }
.need-list { list-style: none; margin: 0; padding: 0; }
.need-list li + li { border-top: 1px solid var(--border); }
.need-list .check-row { align-items: flex-start; padding: 8px 0; }
.need-list small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.need-list input:disabled + span { opacity: .6; }

/* ---------- Factures ---------- */
.checkout-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-form legend { margin: 6px 0 4px; font-weight: 750; font-size: 14px; }
.receipt-lines summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--forest); }
.receipt-lines ul { list-style: none; margin: 0; padding: 0; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
.receipt-lines li + li { border-top: 1px solid var(--border); }
.receipt-lines small { display: block; font-size: 11px; color: var(--muted); }
.price-intro { padding: 10px 0 4px; }

/* ---------- Lot 3 ---------- */
.nav-spacer { width: 44px; }
.import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.import-row .button { min-height: 46px; }
.quick-details.tools-1 { grid-template-columns: 96px minmax(0, 1fr) 44px; }
.quick-details.tools-2 { grid-template-columns: 96px minmax(0, 1fr) 44px 44px; }
.quick-details .icon-button.listening { background: var(--forest); color: #fff; animation: ping 1s ease-out infinite; }
.quick-details .icon-button { min-height: 44px; background: #F3F2EC; color: var(--forest); }
.stock-label[role="button"] { cursor: pointer; }
.scanner { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; border: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: #142019F2; color: #fff; }
.scanner video { width: min(100%, 420px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; border: 2px solid #ffffff55; }
.scanner p { font-weight: 700; }
.idea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.idea .button.chip { margin: 0; }
.mini-history { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; height: 84px; padding: 4px 2px 0; }
.mini-history span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.mini-history i { display: block; width: 70%; min-height: 2px; border-radius: 6px 6px 3px 3px; background: #C9D3C7; }
.mini-history .current i { background: var(--terracotta); }
.mini-history small { font-size: 10px; color: var(--faint); text-transform: capitalize; }
.change-total { font-size: 15px; font-weight: 800; }
.mini-title { margin: 12px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.mini-title.section { margin-top: 18px; }
.change-list { list-style: none; margin: 0; padding: 0; }
.change-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; font-size: 13px; font-weight: 700; }
.change-row + .change-row { border-top: 1px solid var(--border); }
.change-row small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.credit { color: #52755C; }
.leftover { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 14px 13px; border-radius: 19px; background: var(--sage); }
.leftover .notice-icon { background: var(--paper); color: var(--forest); }
.leftover strong { display: block; font-size: 13px; }
.leftover .desc { margin-top: 2px; font-size: 12px; }
.button.chip.revolut { width: 100%; margin-top: 8px; }
.revolut-link { width: 100%; background: #191C1F; }
.revolut-link:hover { background: #000; }

.scanner:not([open]) { display: none; }
.scanner::backdrop { background: #142019; }

/* ---------- UX : bouton +, sous-onglets, réglages, gestes, volets ---------- */
.nav { grid-template-columns: 1fr 1fr 64px 1fr 1fr; align-items: center; }
.fab { width: 52px; height: 52px; justify-self: center; align-self: center; margin: 0; border-radius: 18px; background: var(--forest) !important; color: #fff !important;
  box-shadow: 0 4px 12px #2F4A3A30; display: grid !important; place-items: center; min-height: 0 !important; }
.fab svg { width: 24px !important; height: 24px !important; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 10px 4px;
  border-radius: 18px; background: var(--bg); color: var(--forest); font-size: 12px; font-weight: 750; text-align: center; }
.quick-tile svg { width: 22px; height: 22px; }
.quick-tile:active { background: var(--sage); }
.sub-tabs { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.sub-tabs button { padding: 0 4px; }
.settings-panel { padding: 4px 14px; }
.setting-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 64px; padding: 10px 0; text-align: left; color: var(--ink); cursor: pointer; }
.settings-panel > * + * { border-top: 1px solid var(--border); }
.setting-row > svg:last-child { width: 15px; color: var(--faint); }
.setting-row.compact { min-height: 52px; padding: 6px 0; }
.setting-row.compact .tx-text strong { font-weight: 600; }
.setting-block { padding: 12px 0; }
.setting-block .setting-row { border-top: 1px solid var(--border); }
.setting-caption { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 800; }
.setting-caption svg { width: 16px; height: 16px; color: var(--forest); }
.push-group { margin: 14px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.push-note { margin: 12px 0 0; font-size: 12px; }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 48px !important; width: 48px !important; height: 28px !important;
  border-radius: 99px; background: #D5DBD2; cursor: pointer; transition: background .2s; margin-left: auto !important; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.switch:checked { background: var(--forest); }
.switch:checked::after { transform: translateX(20px); }
.card-list { list-style: none; margin: 0; padding: 0; }
.card-row { display: flex; align-items: center; gap: 4px; }
.card-row + .card-row { border-top: 1px solid var(--border); }
.card-row .check-row { flex: 1; }
.card-row .icon-button { width: 40px; flex-basis: 40px; min-height: 40px; background: transparent; }
.card-row .icon-button:disabled { opacity: .25; }
.customize-link { display: flex; margin: 18px auto 0; color: var(--muted) !important; }
.home-balance { margin-top: 12px; }
.swipe-row { position: relative; touch-action: pan-y; transition: transform .18s ease; background: var(--paper); }
.swipe-row.swipe-armed { box-shadow: 8px 0 0 -2px var(--danger) inset; }
.swipe-row.swipe-armed::after { content: 'Supprimer'; position: absolute; right: -96px; top: 50%; transform: translateY(-50%); color: var(--danger); font-size: 12px; font-weight: 800; }
.shopping-list, .stock-panel, .transaction-panel { overflow: hidden; }

/* Dialogs become sheets from the bottom on phones, with the main button always reachable. */
@media (max-width: 560px) {
  dialog { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 26px 26px 0 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom)); animation: sheet-up .22s ease-out; transition: transform .15s; }
  dialog.scanner { border-radius: 0; animation: none; }
  .dialog-head { position: sticky; top: -22px; z-index: 2; margin: -22px -19px 14px; padding: 22px 19px 10px; background: var(--paper); touch-action: none; }
  .dialog-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #D8DCD4; }
  dialog .actions { position: sticky; bottom: calc(-1 * max(20px, env(safe-area-inset-bottom))); z-index: 2; margin: 4px -19px 0; padding: 12px 19px max(14px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--border); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- En-tête d'écran : une ligne collée en haut ---------- */
.page-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  margin: -6px calc(-1 * var(--gutter)) 0; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 10px; background: var(--bg); }
.page-title { flex: 1; min-width: 0; }
.page-title .eyebrow { display: block; color: #5E6A60; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title h1 { margin-top: 3px; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.06em; }
.page-head > .icon-button { background: var(--forest); color: #fff; }
.page-head > .icon-button:hover { background: var(--forest-deep); }
.page-head > .button { flex-shrink: 0; }
.me { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; }
.me span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #DADED4; color: var(--forest); font-size: 13px; font-weight: 800; }
.me.partner span { background: #F4DDCF; color: #855E4D; }
.page-head + .sub-tabs { margin-top: 2px; }

/* ---------- Frigo : retirer ou ajouter une quantité ---------- */
.segmented.direction { grid-template-columns: 1fr 1fr; margin: 0; }
.segmented.direction label { position: relative; display: grid; place-items: center; min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 750; color: var(--muted); cursor: pointer; }
.segmented.direction input { position: absolute; opacity: 0; pointer-events: none; }
.segmented.direction label:has(input:checked) { background: var(--paper); color: var(--forest); box-shadow: var(--shadow); }
.segmented.direction label:has(input:focus-visible) { outline: 3px solid var(--sage-dark); outline-offset: 2px; }
.quick-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
#stock-after { min-height: 20px; font-weight: 700; color: var(--forest); }

/* ---------- Photos des produits ---------- */
.thumb { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.thumb.placeholder { display: grid; place-items: center; background: var(--bg); box-shadow: none; font-size: 18px; }
.thumb.large { width: 52px; height: 52px; flex-basis: 52px; border-radius: 13px; }
.thumb.large.placeholder { font-size: 24px; }
.shopping-row.done .thumb { opacity: .45; }
.store-row.done .thumb { opacity: .4; }
.picture-row { display: flex; align-items: center; gap: 12px; }
.picture-row .muted { flex: 1; font-size: 12px; }

/* ---------- Fiche produit après un scan ---------- */
.product-top { display: flex; align-items: center; gap: 14px; }
.product-photo { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 18px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.product-photo.placeholder { display: grid; place-items: center; font-size: 40px; background: var(--bg); box-shadow: none; }
.product-top strong { display: block; font-size: 14px; }
.product-top small { display: block; margin-top: 3px; }
.product-price { font-size: 13px; font-weight: 750; color: var(--forest); }
.scores { display: flex; flex-wrap: wrap; gap: 8px; }
.score { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: 99px; background: var(--bg); font-size: 12px; font-weight: 750; color: var(--ink); }
.score i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; background: var(--sage-dark); }
.score i.score-c { color: #2D332E; }
.nova-1 { background: #038141 !important; } .nova-2 { background: #85BB2F !important; color: #2D332E !important; } .nova-3 { background: #EE8100 !important; } .nova-4 { background: #E63E11 !important; }
.allergens { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 14px; background: var(--peach); color: #7E5341; }
.allergens strong { margin-right: 4px; }
.ingredients summary { cursor: pointer; font-size: 13px; font-weight: 750; color: var(--forest); min-height: 32px; }
.product-sheet .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.product-sheet .source { font-size: 11px; text-align: center; }

/* ---------- Fiche d'un article de la liste ---------- */
.hero-photo { width: 100%; height: 220px; flex: none; border-radius: 22px; }
.hero-photo.placeholder { font-size: 84px; }
.item-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.item-facts > span { padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.item-facts small { display: block; font-size: 11px; color: var(--muted); }
.item-facts strong { display: block; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.item-facts em { font-style: normal; font-size: 11px; font-weight: 750; }
.item-facts em.up { color: var(--danger); } .item-facts em.down { color: #52755C; }
.item-sheet .text-button { justify-self: center; }
.loading-line { animation: breathe 1.4s ease-in-out infinite; }

/* ---------- Opérations : les actions en premier ---------- */
.op-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.button.op-action { flex-direction: column; gap: 6px; min-height: 72px; padding: 10px 6px; border-radius: 18px; background: var(--paper); color: var(--forest); font-size: 12px; text-align: center; box-shadow: var(--shadow), inset 0 0 0 1px var(--border); }
.button.op-action:hover { background: var(--sage); }
.button.op-action svg { width: 20px; height: 20px; }

/* ---------- Mouvement : l'app respire sans ralentir ---------- */
html { overscroll-behavior-y: contain; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hop { 0% { transform: none; } 40% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes arrive { 0% { opacity: 0; transform: translateX(-10px); background: var(--sage); } 35% { opacity: 1; transform: none; background: var(--sage); } 100% { background: var(--paper); } }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #8FBF9C99; } 100% { box-shadow: 0 0 0 8px #8FBF9C00; } }

/* A new screen: the head first, then each block a beat later. */
.app.enter #main > * { animation: rise .34s cubic-bezier(.2, .8, .2, 1) both; }
.app.enter #main > *:nth-child(2) { animation-delay: .04s; }
.app.enter #main > *:nth-child(3) { animation-delay: .08s; }
.app.enter #main > *:nth-child(4) { animation-delay: .12s; }
.app.enter #main > *:nth-child(5) { animation-delay: .16s; }
.app.enter #main > *:nth-child(6) { animation-delay: .2s; }
.app.enter #main > *:nth-child(n+7) { animation-delay: .24s; }
.app.enter #main > .add-bar { animation: none; }
.app.enter .nav button[aria-current="page"] svg { animation: hop .4s ease-out; }
.app.enter .nav button[aria-current="page"] { animation: fade .25s ease-out; }
.app.enter .budget-panel progress, .app.enter .home-budget progress { transform-origin: left; animation: grow .8s cubic-bezier(.2, .8, .2, 1) .1s both; }

/* Rows that just appeared (added here or by the other phone). */
li.arrive { animation: arrive 1.2s ease-out; }

/* Touch feedback. */
.button, .icon-button, .quick-tile, .nav button, .tx, .setting-row, .item-open, .store-start, .budget-row, .recipe, .fold-link { transition: transform .12s ease, background .15s; }
.button:active, .icon-button:active, .quick-tile:active, .nav button:active, .tx:active, .setting-row:active, .budget-row:active, .recipe:active, .fold-link:active { transform: scale(.97); }
.item-open:active { transform: scale(.985); }
.fab { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.fab:active { transform: scale(.92) rotate(90deg); }
.toast:not([hidden]) { animation: rise .25s cubic-bezier(.2, .8, .2, 1); }
dialog[open]::backdrop { animation: fade .2s ease-out; }
details[open] > .fold-body { animation: rise .25s ease-out; }
.loading { animation: breathe 1.4s ease-in-out infinite; }

/* Pull to refresh. */
.pull { position: fixed; z-index: 7; top: 0; left: 50%; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); color: var(--forest); box-shadow: 0 6px 20px #1C302430; transform: translate(-50%, -60px); opacity: 0; pointer-events: none; }
.pull.visible { opacity: 1; }
.pull:not(.visible) { transition: transform .25s ease, opacity .2s; }
.pull > span { position: absolute; display: grid; place-items: center; }
.pull svg { width: 22px; height: 22px; }
.pull.ready .pull-mark { color: #fff; }
.pull.ready { background: var(--forest); transition: background .15s; }
.pull.loading { background: var(--forest); color: #fff; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.pull.loading .pull-mark { color: #fff; animation: spin .7s linear infinite; }
.pull-done { opacity: 0; transform: scale(.4); }
.pull.done .pull-mark, .pull.failed .pull-mark { opacity: 0; }
.pull.done .pull-done { opacity: 1; transform: none; color: #fff; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .15s; }
.pull.done { background: #55795F; }
.pull.failed { background: var(--danger); animation: shake .3s; }
.pull.failed .pull-mark { opacity: 1; color: #fff; }

/* The other phone just changed something. */
.live-banner { position: fixed; z-index: 7; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; border-radius: 99px; background: #273D30; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px #1C302440;
  animation: drop .3s cubic-bezier(.2, .8, .2, 1); white-space: nowrap; }
.live-banner i { width: 8px; height: 8px; border-radius: 50%; background: #8FBF9C; animation: ping 1s ease-out infinite; }

/* ---------- Thème sombre, suit le téléphone ---------- */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #121714; --paper: #1B221D; --forest: #8FBF9C; --forest-deep: #A7D1B2; --sage: #26332A; --sage-dark: #6E9579;
    --peach: #3A2A22; --ink: #E7EDE8; --muted: #A2AEA4; --faint: #7D897F; --border: #2B352E; --danger: #F08A7E; --shadow: 0 8px 30px rgba(0, 0, 0, .25); }
  body { background: var(--bg); }
  .button { color: var(--dk-102016, #102016); }
  .button.secondary, .button.lime, .icon-button, .button.chip { color: var(--forest); }
  .button.danger { background: var(--dk-3b2522, #3B2522); color: var(--danger); }
  .brand-mark, .day-chip.selected, #main .hero > .icon-button, .fab, .button.small-action, .bottom-cta, .progress-box { background: var(--dk-2f4a3a, #2F4A3A) !important; color: #fff !important; }
  .nav-shell, .store-head, .dialog-head, dialog .actions { background: var(--paper); }
  .hero-card, .login .hero, .budget-panel, .bank-summary, .stat:first-child { background: linear-gradient(120deg, var(--dk-1f2c23, #1F2C23), var(--dk-26362b, #26362B)); }
  .hero-card p, .hero-copy .eyebrow, .budget-panel .desc, .budget-label, .budget-bottom { color: var(--dk-a9c2af, #A9C2AF); }
  .goal-summary { background: linear-gradient(125deg, var(--dk-33261f, #33261F), var(--dk-2c221c, #2C221C)); }
  .notice, .tip { background: var(--dk-2a211c, #2A211C); border-color: var(--dk-3b2d25, #3B2D25); color: var(--dk-e8d5ca, #E8D5CA); }
  .notice .desc, .tip span { color: var(--dk-c9ae9f, #C9AE9F); }
  .notice-icon, .bubble, .tx-icon, .mini-icon, .stock-icon, .goal-icon { background: var(--dk-2a3229, #2A3229); color: var(--dk-b8d4be, #B8D4BE); }
  .week-nav, .segmented, .empty-meal, .quick-tile, .split-cell { background: var(--dk-1f2722, #1F2722); border-color: var(--dk-2e3a31, #2E3A31); }
  .day-chip, .quick-details input.quantity-input, .quick-details select, .quick-details .icon-button { background: var(--dk-1f2722, #1F2722); color: var(--muted); }
  .avatar { border-color: var(--bg); background: var(--dk-2c3a30, #2C3A30); color: var(--dk-cfe3d4, #CFE3D4); }
  .avatar + .avatar { background: var(--dk-3e2e26, #3E2E26); color: var(--dk-ebc9b7, #EBC9B7); }
  progress, progress::-webkit-progress-bar { background: var(--dk-2a332c, #2A332C); }
  .budget-panel progress, .budget-panel progress::-webkit-progress-bar { background: var(--dk-33443a, #33443A); }
  .login-brand .eyebrow { color: var(--faint); }
  .login-mark { background: var(--dk-2f4a3a, #2F4A3A); box-shadow: none; }
  .wish { background: var(--dk-3a2a22, #3A2A22); } .wish-text { color: var(--dk-ebcbb9, #EBCBB9); } .wish.done { background: var(--sage); }
  .leftover, .passkey-prompt { background: var(--sage); }
  .switch { background: var(--dk-3a453d, #3A453D); }
  .pill { background: var(--dk-26332a, #26332A); color: var(--dk-b8d4be, #B8D4BE); }
  input.tick::before { background: var(--paper); border-color: var(--dk-46534a, #46534A); }
  .scanner::backdrop { background: #000; }
}

/* Suggestions de produits dans la page (remplace la barre du navigateur sous l'app) */
.suggest-field { position: relative; min-width: 0; }
.suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; border-radius: 14px;
  background: var(--paper); box-shadow: 0 12px 30px #1D302530; border: 1px solid var(--border); }
.suggest button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px;
  border-radius: 10px; text-align: left; font-size: 14px; font-weight: 700; color: var(--ink); }
.suggest button:active, .suggest button:hover { background: var(--sage); }
.suggest small { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ---------- Refonte des écrans : accueil du jour, semaine entière, liste d'abord, rythme du budget ---------- */
.nav button { color: var(--muted); font-size: 12px; }
#main .hero p:empty { display: none; }
#main .hero > .button { margin-top: 6px; flex-shrink: 0; }
.per-day { font-size: 13px; font-weight: 750; color: var(--forest); text-align: right; }
.per-day small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.budget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.budget-head .budget-value { margin-top: 6px; }

/* Accueil */
.todo-panel { padding: 4px 14px; }
.todo-panel li + li { border-top: 1px solid var(--border); }
.todo-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 0; text-align: left; color: var(--ink); }
.todo-row .tx-text strong { font-size: 14px; }
.todo-row .tx-text small { font-size: 12px; color: var(--muted); }
.todo-go { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--forest); }
.notice-icon.calm { background: var(--sage); color: var(--forest); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 108px; padding: 14px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
.menu-main { display: flex; flex-direction: column; gap: 5px; width: 100%; flex: 1; text-align: left; color: inherit; }
.menu-slot { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-main strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.menu-state { font-size: 12px; font-weight: 800; color: var(--forest); }
.menu-cell.eaten .menu-main strong { color: var(--muted); text-decoration: line-through; }
.menu-cell .small-action { margin-top: 0; min-height: 44px; }
.menu-cell.now { background: #2F4A3A; color: #fff; }
.menu-cell.now .menu-slot { color: #D4E1D5; }
.menu-cell.now .menu-state { color: #D4E1D5; }
.menu-cell.now.eaten .menu-main strong { color: #D4E1D5; }
.menu-cell.now .small-action { background: #FFFDFC; color: #2F4A3A; }
.menu-cell.past { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.menu-cell.past .menu-main strong { color: var(--muted); font-weight: 600; }
.home-budget { display: block; width: 100%; margin-top: 0; text-align: left; color: var(--ink); }
.home-budget .budget-value { font-size: 30px; }
.home-budget .budget-bottom { font-weight: 700; }

/* Repas : la semaine */
.week-grid { display: grid; gap: 6px; margin-top: 12px; }
.week-row { display: grid; grid-template-columns: 44px repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.week-head { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; }
.week-day span { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.week-day strong { font-size: 15px; }
.week-row.today .week-day { background: #2F4A3A; color: #fff; }
.week-row.today .week-day span { color: #D4E1D5; }
.week-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 11px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); min-width: 0; }
.week-cell strong { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.week-cell small { font-size: 12px; color: var(--muted); }
.week-cell.empty { flex-direction: row; align-items: center; justify-content: space-between; background: transparent; box-shadow: none; border: 1.5px dashed var(--sage-dark); color: var(--muted); font-size: 13px; font-weight: 600; }
.week-cell.empty svg { width: 15px; height: 15px; }
.week-cell.eaten strong { color: var(--muted); }
.week-row.past .week-cell { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.week-row.past .week-cell.empty { border: 0; box-shadow: none; }
.week-row.past .week-cell strong { color: var(--muted); font-weight: 600; }
.week-row.today .week-cell:not(.empty) { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--sage-dark); }

/* Courses */
.list-summary { display: grid; gap: 8px; margin-top: 16px; }
.list-summary-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.list-summary .muted { margin: 0; }
.shopping-row { min-height: 50px; }
.item-name { min-height: 48px; }
.item-name strong { font-size: 14px; }
.cart-done { margin-top: 16px; }
.cart-done summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 750; color: var(--forest); }
.add-bar-space { height: 76px; }
.add-bar { position: fixed; z-index: 3; left: 0; right: 0; bottom: calc(73px + max(10px, env(safe-area-inset-bottom))); margin: 0; background: var(--bg); border-top: 1px solid var(--border); }
.add-bar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; max-width: 560px; margin: 0 auto; padding: 9px var(--gutter); }
.add-bar .button { padding: 0 16px; font-size: 13px; }
.add-bar .quick-details { display: none; }
.add-bar:focus-within .quick-details { display: grid; }
.add-bar .suggest { top: auto; bottom: calc(100% + 4px); }
body:has(.add-bar) .toast { bottom: calc(152px + env(safe-area-inset-bottom)); }
/* Field focused: the bar grows and the keyboard is up, so « Annuler » moves to the top of the screen. */
body:has(.add-bar:focus-within) .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }

/* Finances : rythme */
.pace { position: relative; display: block; margin-top: 8px; }
.pace .bar { margin-top: 0; }
.pace i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.pace-note { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pace-note.ahead { color: var(--danger); font-weight: 700; }
.pace-legend { display: flex; align-items: center; gap: 7px; margin: -4px 0 8px; font-size: 12px; }
.pace-legend i { width: 2px; height: 12px; border-radius: 2px; background: var(--ink); }

@media (prefers-color-scheme: dark) {
  .menu-cell.now .small-action { background: #FFFDFC !important; color: var(--dk-2f4a3a, #2F4A3A) !important; }
  .per-day { color: var(--forest); }
}

/* Charges fixes regroupées, mensuelles et annuelles */
.cat-subscriptions { --bar: #8A9BB0; }
.fixed-group { padding: 0; overflow: hidden; }
.fixed-group summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 15px; cursor: pointer; list-style: none; }
.fixed-group summary::-webkit-details-marker { display: none; }
.fixed-group summary .tx-text strong { font-size: 14px; }
.fixed-group summary .tx-text small { font-size: 12px; color: var(--muted); }
.fixed-count { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.fixed-count svg { width: 16px; height: 16px; transition: transform .2s; }
.fixed-group[open] .fixed-count svg { transform: rotate(90deg); }
.fixed-group[open] summary { border-bottom: 1px solid var(--border); }
.fixed-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 14px 15px 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fixed-heading span { font-weight: 600; letter-spacing: 0; text-transform: none; }
.fixed-group .activity { padding: 0 15px 6px; }
.fixed-group .activity li + li { border-top: 1px solid var(--border); }
.fixed-over { margin: 10px 15px 0; }
@media (prefers-reduced-motion: reduce) { .fixed-count svg { transition: none; } }
/* Repas sans recette : Restes, Dehors */
.week-cell.free { flex-direction: row; align-items: center; justify-content: flex-start; background: var(--sage); box-shadow: none; color: var(--forest); font-size: 13px; font-weight: 700; }
.week-row.past .week-cell.free { background: transparent; color: var(--muted); }
.free-meals { margin-top: 0; }
.free-meals { display: flex; gap: 8px; }
.free-meals .chip { min-height: 44px; padding: 0 20px; border-radius: 99px; background: var(--sage); color: var(--forest); font-weight: 750; }
.free-meals .chip.active { background: var(--forest); color: #fff; }

/* ---------- Moins de boutons, plus de gestes ---------- */
.sub-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.fold-label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.fold-label.outside { margin: 0 0 6px 4px; }
.title-actions { display: flex; gap: 4px; }
.wide-action { width: 100%; min-height: 52px; justify-content: center; font-size: 15px; }
.danger-text { color: var(--danger); align-self: center; }
.text-button.inline { display: inline; min-height: 0; padding: 0; font-size: inherit; text-decoration: underline; }

/* Finances : un mois en pastille, un aperçu en quatre lignes */
.month-pill { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 14px; background: #ECEFE8; flex-shrink: 0; }
.month-pill > span, .month-pill .text-button { min-width: 44px; padding: 0 4px; text-align: center; font-size: 13px; font-weight: 750; color: var(--forest); }
.month-pill .icon-button { width: 40px; height: 40px; flex-basis: 40px; background: transparent; }
.overview { display: grid; gap: 10px; margin-top: 14px; }
.fold { padding: 0; overflow: hidden; }
.fold > summary, .fold-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 15px; cursor: pointer; list-style: none; text-align: left; color: var(--ink); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary strong, .fold-link strong { font-size: 14px; }
.fold > summary > svg, .fold-link > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: transform .2s; }
.fold[open] > summary > svg { transform: rotate(90deg); }
.fold[open] > summary { border-bottom: 1px solid var(--border); }
.fold-body { padding: 4px 15px 12px; }
.fold-body > .panel { box-shadow: none; padding: 0; background: transparent; }
.fold-body .goal-list { margin-top: 4px; }
.fold-tools { display: flex; justify-content: flex-end; }
.fold-wrap .fixed-group summary .tx-icon { display: none; }
.fold-wrap .fold-tools { margin-top: 2px; }
.report-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; min-height: 64px; padding: 10px 15px; border-radius: 18px; background: var(--peach); color: #6E4A3B; text-align: left; }
.report-card .tx-text small { color: #7A5546; }
.report-card .todo-go { color: #6E4A3B; }

/* Ajouter : le champ suit l'écran */
.quick-other { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.quick-grid.four .quick-tile { min-height: 76px; font-size: 12px; }
.frequent { display: grid; gap: 6px; }
.frequent .chips { margin-top: 0; }
.frequent .chip svg { width: 13px; height: 13px; }
.bar-frequent { grid-column: 1 / -1; }
.bar-frequent .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.bar-frequent .chip { flex-shrink: 0; min-height: 40px; }

/* Courses : on prépare la liste (modifier, − / +) ; on ne coche qu'en mode courses */
.shopping-row { display: flex; align-items: center; gap: 6px; min-height: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.item-open { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 54px; padding: 6px 0 6px 10px; text-align: left; color: var(--ink); }
.item-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-label strong { display: block; font-size: 15px; }
.item-label small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--faint); }
.shopping-row.done .item-label strong { color: var(--muted); }
.qty-stepper { display: inline-flex; flex-shrink: 0; align-items: center; border-radius: 99px; background: var(--sage); }
.qty-stepper button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--forest); }
.qty-stepper button:disabled { opacity: .3; }
.qty-stepper button:not(:disabled):active { background: rgba(47, 74, 58, .12); }
.qty-stepper svg { width: 15px; height: 15px; stroke-width: 2.6; }
.qty-stepper output { min-width: 18px; font-size: 14px; font-weight: 800; text-align: center; color: var(--forest); font-variant-numeric: tabular-nums; }
.qty-pill { flex-shrink: 0; max-width: 104px; min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--sage); color: var(--forest); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.store-start { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-top: 4px; padding: 10px 14px; border-radius: 18px; background: var(--forest); color: var(--paper); text-align: left; }
.store-start > svg { width: 22px; height: 22px; flex-shrink: 0; }
.store-start > svg:last-child { width: 18px; height: 18px; opacity: .7; }
.store-start span { flex: 1; min-width: 0; }
.store-start strong { display: block; font-size: 15px; }
.store-start small { display: block; margin-top: 2px; font-size: 12px; opacity: .78; }
.store-start:active { transform: scale(.985); }
.add-line { display: flex; align-items: flex-start; gap: 8px; }
.add-line .suggest-field { flex: 1; min-width: 0; }
.add-line .button { flex-shrink: 0; min-height: 48px; padding: 0 18px; }
.gesture-hint { margin: 12px 4px 0; font-size: 12px; }

/* Repas : choisir en un appui, trois actions */
.chooser-question { margin: -6px 0 0; font-size: 18px; letter-spacing: -.03em; }
.free-meals { flex-wrap: wrap; }
.wish-chip { background: var(--peach) !important; color: #6E4A3B !important; }
#recipe-search { min-height: 48px; }
.choices { display: grid; max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; color: var(--ink); }
.choice[hidden] { display: none; }
.choice strong { font-size: 15px; }
.choice small { font-size: 12px; color: var(--muted); }
.meal-sheet .eyebrow { margin: -8px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meal-done { margin: 0; font-weight: 700; color: var(--forest); }
.meal-fridge { padding: 12px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.meal-fridge p { margin: 4px 0 0; font-size: 14px; }
.meal-fridge .missing { color: #8F5238; font-weight: 700; }
.move-hint { margin: 0; font-size: 12px; }
.week-cell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.week-cell.drag-source { opacity: .35; }
.week-cell.drop-target { box-shadow: inset 0 0 0 2px var(--forest) !important; background: var(--sage) !important; }
.drag-ghost { position: fixed; z-index: 50; top: 0; left: 0; pointer-events: none; margin: 0; box-shadow: 0 16px 34px rgba(32, 40, 34, .25) !important; }

@media (prefers-color-scheme: dark) {
  .month-pill { background: var(--dk-1f2722, #1F2722); }
  .report-card { background: var(--dk-3a2b24, #3A2B24); color: var(--dk-f1d7cb, #F1D7CB); }
  .report-card .tx-text small, .report-card .todo-go { color: var(--dk-e2c1b3, #E2C1B3); }
  .wish-chip { background: var(--dk-3a2b24, #3A2B24) !important; color: var(--dk-f1d7cb, #F1D7CB) !important; }
  .meal-fridge .missing { color: var(--dk-e9a98f, #E9A98F); }
}
@media (prefers-reduced-motion: reduce) { .fold > summary > svg { transition: none; } }

/* Export */
.choice-group { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group legend { margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 800; color: var(--muted); }
.choice-group .segmented { margin-top: 0; }
.choice-group .segmented label { position: relative; display: grid; }
.choice-group .segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice-group .segmented span { display: grid; place-items: center; min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 750; color: var(--muted); }
.choice-group .segmented input:checked + span { background: var(--paper); color: var(--forest); box-shadow: var(--shadow); }
.choice-group .segmented input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 2px; }
.choice-group .check-row { align-items: flex-start; }
.choice-group .check-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: 500; }
.export-card { margin-top: 0; }

@media (prefers-color-scheme: dark) {
  .page-title .eyebrow { color: var(--muted); }
  .me span { background: var(--dk-26332a, #26332A); color: var(--forest); }
  .me.partner span { background: var(--dk-3a2a22, #3A2A22); color: var(--dk-e7b9a3, #E7B9A3); }
  .page-head > .icon-button { color: var(--dk-102016, #102016); }
}

@media (prefers-color-scheme: dark) {
  .thumb, .product-photo { background: #F4F2EC; }
  .thumb.placeholder, .product-photo.placeholder { background: var(--dk-1f2722, #1F2722); }
  .allergens { color: var(--dk-e7b9a3, #E7B9A3); }
}

/* ---------- Accueil : le ciel du moment, les petits mots, la porte du frigo, la tirelire ---------- */
.sky { position: relative; overflow: hidden; margin: -6px calc(-1 * var(--gutter)) 0; padding: max(20px, env(safe-area-inset-top)) var(--gutter) 34px;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--bg)); --sky-ink: var(--ink); --sky-soft: #6A5546; }
.sky-morning { --sky-top: #F6DCC4; --sky-mid: #F7E9DA; --sun: #F6C08E; --hill-far: #D7DCCB; --hill-near: #E8E9DD; }
.sky-day { --sky-top: #D6E6EE; --sky-mid: #E8F0EF; --sun: #F7DA8E; --hill-far: #CBD9C6; --hill-near: #E2E9DD; --sky-soft: #4F6359; }
.sky-dusk { --sky-top: #EFCDB4; --sky-mid: #F4DFCD; --sun: #F7B98E; --hill-far: #DCCFC0; --hill-near: #E9DFD4; }
.sky-night { --sky-top: #2C3B4A; --sky-mid: #4E5D69; --hill-far: #8F9590; --hill-near: #CFCCC4; --sky-ink: #F4F1EA; --sky-soft: #D5DCE3; }
.sky-scene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sky-sun { fill: var(--sun); opacity: .9; }
.sky-moon { fill: #F3EBD6; } .sky-star { fill: #F3EBD6; opacity: .85; }
.sky-hill.far { fill: var(--hill-far); opacity: .7; } .sky-hill.near { fill: var(--hill-near); }
.sky-row { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.sky-title { flex: 1; min-width: 0; color: var(--sky-ink); }
.sky-title .eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-soft); }
.sky-title h1 { margin-top: 4px; font-size: 28px; font-weight: 800; line-height: 1.08; letter-spacing: -.055em; overflow-wrap: anywhere; }
.sky-me span { background: rgba(255, 253, 252, .72) !important; }
.sky-night .sky-me span { background: rgba(255, 253, 252, .16) !important; color: #F4F1EA !important; }
.sky-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 14px; padding: 8px 13px 8px 10px; border-radius: 99px;
  background: rgba(255, 253, 252, .72); color: var(--sky-soft); font-size: 13px; font-weight: 700; }
.sky-chip svg { width: 18px; height: 18px; flex: none; }
.sky-night .sky-chip { background: rgba(255, 253, 252, .14); color: #F4F1EA; }

.notes { display: grid; gap: 12px; margin-top: 6px; }
.note { position: relative; padding: 12px 14px 12px 16px; border-radius: 6px 18px 18px 18px; background: #E7EFE3; box-shadow: 0 10px 22px rgba(47, 74, 58, .12);
  transform: rotate(-1deg); --note-ink: #2F4A3A; }
.note.partner { background: #FBE1D0; box-shadow: 0 10px 22px rgba(133, 94, 77, .16); --note-ink: #855E4D; }
.note.tilt { transform: rotate(.8deg); }
.note-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px -8px -4px 0; }
.note-who { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 253, 252, .6); color: var(--note-ink); font-size: 11px; font-weight: 800; }
.note-meta { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--note-ink); }
.note-heart, .note-close { width: 40px; height: 44px; display: grid; place-items: center; color: var(--note-ink); border-radius: 12px; }
.note-heart svg, .note-close svg, .note-loved svg { width: 19px; height: 19px; }
.note-heart[aria-pressed="true"] svg, .note-loved svg { fill: #C0603F; stroke: #C0603F; }
.note-loved { display: grid; place-items: center; width: 32px; }
.note-close { opacity: .6; } .note-close:hover { opacity: 1; }
.note-text { margin: 2px 0 0; font-family: 'Caveat', 'DM Sans', cursive; font-size: 25px; font-weight: 600; line-height: 1.15; color: #3A2A22; overflow-wrap: anywhere; }
.note:not(.partner) .note-text { color: #24392C; }
.note-left { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--note-ink); opacity: .75; }
.note-new { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.note-new svg { width: 18px; height: 18px; }
.note-form textarea { font-family: 'Caveat', 'DM Sans', cursive; font-size: 24px; line-height: 1.2; min-height: 108px; }
.segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fridge-door { position: relative; margin-top: 16px; padding: 20px 16px 22px; border-radius: 30px; background: #E9EEE7;
  box-shadow: inset 0 0 0 1px #DCE3D8, 0 14px 30px rgba(47, 74, 58, .08); }
.pinned { position: relative; padding: 18px 16px 16px; border-radius: 20px; background: var(--paper); box-shadow: 0 8px 20px rgba(45, 51, 46, .08); }
.pin-dot { position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--forest); box-shadow: 0 3px 6px rgba(47, 74, 58, .35); }
.pin-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pin-title { margin-top: 6px; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.045em; overflow-wrap: anywhere; }
.pin-title button { font: inherit; color: inherit; text-align: left; letter-spacing: inherit; }
.pin-text { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pin-text strong { color: var(--ink); }
.pin-text .pin-missing { color: #8F5238; }
.pin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pin-actions .button { min-height: 44px; }
.pin-actions .button svg { width: 18px; height: 18px; }
.pin-state { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 800; color: var(--forest); }
.pin-state svg { width: 18px; height: 18px; }
.door-label { margin: 18px 2px 8px; font-size: 12px; font-weight: 800; color: #4F6655; }
.magnets { display: flex; flex-wrap: wrap; gap: 8px; }
.magnet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 99px; background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 10px rgba(45, 51, 46, .08); }
.magnet-dot { width: 28px; height: 28px; border-radius: 50%; background: #F2C8A8; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.magnet.m1 .magnet-dot { background: #C9DCC6; } .magnet.m2 .magnet-dot { background: #F1DE9C; }
.pad { display: block; width: 100%; margin-top: 18px; padding: 12px 16px 12px; border-radius: 4px 4px 16px 16px; background: #FFFCF2; text-align: left; color: var(--ink);
  box-shadow: 0 8px 18px rgba(45, 51, 46, .08); transform: rotate(.6deg); }
.pad-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pad-title { font-family: 'Caveat', 'DM Sans', cursive; font-size: 27px; font-weight: 600; color: var(--forest); }
.pad-meta { font-size: 12px; font-weight: 700; color: var(--muted); }
.pad-lines { display: block; margin-top: 2px; font-family: 'Caveat', 'DM Sans', cursive; font-size: 22px; font-weight: 600; line-height: 30px; color: #3B463D;
  background: repeating-linear-gradient(180deg, transparent 0 29px, #E6E0CF 29px 30px); }

.jar-card { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 18px 18px 14px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.jar { width: 78px; height: 96px; flex: none; }
.jar-lid { fill: #C9B79F; } .jar-glass { fill: #F3F0E8; } .jar-coins { fill: #E3C27A; } .jar-coin { fill: #EED494; } .jar-coin.dark { fill: #D8B263; }
.jar-edge { fill: none; stroke: #A9B3A5; stroke-width: 2.5; } .jar-shine { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.jar-text { flex: 1; min-width: 0; }
.jar-text h2 { margin-top: 4px; font-size: 18px; letter-spacing: -.04em; }
.jar-text h2 button { font: inherit; color: inherit; text-align: left; letter-spacing: inherit; }
.jar-text p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.jar-text .small-action { margin-top: 10px; }

.wins-card { margin-top: 6px; padding: 18px; border-radius: 24px; background: #2F4A3A; color: #F4F1EA; box-shadow: 0 14px 30px rgba(47, 74, 58, .22); }
.wins-card .pin-eyebrow { color: #BFD3C3; }
.wins-card h2 { margin-top: 6px; font-size: 22px; letter-spacing: -.045em; line-height: 1.15; }
.wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.win { padding: 12px; border-radius: 16px; background: rgba(255, 253, 252, .09); }
.win strong { display: block; font-size: 24px; letter-spacing: -.05em; }
.win span { font-size: 12px; color: #D4E1D5; }
.wins-wink { margin-top: 14px; font-family: 'Caveat', 'DM Sans', cursive; font-size: 23px; font-weight: 600; line-height: 1.2; color: #F3E3C4; }

@media (prefers-color-scheme: dark) {
  .sky-morning, .sky-day, .sky-dusk { --sky-top: #3A3A3C; --sky-mid: var(--dk-2a302c, #2A302C); --hill-far: var(--dk-2e3a31, #2E3A31); --hill-near: var(--dk-1b221d, #1B221D); --sky-ink: var(--ink); --sky-soft: #C9B8AA; --sun: #C98A62; }
  .sky-night { --sky-top: #1A2430; --sky-mid: #1E2A2E; --hill-far: #2B352E; --hill-near: var(--dk-1b221d, #1B221D); }
  .sky-chip, .sky-me span { background: rgba(255, 253, 252, .1) !important; color: var(--ink) !important; }
  .note { background: var(--dk-26332a, #26332A); --note-ink: var(--dk-b8d4be, #B8D4BE); box-shadow: none; }
  .note.partner { background: var(--dk-3a2a22, #3A2A22); --note-ink: var(--dk-e7b9a3, #E7B9A3); box-shadow: none; }
  .note-text, .note:not(.partner) .note-text { color: var(--ink); }
  .note-who { background: rgba(255, 255, 255, .08); }
  .fridge-door { background: var(--dk-1f2722, #1F2722); box-shadow: inset 0 0 0 1px var(--dk-2e3a31, #2E3A31); }
  .pinned, .magnet { background: var(--paper); box-shadow: none; }
  .pin-dot { background: var(--dk-8fbf9c, #8FBF9C); box-shadow: none; }
  .pin-text .pin-missing { color: var(--dk-e7b9a3, #E7B9A3); }
  .door-label { color: var(--dk-a9c2af, #A9C2AF); }
  .pad { background: var(--dk-262b24, #262B24); box-shadow: none; }
  .pad-title { color: var(--forest); } .pad-lines { color: var(--dk-d9ded6, #D9DED6); background: repeating-linear-gradient(180deg, transparent 0 29px, var(--dk-3a4038, #3A4038) 29px 30px); }
  .jar-glass { fill: var(--dk-26302a, #26302A); } .jar-edge { stroke: var(--dk-5d6b60, #5D6B60); } .jar-shine { opacity: .25; }
  .wins-card { background: var(--dk-24372b, #24372B); box-shadow: none; }
  .button.chip.active { background: var(--dk-2f4a3a, #2F4A3A); color: #fff; box-shadow: none; }
}

.recipe-filters { display: grid; gap: 8px; margin-bottom: 12px; }
.recipe-filters .chips, .share-chips { margin-top: 8px; }
.recipe-filters .chips { margin-top: 0; }
.button.chip.active { background: var(--forest); color: #fff; box-shadow: none; }
.debt-archived { margin-top: 10px; }
.debt-archived .goals-grid { padding: 4px 15px 14px; }


/* ---------- Revenus ---------- */
.salary-person { display: grid; gap: 14px; }
.salary-person[hidden] { display: none; }
.salary-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.salary-result { min-height: 40px; margin: 0; }
.salary-result strong { display: block; font-size: 17px; color: var(--forest); }
.salary-result small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ---------- Répartition par défaut, état des charges fixes ---------- */
.split-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.split-list li + li { border-top: 1px solid var(--border); padding-top: 12px; }
.split-list strong { display: block; margin-bottom: 6px; font-size: 14px; }
.recurring-month { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--border); }
.recurring-month strong { font-size: 15px; }
.recurring-month .button { justify-self: start; }
.recurring-state.planned { color: var(--muted); }
.recurring-state.done { color: var(--forest); }
.recurring-state.deleted, .recurring-month.deleted strong { color: var(--danger); }
.life-span { margin-bottom: 12px; }
.life-span button { min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 750; color: var(--muted); }
.life-span button[aria-pressed="true"] { background: var(--paper); color: var(--forest); box-shadow: var(--shadow); }
.bar.life-quentin { --bar: #668771; } .bar.life-partner { --bar: #D58E74; }
.life-table li { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: baseline; font-size: 13px; }
.life-table li.with-joint, .life-table li.life-head:has(span:nth-child(4)) { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.life-table li > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.life-table .life-head { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.theme-grid { display: grid; gap: 10px; }
.theme-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--radius-card); background: var(--paper); border: 1.5px solid var(--border); text-align: left; color: var(--ink); }
.theme-card[aria-pressed="true"] { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.theme-swatches { display: flex; gap: 4px; flex-shrink: 0; }
.theme-swatch { width: 18px; height: 34px; border-radius: 6px; border: 1px solid rgba(128, 128, 128, .25); }
.theme-info { flex: 1; min-width: 0; }
.theme-info strong { display: block; font-size: 15px; }
.theme-info small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---------- Nouveautés ---------- */
.release-title { margin: 0; font-weight: 800; font-size: 16px; color: var(--forest); }
.release-notes { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }