:root{font-family:Inter,system-ui,sans-serif;color:#17221d;background:#f4f6f3}*{box-sizing:border-box}body{margin:0}.wrap{max-width:900px;margin:auto;padding:28px 18px 70px}.top{display:flex;align-items:center;gap:12px;margin-bottom:28px}.back{border:0;background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}.brand{font-size:14px;color:#68756e}.hero{padding:34px 0}.hero h1{font-size:clamp(32px,7vw,58px);line-height:1;margin:0 0 12px}.hero p{color:#657169;margin:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.card{border:1px solid #dde4df;background:white;border-radius:20px;padding:24px;text-align:left;cursor:pointer;box-shadow:0 7px 22px #16251c0b}.card:hover{transform:translateY(-2px)}.card h2,.card h3{margin:0 0 8px}.muted{color:#758078}.balance{background:#1f513c;color:white;border-radius:22px;padding:24px;margin:18px 0 22px}.balance small{opacity:.8}.balance strong{display:block;font-size:42px;margin-top:5px}.panel{background:#fff;border:1px solid #dde4df;border-radius:20px;padding:20px;margin:16px 0}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form .wide{grid-column:1/-1}label{font-size:13px;color:#647169}input,select{width:100%;padding:12px;border:1px solid #ced7d1;border-radius:10px;margin-top:5px;background:#fff}button.primary{background:#1f513c;color:#fff;border:0;border-radius:12px;padding:13px 18px;font-weight:700;cursor:pointer}.tx{display:grid;grid-template-columns:95px 85px 1fr 130px 38px;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0ee}.plus{color:#17683f;font-weight:800}.minus{color:#a03a32;font-weight:800}.del{border:0;background:none;cursor:pointer}.members{display:flex;flex-wrap:wrap;gap:8px}.pill{background:#eef3ef;padding:7px 10px;border-radius:999px;font-size:13px}@media(max-width:620px){.form{grid-template-columns:1fr}.tx{grid-template-columns:75px 70px 1fr}.tx .member{grid-column:3}.tx .del{grid-column:4;grid-row:1}.balance strong{font-size:36px}}
.edit-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.unlocked{font-size:.85rem;font-weight:700;padding:7px 10px;border-radius:999px;background:#eef7f0}
.home-hero{text-align:center}
.home-hero h1{margin-bottom:8px}
.unit-title{font-size:clamp(18px,3vw,26px);font-weight:500;margin:0 0 12px;color:#33443b}
.signature{margin-top:18px;font-size:13px;color:#7b857f;text-align:center}
.mistral{font-family:Mistral,"Brush Script MT","Segoe Script",cursive;font-size:20px;color:#4d5a53}
.mistral sup{font-family:inherit;font-size:.48em;vertical-align:super;line-height:0;margin-left:1px}
html,body,#app,.page{min-height:100%}html,body{height:100%}#app{min-height:100vh}.page{min-height:100vh;display:flex;flex-direction:column}.wrap{width:100%;flex:1}.signature{margin-top:auto;padding:24px 18px 20px;text-align:center;font-size:12px;color:#7b857f;display:flex;align-items:center;justify-content:center;gap:4px}.signature img{height:27px;width:auto;display:block}

/* Mobile: accueil compact pour garder la signature visible sans défilement sur les écrans courants. */
@media (max-width:620px){
  .page{min-height:100dvh}
  .wrap{padding:14px 14px 12px}
  .home-hero{padding:14px 0 18px}
  .home-hero h1{font-size:clamp(30px,10vw,42px);margin-bottom:7px}
  .unit-title{font-size:17px;margin-bottom:4px}
  .home-hero + .grid{gap:10px}
  .home-hero + .grid .card{padding:18px 20px}
  .signature{padding:10px 14px 12px;min-height:42px}
  .signature img{height:23px}
}
/* Code intégré à la page: fonctionne aussi dans les navigateurs intégrés Messenger/Instagram. */
.pin-overlay{position:fixed;inset:0;z-index:9999;background:rgba(15,24,19,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.pin-box{width:min(100%,390px);background:#fff;border-radius:20px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.pin-box h3{margin:0 0 7px}
.pin-box p{margin:0 0 16px}
#pinInput{font-size:28px;letter-spacing:.35em;text-align:center;padding:14px;margin:0}
.pin-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.pin-error{margin:12px 0 0!important;color:#a03a32;font-size:13px}
@supports(padding:max(0px)){
  .signature{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}