/* ==========================================================================
   New Pupucette — style carnet doux & girly.
   Deux themes : Rose poudre (defaut) et Lavande.
   ========================================================================== */

:root {
  --rose-1:#f7a8c4; --rose-2:#f9c5d8; --rose-3:#fff0f5; --rose-4:#fde4ee;
  --lav-1:#b8a8e8; --lav-2:#d6c9f5; --lav-3:#f5f1ff; --lav-4:#ece4fb;

  --ink:#5b4a55; --ink-soft:#8a7a85; --ink-faint:#b7a9b2;
  --card:#ffffff; --shadow:0 8px 24px rgba(180,120,150,.14);
  --shadow-sm:0 3px 10px rgba(180,120,150,.12);
  --radius:22px; --radius-sm:16px;
  --ok:#7cc4a0; --warn:#f2b366; --heart:#f47da0;
}

/* --- Theme Rose --- */
body[data-theme="rose"]{
  --accent:var(--rose-1); --accent-soft:var(--rose-2); --bg-1:var(--rose-3); --bg-2:var(--rose-4);
  --tint:#fff7fb; --chip:#fde4ee;
}
/* --- Theme Lavande --- */
body[data-theme="lavender"]{
  --accent:var(--lav-1); --accent-soft:var(--lav-2); --bg-1:var(--lav-3); --bg-2:var(--lav-4);
  --tint:#f9f6ff; --chip:#ece4fb;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2) 60%,var(--bg-1));
  background-attachment:fixed;
  min-height:100vh;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.hidden{ display:none !important; }

h1,h2,h3{ margin:0; font-weight:700; }
.cursive{ font-family:'Dancing Script',cursive; }

/* --- Topbar --- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 12px;
  background:linear-gradient(180deg,var(--bg-1),rgba(255,255,255,0));
  backdrop-filter:blur(6px);
}
.brand{ font-family:'Dancing Script',cursive; font-size:27px; font-weight:700; color:var(--ink); }
.brand-emoji{ font-family:'Quicksand'; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.sync-badge{ font-size:16px; opacity:.75; }
.icon-btn{
  border:0; background:var(--card); width:40px; height:40px; border-radius:50%;
  font-size:19px; box-shadow:var(--shadow-sm); cursor:pointer;
}

/* --- Vue --- */
.view{ padding:6px 16px 20px; max-width:560px; margin:0 auto; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* --- Cartes --- */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; margin:14px 0;
}
.card-tint{ background:var(--tint); }
.card h3{ font-size:17px; display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.card .sub{ color:var(--ink-soft); font-size:13px; margin:2px 0 10px; }

/* --- Message d'encouragement du jour --- */
.hero{
  background:linear-gradient(135deg,var(--accent-soft),var(--tint));
  border-radius:var(--radius); padding:20px; margin:12px 0 8px;
  box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden;
}
.hero .date{ font-size:13px; color:var(--ink-soft); text-transform:capitalize; }
.hero .msg{ font-family:'Dancing Script',cursive; font-size:25px; line-height:1.25; margin-top:6px; color:var(--ink); }
.hero .sparkle{ position:absolute; opacity:.5; font-size:20px; }

/* --- Barre de progression douce --- */
.progress-wrap{ margin:14px 0 4px; }
.progress-label{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.progress{ height:14px; background:var(--chip); border-radius:99px; overflow:hidden; }
.progress-bar{ height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft)); transition:width .5s ease; }

/* --- Section titre (grouped like the paper journal) --- */
.section-title{ font-size:16px; font-weight:700; margin:20px 4px 2px; display:flex; gap:8px; align-items:center; }

/* --- Ligne d'item (label + controle) --- */
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--bg-2); }
.row:last-child{ border-bottom:0; }
.row .lbl{ font-size:15px; font-weight:500; display:flex; align-items:center; gap:8px; }

/* --- Echelle 0..10 (ronds a taper) --- */
.scale{ display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 2px; }
.scale button{
  width:29px; height:29px; border-radius:50%; border:1.5px solid var(--chip);
  background:var(--card); color:var(--ink-soft); font-size:12px; font-weight:600; cursor:pointer;
  transition:transform .12s, background .15s;
}
.scale button.on{ background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.12); }
.scale button:active{ transform:scale(.9); }
.scale-hint{ font-size:11px; color:var(--ink-faint); margin-top:2px; }

/* --- Boutons segmentes (oui / non / na) --- */
.seg{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.seg button{
  border:1.5px solid var(--chip); background:var(--card); color:var(--ink-soft);
  padding:7px 13px; border-radius:99px; font-size:13px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.seg button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.seg.soft button.on{ background:var(--ok); border-color:var(--ok); }

/* --- Compteur (verres d'eau, pas) --- */
.counter{ display:flex; align-items:center; gap:10px; }
.counter button{ width:36px; height:36px; border-radius:50%; border:0; background:var(--chip);
  font-size:20px; color:var(--ink); cursor:pointer; font-weight:700; }
.counter .val{ min-width:34px; text-align:center; font-weight:700; font-size:17px; }
.water-drops{ font-size:17px; letter-spacing:1px; margin-top:6px; }

/* --- Bouteille d'eau ludique --- */
.bottle-wrap{ display:flex; align-items:center; gap:18px; margin:8px 0 4px; }
.bottle-box{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.bottle{ width:88px; height:auto; cursor:pointer; }
.bottle .bottle-outline{ stroke:var(--accent); stroke-width:3; }
.bottle .bottle-cap{ fill:var(--accent); }
.bottle .water-fill{ fill:url(#none); fill:var(--accent-soft); transition:y .5s cubic-bezier(.3,1.2,.5,1), height .5s cubic-bezier(.3,1.2,.5,1); }
.bottle .water-top{ fill:var(--accent); opacity:.55; transition:cy .5s cubic-bezier(.3,1.2,.5,1); }
.bottle .tick{ stroke:var(--accent); stroke-width:1.5; opacity:.35; }
.bottle-amount{ font-size:15px; }
.bottle-ctrls{ display:flex; flex-direction:column; gap:8px; flex:1; }
.wbtn{ border:1.5px solid var(--accent-soft); background:var(--tint); color:var(--ink);
  border-radius:99px; padding:11px 14px; font-weight:700; font-family:inherit; font-size:15px; cursor:pointer; }
.wbtn.plus{ background:linear-gradient(135deg,var(--accent),var(--accent-soft)); color:#fff; border:0; }
.wbtn:active{ transform:scale(.97); }
.bottle-wrap.reached .bottle-box{ animation:bounce .5s ease; }
@keyframes bounce{ 0%,100%{transform:none} 40%{transform:translateY(-6px) scale(1.04)} }
.bottle-msg{ text-align:center; }

/* --- Silhouette d'injection réaliste --- */
.bodymap-svg{ display:flex; justify-content:center; margin:6px 0; }
.bodymap-svg svg{ width:270px; height:auto; touch-action:manipulation; }
.bodymap-svg .silhouette *{ fill:var(--tint); stroke:var(--accent-soft); stroke-width:2.5; stroke-linejoin:round; cursor:crosshair; transition:fill .15s; }
.bodymap-svg .silhouette *:hover{ fill:var(--chip); }
/* zones recommandées LARGES : repère visuel clair, ne bloquent pas le tap */
.zone-region{ fill:var(--accent); opacity:.3; stroke:var(--accent); stroke-width:1.2; stroke-opacity:.55; stroke-dasharray:5 3; pointer-events:none; }
.zlabel{ font-size:13px; text-anchor:middle; pointer-events:none; }
.navel-label{ font-size:8.5px; fill:var(--ink-soft); text-anchor:middle; pointer-events:none; font-weight:700; }
/* dernière piqûre : anneau bien visible */
.last-ring{ fill:none; stroke:var(--warn); stroke-width:3; pointer-events:none; }
.last-core{ fill:var(--warn); pointer-events:none; }
/* callout dernière piqûre */
.last-inj{ display:flex; align-items:center; gap:8px; background:var(--tint); border-radius:14px;
  padding:10px 14px; margin:8px 0; font-size:13px; }
.last-inj b{ color:var(--accent); }
.history .hist-dot{ fill:var(--ink-soft); opacity:.45; pointer-events:none; }
.history .hist-dot.recent{ fill:var(--warn); opacity:.8; }
.marker{ fill:var(--heart); stroke:#fff; stroke-width:2; pointer-events:none; }
.marker.warn{ fill:var(--warn); }
.marker-pulse{ fill:var(--heart); opacity:.3; pointer-events:none; animation:pulse 1.4s ease-out infinite; }
.marker-pulse.warn{ fill:var(--warn); }
@keyframes pulse{ 0%{transform-origin:center; opacity:.4} 70%{opacity:0} 100%{opacity:0} }
.zone-legend{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
/* Historique injections avec mini-schéma du point exact */
.inj-row{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed var(--bg-2); }
.inj-row:last-child{ border-bottom:0; }
.mini-body{ width:40px; height:auto; flex-shrink:0; background:var(--tint); border-radius:10px; padding:3px; }

/* --- Emoji picker (activité perso) --- */
.emoji-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-height:150px; overflow-y:auto;
  background:var(--tint); border-radius:14px; padding:8px; margin-top:4px; }
.emoji-grid button{ border:0; background:none; font-size:22px; cursor:pointer; border-radius:10px; padding:4px; }
.emoji-grid button.on{ background:var(--accent-soft); }

/* --- Bilan : sélecteur de dates --- */
.range-fields{ display:flex; gap:8px; margin:8px 0; }
.range-fields label{ flex:1; font-size:12px; color:var(--ink-soft); }
.day-detail .row{ padding:6px 0; }

/* --- État validé --- */
.validated-note{ text-align:center; color:var(--ok); font-weight:700; margin-top:8px; font-size:14px; }

/* --- Boutons --- */
.btn-primary{
  border:0; border-radius:99px; padding:15px 22px; width:100%;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:#fff; font-size:16px; font-weight:700; font-family:inherit; cursor:pointer;
  box-shadow:var(--shadow); margin-top:8px;
}
.btn-primary:active{ transform:scale(.98); }
.btn-ghost{ border:1.5px solid var(--accent-soft); background:var(--card); color:var(--ink);
  border-radius:99px; padding:12px 18px; font-weight:600; font-family:inherit; cursor:pointer; width:100%; }
.btn-small{ border:0; background:var(--chip); color:var(--ink); border-radius:99px;
  padding:8px 14px; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; }

/* --- Inputs --- */
input[type=text],input[type=number],input[type=password],input[type=time],textarea,select{
  width:100%; border:1.5px solid var(--chip); border-radius:var(--radius-sm);
  padding:12px 14px; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--tint); outline:none;
}
input:focus,textarea:focus,select:focus{ border-color:var(--accent); }
textarea{ min-height:80px; resize:vertical; }
label.field{ display:block; font-size:13px; color:var(--ink-soft); margin:12px 0 4px; font-weight:600; }

/* --- Onglets --- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:space-around;
  background:var(--card); box-shadow:0 -4px 18px rgba(180,120,150,.12);
  padding:8px 4px calc(6px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
}
.tab{ border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:inherit; font-size:10px; color:var(--ink-faint); cursor:pointer; padding:4px 6px; flex:1; }
.tab .tab-ico{ font-size:21px; filter:grayscale(.4); opacity:.7; transition:all .15s; }
.tab.on{ color:var(--accent); font-weight:700; }
.tab.on .tab-ico{ filter:none; opacity:1; transform:translateY(-2px) scale(1.12); }

/* --- Chips / badges --- */
.chip{ display:inline-flex; align-items:center; gap:5px; background:var(--chip); color:var(--ink);
  padding:5px 11px; border-radius:99px; font-size:12px; font-weight:600; }
.chip.ok{ background:#e2f4ec; color:#3f8a68; }

/* --- Corps injection (schema) --- */
.body-map{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.zone{
  border:2px solid var(--chip); border-radius:var(--radius-sm); background:var(--tint);
  padding:14px 10px; text-align:center; cursor:pointer; font-weight:600; font-size:14px;
  position:relative; transition:all .15s;
}
.zone .zico{ font-size:26px; display:block; margin-bottom:4px; }
.zone.suggested{ border-color:var(--accent); background:var(--accent-soft); }
.zone.last{ opacity:.45; }
.zone .tag{ position:absolute; top:6px; right:8px; font-size:10px; }
.zone.on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* --- Historique / listes --- */
.list-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 0; border-bottom:1px dashed var(--bg-2); }
.list-item:last-child{ border-bottom:0; }
.muted{ color:var(--ink-soft); font-size:13px; }
.tiny{ color:var(--ink-faint); font-size:11px; }

/* --- Calendrier --- */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:8px; }
.cal .dow{ text-align:center; font-size:10px; color:var(--ink-faint); font-weight:700; }
.cal .cell{ aspect-ratio:1; border-radius:12px; background:var(--tint); display:flex;
  flex-direction:column; align-items:center; justify-content:center; font-size:12px; position:relative; }
.cal .cell.filled{ background:var(--accent-soft); }
.cal .cell.today{ box-shadow:0 0 0 2px var(--accent) inset; }
.cal .dots{ display:flex; gap:2px; margin-top:2px; }
.cal .dot{ width:5px; height:5px; border-radius:50%; }

/* --- Graphique --- */
canvas.chart{ width:100%; height:200px; display:block; }

/* --- Activites --- */
.activity{ display:flex; align-items:center; gap:8px; background:var(--tint); border-radius:14px;
  padding:8px 12px; margin:6px 0; font-size:14px; }
.activity .del{ margin-left:auto; border:0; background:none; color:var(--ink-faint); font-size:17px; cursor:pointer; }

/* --- Toast --- */
.toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:99px; font-size:14px;
  font-weight:600; z-index:60; box-shadow:var(--shadow); animation:pop .3s ease; max-width:88%; text-align:center; }
@keyframes pop{ from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);} }

/* --- Onboarding --- */
.onboarding{ position:fixed; inset:0; z-index:80; background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top) + 30px) 26px 30px; overflow-y:auto; }
.ob-slide{ flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; gap:14px; }
.ob-emoji{ font-size:64px; }
.ob-slide h1{ font-family:'Dancing Script',cursive; font-size:40px; }
.ob-slide p{ font-size:16px; line-height:1.55; color:var(--ink-soft); max-width:340px; margin:0 auto; }
.ob-steps{ text-align:left; background:var(--card); border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow); max-width:360px; margin:8px auto; }
.ob-steps li{ margin:8px 0; line-height:1.5; }
.ob-dots{ display:flex; gap:8px; justify-content:center; margin:16px 0; }
.ob-dots span{ width:9px; height:9px; border-radius:50%; background:var(--chip); }
.ob-dots span.on{ background:var(--accent); width:22px; border-radius:99px; }

/* --- Lock (mode discret) --- */
.lock{ position:fixed; inset:0; z-index:90; background:var(--bg-1);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.lock-card{ background:var(--card); border-radius:var(--radius); padding:28px; text-align:center;
  box-shadow:var(--shadow); max-width:320px; width:100%; }
.lock-emoji{ font-size:44px; }
.lock-card input{ text-align:center; letter-spacing:6px; font-size:22px; margin:16px 0 12px; }
.lock-err{ color:var(--heart); font-size:13px; margin-top:8px; }

/* --- FX canvas --- */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:70; }

/* --- Astuces --- */
.tip{ background:var(--tint); border-radius:var(--radius-sm); padding:12px 14px; margin:8px 0; }
.tip summary{ font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; list-style:none; }
.tip summary::-webkit-details-marker{ display:none; }
.tip[open] summary{ margin-bottom:8px; }
.tip p{ margin:4px 0; font-size:14px; line-height:1.5; color:var(--ink-soft); }

/* --- Bilan --- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat{ background:var(--tint); border-radius:var(--radius-sm); padding:12px; text-align:center; }
.stat .big{ font-size:24px; font-weight:700; color:var(--accent); }
.stat .cap{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
.balance{ background:var(--tint); border-radius:var(--radius-sm); padding:14px; margin:8px 0; }
.balance h4{ margin:0 0 6px; font-size:14px; }
.balance p{ margin:5px 0; font-size:14px; line-height:1.5; }

.segbtns{ display:flex; gap:8px; margin:10px 0; }
.segbtns button{ flex:1; border:1.5px solid var(--chip); background:var(--card); color:var(--ink-soft);
  padding:10px; border-radius:99px; font-weight:700; font-family:inherit; cursor:pointer; }
.segbtns button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* --- Empty state --- */
.empty{ text-align:center; padding:30px 16px; color:var(--ink-soft); }
.empty .e{ font-size:44px; }

/* --- Bar chart (activites) --- */
.bars{ display:flex; align-items:flex-end; gap:8px; height:90px; margin-top:10px; }
.bars .b{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; justify-content:flex-end; }
.bars .b .fill{ width:100%; border-radius:8px 8px 0 0; background:linear-gradient(180deg,var(--accent),var(--accent-soft)); min-height:4px; }
.bars .b .cap{ font-size:10px; color:var(--ink-soft); }

.switch{ position:relative; width:48px; height:28px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--chip); border-radius:99px; transition:.2s; cursor:pointer; }
.switch .slider::before{ content:''; position:absolute; width:22px; height:22px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

@media print{
  .tabbar,.topbar,.fx,.icon-btn{ display:none !important; }
  body{ background:#fff; padding:0; }
  .card{ box-shadow:none; border:1px solid #eee; break-inside:avoid; }
}