/* =========================================================================
   ROOTED — plant-care dashboard. DA "Herbarium" (board A) en design system,
   posée sur une structure admin conventionnelle. Tokens = palette extraite.
   ========================================================================= */
:root{
  --cream:#FAF0D9; --paper:#FFFCF2; --sand:#EFE7D0; --sand-d:#E4D8BB;
  --sage:#B0AA8E; --sage-l:#D8D2BB; --olive:#7E8B6A; --olive-d:#5F6B4D; --moss:#66624D;
  --terra:#C77B57; --terra-d:#A85F40; --terra-soft:#F0D9C7;
  --ink:#3D3829; --muted:#8A7F69; --line:rgba(102,98,77,.16);
  --display:var(--font-display); --body:var(--font-body);
  --r:16px; --r-sm:11px; --r-pill:999px;
  --sh:0 5px 18px rgba(95,82,46,.07),0 1px 3px rgba(95,82,46,.06);
  --sh-h:0 12px 30px rgba(95,82,46,.13);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.defs{position:absolute}
.ic{width:20px;height:20px;display:inline-block;flex:0 0 auto}
.skip{position:fixed;top:-60px;left:12px;z-index:100;background:var(--moss);color:var(--cream);padding:.5rem 1rem;border-radius:0 0 10px 10px;transition:top .2s}
.skip:focus{top:0}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:2px;border-radius:6px}
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}

/* ============================ SIDEBAR ============================ */
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.6rem;padding:1.6rem 1.1rem;
  background:linear-gradient(180deg,#F6EBD2,#F1E4C8);border-right:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:.6rem;padding:.2rem .4rem .4rem}
.logo__mark{width:34px;height:34px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.logo__mark svg{width:24px;height:24px}
.logo__txt{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.01em;color:var(--moss);font-variation-settings:"opsz" 40,"SOFT" 0}
.nav{display:flex;flex-direction:column;gap:.2rem}
.nav__i{display:flex;align-items:center;gap:.75rem;padding:.62rem .8rem;border-radius:var(--r-sm);font-weight:500;font-size:.96rem;color:#6c6451;transition:.18s}
.nav__i .ic{color:#9a917a;transition:.18s}
.nav__i:hover{background:rgba(126,139,106,.12);color:var(--moss)}
.nav__i.is-active{background:var(--paper);color:var(--moss);font-weight:600;box-shadow:var(--sh)}
.nav__i.is-active .ic{color:var(--terra)}
.streak-card{margin-top:auto;padding:1.1rem;border-radius:var(--r);background:linear-gradient(155deg,#7E8B6A,#5F6B4D);color:#f3efe0;box-shadow:var(--sh)}
.streak-card__n{font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;display:flex;align-items:baseline;gap:.3rem}
.streak-card__n span{font-family:var(--body);font-weight:600;font-size:.8rem;opacity:.8}
.streak-card__l{font-size:.82rem;opacity:.86;margin-top:.3rem;line-height:1.35}

/* ============================ TOPBAR ============================ */
.main{padding:1.7rem clamp(1.2rem,2.4vw,2.4rem) 2.5rem;min-width:0}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.7rem}
.top__hi{font-size:.92rem;color:var(--muted);font-weight:500}
.top__h{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--ink);line-height:1.05;margin-top:.15rem;font-variation-settings:"opsz" 60,"SOFT" 0}
.top__r{display:flex;align-items:center;gap:.7rem}
.search{display:flex;align-items:center;gap:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem .9rem;box-shadow:var(--sh)}
.search .ic{color:var(--muted);width:18px;height:18px}
.search input{border:0;background:none;outline:none;font:inherit;font-size:.9rem;color:var(--ink);width:150px}
.search input::placeholder{color:#a99f87}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--moss);cursor:pointer;box-shadow:var(--sh);transition:.18s}
.icon-btn:hover{background:var(--sand)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--terra);border:1.5px solid var(--paper)}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--body);font-weight:600;font-size:.92rem;color:#fff7ee;background:var(--terra);border:0;border-radius:var(--r-pill);padding:.6rem 1.1rem;cursor:pointer;box-shadow:0 6px 16px rgba(168,95,64,.28);transition:.18s}
.btn .ic{width:18px;height:18px}
.btn:hover{background:var(--terra-d)}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--olive);color:#f4efe0;font-family:var(--display);font-weight:700;font-size:.95rem;box-shadow:var(--sh)}

/* ============================ CONTENT ============================ */
.content{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(1.2rem,2vw,1.9rem);align-items:start}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:1.7rem 0 .9rem}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ink);font-variation-settings:"opsz" 40}
.sec-head--sm{margin:0 0 1rem}.sec-head--sm h2{font-size:1.08rem}
.link{font-size:.86rem;font-weight:600;color:var(--terra)}
.link:hover{color:var(--terra-d)}

/* KPIs */
.kpis{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.kpi{display:flex;align-items:center;gap:.85rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.15rem;box-shadow:var(--sh)}
.kpi__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:0 0 auto}
.kpi__ic .ic{width:24px;height:24px}
.kpi__ic--sage{background:rgba(126,139,106,.16);color:var(--olive-d)}
.kpi__ic--terra{background:var(--terra-soft);color:var(--terra-d)}
.kpi__ic--olive{background:rgba(176,170,142,.26);color:var(--moss)}
.kpi__n{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--ink);font-variation-settings:"opsz" 50}
.kpi__n .u{font-size:1rem;color:var(--muted)}
.kpi__l{font-size:.84rem;color:var(--muted);margin-top:.2rem}

/* Plant cards */
.plants{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.plant{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.plant:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.plant__art{height:152px;display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.plant__art.a1{background:radial-gradient(120% 120% at 70% 20%,#e8ecd9,#d6ddc2)}
.plant__art.a2{background:radial-gradient(120% 120% at 70% 20%,#eae7d2,#dcd6b8)}
.plant__art.a3{background:radial-gradient(120% 120% at 70% 20%,#e6ead7,#d3dcbe)}
.plant__art.a4{background:radial-gradient(120% 120% at 70% 20%,#ebe6d0,#ddd5b6)}
.botan{height:128px;width:auto;max-width:94%;object-fit:contain;filter:drop-shadow(-3px 7px 7px rgba(70,60,35,.18))}
.plant__b{padding:.95rem 1.05rem 1.1rem}
.plant__b h3{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink);display:flex;flex-direction:column;line-height:1.1}
.plant__b .sp{font-family:var(--body);font-style:italic;font-weight:400;font-size:.82rem;color:var(--muted);margin-top:.05rem}
.water{margin-top:.8rem;display:flex;align-items:center;gap:.6rem}
.water__bar{flex:1;height:6px;border-radius:99px;background:var(--sand-d);overflow:hidden}
.water__bar i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#9aa882,#7E8B6A);border-radius:99px}
.water__t{font-size:.78rem;font-weight:600;color:var(--olive-d);white-space:nowrap}
.water.due .water__bar i{background:linear-gradient(90deg,#e0a07f,#C77B57)}
.water.due .water__t{color:var(--terra-d)}

/* Right column cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.25rem 1.4rem;box-shadow:var(--sh)}
.card+.card{margin-top:1.2rem}
.pill{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--olive-d);background:rgba(126,139,106,.16);padding:.2rem .6rem;border-radius:var(--r-pill)}
.ic--spark{color:var(--terra);width:22px;height:22px}
.tasks{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.task{display:flex;align-items:center;gap:.8rem;padding:.6rem;border-radius:var(--r-sm);transition:.18s}
.task:hover{background:var(--sand)}
.task__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:0 0 auto;background:rgba(126,139,106,.16);color:var(--olive-d)}
.task__ic--sun{background:rgba(199,123,87,.15);color:var(--terra-d)}
.task__ic--drop{background:rgba(176,170,142,.26);color:var(--moss)}
.task__ic .ic{width:20px;height:20px}
.task__t{font-weight:600;font-size:.92rem;color:var(--ink)}
.task__s{font-size:.78rem;color:var(--muted);margin-top:.05rem}
.check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--sage);flex:0 0 auto;cursor:pointer;transition:.18s}
.check:hover{border-color:var(--olive);background:rgba(126,139,106,.15)}
.streak__big{font-family:var(--display);font-weight:700;font-size:2.1rem;color:var(--ink);display:flex;align-items:baseline;gap:.4rem;margin:.1rem 0 1rem}
.streak__big span{font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--muted)}
.heat{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.heat span{aspect-ratio:1;border-radius:4px;background:var(--sand-d)}
.heat span[data-l="1"]{background:#cdd3b4}
.heat span[data-l="2"]{background:#a6b186}
.heat span[data-l="3"]{background:#7E8B6A}
.streak__cap{font-size:.8rem;color:var(--muted);margin-top:.9rem;line-height:1.4}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){.content{grid-template-columns:1fr}.col-side{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.card+.card{margin-top:0}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:1rem;overflow-x:auto}
  .side .streak-card{display:none}.nav{flex-direction:row}
  .col-side{grid-template-columns:1fr}
}
@media (max-width:680px){.kpis{grid-template-columns:1fr}.plants{grid-template-columns:1fr}.search input{width:90px}.top__r{flex-wrap:wrap}}
/* ============================ PAGE PATTERNS ============================ */
.page-head{margin-bottom:.4rem}
.crumb{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--terra);margin-bottom:.5rem}
.crumb .ic{width:16px;height:16px}
/* filter chips */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem}
.chip{font-size:.85rem;font-weight:600;color:#6c6451;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:.42rem .95rem;cursor:pointer;transition:.18s}
.chip:hover{background:var(--sand)}
.chip.is-on{background:var(--olive-d);color:#f4efe0;border-color:var(--olive-d)}
/* wider plant grid + add card */
.plants--all{grid-template-columns:repeat(3,1fr)}
.add-card{display:grid;place-items:center;gap:.5rem;border:1.6px dashed #c3b896;border-radius:var(--r);color:var(--muted);background:rgba(255,252,242,.5);min-height:210px;cursor:pointer;font-weight:600;font-size:.9rem;transition:.18s}
.add-card:hover{background:var(--paper);border-color:var(--terra);color:var(--terra-d)}
.add-card .ic{width:30px;height:30px}
/* schedule week */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem}
.day{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .6rem;min-height:180px;box-shadow:var(--sh)}
.day.is-today{border-color:var(--terra);box-shadow:0 0 0 1px var(--terra),var(--sh)}
.day__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
.day__d{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--ink)}
.day__w{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wtask{display:flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;color:var(--olive-d);background:rgba(126,139,106,.13);border-radius:8px;padding:.3rem .4rem;margin-bottom:.35rem;line-height:1.2}
.wtask .ic{width:14px;height:14px;color:var(--olive)}
.wtask--due{color:var(--terra-d);background:var(--terra-soft)}.wtask--due .ic{color:var(--terra)}
/* plant detail */
.detail{display:grid;grid-template-columns:330px minmax(0,1fr);gap:1.5rem;align-items:start}
.detail__art{background:radial-gradient(120% 120% at 70% 18%,#e8ecd9,#d4dcbe);border:1px solid var(--line);border-radius:var(--r);height:300px;display:grid;place-items:center;box-shadow:var(--sh)}
.detail__art .botan{height:262px;width:auto;max-width:80%}
.streak-badge{width:56px;height:56px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 3px 5px rgba(70,60,35,.2))}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem .9rem;box-shadow:var(--sh)}
.stat__l{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.stat__v{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink);margin-top:.2rem}
.bars{display:flex;align-items:flex-end;gap:.5rem;height:130px;margin:.4rem 0 .2rem}
.bars .b{flex:1;background:linear-gradient(180deg,#9aa882,#7E8B6A);border-radius:6px 6px 3px 3px;min-height:8px}
.bars .b.due{background:linear-gradient(180deg,#e0a07f,#C77B57)}
.bars-x{display:flex;gap:.5rem;font-size:.72rem;color:var(--muted)}.bars-x span{flex:1;text-align:center}
.guide li{list-style:none;display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem;color:#544d3b}
.guide li:last-child{border:0}.guide .ic{width:18px;height:18px;color:var(--olive);flex:0 0 auto;margin-top:.1rem}
/* settings form */
.form{max-width:640px}
.form-sec{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem;box-shadow:var(--sh);margin-bottom:1.2rem}
.form-sec h2{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink);margin-bottom:1rem}
.field{margin-bottom:1rem}.field:last-child{margin:0}
.field label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.field input,.field select{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem}
.field input:focus,.field select:focus{outline:none;border-color:var(--terra)}
.row-set{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--line)}.row-set:last-child{border:0}
.row-set p{font-weight:600;font-size:.92rem}.row-set small{display:block;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:.1rem}
.toggle{width:44px;height:26px;border-radius:99px;background:var(--sand-d);border:0;position:relative;cursor:pointer;flex:0 0 auto;transition:.2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.toggle.on{background:var(--olive)}.toggle.on::after{left:21px}
.species{grid-template-columns:repeat(3,1fr)}
.badge-diff{font-size:.72rem;font-weight:700;color:var(--olive-d);background:rgba(126,139,106,.15);padding:.15rem .5rem;border-radius:99px}
@media (max-width:1080px){.plants--all,.species{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.week{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.plants--all,.species{grid-template-columns:1fr}.week{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}