/* Axel - Suivi de tresorerie. UI sobre, lisible, faible charge cognitive. */
:root{
  --bg:#f3f4f6; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --brand:#2563eb; --brand-d:#1d4ed8;
  --green:#16a34a; --green-bg:#dcfce7; --red:#dc2626; --red-bg:#fee2e2;
  --amber:#d97706; --amber-bg:#fef3c7; --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:17px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
.wrap{max-width:760px; margin:0 auto; padding:0 16px 96px}

/* Header */
.topbar{background:var(--brand); color:#fff; padding:14px 16px; position:sticky; top:0; z-index:10}
.topbar .inner{max-width:760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px}
.topbar b{font-size:18px}
.topbar .who{font-size:14px; opacity:.95}
.logout{background:rgba(255,255,255,.18); color:#fff; border:0; padding:8px 12px; border-radius:10px; font-size:14px; cursor:pointer}

/* Bottom nav */
.nav{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); display:flex; z-index:10}
.nav a{flex:1; text-align:center; padding:10px 4px 12px; color:var(--muted); font-size:12px; font-weight:600}
.nav a .ic{display:block; font-size:20px; line-height:1.3}
.nav a.active{color:var(--brand)}

h1{font-size:22px; margin:20px 0 12px}
h2{font-size:17px; margin:22px 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:14px 0; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.hero{background:linear-gradient(135deg,#2563eb,#1e40af); color:#fff; border:0}
.hero .lab{font-size:14px; opacity:.9; margin:0}
.hero .big{font-size:44px; font-weight:800; margin:4px 0 2px; letter-spacing:-.02em}
.hero .sub{font-size:15px; opacity:.95}
.hero.warn{background:linear-gradient(135deg,#dc2626,#991b1b)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.stat .lab{font-size:13px; color:var(--muted); margin:0}
.stat .val{font-size:24px; font-weight:700; margin:4px 0 0}
.val.green{color:var(--green)} .val.red{color:var(--red)} .val.amber{color:var(--amber)}

/* Amounts inline */
.amt.green{color:var(--green); font-weight:700}
.amt.red{color:var(--red); font-weight:700}

/* Progress bars (budget) */
.budget-row{margin:12px 0}
.budget-row .head{display:flex; justify-content:space-between; font-size:15px; margin-bottom:5px}
.bar{height:12px; background:#eef0f3; border-radius:999px; overflow:hidden}
.bar > span{display:block; height:100%; border-radius:999px}
.bar.over > span{background:var(--red) !important}

/* Lists */
.row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); gap:12px}
.row:last-child{border-bottom:0}
.row .meta{min-width:0}
.row .meta .t{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .meta .s{font-size:13px; color:var(--muted)}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle}

/* Badges */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.b-pending{background:var(--amber-bg); color:var(--amber)}
.b-ok{background:var(--green-bg); color:var(--green)}
.b-no{background:var(--red-bg); color:var(--red)}
.b-parent{background:#e0e7ff; color:#4338ca}

/* Forms */
label{display:block; font-size:14px; font-weight:600; margin:10px 0 4px}
input,select,textarea{width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:17px; background:#fff; color:var(--ink)}
input[type=color]{height:48px; padding:4px}
textarea{min-height:70px}
.btn{display:inline-block; width:100%; text-align:center; background:var(--brand); color:#fff; border:0; padding:14px; border-radius:12px; font-size:17px; font-weight:700; cursor:pointer; margin-top:12px}
.btn:hover{background:var(--brand-d)}
.btn.green{background:var(--green)} .btn.red{background:var(--red)} .btn.ghost{background:#eef0f3; color:var(--ink)}
.btn.sm{width:auto; padding:9px 14px; font-size:14px; margin:0}
.inline{display:flex; gap:8px}
.inline > *{margin-top:0}

/* Flash */
.flash{padding:13px 16px; border-radius:12px; margin:14px 0; font-weight:600}
.flash.ok{background:var(--green-bg); color:#166534}
.flash.error{background:var(--red-bg); color:#991b1b}

details.fold{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:4px 16px; margin:14px 0}
details.fold summary{cursor:pointer; font-weight:700; padding:12px 0; list-style:none}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary .plus{float:right; color:var(--brand)}

.muted{color:var(--muted)}
.center{text-align:center}
.empty{color:var(--muted); text-align:center; padding:24px 0}
.help{font-size:13px; color:var(--muted); margin:4px 0 0}
.spacer{height:8px}