@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --plum: #1B4332;
  --plum-light: #2D6A4F;
  --rose: #40916C;
  --gold: #74C69D;
  --cream: #F1F8F4;
  --cream-dim: #DCEEE3;
  --ink: #1B2E24;
  --ink-soft: #52796F;
  --ok: #2D6A4F;
  --warn: #C9862C;
  --danger: #B5423C;
  --line: #CFE3D6;
  --radius: 14px;
  --shadow: 0 4px 20px rgba(27,67,50,0.1);
}
* { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--ink);
}
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--plum); }

#app-shell { height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }

/* Top bar */
.topbar {
  background: var(--plum);
  color: var(--cream);
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; z-index:20;
}
.topbar .logo { font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; letter-spacing:0.3px; }
.topbar .logo span { color: var(--gold); }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.topbar button.icon-btn { background:none; border:none; color:var(--cream); font-size:1.3rem; cursor:pointer; line-height:1; }

/* Bottom nav */
.bottomnav {
  flex-shrink:0; background:white; border-top:1px solid var(--line);
  display:flex; z-index:20; box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
  flex:1; text-align:center; padding:8px 4px 7px; text-decoration:none; color: var(--ink-soft);
  font-size:0.66rem; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; cursor:pointer; font-family:'Inter', sans-serif;
}
.bottomnav a.active { color: var(--rose); }
.bottomnav a .ic { font-size:1.2rem; }

/* Layout */
.container {
  padding: clamp(8px,1.6vh,18px) 16px; max-width: 720px; margin:0 auto; width:100%;
  flex:1; min-height:0; overflow-y:auto;
}
.view { display:none; }
.view.active { display:block; }
#view-dashboard.active {
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:stretch;
  height:100%;
}
#view-no-goal.active {
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  height:100%;
}

/* Cards */
.card { background:white; border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); margin-bottom:14px; border:1px solid var(--line); }

.balance-card {
  text-align:center; padding: clamp(10px,2.2vh,18px) 20px;
  background: linear-gradient(160deg, var(--plum-light), var(--plum));
  box-shadow: 0 6px 0 #0F2A1E, 0 14px 22px rgba(15,42,30,0.35);
  border: none;
  margin-bottom: clamp(6px,1.4vh,10px);
}
.balance-card .label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.6px; color:rgba(255,255,255,0.75); font-weight:600; }
.balance-card .amount {
  font-family:'Fraunces', serif; font-weight:700; font-size: clamp(1.5rem,4.8vh,2.1rem); margin: clamp(2px,0.8vh,4px) 0 2px;
  color: #F2C94C;
  text-shadow: 1px 1px 0 #B8891F, 2px 2px 0 #B8891F, 3px 3px 0 #92690F, 4px 5px 6px rgba(15,42,30,0.5);
}
.balance-card .goal-line { font-size:0.78rem; color:rgba(255,255,255,0.85); margin-bottom: clamp(4px,1.2vh,10px); }
.balance-card .goal-line strong { color:white; }
.link-btn {
  background:none; border:none; color:rgba(255,255,255,0.75); font-size:0.72rem; font-weight:600;
  text-decoration:underline; cursor:pointer; font-family:'Inter', sans-serif; padding:4px; margin-top:2px;
}
.link-btn:active { color:white; }

.balance-card .progress-track { background:rgba(255,255,255,0.2); border-radius:20px; height:8px; overflow:hidden; margin-bottom: clamp(4px,1vh,8px); }
.progress-fill {
  background: linear-gradient(90deg, var(--gold), #F2C94C);
  height:100%; border-radius:20px; transition: width .3s ease;
  position:relative; overflow:hidden;
}
.progress-fill::after {
  content:'';
  position:absolute; top:0; left:-50%; height:100%; width:50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: progressShimmer 2.2s linear infinite;
}
@keyframes progressShimmer {
  0% { left:-50%; }
  100% { left:150%; }
}

.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom: clamp(4px,1vh,6px); }
.stat-card {
  background:white; border-radius: 10px; padding: clamp(6px,1.2vh,8px) 12px;
  box-shadow: 0 3px 0 var(--line), 0 8px 14px rgba(27,67,50,0.15);
}
.stat-card .label { font-size:0.58rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-soft); font-weight:600; }
.stat-card .value {
  font-family:'Fraunces', serif; font-size: clamp(0.95rem,2.6vh,1.15rem); margin-top:2px; font-weight:700;
  color: var(--gold);
  text-shadow: 1px 1px 0 #4c956c, 2px 2px 0 #3a7a56, 3px 3px 4px rgba(27,67,50,0.3);
}

/* Buttons */
.btn { display:inline-block; padding:12px 18px; border-radius:10px; border:none; font-weight:600; font-size:0.9rem; cursor:pointer; text-align:center; font-family:'Inter', sans-serif; }
.btn-primary { background:var(--plum); color:var(--cream); }
.btn-gold { background:var(--gold); color:var(--plum); }
.btn-outline { background:white; border:1.5px solid var(--plum); color:var(--plum); }
.btn-danger { background:white; border:1.5px solid var(--danger); color:var(--danger); }
.btn-block { width:100%; }
.btn-sm { padding:8px 12px; font-size:0.78rem; border-radius:8px; }
/* Cochon-tirelire et dépôt par glisser-déposer */
.piggy {
  width: clamp(90px,20vh,230px); height: clamp(76px,17vh,194px); margin-bottom: clamp(8px,2.6vh,28px);
  filter: drop-shadow(0 10px 20px rgba(27,67,50,0.3));
  transition: filter .15s ease;
  animation: piggyIdle 2.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.piggy .blush { opacity:0; transition: opacity .15s ease; }
.piggy .mouth-idle { opacity:1; transition: opacity .15s ease; }
.piggy .mouth-happy { opacity:0; transition: opacity .15s ease; }
.piggy.drop-hover { filter: drop-shadow(0 14px 26px rgba(181,72,110,0.55)); }
.piggy.happy { animation: piggyBounce 1.6s ease; }
.piggy.happy .blush { opacity:.6; }
.piggy.happy .mouth-idle { opacity:0; }
.piggy.happy .mouth-happy { opacity:1; }
@keyframes piggyIdle {
  0%, 100% { transform: translateY(0) scale(1,1); }
  50% { transform: translateY(-5px) scale(1.015,0.985); }
}
@keyframes piggyBounce {
  0% { transform: scale(1) translateY(0); }
  12% { transform: scale(1.14, 0.88) translateY(4px); }
  26% { transform: scale(0.94, 1.12) translateY(-24px); }
  38% { transform: scale(1.07, 0.95) translateY(2px); }
  50% { transform: scale(0.97, 1.05) translateY(-12px); }
  64% { transform: scale(1.05, 0.96) translateY(1px); }
  76% { transform: scale(0.98, 1.03) translateY(-6px); }
  88% { transform: scale(1.02, 0.99) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
.sparkle {
  position:absolute; top:6px; font-size:1.3rem; opacity:0;
  animation: sparklePop 1.3s ease forwards; pointer-events:none;
}
@keyframes sparklePop {
  0% { opacity:0; transform: translateY(0) scale(.5); }
  20% { opacity:1; transform: translateY(-14px) scale(1.15); }
  100% { opacity:0; transform: translateY(-70px) scale(.8); }
}

/* Célébration objectif atteint */
.celebration-overlay { position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden; }
.flower {
  position:absolute; top:-40px; opacity:0;
  animation: flowerFall linear forwards;
}
@keyframes flowerFall {
  0% { transform: translateY(0) rotate(0deg); opacity:1; }
  100% { transform: translateY(115vh) rotate(360deg); opacity:.9; }
}
.piggy.celebrating { animation: piggyCelebrate 4.2s ease-in-out; }
.piggy.celebrating .blush { opacity:.6; }
.piggy.celebrating .mouth-idle { opacity:0; }
.piggy.celebrating .mouth-happy { opacity:1; }
@keyframes piggyCelebrate {
  0% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-18deg) scale(1.08); }
  25% { transform: rotate(360deg) scale(1.12); }
  40% { transform: rotate(360deg) scale(0.94) translateY(-16px); }
  50% { transform: rotate(360deg) scale(1.05) translateY(0); }
  65% { transform: rotate(720deg) scale(1.1); }
  80% { transform: rotate(720deg) scale(0.96) translateY(-10px); }
  92% { transform: rotate(720deg) scale(1.02) translateY(0); }
  100% { transform: rotate(720deg) scale(1); }
}

/* Casse de la caisse : éclats */
.piggy-shard {
  position:fixed; z-index:998; border-radius:3px; pointer-events:none;
  animation: shardFly .85s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes shardFly {
  0% { transform: translate(-50%,-50%) rotate(0) scale(1); opacity:1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.4); opacity:0; }
}
.piggy.shattered { opacity:0; transition: opacity .2s ease; }

/* Cochon cassé (affiché tant qu'aucun nouvel objectif n'est fixé) */
.broken-piggy {
  display:block; width: clamp(120px,24vh,220px); height:auto; margin: clamp(8px,2vh,20px) auto;
  filter: drop-shadow(0 10px 18px rgba(27,67,50,0.25));
}

.deposit-bar {
  position:relative;
  background:white; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid var(--line);
  padding: clamp(10px,2vh,18px) 16px clamp(12px,2.2vh,20px); display:flex; flex-direction:column; align-items:center;
  margin-top:0;
}
.amount-3d {
  font-family:'Fraunces', serif; font-weight:700; font-size: clamp(1.6rem,4.4vh,2.4rem); line-height:1;
  color: var(--gold);
  text-shadow: 1px 1px 0 #4c956c, 2px 2px 0 #4c956c, 3px 3px 0 #3a7a56, 4px 5px 8px rgba(27,67,50,0.35);
  padding: clamp(3px,0.8vh,6px) 20px; min-width:140px; text-align:center; user-select:none; touch-action:none;
  cursor:grab; margin-bottom: clamp(6px,1.6vh,14px);
}
.amount-3d.empty { color: var(--line); text-shadow:none; cursor:default; }
.amount-3d.dragging { position:fixed; z-index:999; cursor:grabbing; }
.deposit-bar input {
  width:100%; max-width:300px; padding:12px; border-radius:10px; border:1.5px solid var(--line);
  font-size:16px; text-align:center; font-family:'Inter', sans-serif; background:var(--cream); color:var(--ink);
}
.deposit-bar input:focus { outline:none; border-color:var(--rose); }

/* Lists */
.list-item { background:white; border-radius:12px; padding:13px 14px; margin-bottom:10px; border:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.list-item .info { flex:1; min-width:0; }
.list-item .title { font-weight:600; font-size:0.92rem; }
.list-item .sub { font-size:0.78rem; color:var(--ink-soft); margin-top:2px; }
.list-item .amount { font-weight:700; color:var(--ok); font-size:0.92rem; white-space:nowrap; }

.status-pill { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.status-pill.broken { background:#F5DEDC; color:var(--danger); }
.status-pill.reached { background:#E1EFE3; color:var(--ok); }

.empty-state { text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty-state .ic { font-size:2.2rem; margin-bottom:10px; }

/* Formulaires */
.field { margin-bottom:14px; }
.field label { display:block; font-size:0.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; padding:12px; border-radius:10px; border:1.5px solid var(--line); font-size:16px; font-family:'Inter', sans-serif; background:white; color:var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--rose); }

.phone-suggestions {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:15;
  background:white; border:1px solid var(--line); border-radius:10px;
  margin-top:4px; overflow:hidden; box-shadow: var(--shadow);
}
.phone-suggestions.active { display:block; }
.phone-suggestions button {
  display:block; width:100%; text-align:left; padding:11px 14px;
  background:none; border:none; border-bottom:1px solid var(--line);
  font-size:16px; font-family:'Inter', sans-serif; color:var(--ink); cursor:pointer;
}
.phone-suggestions button:last-child { border-bottom:none; }
.phone-suggestions button:active { background:var(--cream); }

/* Modales */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(42,32,40,0.55); z-index:50; align-items:flex-end; justify-content:center; }
.modal-backdrop.active { display:flex; }
.modal { background:var(--cream); width:100%; max-width:480px; border-radius:20px 20px 0 0; max-height:88vh; overflow-y:auto; padding:22px 18px 30px; animation: slideUp .25s ease; border-top:1px solid var(--line); }
@keyframes slideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header button { background:none; border:none; font-size:1.4rem; color:var(--ink-soft); cursor:pointer; }

/* Toasts */
#toast-container { position:fixed; top:70px; left:0; right:0; z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast { background:var(--plum); color:var(--cream); padding:12px 18px; border-radius:12px; font-size:0.85rem; box-shadow:0 6px 20px rgba(0,0,0,0.25); max-width:90%; animation: toastIn .25s ease; }
.toast.success { background: var(--ok); }
.toast.error { background: var(--danger); }
@keyframes toastIn { from { transform:translateY(-10px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Écran de connexion */
.login-screen {
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 0%, var(--plum-light) 0%, var(--plum) 70%);
  padding:24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.login-card { background:var(--cream); border-radius:20px; padding:32px 24px; width:100%; max-width:380px; }
.login-card h1 { text-align:center; margin-bottom:6px; font-size:1.7rem; }
.login-card .sub { text-align:center; color:var(--ink-soft); font-size:0.85rem; margin-bottom:24px; font-family:'Inter', sans-serif; }
.login-tabs { display:flex; gap:8px; margin-bottom:20px; }
.login-tabs button { flex:1; padding:10px; border-radius:10px; border:1px solid var(--line); background:white; font-weight:600; font-size:0.85rem; color:var(--ink-soft); cursor:pointer; }
.login-tabs button.active { background:var(--plum); color:var(--cream); border-color:var(--plum); }
.error-msg { color:var(--danger); font-size:0.82rem; margin-top:8px; text-align:center; }