/* Mitsu — styles communs (palette « écaille de tortue » inspirée de Mitsu) */
:root{
  --bg:#FBF3EA; --paper:#FFFFFF; --ink:#2B1D17; --muted:#7A6357; --line:#EADCCD;
  --ginger:#C8622A; --ginger-ink:#FFFFFF; --ginger-soft:#F7E1D0;
  --sofa:#3E6E8E; --sofa-soft:#DDE9F1;
  --good:#2F8F5B; --good-soft:#DDF1E5; --bad:#C2413B; --bad-soft:#F8DEDC; --gold:#E3A12F;
  --shadow:0 1px 2px rgba(43,29,23,.08),0 6px 18px rgba(43,29,23,.06);
  --r:18px;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1A1310; --paper:#251A15; --ink:#F6E9DD; --muted:#C2A898; --line:#3B2B23;
    --ginger:#F08A4B; --ginger-ink:#2A140A; --ginger-soft:#40261A;
    --sofa:#86B6D6; --sofa-soft:#1E2E39;
    --good:#5FCB8E; --good-soft:#163526; --bad:#F2867F; --bad-soft:#3E1D1B; --gold:#F2BE5C;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 var(--font);min-height:100vh;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--sofa);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:16px 16px 56px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.center{text-align:center}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:800}
h2{font-size:1.3rem;font-weight:800}
h3{font-size:1.08rem;font-weight:700}

/* barre du haut */
.top{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.top .title{flex:1;min-width:0}
.top .title small{display:block;color:var(--muted);font-size:.85rem;font-weight:600}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:var(--shadow);flex:none}
.iconbtn{width:44px;height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);display:grid;place-items:center;font-size:1.25rem;cursor:pointer;flex:none;text-decoration:none;color:inherit}
.iconbtn:active{transform:translateY(1px)}

/* cartes et boutons */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.stack{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);background:var(--paper);padding:13px 18px;border-radius:14px;font-weight:700;cursor:pointer;text-decoration:none;color:inherit;min-height:48px;transition:transform .08s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--ginger);border-color:var(--ginger);color:var(--ginger-ink)}
.btn.blue{background:var(--sofa);border-color:var(--sofa);color:#fff}
@media (prefers-color-scheme:dark){.btn.blue{color:#0E1A22}}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.big{width:100%;padding:18px;font-size:1.15rem;border-radius:18px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ginger-soft);color:var(--ink);font-size:.82rem;font-weight:700}
.chip.blue{background:var(--sofa-soft)}
.chip.good{background:var(--good-soft);color:var(--good)}

/* formulaires */
label.f{display:grid;gap:6px;font-weight:700;font-size:.92rem}
label.f small{font-weight:500;color:var(--muted)}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-size:1rem}
.msg{min-height:1.3em;margin:0;font-size:.92rem;font-weight:600;color:var(--muted)}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--good)}

/* clavier code enfant */
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto}
.pinpad button{height:64px;border-radius:18px;border:1.5px solid var(--line);background:var(--paper);font-size:1.5rem;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}
.pinpad button:active{background:var(--ginger-soft)}
.pindots{display:flex;gap:12px;justify-content:center;margin:14px 0 18px}
.pindots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted)}
.pindots i.on{background:var(--ginger);border-color:var(--ginger)}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* barre de progression */
.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--ginger));border-radius:99px;transition:width .35s}

/* fenêtre par-dessus */
.overlay{position:fixed;inset:0;background:rgba(20,12,8,.72);display:grid;place-items:center;z-index:50;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--paper);border-radius:24px;max-width:460px;width:100%;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);max-height:92vh;overflow:auto}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;z-index:80;box-shadow:var(--shadow);max-width:90vw;text-align:center;animation:fade .2s}

.empty{padding:26px 16px;text-align:center;color:var(--muted)}
.spinner{width:22px;height:22px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}