/* The Costs tab's style in the Batch builder and Clients & projects pages (Alex, Oct 21: « remets la version qu'on avait,
   mais applique les couleurs, la font, le style du cost dashboard »). Same pages, same features; only the look changes:
   Figtree titles like the Costs tab, the content in white cards on the grey page, the controls like its « Show » bar. */
body { background: var(--bg); }
h1 { font: 700 30px/1.15 Figtree, system-ui, sans-serif !important; letter-spacing: -.02em !important; }
.sub { font-size: 14.5px !important; color: var(--muted); margin-top: 6px !important; }
/* ── Wishlist ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 28px !important; }
.phead { padding: 30px 0 18px !important; }
.pane { border-radius: 12px; box-shadow: none; }
.ph { height: 54px !important; padding: 0 18px !important; }
.ph h2, .sh { font: 600 16px/1.3 Figtree, system-ui, sans-serif !important; letter-spacing: -.01em; }
.step { width: 22px !important; height: 22px !important; font-size: 11.5px !important; }
.pf { padding: 12px 18px !important; gap: 10px !important; }
.pf input, .pf select { height: 34px !important; border-radius: 9px !important; border: 1px solid var(--border) !important; font: 500 13.5px Figtree, system-ui, sans-serif !important; color: var(--fg); padding: 0 12px !important; }
.pf input:focus, .pf select:focus { border-color: var(--muted) !important; outline: none; }
.wrow, .orow { padding-left: 18px !important; padding-right: 14px !important; }
.wrow .n, .orow .n { font-weight: 600; }
.sec { padding: 9px 18px !important; font: 600 11.5px/1.2 Figtree, system-ui, sans-serif !important; letter-spacing: .04em; text-transform: uppercase; }
.wc-chips { padding: 10px 18px !important; }
.wc-chip { height: 30px !important; border-radius: 9px !important; border: 1px solid var(--border) !important; font: 600 13px Figtree, system-ui, sans-serif !important; }
.wc-chip.on { background: var(--fg) !important; border-color: var(--fg) !important; }
.wc-gh { padding: 9px 18px 7px !important; background: var(--soft2) !important; }
.wc-bar { padding: 9px 18px !important; }
.wc-foot { padding: 12px 18px !important; }
.arrows .btn { border-radius: 10px !important; }
/* ── Clients & projects ── */
.layout { background: var(--bg) !important; }
.main { padding: 30px 24px 48px !important; }
.col { max-width: 780px !important; }
.shead { margin-bottom: 18px !important; }
.gsec { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 6px; margin-bottom: 16px !important; }
.gsec h2 { font: 600 16px/1.3 Figtree, system-ui, sans-serif !important; letter-spacing: -.01em; padding: 0 0 10px !important; border-bottom: 1px solid var(--border) !important; }
.gsec h2 .def { font-size: 13px !important; font-weight: 400; }
.grow { height: 46px !important; padding: 0 4px 0 6px !important; border-radius: 8px !important; }
.gsec .grow:last-child { border-bottom: 0 !important; }
.grow .nm { font-weight: 600 !important; }
.peek { margin: 16px 16px 16px 0; border: 1px solid var(--border) !important; border-radius: 12px; top: 64px !important; height: calc(100vh - 80px) !important; padding: 16px 20px 24px !important; }
.nmrow h2 { font: 700 22px/1.2 Figtree, system-ui, sans-serif !important; letter-spacing: -.02em !important; }
.h3 { font: 600 14px/1.3 Figtree, system-ui, sans-serif !important; }
.field input, .field select { border-radius: 9px !important; border-color: var(--border) !important; }
.seg { background: var(--soft2) !important; border: 0 !important; border-radius: 9px !important; padding: 3px !important; }
.seg button { border-radius: 7px !important; }
@media (max-width: 980px) { .peek { margin: 0; border-radius: 0; top: 0 !important; height: 100vh !important; } }
@media (max-width: 600px) { .wrap { padding: 0 14px 20px !important; } .main { padding: 20px 14px 40px !important; } h1 { font-size: 26px !important; } }