/* ================= Chlorophylle — feuille de style ================= */

:root{
  --bg:#f4f7f2;
  --bg-soft:#ffffff;
  --bg-elev:#ffffff;
  --line:#e2e8dd;
  --txt:#1d2a20;
  --txt-soft:#5f6f62;
  --green:#3f8f5b;
  --green-dark:#2f6e46;
  --green-soft:#e6f2e9;
  --sun:#e2a13c;
  --water:#3b8fd4;
  --danger:#c9503f;
  /* Rouge La Bonne Graine : couleur d'accent de la boutique (bandeau de
     navigation, logo tomate). Le vert reste la couleur fonctionnelle de
     l'app (arrosage, validation), le rouge sert à l'identité. */
  --rouge:#d81f26;
  --rouge-dark:#b3161c;
  --radius:3px;
  --shadow:0 1px 2px rgba(30,60,40,.06), 0 6px 18px rgba(30,60,40,.05);
  --font:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  /* titres en serif, comme les accroches de labonnegraine.com */
  --font-titre:Georgia, "Iowan Old Style", "Times New Roman", serif;
}

body.dark{
  --bg:#12170f;
  --bg-soft:#1a2116;
  --bg-elev:#1f2819;
  --line:#2e3a28;
  --txt:#e8f0e4;
  --txt-soft:#9db09a;
  --green:#63b57e;
  --green-dark:#7ecb96;
  --green-soft:#22301f;
  --shadow:0 2px 10px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  transition:background .3s, color .3s;
}
.hidden{display:none !important}
.muted{color:var(--txt-soft);font-weight:400}
button{font-family:inherit}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:12px;
  padding:11px 18px;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:transform .12s, filter .2s, background .2s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--bg-soft);border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--green)}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:.85rem;border-radius:10px}
.icon-btn{
  background:transparent;border:1px solid var(--line);color:var(--txt);
  width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1rem;
}
.icon-btn:hover{border-color:var(--green)}

/* ---------- connexion ---------- */
.auth-screen{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(63,143,91,.22), transparent 60%),
    radial-gradient(800px 400px at 110% 110%, rgba(226,161,60,.18), transparent 60%),
    var(--bg);
}
.auth-card{
  width:min(420px,100%);background:var(--bg-elev);border:1px solid var(--line);
  border-radius:24px;padding:32px;box-shadow:var(--shadow);
}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand .leaf{font-size:2.6rem;display:block}
/* logo tomate détouré (fond transparent) */
.brand-logo{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 6px}
.brand-logo-sm{width:34px;height:34px;object-fit:contain;flex:none}
.auth-brand h1{margin:6px 0 2px;font-size:1.6rem;letter-spacing:-.5px}
.auth-brand p{margin:0;color:var(--txt-soft);font-size:.9rem}
.tabs{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:20px}
.tab{
  flex:1;border:0;background:transparent;padding:9px;border-radius:9px;
  cursor:pointer;font-weight:600;color:var(--txt-soft);font-size:.9rem;
}
.tab.active{background:var(--bg-elev);color:var(--green);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.auth-form{display:flex;flex-direction:column;gap:14px}
label{display:block;font-size:.85rem;font-weight:600;color:var(--txt-soft)}
input[type=text],input[type=password],input[type=search],input[type=number],input[type=date],select,textarea{
  width:100%;margin-top:6px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg);color:var(--txt);font-size:.95rem;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.form-error{color:var(--danger);font-size:.85rem;margin:0;min-height:1em}
.form-hint{color:var(--txt-soft);font-size:.82rem;margin:8px 0 0}
.auth-note{margin:18px 0 0;font-size:.75rem;color:var(--txt-soft);text-align:center;line-height:1.5}

/* ---------- structure ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:var(--bg-elev);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.topbar-left{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.topbar-left .leaf{font-size:1.3rem}
.topbar-right{display:flex;align-items:center;gap:8px}
.weather-chip{
  display:flex;align-items:center;gap:7px;background:var(--green-soft);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--txt);
}

.nav{
  display:flex;gap:4px;padding:8px 14px;background:var(--bg-elev);
  border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:57px;z-index:19;
}
.nav::-webkit-scrollbar{display:none}
.nav-item{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  border:0;background:transparent;color:var(--txt-soft);
  padding:9px 14px;border-radius:11px;cursor:pointer;font-weight:600;font-size:.9rem;
}
.nav-item span{font-size:1.05rem}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--green-soft);color:var(--green-dark)}

.main{flex:1;width:min(1000px,100%);margin:0 auto;padding:24px 20px 60px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.view-title{font-size:1.5rem;margin:0 0 4px;letter-spacing:-.4px}
.view-sub{color:var(--txt-soft);margin:0 0 20px;font-size:.92rem;line-height:1.5}
.section-title{font-size:1rem;margin:28px 0 12px;color:var(--txt-soft);text-transform:uppercase;letter-spacing:.6px;font-size:.78rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row .search{flex:1;min-width:180px}
.search{margin-top:0}
.empty{color:var(--txt-soft);font-size:.9rem;background:var(--bg-soft);border:1px dashed var(--line);
  border-radius:var(--radius);padding:22px;text-align:center;line-height:1.6}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}
.stat{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.stat b{display:block;font-size:1.8rem;color:var(--green)}
.stat span{font-size:.8rem;color:var(--txt-soft)}
.stat.urgent b{color:var(--water)}

/* ---------- cartes plantes ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.plant-card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s, border-color .2s;
}
.plant-card:hover{transform:translateY(-3px);border-color:var(--green)}
.plant-thumb{height:130px;background:var(--green-soft);display:grid;place-items:center;font-size:2.6rem;overflow:hidden}
.plant-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.plant-body{padding:12px 14px}
.plant-body h4{margin:0 0 3px;font-size:1rem}
.plant-body .sci{font-style:italic;color:var(--txt-soft);font-size:.8rem;margin:0 0 10px}
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;
  padding:4px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);
}
.badge.thirsty{background:rgba(59,143,212,.16);color:var(--water)}
.badge.late{background:rgba(201,80,63,.14);color:var(--danger)}

/* ---------- listes ---------- */
.list{display:flex;flex-direction:column;gap:9px}
.list-item{
  display:flex;align-items:center;gap:13px;background:var(--bg-elev);
  border:1px solid var(--line);border-radius:13px;padding:12px 14px;cursor:pointer;
}
.list-item:hover{border-color:var(--green)}
.list-item .li-icon{font-size:1.5rem;width:38px;height:38px;display:grid;place-items:center;
  background:var(--green-soft);border-radius:10px;overflow:hidden;flex:none}
.list-item .li-icon img{width:100%;height:100%;object-fit:cover}
.list-item .li-main{flex:1;min-width:0}
.list-item .li-main b{display:block;font-size:.95rem}
.list-item .li-main small{color:var(--txt-soft)}

/* ---------- identification ---------- */
.id-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cam-wrap{background:#000;border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.cam-wrap video{width:100%;max-height:60vh;display:block;object-fit:cover}
.cam-controls{display:flex;gap:10px;padding:12px;justify-content:center;background:var(--bg-elev)}
.id-preview{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:18px;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.id-preview img{width:100%;border-radius:12px;object-fit:cover;max-height:320px}
.id-result h3{margin:0 0 6px}
.id-result .sci{font-style:italic;color:var(--txt-soft);margin:0 0 14px}
.id-result p{line-height:1.6;font-size:.92rem}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.fact{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.fact b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-soft)}
.fact span{font-size:.9rem}

/* ---------- frise de croissance ---------- */
.timeline{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:18px}
.timeline > b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--txt-soft);margin-bottom:10px}
.timeline.empty-tl p{margin:0;font-size:.85rem;line-height:1.5}
.tl-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:12px}
.tl-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--sun));
  border-radius:99px;transition:width .4s}
.tl-step{display:flex;align-items:baseline;gap:9px;padding:5px 0;font-size:.88rem}
.tl-dot{width:18px;flex:none;text-align:center;color:var(--txt-soft);font-size:.8rem}
.tl-step.done .tl-dot{color:var(--green);font-weight:700}
.tl-name{font-weight:600;flex:none}
.tl-date{color:var(--txt-soft);margin-left:auto;text-align:right;font-size:.82rem}
.tl-date em{font-style:normal;opacity:.8}

/* ---------- retour sur l'identification ---------- */
.verdict{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.verdict > span{font-size:.85rem;color:var(--txt-soft);margin-right:auto}
.btn-shop{background:var(--sun);color:#fff;border-color:var(--sun)}
.btn-shop:hover{filter:brightness(1.08)}
.sp-actions{display:flex;gap:6px;align-items:center;flex:none}

/* ---------- catalogue ---------- */
.cat-filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.cat-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg-elev);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:.85rem;font-weight:600;color:var(--txt-soft);cursor:pointer;
}
.cat-chip:hover{border-color:var(--green);color:var(--green)}
.cat-chip.active{background:var(--green);border-color:var(--green);color:#fff}
.cat-chip b{font-weight:700;opacity:.7;font-size:.78rem}
.cat-chip.active b{opacity:.85}
.cat-count{font-size:.8rem;margin:0 0 10px}
.cat-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--txt-soft);
  font-weight:700;margin:18px 0 8px;display:flex;align-items:center;gap:7px}
.cat-head:first-child{margin-top:4px}

/* ---------- calendrier ---------- */
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0;
  font-size:.72rem;color:var(--txt-soft);text-align:center;text-transform:uppercase;letter-spacing:.5px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{
  min-height:78px;background:var(--bg-elev);border:1px solid var(--line);border-radius:11px;
  padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s;
}
.cal-cell:hover{border-color:var(--green)}
.cal-cell.out{opacity:.35}
.cal-cell.today{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.cal-cell.selected{background:var(--green-soft)}
.cal-num{font-size:.78rem;font-weight:700;color:var(--txt-soft)}
.cal-dots{display:flex;flex-wrap:wrap;gap:3px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--water)}
.dot.late{background:var(--danger)}
.cal-temp{font-size:.65rem;color:var(--txt-soft);margin-top:auto}
.day-detail{margin-top:18px}

/* ---------- chat ---------- */
.chat-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cyril-avatar{width:64px;height:auto;flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
.voice-panel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;text-align:center}
/* Le nuage de graines n'a pas de pastille derrière lui : c'est la formation
   elle-même qui porte l'état. Trois formations se relaient —
     micro     : l'utilisateur parle
     question  : Cyril prépare sa réponse, AUCUN son ne sort encore
     tomate    : la réponse est réellement en train d'être lue
   La tomate n'apparaît qu'au vrai démarrage de l'audio (événement
   « cyril-parle » émis par js/voice.js) : sinon on verrait une bouche
   s'agiter en silence. */
.voice-mic{width:170px;height:170px;border:none;background:none;padding:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.voice-morph{width:100%;height:100%;overflow:visible}

.voice-morph .grp{
  transform-origin:60px 66px;
  transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.25,.64,1);
}
/* au repos et à l'écoute : le micro */
.voice-morph .grp-mic{opacity:1}
.voice-morph .grp-question,
.voice-morph .grp-tomate{opacity:0;transform:scale(.6)}

/* Cyril réfléchit : point d'interrogation */
.voice-mic.pending .grp-mic{opacity:0;transform:scale(.6)}
.voice-mic.pending .grp-question{opacity:1;transform:scale(1)}

/* Cyril parle pour de vrai : la tomate */
.voice-mic.speaking .grp-mic{opacity:0;transform:scale(.55) rotate(10deg)}
.voice-mic.speaking .grp-question{opacity:0;transform:scale(.6)}
.voice-mic.speaking .grp-tomate{opacity:1;transform:scale(1)}

.voice-morph use{fill:var(--green);stroke:var(--bg-elev);stroke-width:.6px;paint-order:stroke}
.voice-morph .tomate-corps use{fill:var(--rouge,#d81f26)}
.voice-morph .tomate-feuilles use{fill:var(--green)}
.voice-morph .grp-question use{fill:var(--green-dark)}

.voice-morph .tomate-visage{opacity:0;transition:opacity .3s .2s}
.voice-mic.speaking .tomate-visage{opacity:1}
.voice-morph .oeil{fill:#2a1410}

/* bouche : ouverture irrégulière tant que le son passe */
.voice-morph .bouche{fill:#7a1410;transform-origin:60px 84px;transform:scaleY(.15)}
.voice-mic.speaking .bouche{animation:parle .32s ease-in-out infinite alternate}
@keyframes parle{
  0%  {transform:scaleY(.14) scaleX(.88)}
  55% {transform:scaleY(.8)  scaleX(1)}
  100%{transform:scaleY(1)   scaleX(1.06)}
}

/* écoute : les graines de la capsule scintillent, l'arceau respire */
.voice-mic.listening .grp-mic{animation:respire 1.5s ease-in-out infinite}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.voice-mic.listening .grp-mic > use{animation:graine-vibre 1.1s ease-in-out infinite}
.voice-mic.listening .grp-mic > use:nth-child(3n){animation-delay:.15s}
.voice-mic.listening .grp-mic > use:nth-child(3n+1){animation-delay:.35s}
.voice-mic.listening .grp-mic > use:nth-child(5n){animation-delay:.55s}
@keyframes graine-vibre{0%,100%{opacity:.5}50%{opacity:1}}

/* attente : le point d'interrogation pulse doucement */
.voice-mic.pending .grp-question{animation:respire 1.8s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .voice-mic.listening .grp-mic,
  .voice-mic.listening .grp-mic > use,
  .voice-mic.pending .grp-question,
  .voice-mic.speaking .bouche{animation:none}
  .voice-morph .bouche{transform:scaleY(.6)}
}

.chat-box{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;height:min(52vh,460px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;
}
.msg-row{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.msg-row.me{align-self:flex-end;flex-direction:row-reverse}
.msg-row.bot{align-self:flex-start}
.msg-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.msg{padding:11px 15px;border-radius:16px;line-height:1.55;font-size:.93rem;white-space:pre-wrap}
.msg.bot{background:var(--green-soft);border-bottom-left-radius:5px}
.msg.me{background:var(--green);color:#fff;border-bottom-right-radius:5px}
.msg.typing{opacity:.7;font-style:italic}

/* ---------- vidéos La Bonne Graine dans le chat ---------- */
.video-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.video-card{flex:none;width:200px}
.video-card iframe{width:200px;height:112px;border-radius:10px;display:block;background:#000}
.video-title{font-size:.78rem;color:var(--txt-soft);margin:4px 0 0;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- graines (avatar Cyril + réflexion) ---------- */
.seed-cluster{position:relative;width:30px;height:30px;flex:none;margin-bottom:2px}
.seed-cluster .seed{position:absolute;width:10px;height:15px;top:50%;left:50%;
  margin:-7.5px 0 0 -5px;fill:var(--green);stroke:var(--bg-elev);stroke-width:1.5px;
  paint-order:stroke;transform-origin:5px 7.5px}
.header-seeds{width:36px;height:36px}
.header-seeds .seed{width:12px;height:18px;margin:-9px 0 0 -6px;transform-origin:6px 9px;
  stroke:var(--bg,#fff)}

/* disposition statique : trois graines écartées en triangle, immobiles */
.seed-cluster.static .seed:nth-child(1){transform:translate(-7px,-5px) rotate(-25deg)}
.seed-cluster.static .seed:nth-child(2){transform:translate(7px,-5px) rotate(25deg)}
.seed-cluster.static .seed:nth-child(3){transform:translate(0,8px) rotate(180deg)}

/* réflexion : les graines tournent en spirale, s'écartant puis revenant */
.seed-cluster.thinking .seed{animation:seed-spiral 1.3s ease-in-out infinite}
.seed-cluster.thinking .seed:nth-child(1){animation-delay:0s}
.seed-cluster.thinking .seed:nth-child(2){animation-delay:.18s}
.seed-cluster.thinking .seed:nth-child(3){animation-delay:.36s}
@keyframes seed-spiral{
  0%  {transform:rotate(0deg)   translateY(-2px) scale(.4); opacity:.3}
  50% {transform:rotate(200deg) translateY(-13px) scale(1); opacity:1}
  100%{transform:rotate(360deg) translateY(-2px) scale(.4); opacity:.3}
}

/* ---------- microphone en graines ---------- */
.mic-seeds{width:20px;height:32px;flex:none}
.mic-seeds.big{width:40px;height:64px}
.mic-seeds use{fill:currentColor;stroke:var(--bg-elev);stroke-width:1px;paint-order:stroke}
#voice-mode-btn{display:inline-flex;align-items:center;gap:8px}
.voice-mic{display:flex;align-items:center;justify-content:center}
.chat-suggest{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.82rem;cursor:pointer;color:var(--txt-soft);
}
.chip:hover{border-color:var(--green);color:var(--green)}
.chat-form{display:flex;gap:10px}
.chat-form input{flex:1;margin-top:0}

/* ---------- panneaux réglages ---------- */
.panel{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:16px}
.panel h3{margin:0 0 6px;font-size:1rem}
.panel .muted{font-size:.85rem;line-height:1.5;margin:0 0 14px}
.panel .row{margin-bottom:12px}
.panel.danger{border-color:rgba(201,80,63,.35)}
.switch-row{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--txt);
  font-size:.92rem;padding:7px 0;cursor:pointer}
.switch-row input{width:auto;margin:0}

/* ---------- modale ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,25,18,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;z-index:50;
}
.modal{
  background:var(--bg-elev);border-radius:22px;width:min(560px,100%);
  max-height:88vh;overflow-y:auto;padding:26px;position:relative;box-shadow:var(--shadow);
}
.modal-close{position:absolute;top:14px;right:14px;border:0;background:var(--bg);
  width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--txt);font-size:.9rem}
.modal h3{margin:0 0 4px;font-size:1.3rem}
.modal .field{margin-bottom:14px}
.modal-photo{width:100%;height:180px;object-fit:cover;border-radius:14px;margin-bottom:16px}
.care-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.care-line span:first-child{color:var(--txt-soft)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--txt);color:var(--bg);padding:13px 22px;border-radius:12px;
  font-size:.9rem;font-weight:600;z-index:99;box-shadow:var(--shadow);animation:up .25s;
}
@keyframes up{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .main{padding:18px 14px 70px}
  .id-preview{grid-template-columns:1fr}
  .nav-item span{font-size:1.2rem}
  .nav-item{padding:9px 11px;font-size:0}
  .nav-item.active{font-size:.85rem}
  .weather-chip #weather-city{display:none}
  .cal-cell{min-height:60px}
  .stat b{font-size:1.4rem}
}

/* Jauge de crédits de conversation (en-tête du chat) : discrète tant qu'il
   reste de la marge, orange sur le dernier quart avant le plafond. */
.ctx-jauge{margin:2px 0 0;font-size:.76rem;color:var(--txt-soft);opacity:.9}
.ctx-jauge.discret{opacity:.45}
.ctx-jauge.alerte{color:#c2410c;opacity:1;font-weight:600}

/* ---- Maladies et ravageurs (fiche plante) ---- */
.maladies-bloc{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.maladies-bloc > b{display:block;margin-bottom:8px}
.maladie-fiche{border:1px solid var(--line);border-left:4px solid var(--txt-soft);
  border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--bg-soft)}
.maladie-fiche.urgence-haute{border-left-color:#c2410c}
.maladie-fiche.urgence-moyenne{border-left-color:#d97706}
.maladie-fiche.urgence-faible{border-left-color:#65a30d}
.maladie-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.maladie-tete .muted{font-size:.8rem}
.maladie-tete button{margin-left:auto}
.maladie-fiche p{margin:4px 0;line-height:1.55;font-size:.9rem}
.maladie-alerte{color:#c2410c;font-weight:600}
.badge.malade{background:#fef3c7;color:#92400e;margin-left:6px}

/* ---- Détail « plantes à arroser » (clic sur le rappel) ---- */
#rappel-liste{display:flex;flex-direction:column;gap:10px}
.rappel-item{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);cursor:pointer}
.rappel-item:hover{border-color:var(--txt-soft)}
.rappel-icone{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;overflow:hidden;border-radius:10px}
.rappel-icone img{width:100%;height:100%;object-fit:cover}
.rappel-corps{flex:1;min-width:0}
.rappel-corps b{display:inline-block;margin-right:8px}
.rappel-corps p{margin:3px 0 0;font-size:.82rem;line-height:1.45}
.rappel-conseil{color:#92400e}
.rappel-item button{flex:0 0 auto}

/* =====================================================================
   Habillage « La Bonne Graine »
   Reprend le parti pris de la boutique : angles droits, bandeau rouge,
   titres en serif, aplats blancs. Placé en fin de feuille pour surcharger
   les arrondis définis plus haut sans avoir à les réécrire un par un.
   ===================================================================== */

/* ---- angles droits partout ---- */
.btn, .btn-sm, .icon-btn, .auth-card, .tabs, .tab,
.auth-form input, .search, .stat, .plant-card, .list-item, .fact,
.timeline, .panel, .modal-card, .modal-photo, .id-preview,
.id-preview img, .cam-wrap, .chat-box, .msg, .video-card iframe,
.toast, .maladie-fiche, .rappel-item, .rappel-icone, .plant-thumb,
.cat-chip, .chip, .badge, .weather-chip, .cal-cell, .day-detail{
  border-radius:2px;
}
/* seules les jauges de progression gardent un filet arrondi */
.tl-bar, .tl-fill{border-radius:0}

/* ---- titres en serif ---- */
.view-title, .section-title, .auth-brand h1, .modal-card h3, .panel h3{
  font-family:var(--font-titre);
  font-weight:700;
  letter-spacing:-.01em;
}
.auth-brand h1{font-size:1.9rem}
.view-title{font-size:1.65rem}

/* ---- bandeau de navigation rouge, comme la boutique ---- */
.nav{
  background:var(--rouge);
  border-bottom:none;
  padding-left:6px;padding-right:6px;
  gap:0;
}
.nav-item{
  color:#fff;
  border-radius:0;
  border:none;
  background:transparent;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.78rem;
  padding:13px 14px;
  border-bottom:3px solid transparent;
}
.nav-item:hover{background:var(--rouge-dark);color:#fff}
.nav-item.active{
  background:var(--rouge-dark);
  color:#fff;
  border-bottom-color:#fff;
}
/* la boutique n'a que du texte dans son bandeau : les émojis, blanchis,
   faisaient des taches illisibles sur le rouge */
.nav-item span{display:none}
body.dark .nav{background:var(--rouge-dark)}

/* ---- barre du haut : fond blanc franc, filet net ---- */
.topbar{
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
.topbar-left strong{font-family:var(--font-titre);font-size:1.15rem}

/* ---- cartes : filet net plutôt qu'ombre diffuse ---- */
.plant-card, .stat, .panel, .list-item, .timeline, .maladie-fiche{
  box-shadow:none;
  border:1px solid var(--line);
}
.plant-card:hover, .list-item:hover{border-color:var(--rouge)}

/* ---- boutons : rectangulaires et affirmés ---- */
.btn{
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.82rem;
  font-weight:700;
}
.btn-primary{background:var(--green)}
.btn-primary:hover{background:var(--green-dark);filter:none}
/* l'action « boutique » reprend le rouge de l'enseigne */
.btn-shop{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.btn-shop:hover{background:var(--rouge-dark);border-color:var(--rouge-dark)}

/* ---- titres de section : filet rouge à gauche ---- */
.section-title{
  border-left:4px solid var(--rouge);
  padding-left:10px;
  margin-top:26px;
}

/* ---- pastilles d'état : rectangulaires ---- */
.badge{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em}

/* ---- champs de saisie ---- */
.search, .auth-form input, select.search{
  border:1px solid var(--line);
}
.search:focus, .auth-form input:focus{
  outline:none;border-color:var(--rouge);
}