/* ===== MYWEBI — Espace client ===== */
:root { --brand:#F9C846; --brand-600:#EDB72C; --brand-700:#D9A118; --brand-soft:#FFF6DE; --nav:#0B1B3A; --nav-2:#12294F; --bg:#F4F6FA; --surface:#fff; --surface-2:#F7F8FB; --line:#E3E7EF; --text:#0F172A; --text-2:#4A5468; --text-3:#8A93A8; --success:#12A150; --danger:#E5484D; --warning:#F0A202; --info:#2F6FED; --whatsapp:#25D366; --r:14px; --r-sm:10px; --sh:0 6px 20px rgba(11,27,58,.08); }
* { box-sizing:border-box; } body { margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--nav); margin:0 0 .4em; letter-spacing:-.02em; } h1 { font-size:1.5rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
a { color:inherit; text-decoration:none; } p { margin:0 0 .8rem; } img { max-width:100%; display:block; } svg.icon { vertical-align:-0.16em; flex-shrink:0; }
button { font:inherit; cursor:pointer; } input,select,textarea { font:inherit; color:inherit; }
.text-muted { color:var(--text-3); } .text-sm { font-size:.86rem; } .text-xs { font-size:.76rem; } .text-right { text-align:right; } .fw-700 { font-weight:700; } .text-danger { color:var(--danger); } .text-success { color:var(--success); } .mb-0 { margin-bottom:0; } .mt-16 { margin-top:16px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }

/* Header */
.hdr { background:var(--nav); color:#fff; } .hdr__in { max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:22px; height:76px; }
.hdr__brand { font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:#fff; } .hdr__brand span { color:var(--brand); } .hdr__brand img { height:34px; }
.hdr__nav { display:flex; gap:4px; margin-left:auto; } .hdr__nav a { padding:8px 12px; border-radius:8px; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:6px; }
.hdr__nav a:hover, .hdr__nav a.is-active { background:rgba(255,255,255,.1); color:#fff; } .hdr__nav .dot { background:var(--brand); color:var(--nav); font-size:.7rem; font-weight:800; border-radius:99px; padding:0 6px; }
.hdr__user { display:flex; align-items:center; gap:10px; font-size:.86rem; } .hdr__user .avatar { width:34px; height:34px; border-radius:50%; background:var(--brand); color:var(--nav); font-weight:800; font-size:.75rem; display:grid; place-items:center; }
.burger { display:none; background:none; border:0; color:#fff; padding:6px; margin-left:auto; }
@media (max-width:900px) { .hdr__nav { display:none; position:absolute; top:76px; left:0; right:0; background:var(--nav-2); flex-direction:column; padding:10px; z-index:50; } .hdr__nav.is-open { display:flex; } .burger { display:block; } .hdr__user span { display:none; } }
.impersonate { background:var(--brand); color:var(--nav); text-align:center; font-size:.85rem; padding:6px 12px; font-weight:600; }

/* Layout */
.wrap { max-width:1180px; margin:0 auto; padding:28px 20px 60px; } .page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .page-head p { color:var(--text-3); margin:0; font-size:.92rem; }
.grid { display:grid; gap:18px; } .grid--2 { grid-template-columns:1fr 1fr; } .grid--3 { grid-template-columns:repeat(3,1fr); } .grid--4 { grid-template-columns:repeat(4,1fr); } .grid--side { grid-template-columns:2fr 1fr; }
@media (max-width:900px) { .grid--2,.grid--3,.grid--4,.grid--side { grid-template-columns:1fr; } }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 1px 2px rgba(11,27,58,.04); } .card__head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; } .card__head h2 { margin:0; font-size:1rem; } .card__body { padding:20px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; } .kpi__label { font-size:.78rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; } .kpi__value { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.45rem; color:var(--nav); margin-top:4px; } .kpi__sub { font-size:.82rem; color:var(--text-3); }
.alert { display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:var(--r-sm); margin-bottom:16px; font-size:.92rem; } .alert--success { background:#E6F7EE; color:#0B6B37; } .alert--error { background:#FDECEC; color:#A32A2E; } .alert--info { background:#EAF1FE; color:#1E4FB8; } .alert--warning { background:#FEF4E0; color:#8A5A00; }
.badge { display:inline-block; padding:2px 10px; border-radius:99px; font-size:.74rem; font-weight:700; white-space:nowrap; } .badge--success { background:#E6F7EE; color:#0B6B37; } .badge--danger { background:#FDECEC; color:#A32A2E; } .badge--warning { background:#FEF4E0; color:#8A5A00; } .badge--info { background:#EAF1FE; color:#1E4FB8; } .badge--muted { background:#EDEFF4; color:#4A5468; } .badge--primary { background:var(--brand-soft); color:var(--brand-700); }
.btn { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:99px; font-weight:700; font-size:.9rem; border:1.5px solid transparent; transition:.2s; } .btn--primary { background:var(--brand); color:var(--nav); } .btn--primary:hover { background:var(--brand-600); } .btn--outline { border-color:var(--line); background:#fff; color:var(--nav); } .btn--outline:hover { border-color:var(--nav); } .btn--danger { background:var(--danger); color:#fff; } .btn--wa { background:var(--whatsapp); color:#fff; } .btn--sm { padding:6px 12px; font-size:.82rem; } .btn--lg { padding:13px 26px; font-size:1rem; } .btn--block { width:100%; justify-content:center; } .btn--ghost { color:var(--text-2); }
.table-wrap { overflow-x:auto; } .table { width:100%; border-collapse:collapse; font-size:.9rem; } .table th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); padding:10px 14px; border-bottom:1px solid var(--line); } .table td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; } .table tr:last-child td { border-bottom:0; } .table a.name { font-weight:700; color:var(--nav); }
.empty { text-align:center; padding:40px 20px; color:var(--text-3); } .empty h3 { color:var(--nav); }
.field { margin-bottom:14px; } .field__label { display:block; font-size:.82rem; font-weight:600; color:var(--text-2); margin-bottom:5px; } .input,.select,.textarea { width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; } .input:focus,.select:focus,.textarea:focus { outline:0; border-color:var(--brand-700); box-shadow:0 0 0 3px rgba(249,200,70,.25); } .textarea { min-height:100px; resize:vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:600px) { .field-row { grid-template-columns:1fr; } } .check { display:flex; gap:8px; align-items:center; font-size:.9rem; } .help { font-size:.8rem; color:var(--text-3); margin-top:4px; }
.line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); } .line:last-child { border-bottom:0; }
.doc-table th, .doc-table td { padding:10px 12px; } .totals { margin-left:auto; max-width:360px; font-size:.95rem; } .totals div { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); } .totals .grand { border:0; font-weight:800; font-size:1.15rem; color:var(--nav); padding-top:10px; }
.bank { background:var(--surface-2); border-radius:var(--r-sm); padding:14px 16px; font-size:.9rem; white-space:pre-line; }
.msg { display:flex; gap:12px; margin-bottom:14px; } .msg .avatar { width:36px; height:36px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-weight:800; font-size:.7rem; color:var(--nav); flex-shrink:0; } .msg--staff .avatar { background:var(--nav); color:#fff; } .msg__body { flex:1; background:var(--surface-2); border-radius:var(--r); padding:12px 16px; } .msg--staff .msg__body { background:var(--brand-soft); } .msg__meta { font-size:.76rem; color:var(--text-3); margin-bottom:6px; } .msg__text { white-space:pre-wrap; word-break:break-word; font-size:.93rem; }
.foot { text-align:center; color:var(--text-3); font-size:.8rem; padding:20px; } .foot a { color:var(--text-2); font-weight:600; }
  .paybox { background:#fff; border:2px solid #F9C846; border-radius:14px; padding:16px 18px; margin:16px auto 0; max-width:900px; } .btn--pay { border:0; color:#fff; font-weight:800; padding:11px 18px; border-radius:99px; cursor:pointer; font:inherit; font-weight:800; } .btn--pay-paypal { background:#003087; } .btn--pay-revolut { background:#191C1F; } .btn--pay-flouci { background:#E5322D; }
/* Auth */
.auth-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(1200px 600px at 70% 20%, #16305C 0%, #0B1B3A 55%, #060F22 100%); } .auth-card { width:100%; max-width:440px; background:#fff; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.35); padding:38px 34px; } .auth-card--wide { max-width:620px; } .auth-logo { text-align:center; margin-bottom:22px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.6rem; color:var(--nav); } .auth-logo span { color:var(--brand-700); } .auth-logo img { height:84px; margin:0 auto; }