/* Événements (« Sorties & voyages ») : la fiche d'un événement, les propositions, l'onglet d'Analyses, les
   journées de travail, le badge sur une transaction et le réglage. Mobile d'abord ; plusieurs colonnes sur un ordinateur. */

/* ---------- Le type (emoji + libellé) ---------- */
.ev-kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); white-space: nowrap; }
.ev-kind > span[aria-hidden] { font-size: 14px; line-height: 1; }
.ev-kind.k-voyage { background: color-mix(in srgb, var(--st-good) 12%, transparent); color: var(--st-good); border-color: color-mix(in srgb, var(--st-good) 35%, transparent); }
.ev-kind.k-sortie { background: color-mix(in srgb, var(--st-warning) 12%, transparent); color: var(--warn-ink); border-color: color-mix(in srgb, var(--st-warning) 35%, transparent); }
.ev-kind-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ev-kinds { margin: 8px 0 2px; }

/* ---------- La fiche ---------- */
.ev-sheet .ev-head { display: grid; gap: 6px; margin-bottom: 10px; justify-items: start; min-width: 0; }
.ev-sheet .ev-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; background: transparent; border-color: transparent;
  border-bottom: 1px dashed var(--border-strong); border-radius: 8px 8px 0 0; padding: 4px 2px; width: 100%; min-width: 0; }
.ev-sheet .ev-name:hover { border-color: var(--border-strong); }
.ev-sheet .ev-name:focus { border-color: var(--accent); background: var(--surface-2); border-radius: 8px; padding-inline: 8px; }
.ev-meta { margin: 0; overflow-wrap: anywhere; }
.ev-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.ev-col { min-width: 0; display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) { .ev-sheet.wide .ev-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; } }
.ev-where { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.ev-where .field-label { margin: 0; font-weight: 700; color: var(--accent-text); }
.ev-where .input { flex: 1 1 auto; min-width: 0; }
.ev-details { padding: 12px; border-radius: 16px; background: var(--surface-2); }
.ev-details .row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.ev-total-box { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, var(--hero-1), var(--surface)); border: 1px solid var(--hero-border); }
.ev-total { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ev-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.ev-total-sm { font-size: 18px; }
.ev-why { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ev-why li { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.ev-parts h4, .ev-list-head h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.ev-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ev-txs { margin-bottom: 4px; }
.ev-add { display: grid; gap: 8px; }
.ev-foot { justify-content: flex-start; }
.ev-preset { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); margin: 0 0 4px; }
.ev-form .row-inline, .ev-details .row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* A row with a small control after it (✕ « retirer de l'événement »). */
.txs > li.tx-trail-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.txs > li.tx-trail-li > .swipe, .txs > li.tx-trail-li > .tx { min-width: 0; }
.tx-trail { padding: 0 8px 0 2px; }
.ev-rm { width: 32px; height: 32px; font-size: 13px; color: var(--ink-3); border-radius: 50%; }
.ev-rm:hover { color: var(--st-critical); background: color-mix(in srgb, var(--st-critical) 10%, transparent); }

/* The budget of a voyage */
.ev-budget { --tone: var(--st-good); display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.ev-budget.tone-warning { --tone: var(--st-warning); }
.ev-budget.tone-critical { --tone: var(--st-critical); }
.ev-budget .d-bar { height: 8px; }
.ev-budget .d-bar > i { background: var(--tone); }
.evb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.evb-main strong { font-size: 18px; }
.evb-left { font-weight: 600; }
.evb-line { margin: 0; color: var(--ink-2); }
.ev-budget.compact { background: transparent; padding: 0; }

/* ---------- Le badge sur une transaction ---------- */
.tx-badge.ev { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); max-width: 150px; }
span.tx-badge.ev[role="link"] { cursor: pointer; }
span.tx-badge.ev[role="link"]:hover { border-color: var(--accent); }
.tx-event-field .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Accueil › À faire ---------- */
.money-actions .sicon-emoji { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); font-size: 18px; line-height: 1; }
.rec-emoji .btn-row .link { align-self: center; }

/* ---------- Analyses › Sorties & voyages ---------- */
.an-sorties .ev-make { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.ev-trips { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
@media (min-width: 900px) { .ev-trips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-trips > .card { margin: 0; }
.ev-props { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ev-prop { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid transparent;
  animation: ev-in .45s var(--ease, ease) both; }
.ev-prop:hover { border-color: var(--accent-line); }
.ev-emoji { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); font-size: 18px; }
.ev-prop-body { display: grid; gap: 4px; min-width: 0; }
.ev-prop-body strong { font-size: 14px; overflow-wrap: anywhere; }
.ev-prop-body .btn-row { margin-top: 4px; }
.ev-offer { margin: 8px 0 0; }
@keyframes ev-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ev-prop { animation: none; } }

.ev-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-grid > .card { margin: 0; min-width: 0; }
.ev-kpis { margin-bottom: 12px; }
@media (min-width: 700px) { .ev-kind-card .ev-kpis { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }
@media (min-width: 1000px) { .ev-grid .ev-kind-card .ev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-kpis .kpi { min-width: 0; }
.ev-trend { margin: 4px 0 10px; }
.ev-trend .cols { gap: 6px; }
.ev-parts { margin: 6px 0 8px; }
.ev-advice { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--accent); }
.ev-people .chip.static { cursor: default; }
.ev-lines { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; }
.ev-lines li + li { border-top: 1px solid var(--border); }
.ev-line { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.ev-line:hover { background: var(--surface-2); }
.evl-main { display: grid; gap: 1px; min-width: 0; }
.evl-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evl-main .small { overflow-wrap: anywhere; }
.evl-amt { font-weight: 600; }
.ev-foot-note { margin-top: 16px; }

/* ---------- Réglages ---------- */
.ev-kind-switches { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.ev-kind-switches li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

@media (max-width: 420px) {
  .ev-total { font-size: 30px; }
  .ev-sheet .ev-name { font-size: 18px; }
  .ev-prop { grid-template-columns: 30px minmax(0, 1fr); padding: 10px; }
  .ev-emoji { width: 30px; height: 30px; font-size: 15px; }
}

.an-travail .cols + p, .ev-trend + p { margin-top: 10px; }
.an-travail .card .cols { margin-bottom: 8px; }

/* ---------- Conseils (lot C) : l'onglet et le conseiller ---------- */
.ev-tips .ev-tip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 1000px) { .ev-tips .ev-tip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-tip { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); border-left: 3px solid var(--st-info, var(--accent)); min-width: 0; }
.ev-tip.lvl-warning { border-left-color: var(--st-warning); }
.ev-tip.lvl-good { border-left-color: var(--st-good); }
.ev-tip p { margin: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.ev-tip-foot { margin-top: 4px; align-items: center; }
.chat-prop { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.chat-prop p { margin: 0; overflow-wrap: anywhere; }
.chat-prop .btn-row { margin-top: 4px; }
@media (max-width: 420px) { .ev-tip { grid-template-columns: 30px minmax(0, 1fr); padding: 10px; } }
.ev-tips-more { margin-top: 8px; }

/* ---------- À valider par mois, journées regroupées (lot D) ---------- */
.ev-month + .ev-month { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ev-month-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ev-month-head h4 { margin: 0; font-size: 14px; }
.ev-more-months { margin-top: 12px; }
.an-travail .ev-proposals, .an-travail .ev-work-list { margin-top: 14px; }

/* v19.53 — Sélection multiple dans Transactions, en Liste comme en Tableau : cocher des lignes puis Catégorie…,
   Grouper (en événement) ou Supprimer. Sur mobile, la barre passe sur deux lignes au lieu de déborder. */
.ledger-legend .lg-tools { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.ledger-legend .lg-tools .lg-csv { margin-left: 0; }
.table.ledger .col-sel { width: 34px; padding-right: 0; }
.table.ledger tr.is-selected td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lcard.selecting .lcard-btn { position: relative; padding-left: 46px; }
.lcard .lcard-check { position: absolute; left: 14px; top: 13px; }
.lcard.is-selected { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.bulk-bar .bulk-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.bulk-bar .bulk-count { white-space: nowrap; }
@media (max-width: 699px) {
  .bulk-bar { flex-wrap: wrap; row-gap: 8px; }
  .bulk-bar .bulk-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bulk-bar .bulk-actions .btn { width: 100%; justify-content: center; padding-inline: 6px; }
  .bulk-bar .bulk-long { display: none; }
}
.bulk-bar .bulk-short { display: none; }
@media (max-width: 699px) { .bulk-bar .bulk-short { display: inline; } }

/* v19.54 — « Sélectionner » flottant : il suit le défilement en bas de la liste (au-dessus de la barre de navigation sur
   mobile), pour cocher des lignes en bas d'une longue liste sans remonter. En mode sélection, la barre d'actions (avec
   Terminer) prend sa place et flotte de la même façon. */
.sel-fab-dock { position: sticky; bottom: calc(84px + var(--safe-b)); z-index: 20; display: flex; justify-content: flex-end; pointer-events: none; margin-top: -8px; }
.sel-fab { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); color: var(--ink-1); font-weight: 600; animation: rise .25s var(--ease); }
.sel-fab:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 900px) { .sel-fab-dock { bottom: 16px; } }
.bulk-bar .bulk-done { order: 0; }
@media (max-width: 699px) { .bulk-bar .bulk-done { padding-inline: 10px; } }

/* Aperçu du rituel de fin de mois (#/reglages/apercu-rituel, views/ritualpreview.js) */
.rp-banner { position: sticky; top: calc(56px + var(--safe-t, 0px)); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: 14px; border: 1px solid var(--accent-line); background: color-mix(in srgb, var(--surface) 82%, var(--accent)); box-shadow: var(--shadow-pop); min-width: 0; }
.rp-banner-text { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) { .rp-banner { top: 12px; } }
.rp-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.rp-steps li { min-width: 0; }
.rp-steps li .link { color: var(--muted, inherit); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.rp-steps li.on .link { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }
.rp-note { margin: 0; overflow-wrap: anywhere; }
.rp-kept { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.rp-kept li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.rp-kept-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.rp-carry-sum { overflow-wrap: anywhere; }
.rp-result .hero-label { margin-bottom: 4px; }
.rp-foot { flex-wrap: wrap; }
.ritual-preview .co-finish .btn { white-space: normal; }

/* Rituels v19.60 : clôture (pourcentage du budget, tiers, réserve, sorties) et début de mois guidé (à prévoir) */
.co-used { margin: 4px 0 0; }
.co-unc-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.co-unc-more .co-used, .co-unc-more .co-tiers { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.co-tier { white-space: nowrap; }
.co-reserve { margin: 10px 0 0; overflow-wrap: anywhere; }
.co-reserve.neg { color: var(--neg); } .co-reserve.pos { color: var(--pos); }
.co-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.co-out li { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.co-out li.neg { border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }
.co-out-links { margin: 10px 0 0; }
.ps-step .ps-sub { grid-column: 1 / -1; display: block; overflow-wrap: anywhere; }
.ps-sub.neg, .ps-reserve.neg { color: var(--neg); } .ps-sub.pos, .ps-reserve.pos { color: var(--pos); }
.ps-reserve { margin: 6px 0 0; }
.ps-hints { margin: 12px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ps-hints summary { cursor: pointer; list-style: revert; }
.ps-hints ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ps-hints li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0; }
.ps-hint-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.co-unc .co-tier strong, .co-unc .co-used strong { font: inherit; font-weight: 600; }

/* « Moment ? » in Ajouter (v19.61): one row of small chips under the category, friends on a second row once a group is chosen. */
.moment-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 0; }
.moment-row .chips { flex-wrap: wrap; min-width: 0; }
.moment-row .chip.small { min-height: 32px; padding: 5px 11px; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-row .moment-group { border-color: var(--accent); }
.moment-row .moment-people { align-items: center; gap: 6px; }
.moment-row .moment-people .chip[disabled] { opacity: 1; cursor: default; }
.moment-row .moment-name { max-width: 100%; }
.moment-row .moment-open { align-self: flex-start; }
/* Marques in Détails. */
.marks-field .chip.mark { gap: 4px; }
.old-tags { overflow-wrap: anywhere; margin: 4px 0 0; }
/* Mois serré (v19.62): the warning under « Moment ? », figures only. */
.moment-row .moment-tight { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--st-warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--st-warning) 30%, transparent); overflow-wrap: anywhere; line-height: 1.4; }
/* v19.64: a group spotted but not confirmed yet: the same badge, dashed and quieter. */
.tx-badge.ev.pending { border-style: dashed; background: transparent; color: var(--muted, inherit); }
span.tx-badge.ev.pending[role="link"]:hover { color: var(--accent-text); }
/* v19.64: the badges always visible. The meta line used to be one fixed line: badges pushed onto the second line were
   cut (the home page's « Dernières transactions », where the date makes the line longer). Now they wrap below the
   description when it does not fit; the description keeps its « … ». */
.tx .tx-meta { flex-wrap: wrap; height: auto; overflow: visible; row-gap: 3px; }
.tx .tx-meta .tx-meta-text { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.tx .tx-meta .tx-badges { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.tx .tx-meta .tx-badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tx .tx-meta .tx-badge.ev { max-width: 170px; }
/* v19.67: buttons « block » in a sheet's action row (« Puis-je ? »: Demander · Voir les transactions · + Ajouter):
   `.block { display: block }` (v6.css) and `.btn.block { width: 100% }` made each one as wide as the row, pushed out of
   the sheet. Side by side, sharing the row, wrapping when they do not fit. */
.sheet-actions { flex-wrap: wrap; }
.sheet-actions .btn.block { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 1 1 0; min-width: max-content; }
/* v19.68: the rhythm gauge, animated by JS (spring): no CSS dash-in on its arc; a slight tremble of the needle when hot. */
.rh-fill.live { animation: none; }
.rh-needle-wrap { transform-box: view-box; transform-origin: 46px 42px; }
.rh-needle-wrap.trembling { animation: rh-tremble 2.6s ease-in-out infinite; }
@keyframes rh-tremble { 0%, 100% { transform: rotate(0deg); } 18% { transform: rotate(1.6deg); } 30% { transform: rotate(-.9deg); } 44% { transform: rotate(1.1deg); } 58% { transform: rotate(-.4deg); } 72% { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .rh-needle-wrap.trembling { animation: none; } }
/* v19.69: zones and graduations of the rhythm gauge: each zone dim on the whole scale, lit up to the needle. */
.rh-zone-arc { fill: none; stroke-width: 7; stroke-linecap: butt; opacity: .2; }
.rh-zone-arc.on { opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 60%, transparent)); }
.rh-grad { stroke: var(--ink-3); stroke-width: .7; stroke-linecap: round; opacity: .6; }
.rh-grad.major { stroke-width: 1.1; opacity: 1; }
.rhythm-card .rh-tick { stroke: var(--ink-1); stroke-width: 1.6; }
/* v19.69: the gauge in the home page's « Reste à dépenser » card (phone and tablet). */
.hero-gauge { display: grid; grid-template-columns: minmax(130px, 46%) 1fr; column-gap: 14px; row-gap: 4px; align-items: center; width: 100%; margin: 12px 0 4px; padding: 12px; border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--tone) 6%, transparent); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hero-gauge .hgau-dial .rh-dial { margin: 0; max-height: none; }
.hero-gauge .hgau-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-gauge .rh-pct { font-size: 26px; }
.hero-gauge .rh-zone { font-size: 13.5px; }
.hero-gauge .hgau-text, .hero-gauge .rhythm-bar { grid-column: 1 / -1; }
.hero-gauge .hgau-text { margin-top: 6px; }
/* v19.70 Accueil: « Budgets du mois » as tall as « Reste à dépenser » (same row, stretched), « Avant de dépenser » below
   both and as wide as both; « À faire » on the right over the two rows (≥ 1360 px) or below (600–1359 px). */
.home-grid { grid-template-areas: "hero" "budgets" "quick" "side"; }
.home-grid > .hg-hero { grid-area: hero; } .home-grid > .hg-budgets { grid-area: budgets; } .home-grid > .hg-quick { grid-area: quick; min-width: 0; } .home-grid > .hg-side { grid-area: side; }
@media (min-width: 600px) {
  .home-grid { grid-template-areas: "hero budgets" "quick quick" "side side"; align-items: stretch; }
}
@media (min-width: 1360px) {
  .home-grid { grid-template-areas: "hero budgets side" "quick quick side"; grid-template-rows: auto 1fr; align-items: stretch; }
  .home-grid > .hg-quick { align-self: start; }
}
.home-grid > .hg-hero > .card, .home-grid > .hg-budgets > .card { flex: 1; }
.budgets-mini { display: flex; flex-direction: column; }
.budgets-mini .bm-list { margin-bottom: auto; padding-bottom: 10px; }
@media (min-width: 600px) { .hg-quick .qc-chips { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.money-actions .ma-end { display: block; height: 0; }
/* v19.73 Prévus: Budget › Prévus (list by month, sheet), « Prévus ce mois » of the guided start, link in Ajouter. */
.prevus .pv-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prevus .pv-big { margin: 2px 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prevus .pv-big strong { font-size: 28px; }
.pv-list { gap: 2px; }
.pv-row { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; }
.pv-row.is-closed { opacity: .62; }
.pv-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2, transparent); line-height: 1.05; }
.pv-day strong { font-size: 17px; }
.pv-day small { font-size: 10.5px; color: var(--ink-3); text-transform: lowercase; }
.pv-main { gap: 2px; }
.pv-name { overflow-wrap: anywhere; }
.pv-meta, .pv-spent { overflow-wrap: anywhere; }
.pv-main .pot-bar { margin-top: 4px; max-width: 320px; }
.pv-amt { gap: 1px; }
.pv-amt .num { font-size: 15px; }
.pv-occ { display: flex; flex-direction: column; gap: 10px; }
.pv-occ-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pv-occ-amt { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pv-occ-amt strong { font-size: 22px; }
.pv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-kpis .kpi { min-width: 0; }
.pv-actions { flex-wrap: wrap; }
.pv-txs .rows .row.static { grid-template-columns: minmax(0, 1fr) auto auto; padding: 6px 2px; }
.pv-cands summary { cursor: pointer; color: var(--accent-text); margin: 4px 0; }
.pv-form .row2 { gap: 10px; }
.pv-every { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.pv-every .amount-mini { width: 64px; }
.pv-amount { max-width: 180px; margin-top: 6px; }
.pv-form .seg.small { margin-bottom: 6px; }
.tx-badge.planned { color: var(--st-good, var(--accent-text)); border-color: color-mix(in srgb, var(--st-good, var(--accent)) 40%, var(--border)); background: color-mix(in srgb, var(--st-good, var(--accent)) 10%, transparent); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.pv-propose .link, .pv-linked-note .link { margin-left: 4px; }
.pv-choose { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.wishes .wish-plan { grid-column: 2 / -1; justify-self: start; }
.ps-prevus .ps-add-all { margin: 6px 0 0; }
.ps-prevus .ps-soon-head { margin: 10px 0 2px; }
@media (max-width: 420px) {
  .pv-kpis { grid-template-columns: 1fr 1fr; }
  .pv-kpis .kpi:last-child { grid-column: 1 / -1; }
  .pv-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
  .pv-day { width: 36px; }
  .pv-form .row2.pv-fam { grid-template-columns: 1fr; }
}

/* Budget › À venir (v19.74): jump links + « + Ajouter », the common timeline, the Fixes and Prévus sections. */
.avenir .av-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.avenir .av-jump { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.avenir .av-jump .chip { font-size: 12.5px; padding: 5px 10px; }
.avenir .av-sec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 72px; }
.avenir .av-sec + .av-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.avenir .av-title { font-size: 18px; margin: 0; }
.avenir .av-title .muted { font-size: 14px; font-weight: 500; }
.avenir .av-sec > p.muted { margin: -6px 0 0; }
.tl-month .card-head { flex-wrap: wrap; gap: 4px 10px; }
.tl-month .card-head h2 { white-space: nowrap; }
.tl-mname { font-weight: 500; }
.tl-tot { display: inline-flex; gap: 10px; flex-wrap: wrap; color: var(--ink-3); }
.tl-tot strong { color: var(--ink-1); font-weight: 600; }
.tl-tot strong.pos { color: var(--pos); }
.tl-kind { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 500; line-height: 16px; border: 1px solid var(--border); color: var(--ink-3); white-space: nowrap; }
.tl-kind.tl-prevu { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent-text, var(--ink-2)); }
.tl-row .pv-name { overflow-wrap: anywhere; }
.tl-more { margin-top: 2px; }
.tl-ask { margin: 0 0 10px; }
@media (max-width: 420px) {
  .month > .seg button { padding-left: 10px; padding-right: 10px; }
}

/* v19.75 « Ce mois-ci… » : one occurrence of a fixe, a Prévu or a part lissée (badge + button under its row, the sheet). */
.occ-line { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; padding: 0 4px 6px 52px; min-width: 0; }
.fixes-month li:has(.occ-line) { flex-wrap: wrap; }
.fixes-month li > .occ-line { flex-basis: 100%; }
.occ-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; line-height: 18px; border: 1px dashed color-mix(in srgb, var(--warn-ink, #d9a441) 60%, var(--border)); color: var(--warn-ink, #b7832a); background: color-mix(in srgb, var(--warn-ink, #d9a441) 9%, transparent); overflow-wrap: anywhere; }
.occ-btn { font-size: 12.5px; white-space: nowrap; }
.occ-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.occ-opt { width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.occ-opt:hover, .occ-opt:focus-visible { border-color: var(--border-strong, var(--ink-3)); }
.occ-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.occ-dot { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border-strong, var(--ink-3)); }
.occ-opt.on .occ-dot { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface, #fff); background: var(--accent); }
.occ-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.occ-for { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px 2px 42px; }
.occ-for .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.occ-for p { margin: 0; }
@media (max-width: 420px) { .occ-line { padding-left: 46px; } .occ-for { padding-left: 8px; } }

/* v19.75 À venir sur ordinateur : la ligne du temps en grille (3 mois par rangée dès 1100 px), Fixes et Prévus côte à côte
   dès 1300 px. Téléphone et tablette : empilés comme avant. */
.avenir .av-cols { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avenir .av-cols > .av-sec { min-width: 0; }
.avenir .av-cols > .av-sec, .avenir .av-tl + .av-cols > .av-sec:first-child { margin-top: 0; }
.avenir #av-tl + .av-cols { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.avenir .av-cols > .av-sec + .av-sec { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.tl > .tl-month { min-width: 0; }
.tl-month .pv-row .row-main, .tl-month .pv-amt { min-width: 0; }
@media (min-width: 1100px) {
  .avenir .tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .avenir .tl > .tl-more { grid-column: 1 / -1; }
  .avenir .tl .tl-month { margin: 0; }
  .avenir .tl .tl-month .card-head { flex-direction: column; align-items: flex-start; }
  .avenir .tl .pv-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
  .avenir .tl .pv-day { width: 34px; height: 40px; }
  .avenir .tl .occ-line { padding-left: 46px; }
}
@media (min-width: 1300px) {
  .avenir .av-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .avenir .av-cols > .av-sec + .av-sec { padding-top: 0; border-top: 0; padding-left: 20px; border-left: 1px solid var(--border); }
}