:root {
  --paper:#F4F5F0; --surface:#FCFCF9; --surface-2:#EDEFE8; --ink:#22271F;
  --ink-muted:#6B7266; --ink-faint:#9AA093; --line:#DCDFD4; --accent:#2F6E5E;
  --accent-ink:#235445; --accent-soft:#DDE9E3; --done:#2F6E5E;
  --g0:#E6E9DF; --g1:#BFD6C9; --g2:#7FB2A0; --g3:#2F6E5E;
  --pot:#C99C77; --pot-rim:#BC8B65; --soil:#5A4635; --seed:#8A6B4F; --bud:#7FB2A0; --bloom:#E2A567;
  --shadow:0 1px 2px rgba(34,39,31,.05),0 6px 20px -12px rgba(34,39,31,.18);
  --shadow-lift:0 2px 6px rgba(34,39,31,.08),0 14px 34px -16px rgba(34,39,31,.30);
  --serif:"Palatino Linotype",Palatino,"URW Palladio L","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#14170F; --surface:#1D211C; --surface-2:#262B23; --ink:#E9EAE2;
    --ink-muted:#9AA18E; --ink-faint:#6B7361; --line:#2E3329; --accent:#6FB3A0;
    --accent-ink:#8FCBB9; --accent-soft:#233029; --done:#6FB3A0;
    --g0:#232A22; --g1:#33564A; --g2:#4E8574; --g3:#6FB3A0;
    --pot:#7B5C44; --pot-rim:#8A6A50; --soil:#3A2E24; --seed:#B89877; --bud:#4E8574; --bloom:#E0A96D;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.6);
    --shadow-lift:0 2px 8px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"] {
  --paper:#F4F5F0; --surface:#FCFCF9; --surface-2:#EDEFE8; --ink:#22271F;
  --ink-muted:#6B7266; --ink-faint:#9AA093; --line:#DCDFD4; --accent:#2F6E5E;
  --accent-ink:#235445; --accent-soft:#DDE9E3; --done:#2F6E5E;
  --g0:#E6E9DF; --g1:#BFD6C9; --g2:#7FB2A0; --g3:#2F6E5E;
  --pot:#C99C77; --pot-rim:#BC8B65; --soil:#5A4635; --seed:#8A6B4F; --bud:#7FB2A0; --bloom:#E2A567;
  --shadow:0 1px 2px rgba(34,39,31,.05),0 6px 20px -12px rgba(34,39,31,.18);
  --shadow-lift:0 2px 6px rgba(34,39,31,.08),0 14px 34px -16px rgba(34,39,31,.30);
}
:root[data-theme="dark"] {
  --paper:#14170F; --surface:#1D211C; --surface-2:#262B23; --ink:#E9EAE2;
  --ink-muted:#9AA18E; --ink-faint:#6B7361; --line:#2E3329; --accent:#6FB3A0;
  --accent-ink:#8FCBB9; --accent-soft:#233029; --done:#6FB3A0;
  --g0:#232A22; --g1:#33564A; --g2:#4E8574; --g3:#6FB3A0;
  --pot:#7B5C44; --pot-rim:#8A6A50; --soil:#3A2E24; --seed:#B89877; --bud:#4E8574; --bloom:#E0A96D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.6);
  --shadow-lift:0 2px 8px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.7);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.5; overscroll-behavior-y:none; }
.wrap { max-width:560px; margin:0 auto; padding:22px 18px 96px; }

header { display:flex; align-items:flex-end; justify-content:space-between; }
.brand { display:flex; align-items:baseline; gap:9px; }
.mark { font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:.2px; line-height:1; color:var(--ink); }
.mark .dot { color:var(--accent); }
.tagline { font-size:11px; color:var(--ink-faint); letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.theme-btn { border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); width:38px; height:38px; border-radius:50%; font-size:15px; cursor:pointer; display:grid; place-items:center; transition:color .2s,border-color .2s,transform .2s; }
.theme-btn:hover { color:var(--accent); border-color:var(--accent); }
.theme-btn:active { transform:scale(.92); }

.view { display:none; }
.view.active { display:block; }
.view-title { font-family:var(--serif); font-size:22px; font-weight:600; margin:20px 0 4px; }
.view-sub { font-size:12px; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:14px; }

.day { margin:18px 0 22px; padding:15px 16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.day-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; }
.day-date { font-size:13px; color:var(--ink-muted); text-transform:capitalize; }
.day-count { font-family:var(--serif); font-size:15px; color:var(--ink); }
.day-count b { color:var(--accent-ink); font-weight:600; }
.steps { display:flex; gap:5px; }
.step { flex:1; height:6px; border-radius:3px; background:var(--surface-2); transition:background .3s; }
.step.on { background:var(--accent); }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* padding-top = hauteur de .tile-grip : la zone de préhension occupe la bande vide du
   haut et n'empiète pas sur le nom (dont le tap ouvre l'édition). */
.tile { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px 15px 13px; min-height:158px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); transition:box-shadow .2s,border-color .25s,background .3s; }
.tile.running { border-color:var(--accent); }
.tile.paused { border-color:var(--ink-faint); }
.tile.done { border-color:transparent; }
.tile.reached { background:var(--accent-soft); }
.tile.lift { transform:scale(1.04); opacity:.96; box-shadow:0 12px 28px rgba(0,0,0,.22); border-color:var(--accent); z-index:5; cursor:grabbing; transition:transform .12s,box-shadow .12s; }
/* Zone de préhension de 32px (seuil du pouce) — la barre visible, elle, reste fine :
   c'est ::before qui la dessine, alignée en haut par place-items. */
.tile-grip { position:absolute; top:0; left:50%; transform:translateX(-50%); width:72px; height:32px; display:grid; place-items:start center; padding-top:7px; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; z-index:2; }
.tile-grip::before { content:""; width:28px; height:4px; border-radius:2px; background:var(--ink-faint); opacity:.4; transition:opacity .15s; }
.tile-grip:active { cursor:grabbing; }
.tile-grip:active::before, .tile.lift .tile-grip::before { opacity:.9; background:var(--accent); }
.tile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tile-name { font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.15; color:var(--ink); text-wrap:balance; }
.tile.reached .tile-name { color:var(--accent-ink); }
.tile-goal { margin-top:5px; font-size:12px; color:var(--ink-muted); }
.tile-goal .kind { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
.tile.reached .tile-goal { color:var(--accent-ink); opacity:.72; }
.disc { flex:0 0 auto; width:26px; height:26px; position:relative; }
.disc svg { width:26px; height:26px; position:absolute; inset:0; transform:rotate(-90deg); }
.disc .track { stroke:var(--surface-2); }
.disc .prog { stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .35s linear; }
.disc .checkwrap { display:none; transform:none; }
.tile.reached .disc .checkwrap { display:block; }
.tile.reached .disc .ring { display:none; }
.tile.running .disc .spin { animation:spin 1.5s linear infinite; transform-origin:13px 13px; }
@keyframes spin { to { transform:rotate(360deg); } }
.tile-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.timer { font-family:var(--serif); font-size:30px; line-height:1; letter-spacing:.5px; color:var(--ink-faint); font-variant-numeric:oldstyle-nums tabular-nums; }
.tile.running .timer { color:var(--accent-ink); }
.tile.paused .timer { color:var(--ink-muted); }
.tile.done .timer { color:var(--accent-ink); }
.timer.bonus { color:var(--accent-ink); }
.timer.bonus::before { content:"+"; opacity:.65; }
.timer .u { font-family:var(--sans); font-size:12px; color:var(--ink-faint); margin-left:2px; }
.controls { display:flex; gap:7px; flex:0 0 auto; }
.ctl { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); display:grid; place-items:center; cursor:pointer; padding:0; transition:transform .12s,background .2s,color .2s,border-color .2s; -webkit-tap-highlight-color:transparent; }
.ctl svg { width:16px; height:16px; display:block; }
.ctl:active { transform:scale(.9); }
.ctl:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ctl.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.ctl.primary:hover { filter:brightness(1.06); }
.ctl.stop:hover { border-color:var(--ink-muted); color:var(--ink); }
.tile.reached .controls .ctl:not(.primary):not(.block) { border-color:transparent; background:transparent; }
.ctl.block { width:auto; min-width:44px; padding:0 11px; border-radius:20px; border-color:var(--accent); color:var(--accent-ink); font-family:var(--serif); font-size:15px; font-variant-numeric:oldstyle-nums; }
.ctl.block:hover { background:var(--accent-soft); }
.tile.reached .controls .ctl.block { border-color:var(--accent); }
.blocktag { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-left:7px; align-self:flex-end; padding-bottom:4px; }
.tile.reached .blocktag { color:var(--accent-ink); opacity:.7; }
.streak { font-size:11px; color:var(--ink-faint); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.streak .leaf { color:var(--accent); }
.tile.reached .streak { color:var(--accent-ink); opacity:.8; }

.summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:20px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 14px 12px; box-shadow:var(--shadow); }
.stat .n { font-family:var(--serif); font-size:28px; color:var(--accent-ink); line-height:1; font-variant-numeric:oldstyle-nums; }
.stat .l { font-size:11px; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
.prow { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); margin-bottom:10px; }
.prow-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; }
.prow-name { font-family:var(--serif); font-size:17px; font-weight:600; }
.prow-tot { font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.gauges { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.gauge .gl { font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); display:flex; justify-content:space-between; margin-bottom:5px; }
.gauge .gl b { color:var(--ink-muted); font-weight:600; font-variant-numeric:tabular-nums; }
.bar { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--accent); border-radius:3px; }
.bar.full > span { background:var(--done); }

.legend { display:flex; align-items:center; gap:6px; justify-content:flex-end; font-size:10px; color:var(--ink-faint); margin-bottom:8px; }
.legend .cell { width:11px; height:11px; border-radius:3px; }
.garden { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 15px; box-shadow:var(--shadow); margin-bottom:10px; }
.garden-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.garden-name { font-family:var(--serif); font-size:17px; font-weight:600; }
.garden-streak { font-size:12px; color:var(--accent-ink); display:flex; align-items:center; gap:5px; }
.garden-streak .leaf { font-size:13px; }
.heat { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cell { aspect-ratio:1; border-radius:3px; background:var(--g0); }
.cell.l1 { background:var(--g1); } .cell.l2 { background:var(--g2); } .cell.l3 { background:var(--g3); }
.cell.today { box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent); }

.modeseg { display:flex; gap:7px; margin-bottom:14px; }
.modeseg button { flex:1; font:inherit; font-size:13px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); border-radius:10px; padding:9px 12px; transition:.15s; }
.modeseg button.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.plants { display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:12px; }
.plant { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 8px 12px; box-shadow:var(--shadow); text-align:center; }
.plant svg { width:100%; height:108px; display:block; transform-origin:50% 100%; animation:sprout .5s cubic-bezier(.2,.8,.25,1); }
@keyframes sprout { from { transform:scaleY(.55) scaleX(.85); opacity:0; } to { transform:none; opacity:1; } }
.plant .pn { font-family:var(--serif); font-size:14px; font-weight:600; margin-top:4px; }
.plant .pk { font-size:11px; color:var(--accent-ink); display:flex; gap:4px; justify-content:center; align-items:center; margin-top:3px; }
.plant .ps { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-top:3px; }

.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:20; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-top:1px solid var(--line); display:flex; }
.tabbar-inner { max-width:560px; margin:0 auto; width:100%; display:flex; padding:7px 10px calc(8px + env(safe-area-inset-bottom)); }
.tab { flex:1; background:none; border:0; cursor:pointer; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0; font:inherit; font-size:10.5px; letter-spacing:.04em; transition:color .2s; }
.tab svg { width:22px; height:22px; }
.tab.active { color:var(--accent); }
.fab { position:fixed; z-index:21; right:calc(50% - 280px + 18px); bottom:calc(70px + env(safe-area-inset-bottom)); width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff; border:0; cursor:pointer; box-shadow:var(--shadow-lift); display:grid; place-items:center; transition:transform .14s,filter .2s; }
.fab:hover { filter:brightness(1.06); } .fab:active { transform:scale(.9); }
.fab svg { width:22px; height:22px; }
@media (max-width:596px){ .fab { right:20px; } }

.scrim { position:fixed; inset:0; z-index:30; background:rgba(20,23,15,.42); opacity:0; pointer-events:none; transition:opacity .25s; }
.scrim.open { opacity:1; pointer-events:auto; }
/* max-height + défilement INTERNE : sans ça, une feuille plus haute que l'écran déborde
   par le HAUT (top négatif) et son premier bloc devient invisible — pas coupé en bas,
   où on l'aurait vu. C'est ce qui a caché la saisie manuelle sur un écran court. */
.sheet { position:fixed; z-index:31; left:0; right:0; bottom:0; background:var(--surface); border-radius:22px 22px 0 0; box-shadow:0 -12px 40px -12px rgba(0,0,0,.35); transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.25,1); max-width:560px; margin:0 auto; padding:8px 20px calc(24px + env(safe-area-inset-bottom)); max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sheet.open { transform:translateY(0); }
.grip { width:38px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 14px; }
.sheet h2 { font-family:var(--serif); font-size:20px; margin:0 0 16px; }
.field { margin-bottom:16px; }
.field > label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); margin-bottom:7px; }
.input { width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:11px 13px; }
.input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.seg { display:flex; gap:7px; }
.seg button, .chip { font:inherit; font-size:13px; cursor:pointer; border:1px solid var(--line); background:var(--paper); color:var(--ink-muted); border-radius:10px; padding:9px 12px; transition:.15s; }
.seg button { flex:1; }
.seg button.on, .chip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.theme-btn.hide { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
/* Saisie manuelle : encadré distinct, c'est une ACTION (journaliser), pas un réglage. */
.field.manual { border:1px solid var(--line); border-radius:14px; padding:13px; background:var(--surface-2); }
.field.manual.hide { display:none; }
.field.manual .chips, .field.manual .row2 { margin-bottom:9px; }
.field.manual .hide { display:none; }
.btn.manual-add { width:100%; padding:11px; }
.row2 { display:flex; gap:10px; }
.row2 .input { flex:1; }
.goalfield.hide, .field.hide, .input.hide { display:none; }
.sheet-actions { display:flex; gap:10px; margin-top:8px; }
.btn { flex:1; font:inherit; font-size:15px; cursor:pointer; border-radius:12px; padding:13px; border:1px solid var(--line); background:var(--paper); color:var(--ink-muted); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn.danger { flex:0 0 auto; color:#c0392b; border-color:transparent; background:transparent; }
.btn.danger:hover { border-color:#c0392b; }
.btn.hide { display:none; }
.btn:active { transform:scale(.98); }

.toast { position:fixed; z-index:40; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(12px); background:var(--ink); color:var(--paper); font-size:13px; padding:10px 16px; border-radius:11px; box-shadow:var(--shadow-lift); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:90%; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Plein écran minuteur actif */
.fs { position:fixed; inset:0; z-index:50; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:calc(20px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); opacity:0; pointer-events:none; transform:scale(1.02); transition:opacity .28s ease, transform .28s ease; }
.fs.open { opacity:1; pointer-events:auto; transform:none; }
.fs.reached { background:var(--accent-soft); }
.fs-min { position:absolute; top:calc(14px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:46px; height:34px; border:0; background:none; color:var(--ink-faint); cursor:pointer; display:grid; place-items:center; }
.fs-min svg { width:26px; height:26px; }
.fs-min:active { transform:translateX(-50%) scale(.9); }
.fs-name { font-family:var(--serif); font-size:clamp(22px,6vw,32px); font-weight:600; color:var(--ink); text-align:center; text-wrap:balance; }
.fs.reached .fs-name { color:var(--accent-ink); }
.fs-dial { position:relative; width:min(72vw,320px); aspect-ratio:1; display:grid; place-items:center; }
.fs-ring { position:absolute; inset:0; width:100%; height:100%; }
.fs-track { stroke:var(--surface-2); }
.fs-prog { stroke:var(--accent); stroke-linecap:round; stroke-dasharray:628.3; transition:stroke-dashoffset .4s linear; }
.fs-spin .fs-prog { stroke-dasharray:90 540; animation:fsspin 1.6s linear infinite; transform-origin:110px 110px; }
@keyframes fsspin { to { transform:rotate(270deg); } }
.fs-center { text-align:center; }
.fs-timer { font-family:var(--serif); font-size:clamp(56px,20vw,132px); line-height:1; color:var(--ink); font-variant-numeric:oldstyle-nums tabular-nums; }
.fs.reached .fs-timer { color:var(--accent-ink); }
.fs-timer .u { font-family:var(--sans); font-size:.34em; color:var(--ink-faint); margin-left:3px; }
.fs-tag { margin-top:10px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); min-height:16px; }
.fs-ctl { display:flex; gap:16px; }
.fs-ctl .ctl { width:64px; height:64px; }
.fs-ctl .ctl svg { width:24px; height:24px; }

@media (prefers-reduced-motion: reduce){ * { animation:none !important; transition:none !important; } }
@media (min-width:480px){ .grid { grid-template-columns:1fr 1fr 1fr; } .wrap { max-width:720px; } .tabbar-inner,.sheet { max-width:720px; } }