/* SOKKAN Router — espace compte, connexion, pages légales. Charge APRÈS base.css (jetons, en-tête, boutons, champs,
   tableaux, code, pied) : rien ici ne redéfinit une couleur, tout passe par les variables de base.css. */
main{min-height:calc(100vh - 260px)}
footer{margin-top:96px}

/* ---------- connexion (/login…) ---------- */
.auth{position:relative;padding:72px 24px 0;display:flex;justify-content:center}
.auth::before{content:"";position:absolute;inset:-60px 0 auto 0;height:520px;pointer-events:none;
  background:radial-gradient(640px 320px at 50% 0%,var(--accent-soft),transparent 72%)}
.auth-card{position:relative;width:100%;max-width:448px;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:36px 36px 32px;box-shadow:var(--shadow)}
.auth-card .kicker{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 14px}
.auth-card h1{font-size:1.75rem;font-weight:620;letter-spacing:-.03em}
.auth-card .lede{color:var(--fg-2);font-size:.98rem;margin:12px 0 22px}
.auth-card .lede b{color:var(--fg);font-weight:550;overflow-wrap:anywhere}
.auth-card form .btn.primary{width:100%;justify-content:center;margin-top:20px}
.auth-card .input.otp{max-width:none}
.auth-foot{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.auth-foot p{margin:0}.auth-foot p+p{margin-top:8px}
.auth-foot code{font-size:.8rem}
.auth-note{position:relative;text-align:center;font-size:.82rem;color:var(--muted);margin:18px auto 0;max-width:448px}

/* ---------- compte : sous-navigation ---------- */
.subnav{position:sticky;top:60px;z-index:15;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.subnav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{position:relative;padding:13px 12px;color:var(--fg-2);font-size:.9rem;white-space:nowrap;text-decoration:none!important}
.subnav a:first-child{margin-left:-12px}
.subnav a:hover{color:var(--fg)}
.subnav a[aria-current]{color:var(--fg);font-weight:550}
.subnav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.subnav a:focus-visible{outline-offset:-4px}

/* ---------- compte : page ---------- */
.acct{max-width:var(--wrap);margin:0 auto;padding:40px 24px 0}
.acct-head{margin:0 0 28px}
.acct-head .kicker{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 10px}
.acct-head h1{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:630;letter-spacing:-.035em}
.acct-head p.lede{color:var(--fg-2);margin:10px 0 0;max-width:46em}
.acct h2{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;margin:44px 0 14px}
.acct p{color:var(--fg-2)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:44px 0 14px}
.sec-head h2{margin:0}
.sec-head p{margin:0;font-size:.88rem;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards.one{grid-template-columns:minmax(0,1fr)}
.cards.align-top{align-items:start}
.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;min-width:0}
.card{display:flex;flex-direction:column}
.card .lbl{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0}
.card .big{font:560 2.35rem/1.1 var(--mono);letter-spacing:-.04em;color:var(--fg);margin:12px 0 6px;font-variant-numeric:tabular-nums}
.card .sub{margin:0;font-size:.9rem;color:var(--fg-2)}
.card .sub a{white-space:nowrap}
.card-act{margin-top:auto;padding-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.panel+.panel,.panel+.table-wrap,.table-wrap+.panel{margin-top:16px}
.panel>p:first-child{margin-top:0}.panel>p:last-child{margin-bottom:0}
.panel-title{margin:0 0 4px;color:var(--fg);font-weight:600}

/* bandeau MFA : sobre, sur le panneau, accent en filet */
.notice{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:12px;padding:14px 18px;margin:0 0 28px}
.notice svg{flex:none;width:20px;height:20px;color:var(--accent)}
.notice p{margin:0;flex:1 1 320px;color:var(--fg-2);font-size:.93rem}
.notice p b{color:var(--fg);font-weight:600}

/* graphe des dépenses */
.chart{margin:0}
.chart-plot{position:relative;padding-right:76px}
.chart-svg{display:block;width:100%;height:160px;overflow:visible}
.chart-svg .grid{stroke:var(--line-2);stroke-dasharray:3 4}
.chart-svg .axis{stroke:var(--line-2)}
.chart-svg .bar{fill:var(--bar)}
.chart-svg .bar0{fill:var(--line-2)}
.chart-svg .hit{fill:transparent}
.chart-svg g:hover .bar{fill:var(--bar-hover)}
.chart-svg g:hover .hit{fill:var(--accent-soft)}
.chart-y{position:absolute;right:0;font:500 .74rem var(--mono);color:var(--muted);transform:translateY(-50%);white-space:nowrap}
.chart-y.max{top:6.25%;color:var(--fg-2)}.chart-y.zero{top:100%}
.chart-x{display:flex;justify-content:space-between;margin:8px 76px 0 0;font:500 .74rem var(--mono);color:var(--muted)}
.chart-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;font-size:.88rem;color:var(--muted)}
.chart-cap b{font:500 .88rem var(--mono);color:var(--fg)}

/* clés, secrets, quickstart */
.secret{font:500 .92rem/1.5 var(--mono);color:var(--fg);word-break:break-all;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:9px;padding:11px 14px;margin:12px 0}
.newkey{border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 5%,var(--panel));
  border-radius:14px;padding:20px 22px;margin:0 0 20px}
.newkey p{margin:0;color:var(--fg-2)}.newkey p b{color:var(--fg)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.base-url{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.base-url .lbl-f{margin:0}
.base-url code{font-size:.88rem;background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;padding:5px 10px;color:var(--fg);white-space:normal;word-break:break-all}
.qs .win{margin-top:14px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 28px;font:500 1rem var(--mono);color:var(--fg);margin:16px 0 4px}
.qr{display:inline-block;background:#fff;border-radius:12px;padding:8px;margin:14px 0 6px;line-height:0}
.qr svg{width:180px;height:auto;display:block}
.steps-n{font:600 .78rem var(--mono);color:var(--accent);margin-right:6px}
.key-form .inline .btn{flex:none}

/* recharges */
.packs{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 4px;border:0;padding:0}
.packs legend{padding:0;margin:0 0 10px;font-size:.86rem;font-weight:500;color:var(--fg-2)}
.packs label{position:relative;display:flex;align-items:center;gap:10px;min-width:118px;padding:14px 18px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--bg-2);cursor:pointer;font:560 1.15rem var(--mono);color:var(--fg);transition:border-color .15s,background .15s}
.packs label:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line-2))}
.packs input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.packs label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.packs label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.fine{font-size:.84rem;color:var(--muted)}
.empty{border:1px dashed var(--line-2);border-radius:14px;padding:26px;text-align:center;color:var(--muted);margin:0}
.state-on{color:var(--ok);font-weight:600}

/* ---------- pages légales ---------- */
.legal-wrap{max-width:var(--wrap);margin:0 auto;padding:56px 24px 0;display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px}
.legal-toc{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:1px;font-size:.86rem;max-height:calc(100vh - 110px);overflow:auto}
.legal-toc .toc-h{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.legal-toc a{color:var(--fg-2);padding:5px 10px;border-left:1px solid var(--line);line-height:1.4}
.legal-toc a:hover{color:var(--fg);text-decoration:none;border-left-color:var(--accent)}
.legal{max-width:70ch;min-width:0;font-size:1rem;line-height:1.72}
.legal .crumb{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 14px}
.legal .crumb a{color:var(--accent)}
.legal h1{font-size:clamp(2rem,4vw,2.7rem);margin:0 0 20px}
.legal h2{font-size:1.3rem;margin:48px 0 12px;scroll-margin-top:84px}
.legal h3{font-size:1.02rem;margin:28px 0 8px}
.legal p,.legal li{color:var(--fg-2)}
.legal b,.legal strong{color:var(--fg);font-weight:600}
.legal ul,.legal ol{padding-left:22px}.legal li{margin:7px 0}
.legal li::marker{color:var(--muted)}
.legal p code,.legal li code{white-space:normal;word-break:break-word}
.legal .draft{border:1px solid color-mix(in srgb,var(--warm) 40%,transparent);background:color-mix(in srgb,var(--warm) 7%,transparent);
  border-radius:12px;padding:12px 16px;margin:0 0 28px}
.legal .draft p{margin:0;color:var(--fg-2)}.legal .draft b{color:var(--warm)}
.legal .todo{border-left:3px solid var(--warm);background:color-mix(in srgb,var(--warm) 6%,transparent);border-radius:0 8px 8px 0;
  padding:8px 14px;font-size:.88rem;color:var(--fg-2)}
.legal .wrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:var(--panel);margin:16px 0}
.legal table{min-width:560px}
.legal th,.legal td{padding:10px 14px;text-align:left;border-top:1px solid var(--line);vertical-align:top;font-size:.9rem;color:var(--fg-2);line-height:1.55}
.legal thead th{border-top:0;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--panel-2)}
.legal tr:first-child th,.legal tr:first-child td{border-top:0}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .legal-wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .legal-toc{position:static;max-height:none;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 10px;margin:0 0 32px;order:0}
  .legal-toc a{border-left:0;padding:5px 8px}
}
@media (max-width:760px){
  .subnav{top:auto;position:static}
  .subnav-in{padding:0 16px}
  .acct{padding:28px 16px 0}
  .acct-head{margin-bottom:22px}
  .cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .card,.panel{padding:18px}
  .card .big{font-size:2rem}
  .auth{padding:36px 16px 0}
  .auth-card{padding:26px 20px 24px;border-radius:14px}
  .auth-card h1{font-size:1.5rem}
  .chart-plot{padding-right:58px}.chart-x{margin-right:58px}
  .chart-svg{height:130px}
  .legal-wrap{padding:36px 16px 0}
  .legal h1{font-size:1.9rem}
  .packs label{flex:1 1 90px;min-width:0;justify-content:center;padding:12px}
  .codes{grid-template-columns:minmax(0,max-content);gap:6px}
  footer{margin-top:72px}
}

/* ---------- recharge automatique, carte enregistrée, paliers (Billing) ---------- */
.packs label.off{opacity:.42;cursor:not-allowed}
.packs label.off:hover{border-color:var(--line-2)}
.packs.sm label{min-width:0;padding:10px 14px;font-size:1rem}
.packs .other{gap:8px}
.packs .other .cur{color:var(--muted)}
.packs .other .input{width:96px;padding:6px 8px;font:500 .95rem var(--mono);margin:0}
.fine.limit{margin:10px 0 0;color:var(--fg-2)}
.check+.check{margin-top:10px}
.auto{display:flex;flex-direction:column;gap:4px}
.auto .msg{margin:0 0 12px}
.auto-form{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
.auto-form .packs{margin-top:14px}
.auto-off{margin-top:6px}
.pm{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pm>svg{flex:none;width:38px;height:38px;padding:8px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--accent)}
.pm.none>svg{color:var(--muted)}
.pm-t{flex:1 1 220px;display:flex;flex-direction:column;min-width:0}
.pm-t b{color:var(--fg);font:560 1rem var(--mono)}
.pm-t span{font-size:.86rem;color:var(--muted)}
.pm form{margin:0}
.field.cap{max-width:260px;margin-top:16px}
.money{display:flex;align-items:center;gap:8px}
.money .cur{font:500 1rem var(--mono);color:var(--muted)}
.money .input{font-family:var(--mono)}
.tier-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tier-head .panel-title{margin:0}
.kv-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 4px}
.kv-l div{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg-2)}
.kv-l dt{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.kv-l dd{margin:6px 0 0;font:560 1.15rem var(--mono);color:var(--fg)}
.kv-l dd small{font:400 .82rem var(--sans,inherit);color:var(--muted);margin-left:6px}
.tier .btn-row .fine{margin:0}
.notice.warn{border-left-color:var(--err)}
.notice.warn svg{color:var(--err)}
@media (max-width:760px){
  .packs.sm label{flex:1 1 72px;padding:10px}
  .packs.sm label.other{flex:1 1 100%;justify-content:flex-start}
  .packs .other .input{flex:1 1 0;min-width:0;width:0}
  .kv-l{grid-template-columns:minmax(0,1fr)}
  .field.cap{max-width:none}
}
.field>span.money{display:flex;font-size:inherit;font-weight:inherit;margin:0}
.pm.none .pm-t b{font-family:inherit;font-weight:600}