/* =========================================================================
   budget.css — Page budget : grands chiffres + ventilation à barres
   ========================================================================= */
.budget-hero { margin-bottom: 2.2rem; }
.budget-hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.bstat { background: var(--card); padding: 1.4rem 1rem; text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.bstat__value { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--accent); }
.bstat__label { font-size: .82rem; font-weight: 600; }
.bstat__sub { font-size: .72rem; color: var(--ink-faint); }

.budget-list { display: flex; flex-direction: column; gap: 1.3rem; }
.bcat__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.bcat__label { font-weight: 600; }
.bcat__amount { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.bcat__bar { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.bcat__fill { display: block; height: 100%; border-radius: 999px; background: var(--gold); transition: width .4s ease; }
.bcat__fill--flights { background: var(--forest); }
.bcat__fill--lodging { background: var(--accent); }
.bcat__fill--food { background: var(--gold); }
.bcat__fill--bears { background: #6b4f2a; }
.bcat__fill--buffer { background: var(--line-strong); }
.bcat__note { margin: .4rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.bcat__rows { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.bcat__rows li { display: flex; justify-content: space-between; font-size: .84rem; padding: .12rem 0; border-bottom: 1px dotted var(--line); }

.budget-bench {
  margin-top: 2.2rem; padding: 1rem 1.2rem;
  background: var(--paper-2); border-radius: var(--r-md);
  font-size: .88rem; color: var(--ink-soft); font-style: italic;
}

@media (max-width: 680px) {
  .budget-hero__stats { grid-template-columns: repeat(2, 1fr); }
}