:root{
  --bg:#08160d; --bg2:#0d2214; --panel:#0c1f12; --panel2:#102a19;
  --lime:#9fd14a; --lime2:#bdf25a; --green:#3f9e54; --green-d:#1d5b2e;
  --text:#e8f2e4; --muted:#9fb79c; --border:rgba(159,209,74,.16); --card:rgba(255,255,255,.03);
  --blue:#8ab6ff; --gold:#e8d13a;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
.hidden{display:none!important}
.muted{color:var(--muted)}
h1,h2,h3{margin:0;line-height:1.2}
button{font-family:inherit}
input,select{font-family:inherit}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:11px;
  font-weight:700;font-size:15px;cursor:pointer;border:none;color:#06210f;
  background:linear-gradient(135deg,var(--lime),var(--green));box-shadow:0 6px 20px rgba(159,209,74,.28);transition:all .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(159,209,74,.4)}
.btn-primary:disabled{opacity:.6;cursor:default;transform:none}
.btn-block{width:100%}

/* aurora (auth) */
.aurora{border-radius:50%;filter:blur(80px);opacity:.4;z-index:0}
.a1{width:480px;height:480px;background:radial-gradient(circle,#3f9e54,transparent 70%);top:-140px;right:-100px}
.a2{width:420px;height:420px;background:radial-gradient(circle,#9fd14a,transparent 70%);bottom:-160px;left:-120px}

/* ===== AUTH ===== */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:24px;overflow:hidden;
  background:radial-gradient(900px 500px at 70% -10%,#16401f,var(--bg) 60%)}
/* feuilles qui tombent */
.leaves{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.leaf-f{position:absolute;top:-40px;opacity:0;will-change:transform;animation:fall linear infinite}
@keyframes fall{0%{opacity:0;transform:translateY(-40px) rotate(0) translateX(0)}
  10%{opacity:.75}50%{transform:translateY(50vh) rotate(160deg) translateX(26px)}
  90%{opacity:.75}100%{opacity:0;transform:translateY(106vh) rotate(330deg) translateX(-10px)}}
.auth-body .aurora{animation:drift 16s ease-in-out infinite}
.auth-body .a2{animation-delay:-6s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(38px,-26px) scale(1.08)}66%{transform:translate(-26px,22px) scale(.95)}}
.auth-card{animation:cardIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.auth-logo{animation:logosway 5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes logosway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@media(prefers-reduced-motion:reduce){.leaf-f,.auth-body .aurora,.auth-card,.auth-logo{animation:none!important}}
.auth-card{position:relative;z-index:2;width:100%;max-width:410px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--border);border-radius:22px;padding:34px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.auth-logo{height:82px;margin-bottom:18px}
.auth-card h2{font-size:24px}
.auth-tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:5px;margin:20px 0}
.auth-tabs button{flex:1;padding:9px;border:none;background:none;color:var(--muted);font-weight:600;font-size:13.5px;border-radius:8px;cursor:pointer;transition:all .2s}
.auth-tabs button.active{background:rgba(159,209,74,.14);color:var(--lime)}
.auth-err{color:#ff8a7a;font-size:13px;min-height:18px;margin:6px 0}
.g-btn{width:100%;margin-top:14px;padding:11px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--muted);font-weight:600;font-size:14px;cursor:not-allowed;display:flex;align-items:center;justify-content:center;gap:9px}
.g-btn span{width:20px;height:20px;border-radius:50%;background:#fff;color:#333;display:grid;place-items:center;font-weight:800;font-size:12px}
.g-btn em{font-style:normal;font-size:11px;color:var(--lime);background:rgba(159,209,74,.12);padding:2px 7px;border-radius:999px}
.auth-links{text-align:right;margin:11px 2px 2px}
.auth-links a{color:var(--lime);font-size:13px;text-decoration:none;font-weight:500}
.auth-links a:hover{text-decoration:underline}
.auth-mini{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.auth-mini a{color:var(--lime);text-decoration:none}
.auth-contact{text-align:center;font-size:13px;color:var(--muted);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.auth-contact a{color:var(--lime);text-decoration:none;font-weight:500}
.auth-contact a:hover{text-decoration:underline}

/* fields (auth + onboarding) */
.ob-field{margin-bottom:15px}
.ob-field>label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.ob-field input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border);
  background:#0a1c11;color:var(--text);font-size:15px}
.ob-field input:focus{outline:none;border-color:var(--lime)}
.ob-row{display:flex;gap:12px}.ob-row .ob-field{flex:1}

/* ===== ONBOARDING ===== */
.onboard{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(900px 500px at 70% -10%,#16401f,var(--bg) 60%)}
.ob-card{width:100%;max-width:540px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--border);border-radius:22px;padding:32px;box-shadow:0 30px 70px rgba(0,0,0,.5);margin:auto}
.ob-logo{height:70px;margin-bottom:14px}
.ob-card h2{font-size:23px}
.ob-choices{display:flex;gap:10px}
.ob-choices button{flex:1;padding:12px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--text);font-weight:700;font-size:16px;cursor:pointer;transition:all .15s}
.ob-choices button.sel{background:rgba(159,209,74,.16);border-color:var(--lime);color:var(--lime)}
.ob-objs{display:flex;flex-direction:column;gap:9px}
.ob-objs button{text-align:left;padding:13px 15px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--text);font-weight:600;font-size:14.5px;cursor:pointer;transition:all .15s}
.ob-objs button.sel{background:rgba(159,209,74,.14);border-color:var(--lime)}
.ob-greenhouse{display:flex;align-items:center;justify-content:space-between}
.ob-greenhouse label{margin:0}
.switch{width:52px;height:28px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06);position:relative;cursor:pointer;padding:0;transition:background .2s}
.switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--green));transition:left .25s}
.switch.on{background:rgba(159,209,74,.2)}.switch.on i{left:27px}
.ob-crops{display:flex;flex-wrap:wrap;gap:8px}
.ob-crops .chip{padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--text);font-size:13.5px;cursor:pointer;transition:all .15s;user-select:none}
.ob-crops .chip.sel{background:rgba(159,209,74,.16);border-color:var(--lime);color:var(--lime)}
#ob-submit{margin-top:10px}

/* ===== APP SHELL ===== */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--panel2),var(--bg));border-right:1px solid var(--border);
  padding:20px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-logo img{height:62px;margin:4px 6px 18px}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.side-nav button{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;border:none;background:none;
  color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;text-align:left;transition:all .15s}
.side-nav button:hover{background:rgba(255,255,255,.04);color:var(--text)}
.side-nav button.active{background:rgba(159,209,74,.14);color:var(--lime)}
.side-foot{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);padding-top:12px}
.side-edit{display:block;padding:9px 13px;border-radius:10px;border:none;background:none;color:var(--muted);
  font-size:13px;font-weight:500;cursor:pointer;text-align:left;text-decoration:none}
.side-edit:hover{color:var(--text);background:rgba(255,255,255,.04)}

.main{min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 30px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:rgba(8,22,13,.8);backdrop-filter:blur(12px);z-index:10}
.topbar h1{font-size:21px}.topbar .muted{font-size:13px}
.topbar-auto{text-align:right}.topbar-auto .muted{display:block;font-size:11px}
.topbar-auto b{font-size:22px;color:var(--lime);font-weight:900}
.view{padding:28px 30px 60px}
@media(max-width:780px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow:auto}
  .side-nav{flex-direction:row;flex-wrap:wrap}.side-logo img{margin:6px}.side-foot{flex-direction:row}}

/* cards & widgets */
.grid{display:grid;gap:18px}
.cards4{grid-template-columns:repeat(4,1fr)}
.cards2{grid-template-columns:1.3fr 1fr}
@media(max-width:920px){.cards4{grid-template-columns:1fr 1fr}.cards2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px}
.card h3{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:12px}
.kpi{font-size:34px;font-weight:900;color:var(--lime);letter-spacing:-1px}
.kpi small{font-size:14px;color:var(--muted);font-weight:500}
.card{transition:border-color .2s,transform .2s,box-shadow .2s}

/* overview soigné */
.ov-head{margin-bottom:20px}
.ov-hello{font-size:25px;font-weight:800;letter-spacing:-.5px}
.ov-hero{grid-template-columns:1.5fr 1fr}
@media(max-width:920px){.ov-hero{grid-template-columns:1fr}}
.hero-auto{display:flex;align-items:center;gap:24px}
.hero-auto-txt h3{font-size:16px;color:var(--text);font-weight:700;margin-bottom:6px}
.hero-auto-txt p{font-size:13.5px}
.chips{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.ch{font-size:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted)}
.ch.warn{color:#ffb37a;border-color:rgba(255,150,90,.35)}
.tip-card{display:flex;gap:15px;align-items:flex-start}
.tip-card h3{color:var(--text);font-size:15px;font-weight:700;margin-bottom:6px}
.tip-card p{font-size:14px;color:var(--muted);line-height:1.55}
.tip-bot{width:84px;height:auto;flex:0 0 auto;object-fit:contain;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}

/* ===== MARCEL · chat ancré à droite ===== */
.marcel{position:fixed;right:22px;bottom:22px;z-index:120}
.marcel-fab{display:flex;align-items:center;gap:9px;padding:7px 18px 7px 7px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(159,209,74,.4);background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#eaf6e2;font-weight:700;font-size:14px;box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .2s}
.marcel-fab:hover{transform:translateY(-2px)}
.marcel-fab img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.marcel.open .marcel-fab{display:none}
.marcel-panel{position:fixed;right:22px;bottom:22px;width:370px;max-width:calc(100vw - 40px);
  height:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);overflow:hidden;animation:marcelIn .25s cubic-bezier(.2,.9,.3,1)}
@keyframes marcelIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.marcel-head{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(63,158,84,.25),transparent)}
.marcel-head img{width:52px;height:52px;object-fit:contain}
.marcel-id{flex:1;line-height:1.25}.marcel-id b{font-size:15px}.marcel-id span{display:block;font-size:12px;color:var(--muted)}
.marcel-head button{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px}
.marcel-head button:hover{color:var(--text)}
.marcel-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px}
.marcel-log .msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5}
.marcel-log .msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--green),var(--lime));color:#06210f;font-weight:500;border-bottom-right-radius:4px}
.marcel-log .msg.bot{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--border);border-bottom-left-radius:4px}
.marcel-suggest{display:flex;gap:7px;flex-wrap:wrap;padding:0 14px 10px}
.marcel-suggest button{padding:7px 11px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-size:12px;cursor:pointer}
.marcel-suggest button:hover{color:var(--lime);border-color:var(--lime)}
.marcel-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border)}
.marcel-input input{flex:1;padding:11px 13px;border-radius:11px;border:1px solid var(--border);background:#0a1c11;color:var(--text);font-size:14px}
.marcel-input input:focus{outline:none;border-color:var(--lime)}
.marcel-input button{width:44px;border:none;border-radius:11px;cursor:pointer;color:#06210f;font-size:15px;
  background:linear-gradient(135deg,var(--lime),var(--green))}
@media(max-width:520px){.marcel-panel{right:12px;left:12px;bottom:12px;width:auto;height:70vh}}

/* KPI strip */
.kpi-strip{grid-template-columns:repeat(4,1fr);margin-top:18px}
@media(max-width:920px){.kpi-strip{grid-template-columns:1fr 1fr}}
.kpi-c{display:flex;gap:13px;align-items:center}
.kpi-c:hover{transform:translateY(-3px);border-color:rgba(159,209,74,.4)}
.kpi-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex:0 0 auto;
  background:linear-gradient(135deg,rgba(159,209,74,.18),rgba(63,158,84,.1));border:1px solid var(--border)}
.kpi-v{font-size:21px;font-weight:800;color:var(--lime);line-height:1.15;letter-spacing:-.3px}
.kpi-l{font-size:13px;font-weight:600;margin-top:1px}
.kpi-s{font-size:11.5px;margin-top:1px}

/* calendrier : mois en cours */
.cal-cell.now{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 26px rgba(159,209,74,.14)}
.cal-cell h4{display:flex;align-items:center;justify-content:space-between}
.cal-now{font-size:9.5px;font-weight:700;color:#06210f;background:var(--lime);padding:2px 7px;border-radius:999px}

/* ring */
.ring{position:relative;width:130px;height:130px;margin:4px auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:10}
.ring .pr{fill:none;stroke:var(--lime);stroke-width:10;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset 1.2s cubic-bezier(.3,1,.4,1)}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .c b{font-size:30px;font-weight:900;color:var(--lime)}.ring .c span{font-size:11px;color:var(--muted)}

/* bars (plan/autonomy) */
.barline{display:grid;grid-template-columns:1fr 70px;gap:10px;align-items:center;margin:11px 0;font-size:14px}
.bar{height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;grid-column:1/-1}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--green),var(--lime));width:0;transition:width 1s cubic-bezier(.3,1,.4,1)}
.row-h{display:flex;justify-content:space-between;align-items:center;margin:14px 0 4px}
.row-h b{color:var(--lime)}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}
.tbl td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.tbl tr:last-child td{border-bottom:none}
.cov{display:inline-block;min-width:42px;text-align:right;color:var(--lime);font-weight:700}
.mini-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;width:120px}
.mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime))}

/* next actions */
.acts{display:flex;flex-direction:column;gap:9px}
.act{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.act .am{font-size:11px;color:var(--muted);width:42px}
.act .ae{font-size:18px}
.tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;margin-left:auto}
.tag.semis{background:rgba(159,209,74,.14);color:var(--lime)}
.tag.plant{background:rgba(63,158,84,.2);color:#7fe39a}
.tag.recolte{background:rgba(232,209,58,.14);color:var(--gold)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:920px){.cal{grid-template-columns:1fr 1fr}}
.cal-cell{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px;min-height:96px}
.cal-cell.empty{opacity:.5}
.cal-cell h4{font-size:13px;margin-bottom:9px}
.cal-cell .chip{font-size:11px;padding:5px 8px;border-radius:7px;margin-bottom:5px;display:flex;gap:5px}
.chip.semis{background:rgba(159,209,74,.13);color:var(--lime)}
.chip.plant{background:rgba(63,158,84,.18);color:#7fe39a}
.chip.recolte{background:rgba(232,209,58,.13);color:var(--gold)}

/* garden plan */
.garden{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:6px}
.gplot{border-radius:12px;min-height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:8px;color:#fff;font-weight:600;font-size:12px;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 30px rgba(0,0,0,.2)}
.gplot small{font-weight:500;opacity:.85;font-size:10.5px;margin-top:3px}

/* assistant */
.chat{display:flex;flex-direction:column;height:calc(100vh - 220px);min-height:380px}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.msg{max-width:75%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--green),var(--lime));color:#06210f;font-weight:500;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--border);border-bottom-left-radius:5px}
.chat-suggest{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chat-suggest button{padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-size:13px;cursor:pointer}
.chat-suggest button:hover{color:var(--lime);border-color:var(--lime)}
.chat-input{display:flex;gap:10px;margin-top:8px}
.chat-input input{flex:1;padding:13px 15px;border-radius:12px;border:1px solid var(--border);background:#0a1c11;color:var(--text);font-size:15px}
.chat-input input:focus{outline:none;border-color:var(--lime)}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.section-title{font-size:18px;margin-bottom:16px}

/* ===== Abonnement ===== */
.bill-cur{padding:14px 18px;font-size:14px;margin-bottom:18px}
.bill-cur a{color:var(--lime);text-decoration:none}
.bill-toggle2{display:flex;align-items:center;justify-content:center;gap:13px;margin:6px 0 22px}
.bill-toggle2 span{font-size:14px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px;cursor:pointer}
.bill-toggle2 span.on{color:var(--text)}
.bill-toggle2 em{font-style:normal;font-size:11px;font-weight:700;color:#06210f;background:linear-gradient(135deg,var(--lime),var(--green));padding:3px 9px;border-radius:999px}
.bill-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:900px){.bill-grid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;position:relative}
.pcard.featured{border-color:var(--lime);background:linear-gradient(180deg,rgba(159,209,74,.08),var(--card));box-shadow:0 16px 40px rgba(159,209,74,.12)}
.pcard.current{outline:2px solid var(--lime);outline-offset:-2px}
.pc-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--lime),var(--green));color:#06210f;font-size:11px;font-weight:700;padding:4px 13px;border-radius:999px;white-space:nowrap}
.pc-name{font-weight:700;color:var(--lime);text-transform:uppercase;letter-spacing:1px;font-size:13px;margin-top:4px}
.pc-price{font-size:34px;font-weight:900;margin:8px 0 2px;letter-spacing:-1px}
.pc-price span{font-size:14px;font-weight:500;color:var(--muted)}
.pc-yr{color:var(--lime);font-size:12.5px;font-weight:600;min-height:17px}
.pc-sub{font-size:13px;margin:8px 0 14px}
.pcard ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.pcard li{font-size:13.5px}
.pcard .btn-primary,.pcard .btn-ghost2{margin-top:auto}
.btn-ghost2{width:100%;padding:11px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-weight:600;font-size:14px}

/* =================================================================
   ===== POTAGER VIVANT · Vue d'ensemble redessinée ================
   ================================================================= */

/* --- bandeau saisonnier --- */
.season-hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);
  padding:26px 30px;min-height:178px;display:flex;align-items:center;gap:26px;margin-bottom:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.4)}
.season-hero .sky{position:absolute;inset:0;z-index:0}
/* palettes de ciel par saison */
.s-printemps .sky{background:linear-gradient(160deg,#9fd8e8 0%,#c8ecc4 55%,#0d2214 130%)}
.s-ete .sky{background:linear-gradient(160deg,#7ec8f0 0%,#bfe88a 55%,#0d2214 130%)}
.s-automne .sky{background:linear-gradient(160deg,#e8b06a 0%,#c98a4a 50%,#0d2214 130%)}
.s-hiver .sky{background:linear-gradient(160deg,#9fb6cf 0%,#6d8aa3 50%,#0d2214 135%)}
.season-hero .clouds{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background:radial-gradient(120px 50px at 25% 30%,rgba(255,255,255,.55),transparent 70%),
             radial-gradient(160px 60px at 70% 22%,rgba(255,255,255,.4),transparent 70%);
  animation:cloudDrift 38s linear infinite}
@keyframes cloudDrift{from{background-position:0 0,0 0}to{background-position:240px 0,-300px 0}}

/* soleil = jauge d'autonomie */
.season-hero .sun{position:relative;z-index:2;width:118px;height:118px;flex:0 0 auto;border-radius:50%;
  display:grid;place-content:center;text-align:center;color:#06210f;
  background:conic-gradient(#ffd23f calc(var(--p)*1%),rgba(6,33,15,.22) 0);
  box-shadow:0 0 0 6px rgba(255,210,63,.18),0 0 42px rgba(255,210,63,.5);
  animation:sunGlow 4s ease-in-out infinite}
@keyframes sunGlow{0%,100%{box-shadow:0 0 0 6px rgba(255,210,63,.18),0 0 42px rgba(255,210,63,.45)}
  50%{box-shadow:0 0 0 8px rgba(255,210,63,.24),0 0 60px rgba(255,210,63,.7)}}
.season-hero .sun::before{content:"";position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff2c4,#ffce3a 72%)}
.season-hero .sun b{position:relative;z-index:1;font-size:30px;font-weight:900;line-height:1;letter-spacing:-1px}
.season-hero .sun b i{font-style:normal;font-size:15px;font-weight:800}
.season-hero .sun span{position:relative;z-index:1;display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.8;margin-top:2px}
.sh-copy{position:relative;z-index:2;flex:1;color:#06210f}
.sh-season{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;background:rgba(6,33,15,.14);display:inline-block;padding:4px 11px;border-radius:999px;margin-bottom:9px}
.sh-copy h2{font-size:27px;font-weight:900;letter-spacing:-.6px}
.sh-copy p{margin:5px 0 0;font-size:14.5px;font-weight:600;color:#13371f}
.sh-marcel{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;max-width:300px}
.sh-marcel img{width:96px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));animation:bob 3s ease-in-out infinite}
.sh-marcel .bubble{background:rgba(255,255,255,.92);color:#13371f;font-size:12.8px;font-weight:600;line-height:1.45;
  padding:11px 14px;border-radius:15px 15px 4px 15px;box-shadow:0 8px 22px rgba(0,0,0,.25);position:relative}
.sh-marcel .bubble::after{content:"";position:absolute;right:-7px;bottom:9px;border:7px solid transparent;border-left-color:rgba(255,255,255,.92);border-right:0}
@media(max-width:900px){.season-hero{flex-wrap:wrap;gap:16px}.sh-marcel{max-width:100%;order:3}.sh-marcel img{width:74px}}

/* --- planche de potager (vue de dessus) --- */
.potager{border-radius:22px;border:1px solid var(--border);padding:20px 20px 24px;margin-bottom:24px;
  background:
    radial-gradient(circle at 18% 22%,rgba(0,0,0,.18) 1px,transparent 2px) 0 0/22px 22px,
    radial-gradient(circle at 60% 70%,rgba(0,0,0,.14) 1px,transparent 2px) 0 0/26px 26px,
    linear-gradient(160deg,#3a2a1c,#241910 70%)}
.pot-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:6px}
.pot-head h3{font-size:16px;font-weight:800;color:#f3e6d2}
.pot-head .muted{font-size:12.5px;color:#c9b79e}
.beds{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}

.bed{position:relative;border-radius:15px;padding:0;overflow:hidden;background:#1b1108;
  border:1px solid rgba(0,0,0,.4);box-shadow:inset 0 2px 0 rgba(255,255,255,.05),0 6px 16px rgba(0,0,0,.32);
  transition:transform .18s,box-shadow .18s}
.bed:hover{transform:translateY(-3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.45)}
/* terre labourée : sillons + teinte de la culture */
.bed-soil{position:relative;min-height:92px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:5px 8px;padding:16px 12px 14px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 13px),
    linear-gradient(180deg,color-mix(in srgb,var(--c) 32%,#2a1c10),#2a1c10)}
.bed.st-attente .bed-soil,.bed.st-repos .bed-soil{background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 13px),linear-gradient(180deg,#3a2a1c,#241910)}
.sprout{font-size:21px;line-height:1;display:inline-block;transform-origin:50% 90%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));
  animation:sway 3.4s ease-in-out infinite;animation-delay:var(--d)}
.bed.st-attente .sprout{font-size:8px;opacity:.5;animation:none;color:#8a7355}
.bed.st-recolte .sprout{font-size:23px;animation:ripe 2.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes ripe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.08)}}
.bed-more{font-size:11px;font-weight:700;color:#f3e6d2;background:rgba(0,0,0,.35);padding:3px 8px;border-radius:999px;align-self:center}
.bed-grow{height:5px;background:rgba(0,0,0,.45)}
.bed-grow i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--lime));transition:width 1.1s cubic-bezier(.3,1,.4,1)}
.bed-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 4px}
.bed-name{font-size:13.5px;font-weight:700;color:#f3e6d2}
.bed-stage{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.bed-stage.st-recolte{background:rgba(232,209,58,.2);color:var(--gold)}
.bed-stage.st-pousse{background:rgba(63,158,84,.28);color:#8fe6a6}
.bed-stage.st-semis,.bed-stage.st-plant{background:rgba(159,209,74,.2);color:var(--lime)}
.bed-stage.st-attente,.bed-stage.st-repos{background:rgba(255,255,255,.08);color:#c9b79e}
.bed-meta{font-size:11.5px;color:#c9b79e;padding:0 12px 12px}
@media(max-width:520px){.beds{grid-template-columns:1fr 1fr}}

/* --- colonnes : panneaux + sachets --- */
.garden-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media(max-width:920px){.garden-cols{grid-template-columns:1fr}}
.garden-cols h3{font-size:15px;font-weight:800;margin-bottom:13px}
/* panneaux en bois plantés dans la terre */
.signs{display:flex;flex-direction:column;gap:11px}
.sign{position:relative;display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:11px;
  background:linear-gradient(180deg,#6b4a2e,#523719);border:1px solid #3d2912;color:#f3e6d2;
  box-shadow:0 5px 14px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);
  background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.06) 0 3px,transparent 3px 9px),linear-gradient(180deg,#6b4a2e,#523719)}
.sign::before{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:9px;background:#3d2912;transform:translateX(-50%);border-radius:0 0 2px 2px}
.sign .sg-em{font-size:20px}
.sign .sg-tx{flex:1;font-size:13.5px;font-weight:600}
.sign em{font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.sign-semis em{background:rgba(159,209,74,.22);color:var(--lime)}
.sign-plant em{background:rgba(63,158,84,.28);color:#8fe6a6}
.sign-recolte em{background:rgba(232,209,58,.2);color:var(--gold)}

/* sachets de graines */
.packets{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.packet{background:var(--card);border:1px dashed var(--border);border-radius:14px;padding:14px;text-align:center;
  position:relative;transition:transform .18s,border-color .18s}
.packet::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--green),var(--lime));opacity:.5}
.packet:hover{transform:translateY(-2px);border-color:rgba(159,209,74,.45)}
.pk-ic{font-size:24px;margin-bottom:5px}
.pk-v{font-size:20px;font-weight:900;color:var(--lime);letter-spacing:-.4px}
.pk-l{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}

/* ===== Sélecteur de thème (raccourci sidebar + page Apparence) ===== */
.theme-quick{display:flex;gap:5px;justify-content:center;padding:8px 4px 10px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.theme-quick button{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  font-size:16px;cursor:pointer;display:grid;place-items:center;transition:all .15s;line-height:1}
.theme-quick button:hover{transform:translateY(-2px);border-color:rgba(159,209,74,.5)}
.theme-quick button.on{background:rgba(159,209,74,.18);border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}

.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.theme-grid{grid-template-columns:1fr}}
.theme-card{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:18px;color:var(--text);transition:transform .18s,border-color .18s,box-shadow .18s}
.theme-card:hover{transform:translateY(-3px);border-color:rgba(159,209,74,.5);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.theme-card.sel{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime),0 14px 34px rgba(0,0,0,.4)}
.tc-prev{position:relative;height:118px;overflow:hidden;display:grid;place-items:center}
.tc-prev .tc-sky{position:absolute;inset:0}
.tc-prev .tc-orb{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%}
.tc-prev .tc-plot{position:absolute;bottom:14px;width:26px;height:30px;border-radius:6px}
.tc-prev .tc-plot:nth-of-type(3){left:24%}.tc-prev .tc-plot:nth-of-type(4){left:42%}.tc-prev .tc-plot:nth-of-type(5){left:60%}
.tc-prev .tc-emoji{position:relative;z-index:2;font-size:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* aperçu thème "vivant" par défaut (les thèmes surchargent via [data-theme] plus bas) */
.tc-vivant .tc-sky{background:linear-gradient(160deg,#7ec8f0,#bfe88a 55%,#0d2214)}
.tc-vivant .tc-orb{background:radial-gradient(circle at 38% 34%,#fff2c4,#ffce3a 72%);box-shadow:0 0 16px rgba(255,210,63,.6)}
.tc-vivant .tc-plot{background:linear-gradient(180deg,#3a2a1c,#241910)}
.tc-cozy .tc-sky{background:linear-gradient(160deg,#ffe0a3,#bdec8e)}
.tc-cozy .tc-orb{background:#ffd23f}.tc-cozy .tc-plot{background:#8bd45a;border-radius:10px}
.tc-carnet .tc-sky{background:#efe4cf}.tc-carnet .tc-orb{background:#b9543f}
.tc-carnet .tc-plot{background:#7c8a4a;border-radius:3px}
.tc-cockpit .tc-sky{background:linear-gradient(160deg,#0a1830,#06210f)}
.tc-cockpit .tc-orb{background:radial-gradient(circle,#9fffce,#1a8f5a);box-shadow:0 0 16px rgba(120,255,180,.7)}
.tc-cockpit .tc-plot{background:#0e2a3a;border:1px solid rgba(120,255,180,.4)}
.tc-simple .tc-sky{background:linear-gradient(160deg,#eef7ec,#dcefd6)}
.tc-simple .tc-orb{background:#4caf6a;box-shadow:0 0 12px rgba(76,175,106,.45)}
.tc-simple .tc-plot{background:#5bbd72;border-radius:8px}
.tc-body{padding:14px 16px 16px}.tc-body b{font-size:15px}.tc-body p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.tc-check{position:absolute;top:12px;left:12px;z-index:3;font-size:11px;font-weight:800;color:#06210f;background:var(--lime);
  padding:4px 10px;border-radius:999px;opacity:0;transform:translateY(-4px);transition:all .2s}
.theme-card.sel .tc-check{opacity:1;transform:none}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);z-index:300;opacity:0;
  background:linear-gradient(135deg,var(--green),var(--green-d));color:#eaf6e2;font-weight:600;font-size:14px;
  padding:13px 22px;border-radius:14px;border:1px solid rgba(159,209,74,.4);box-shadow:0 14px 40px rgba(0,0,0,.5);transition:all .35s cubic-bezier(.2,.9,.3,1)}
.toast.in{opacity:1;transform:translate(-50%,0)}