:root{--bg:#f6f7fb;--card:#fff;--bd:#e5e7eb;--txt:#0b1220;--mut:#6b7280;--btn:#0B5ED7;--btn2:#094DB2;--ring:#93C5FD;}
    *{box-sizing:border-box}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:16px;background:var(--bg);color:var(--txt)}
    h2,h3{margin:0 0 8px 0}
    .muted{color:var(--mut);font-size:12px;line-height:1.35}
    .card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
    .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    @media (max-width:820px){.grid{grid-template-columns:1fr}}
    label{font-size:12px;color:#374151}
    input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:12px;background:#fff}
    textarea{min-height:66px;resize:vertical}
    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    button{padding:10px 14px;border:0;border-radius:12px;background:var(--btn);color:#fff;cursor:pointer;font-weight:700}
    button.secondary{background:#fff;color:#111;border:1px solid #d1d5db}
    button:disabled{opacity:.6;cursor:not-allowed}
    table{width:100%;border-collapse:collapse}
    th,td{border-bottom:1px solid #eef2f7;padding:10px;text-align:left;font-size:13px;vertical-align:top}
    th{font-size:12px;color:#4b5563;white-space:nowrap}
    .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #e5e7eb}
    .in{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
    .out{background:#fef2f2;border-color:#fecaca;color:#991b1b}
    .money{font-variant-numeric:tabular-nums}
    .right{margin-left:auto}
    .kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
    @media (max-width:820px){.kpi{grid-template-columns:1fr 1fr}}
    .k{border:1px solid var(--bd);border-radius:16px;padding:12px;background:#fff}
    .k .t{font-size:12px;color:var(--mut)}
    .k .v{font-size:18px;font-weight:800;margin-top:4px}

    /* Modal */
    .modalBackdrop{position:fixed;inset:0;background:rgba(17,24,39,.35);display:none;align-items:flex-end;justify-content:center;padding:14px}
    .modal{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:14px;width:min(640px,100%);box-shadow:0 12px 40px rgba(0,0,0,.18)}
    .modalHeader{display:flex;gap:10px;align-items:center}
    .modalHeader h3{margin:0}
    .modalBackdrop.show{display:flex}
  
    /* Multi-sociétés */
    #companiesBox table{width:100%;border-collapse:collapse}
    #companiesBox th,#companiesBox td{border-bottom:1px solid #e7e7e7;padding:8px 6px;font-size:13px;vertical-align:top}
    #companiesBox input{width:100%}
    .btnDanger{border:1px solid #e06d6d;background:#fff;color:#b93b3b;border-radius:10px;padding:8px 10px;font-weight:700}


    button:hover{filter:brightness(0.95)}
    button:focus{outline:3px solid var(--ring);outline-offset:2px}
    .secondary:hover{border-color:var(--btn);color:var(--btn)}
    .fab{
      position:fixed; right:18px; bottom:18px;
      width:56px; height:56px; border-radius:999px;
      background:linear-gradient(135deg,var(--btn),var(--btn2));
      color:#fff; font-size:30px; line-height:0;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 12px 24px rgba(11,94,215,.25);
      z-index:9999;
    }
    .fab:active{transform:scale(.98)}
    @media (max-width:820px){
      .fab{right:14px; bottom:calc(14px + env(safe-area-inset-bottom))}
    }


    /* Page blocks + bottom nav */
    .pageBlock{display:none}
    .pageBlock[data-page="accueil"]{display:block} /* default before JS runs */
    .bottomNav{
      position:fixed; left:0; right:0; bottom:0;
      padding:10px 10px calc(10px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.92);
      border-top:1px solid var(--bd);
      backdrop-filter: blur(10px);
      display:flex; gap:8px; justify-content:space-around;
      z-index:9998;
    }
    .navBtn{
      flex:1; background:#fff; color:#111; border:1px solid #d1d5db;
      border-radius:14px; padding:10px 8px;
      font-weight:800; display:flex; flex-direction:column; align-items:center; gap:4px;
      font-size:14px;
    }
    .navBtn span{font-size:11px; color:var(--mut); font-weight:700}
    .navBtn.active{border-color:var(--btn); box-shadow:0 6px 16px rgba(11,94,215,.12)}
    .navBtn.active span{color:var(--btn)}
    body{padding-bottom:88px}
    @media (max-width:820px){ body{padding-bottom:94px} }
    /* Move FAB above nav */
    .fab{bottom:calc(18px + 74px)}
    @media (max-width:820px){ .fab{bottom:calc(14px + env(safe-area-inset-bottom) + 74px)} }