:root{
  --bg:#f3f5f4; --card:#fff; --ink:#15211f; --muted:#5b6a67; --line:#d8e0de;
  --accent:#0f6b5c; --accent-ink:#fff; --accent-soft:#e1efeb;
  --wa:#1f8f4e; --danger:#b42318; --danger-soft:#fdecea;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f1514; --card:#18211f; --ink:#e7eeec; --muted:#9aaba7; --line:#2b3835;
  --accent:#4fc2ab; --accent-ink:#06201b; --accent-soft:#1c3631;
  --wa:#3cc47a; --danger:#ff8a80; --danger-soft:#3b1a17; color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.top{position:sticky;top:0;z-index:2;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.top h1{margin:0;font-size:1.3rem}
.icon-btn{background:transparent;border:0;color:inherit;font-size:1.6rem;width:48px;height:48px;border-radius:12px;cursor:pointer}
.icon-btn:active{background:rgba(255,255,255,.15)}
main{padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));max-width:720px;margin:0 auto}
#recherche{width:100%;font:inherit;font-size:1.1rem;padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink)}
#recherche:focus{outline:none;border-color:var(--accent)}
.info{color:var(--muted);font-size:.9rem;margin:8px 2px}
.info.erreur{color:var(--danger);font-weight:600}
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.carte{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.carte.impaye{border-color:var(--danger)}
.entete{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:14px;display:flex;gap:10px;align-items:center;cursor:pointer;min-height:60px}
.entete .nom{font-weight:700;flex:1;min-width:0;overflow-wrap:anywhere}
.entete .ville{color:var(--muted);font-size:.85rem;display:block;font-weight:400}
.badge{font-size:.75rem;font-weight:700;border-radius:99px;padding:3px 9px;white-space:nowrap}
.badge.rouge{background:var(--danger);color:#fff}
.badge.gris{background:var(--accent-soft);color:var(--ink)}
.detail{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:12px;font-weight:700;font-size:1.05rem;text-decoration:none;border:0}
.btn.appel{background:var(--accent);color:var(--accent-ink)}
.btn.wa{background:var(--wa);color:#fff}
.btn.off{background:var(--line);color:var(--muted)}
.alerte{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:10px 12px;font-weight:600;font-size:.95rem}
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.95rem}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere}
.onglets{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
.onglets button{background:none;border:0;color:var(--muted);font:inherit;font-size:.75rem;padding:8px 2px;min-height:64px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.onglets button span{font-size:1.4rem}
.onglets button[aria-current="page"]{color:var(--accent);font-weight:700}