/* =====================================================================
   CAFÉ — feuille de style (mobile d'abord, clair/sombre automatique)
   ===================================================================== */
:root{
  --bg:#F6EFE5; --bg-2:#EFE4D5; --surface:#FFFCF7; --surface-2:#F5EADB;
  --ink:#2A1A12; --ink-2:#5C4535; --muted:#8A7361; --line:rgba(42,26,18,.11);
  --line-strong:rgba(42,26,18,.2);
  --accent:#B4501E; --accent-ink:#fff; --accent-soft:rgba(180,80,30,.12);
  --green:#2E7D56; --green-soft:rgba(46,125,86,.14);
  --amber:#B8801A; --amber-soft:rgba(184,128,26,.16);
  --red:#B23A2E;   --red-soft:rgba(178,58,46,.13);
  --slate:#6D7C8C; --slate-soft:rgba(109,124,140,.15);
  --radius:18px; --radius-s:12px;
  --shadow:0 1px 2px rgba(42,26,18,.05), 0 8px 24px rgba(42,26,18,.07);
  --shadow-lg:0 20px 50px rgba(42,26,18,.22);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16100B; --bg-2:#1E1610; --surface:#211811; --surface-2:#2B2018;
    --ink:#F6EBDD; --ink-2:#D9C7B4; --muted:#9E8875; --line:rgba(246,235,221,.12);
    --line-strong:rgba(246,235,221,.22);
    --accent:#E07A42; --accent-ink:#241009; --accent-soft:rgba(224,122,66,.16);
    --green:#5FBE8C; --green-soft:rgba(95,190,140,.16);
    --amber:#E3AC46; --amber-soft:rgba(227,172,70,.16);
    --red:#E8705F;   --red-soft:rgba(232,112,95,.16);
    --slate:#93A4B5; --slate-soft:rgba(147,164,181,.16);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
    --shadow-lg:0 22px 60px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none; min-height:100dvh;
}
body.is-app{ background:
  radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; margin:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

/* ------------------------------- Portail ------------------------------- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px calc(20px + env(safe-area-inset-left)) 40px}
.gate-card{
  width:100%; max-width:390px; background:var(--surface); border:1px solid var(--line);
  border-radius:26px; padding:30px 24px; box-shadow:var(--shadow); text-align:center;
}
.gate-logo{width:74px;height:74px;margin:0 auto 14px; display:grid; place-items:center;
  border-radius:50%; background:var(--accent-soft); color:var(--accent)}
.gate-card h1{font-size:1.6rem; margin-bottom:6px}
.gate-sub{color:var(--muted); font-size:.94rem; margin:0 0 20px}
.gate-foot{color:var(--muted); font-size:.78rem; margin:18px 0 0}
.gate-err{color:var(--red); font-size:.88rem; margin:4px 0 0}
.stack{display:grid; gap:13px; text-align:left}
.stack label{display:grid; gap:6px; font-size:.83rem; color:var(--ink-2); font-weight:600}
.stack label small{font-weight:400; color:var(--muted)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
input,select,textarea{
  width:100%; padding:13px 14px; border-radius:var(--radius-s); border:1px solid var(--line-strong);
  background:var(--bg); font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* ------------------------------- Boutons ------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 15px; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-weight:600; font-size:.92rem;
  transition:transform .12s ease, filter .15s, background .15s; white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.big{padding:15px 18px; font-size:1rem; width:100%}
.btn.ghost{background:transparent; border-color:var(--line-strong)}
.btn.green{background:var(--green); color:#fff; border-color:transparent}
.btn.danger{background:var(--red-soft); color:var(--red); border-color:transparent}
.btn.tiny{padding:7px 11px; font-size:.8rem}
.btn:disabled{opacity:.5; pointer-events:none}
.icon-btn{width:40px;height:40px;padding:0;border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line)}

/* ---------------------------- Structure app ---------------------------- */
.app{max-width:760px; margin:0 auto; padding:calc(var(--safe-t) + 14px) 14px calc(96px + var(--safe-b))}
.topbar{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.topbar .mark{width:38px;height:38px;border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; flex:none}
.topbar h1{font-size:1.18rem; line-height:1.15}
.topbar .sub{font-size:.76rem; color:var(--muted); font-weight:500; font-family:var(--sans)}
.topbar .spacer{flex:1}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; margin-bottom:13px}
.card.pad0{padding:0; overflow:hidden}
.card h2{font-size:1.02rem; margin-bottom:2px}
.card .hint{color:var(--muted); font-size:.8rem}
.sec-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.sec-head .spacer{flex:1}
.sec-title{font-family:var(--serif); font-size:1.02rem; font-weight:600}

/* ------------------------------ Onglets -------------------------------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
  padding:7px 10px calc(7px + var(--safe-b)); background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
}
.tabs button{
  background:none; border:0; padding:7px 2px 5px; border-radius:12px; color:var(--muted);
  display:grid; justify-items:center; gap:3px; font-size:.67rem; font-weight:600; position:relative;
}
.tabs button.on{color:var(--accent)}
.tabs button .dot{position:absolute; top:3px; right:calc(50% - 20px); min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:.62rem; display:grid; place-items:center}

/* -------------------------------- KPI ---------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:13px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:13px 14px; box-shadow:var(--shadow)}
.kpi .lbl{font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.kpi .val{font-family:var(--serif); font-size:1.5rem; line-height:1.2; margin-top:3px}
.kpi .sub{font-size:.74rem; color:var(--muted)}
.kpi.accent .val{color:var(--accent)} .kpi.green .val{color:var(--green)}
.kpi.amber .val{color:var(--amber)} .kpi.red .val{color:var(--red)}

/* ------------------------- Carte mois (membre) ------------------------- */
.hero{
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:24px; padding:22px 20px; text-align:center;
  box-shadow:var(--shadow); margin-bottom:13px; position:relative; overflow:hidden;
}
.hero .month{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.hero .amount{font-family:var(--serif); font-size:3.1rem; line-height:1.05; margin:6px 0 2px}
.hero .state{font-size:.92rem; color:var(--ink-2); margin-bottom:16px}
.hero .btn.big{max-width:320px; margin:0 auto}
.hero.paid{background:linear-gradient(165deg, var(--green-soft), var(--surface))}
.hero.pending{background:linear-gradient(165deg, var(--amber-soft), var(--surface))}
.hero.exempt{background:linear-gradient(165deg, var(--slate-soft), var(--surface))}
.stamp{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  font-weight:700; font-size:.92rem}
.stamp.paid{background:var(--green-soft); color:var(--green)}
.stamp.pending{background:var(--amber-soft); color:var(--amber)}
.stamp.exempt{background:var(--slate-soft); color:var(--slate)}

/* ------------------------------ Pastilles ------------------------------ */
.pills{display:flex; gap:6px; overflow-x:auto; padding:3px 1px 6px; scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{
  flex:none; min-width:58px; padding:8px 6px; border-radius:13px; border:1px solid var(--line);
  background:var(--surface-2); text-align:center; display:grid; gap:2px; line-height:1.1;
}
.pill b{font-size:.78rem; font-weight:700; text-transform:capitalize}
.pill span{font-size:.63rem; color:var(--muted)}
.pill.paid{background:var(--green-soft); border-color:transparent; color:var(--green)}
.pill.pending{background:var(--amber-soft); border-color:transparent; color:var(--amber)}
.pill.due,.pill.rejected{background:var(--red-soft); border-color:transparent; color:var(--red)}
.pill.exempt{background:var(--slate-soft); border-color:transparent; color:var(--slate)}
.pill.now{outline:2px solid var(--accent); outline-offset:1px}

/* -------------------------------- Listes ------------------------------- */
.rows{display:grid}
.row{display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left}
.rows .row:last-child{border-bottom:0}
.row .av{width:37px;height:37px;border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:.78rem; font-weight:700; background:var(--surface-2); color:var(--ink-2); letter-spacing:.02em}
.row .who{flex:1; min-width:0}
.row .who b{display:block; font-size:.94rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .who span{font-size:.75rem; color:var(--muted)}
.row .right{display:flex; align-items:center; gap:7px; flex:none}
.tag{font-size:.7rem; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap}
.tag.paid{background:var(--green-soft); color:var(--green)}
.tag.pending{background:var(--amber-soft); color:var(--amber)}
.tag.due{background:var(--red-soft); color:var(--red)}
.tag.rejected{background:var(--red-soft); color:var(--red)}
.tag.exempt{background:var(--slate-soft); color:var(--slate)}
.tag.off{background:var(--surface-2); color:var(--muted)}
.tag.muted{background:var(--surface-2); color:var(--muted)}
.empty{padding:26px 16px; text-align:center; color:var(--muted); font-size:.88rem}

/* ------------------------------ Recherche ------------------------------ */
.search{position:relative; margin-bottom:11px}
.search input{padding-left:38px; border-radius:999px; background:var(--surface)}
.search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted)}

/* ----------------------------- Progression ----------------------------- */
.bar{height:9px; border-radius:99px; background:var(--surface-2); overflow:hidden; display:flex}
.bar i{display:block; height:100%}
.bar i.paid{background:var(--green)} .bar i.pending{background:var(--amber)}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:9px; font-size:.75rem; color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px; display:inline-block; margin-right:5px}

/* ------------------------------- Graphes ------------------------------- */
.chart{width:100%; overflow:hidden}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart text{font-family:var(--sans); fill:var(--muted)}
.donut-wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.donut-wrap .donut{width:132px; flex:none}
.donut-legend{flex:1; min-width:150px; display:grid; gap:7px}
.donut-legend div{display:flex; align-items:center; gap:8px; font-size:.84rem}
.donut-legend b{margin-left:auto; font-variant-numeric:tabular-nums}

/* ----------------------- Feuille modale (bottom sheet) ----------------- */
.sheet-bg{position:fixed; inset:0; background:rgba(18,10,6,.5); z-index:60; opacity:0; transition:opacity .2s;
  backdrop-filter:blur(2px)}
.sheet-bg.on{opacity:1}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--surface);
  border-radius:26px 26px 0 0; box-shadow:var(--shadow-lg); padding:8px 18px calc(20px + var(--safe-b));
  transform:translateY(100%); transition:transform .26s cubic-bezier(.22,.9,.3,1);
  max-height:92dvh; overflow-y:auto; max-width:760px; margin:0 auto;
}
.sheet.on{transform:none}
.sheet .grab{width:40px;height:4px;border-radius:99px; background:var(--line-strong); margin:6px auto 14px}
.sheet h2{font-size:1.18rem; margin-bottom:3px}
.sheet .hint{color:var(--muted); font-size:.82rem; margin-bottom:14px}
.sheet-actions{display:grid; gap:9px; margin-top:16px}
.choice{display:flex; align-items:center; gap:11px; width:100%; padding:13px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-2); text-align:left; font-weight:600; font-size:.94rem}
.choice small{display:block; font-weight:400; color:var(--muted); font-size:.76rem}
.choice .ic{width:32px;height:32px;border-radius:10px; display:grid; place-items:center; flex:none;
  background:var(--surface); color:var(--accent)}
.choice.green .ic{color:var(--green)} .choice.red .ic{color:var(--red)} .choice.slate .ic{color:var(--slate)}

.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; border-radius:13px;
  background:var(--surface-2); margin-bottom:12px}
.seg button{border:0; background:none; padding:9px 4px; border-radius:10px; font-size:.83rem; font-weight:600;
  color:var(--muted)}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

/* -------------------------------- Toast -------------------------------- */
.toast{
  position:fixed; left:50%; bottom:calc(84px + var(--safe-b)); transform:translate(-50%,14px);
  background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:.88rem;
  font-weight:600; z-index:80; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
  box-shadow:var(--shadow-lg); max-width:88vw; text-align:center;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ------------------------------ Divers --------------------------------- */
.muted{color:var(--muted)}
.right-text{text-align:right}
.money{font-variant-numeric:tabular-nums}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px}
.chip{font-size:.76rem; padding:6px 11px; border-radius:999px; background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); display:inline-flex; align-items:center; gap:6px}
.chip button{border:0;background:none;padding:0;color:var(--muted); display:grid; place-items:center}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fab{position:fixed; right:16px; bottom:calc(84px + var(--safe-b)); z-index:35; width:54px; height:54px;
  border-radius:50%; background:var(--accent); color:var(--accent-ink); border:0; display:grid; place-items:center;
  box-shadow:var(--shadow-lg)}
.list-head{display:flex; align-items:center; justify-content:space-between; padding:11px 14px 7px;
  font-size:.73rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
hr.sep{border:0; border-top:1px solid var(--line); margin:14px 0}
.mini-note{font-size:.76rem; color:var(--muted); margin-top:8px; line-height:1.4}
@media (min-width:640px){
  .kpis{grid-template-columns:repeat(4,1fr)}
  .app{padding-left:20px; padding-right:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* --------------------------- Pavé de connexion -------------------------- */
.pin-dots{display:flex; justify-content:center; gap:14px; margin:4px 0 22px}
.pin-dots i{width:14px;height:14px;border-radius:50%; background:var(--surface-2);
  border:1px solid var(--line-strong); transition:transform .15s, background .15s}
.pin-dots i.on{background:var(--accent); border-color:transparent; transform:scale(1.15)}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:280px; margin:0 auto}
.keypad button{
  height:60px; border-radius:18px; border:1px solid var(--line); background:var(--surface-2);
  font-size:1.5rem; font-weight:500; font-family:var(--serif); color:var(--ink);
  transition:transform .1s, background .15s;
}
.keypad button:active{transform:scale(.94); background:var(--accent-soft); color:var(--accent)}
.keypad button.del{font-size:1.1rem; background:transparent; border-color:transparent; color:var(--muted)}
.linkish{background:none; border:0; color:var(--muted); font-size:.82rem; text-decoration:underline;
  text-underline-offset:3px; padding:14px 6px 0; width:100%}
@keyframes shake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-6px)}}
.shake{animation:shake .4s}

/* ------------------------------ Code perso ------------------------------ */
.pin-show{display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 2px;
  font-family:var(--serif); font-size:2.6rem; letter-spacing:.22em; color:var(--accent); font-weight:600}
.pin-card{background:var(--accent-soft); border-radius:var(--radius); padding:16px; text-align:center; margin-bottom:4px}
.pin-card .lbl{font-size:.73rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.pin-mini{font-variant-numeric:tabular-nums; letter-spacing:.12em; font-weight:700; color:var(--accent)}

/* ----------------------------- Mode d'emploi ---------------------------- */
.ob-bg{position:fixed; inset:0; background:var(--bg); z-index:90}
.ob{position:fixed; inset:0; z-index:91; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 12px)}
.ob-card{width:100%; max-width:470px; max-height:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.ob-head{display:flex; align-items:center; gap:13px; padding:20px 20px 12px}
.ob-ic{width:46px;height:46px;border-radius:15px; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent)}
.ob-head h2{font-size:1.24rem; line-height:1.2}
.ob-body{padding:2px 20px 16px; overflow-y:auto; flex:1}
.ob-lead{margin:0 0 14px; color:var(--ink-2); font-size:.95rem; line-height:1.5}
.ob-note{margin:14px 0 0; color:var(--muted); font-size:.82rem; line-height:1.45}
.ob-step{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line)}
.ob-step:first-of-type{border-top:0}
.ob-num{width:25px;height:25px;border-radius:50%; flex:none; display:grid; place-items:center; margin-top:1px;
  background:var(--accent); color:var(--accent-ink); font-size:.79rem; font-weight:700}
.ob-step b{display:block; font-size:.93rem; margin-bottom:2px}
.ob-step b:empty{display:none}
.ob-step p{margin:0; font-size:.87rem; color:var(--ink-2); line-height:1.45}
.ob-step .tag{display:inline-block; vertical-align:baseline}
.ob-warn{margin-top:16px; padding:13px 14px; border-radius:14px; background:var(--amber-soft); color:var(--ink-2);
  font-size:.86rem; line-height:1.5; border:1px solid color-mix(in srgb, var(--amber) 30%, transparent)}
.ob-plats{display:grid; gap:10px; margin-top:4px}
.ob-plat{display:flex; align-items:center; gap:12px; padding:16px 16px; border-radius:16px; font-size:1rem;
  font-weight:600; border:1px solid var(--line-strong); background:var(--surface-2); text-align:left; width:100%}
.ob-plat .emo{font-size:1.5rem; line-height:1}
.ob-plat.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.ob-plat:active{transform:scale(.98)}
.ob-foot{padding:13px 20px calc(16px); border-top:1px solid var(--line); background:var(--surface)}
.ob-dots{display:flex; gap:6px; justify-content:center; margin-bottom:12px}
.ob-dots i{width:6px;height:6px;border-radius:50%; background:var(--line-strong); transition:width .2s, background .2s}
.ob-dots i.on{width:20px; border-radius:4px; background:var(--accent)}
.ob-btns{display:flex; gap:9px}
.ob-btns .btn{flex:1; justify-content:center; padding:13px 14px}
.pin-in{text-align:center; font-family:var(--serif); font-size:1.7rem; letter-spacing:.35em;
  padding:12px 8px 12px 18px; font-weight:600}