/* /calculateur-budget: income split bars compared with the 50/30/20 benchmark. */
.legend-note { font-weight: 400; font-size: .82rem; color: #5c6370; }
.split { margin: 1.25rem 0 .5rem; padding: 1rem 1.1rem; border: 1px solid #e5e5e0; border-radius: 12px; background: #fff; }
.split-title { margin: 0 0 .8rem; font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-weight: 600; font-size: .95rem; }
.split-row { display: grid; grid-template-columns: 8.5rem 1fr 3rem; align-items: center; gap: .75rem; margin-bottom: .6rem; font-size: .88rem; }
.split-track { position: relative; height: 12px; border-radius: 6px; background: #f0f0eb; }
.split-bar { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .2s ease; }
.split-bar--needs { background: #5c6370; }
.split-bar--wants { background: #d4a72c; }
.split-bar--saving { background: #b4232f; }
.split-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #0d0d0d; }
.split-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.split-legend { margin: .4rem 0 0; font-size: .8rem; color: #5c6370; }
.cta-btn[disabled] { opacity: .5; cursor: not-allowed; }
button.cta-btn { border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 520px) {
  .split-row { grid-template-columns: 6.5rem 1fr 2.6rem; gap: .5rem; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .split-bar { transition: none; } }