From 7967f63feae3cd3f43e6d9966bdaa2f4d60eacf2 Mon Sep 17 00:00:00 2001
From: gilles <gil.soulier@gmail.com>
Date: Sun, 1 Mar 2026 07:21:46 +0100
Subject: [PATCH] avant 50

---
 .claude/settings.json                         |   4 +-
 backend/app/main.py                           |  12 +-
 backend/app/migrate.py                        |   1 +
 backend/app/models/planting.py                |   9 +-
 backend/app/routers/gardens.py                |  13 +
 backend/app/routers/plantings.py              |  13 +-
 backend/app/services/scheduler.py             |  64 ++
 backend/app/services/station.py               |  90 ++-
 backend/app/services/yolo_service.py          |  62 +-
 data/jardin.db                                | Bin 335872 -> 360448 bytes
 data/jardin.db-shm                            | Bin 32768 -> 32768 bytes
 data/jardin.db-wal                            | Bin 12392 -> 28872 bytes
 frontend/index.html                           |   4 +
 frontend/public/favicon.svg                   |   4 +
 frontend/src/App.vue                          |  12 +-
 frontend/src/api/client.ts                    |  36 +-
 frontend/src/api/gardens.ts                   |   4 +
 frontend/src/api/identify.ts                  |  25 +
 frontend/src/api/plantings.ts                 |   1 +
 frontend/src/components/DiagnosticModal.vue   |  72 ++
 frontend/src/components/ToastNotification.vue |  56 ++
 frontend/src/composables/useToast.ts          |  38 ++
 frontend/src/main.ts                          |   3 +
 frontend/src/style.css                        |  49 +-
 frontend/src/utils/uiSizeDefaults.ts          |   2 +
 frontend/src/views/AstucesView.vue            | 302 ++++----
 frontend/src/views/BibliothequeView.vue       | 143 ++--
 frontend/src/views/CalendrierView.vue         | 520 +++++++-------
 frontend/src/views/DashboardView.vue          | 201 ++++--
 frontend/src/views/JardinDetailView.vue       | 168 ++++-
 frontend/src/views/JardinsView.vue            | 425 +++++++-----
 frontend/src/views/OutilsView.vue             | 184 +++--
 frontend/src/views/PlanningView.vue           | 192 +++---
 frontend/src/views/PlantationsView.vue        | 594 +++++++++++-----
 frontend/src/views/PlantesView.vue            | 615 ++++++++---------
 frontend/src/views/ReglagesView.vue           | 300 ++++----
 frontend/src/views/TachesView.vue             | 646 +++++++++++++++---
 frontend/tsconfig.json                        |   2 +-
 frontend/vite.config.ts                       |  77 ++-
 39 files changed, 3297 insertions(+), 1646 deletions(-)
 create mode 100644 frontend/public/favicon.svg
 create mode 100644 frontend/src/api/identify.ts
 create mode 100644 frontend/src/components/DiagnosticModal.vue
 create mode 100644 frontend/src/components/ToastNotification.vue
 create mode 100644 frontend/src/composables/useToast.ts

diff --git a/.claude/settings.json b/.claude/settings.json
index f424770..79b49e9 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -75,7 +75,9 @@
       "Bash(docker compose restart:*)",
       "Bash(docker compose build:*)",
       "Bash(__NEW_LINE_5f780afd9b58590d__ echo \"\")",
-      "Read(//home/gilles/.claude/projects/-home-gilles-Documents-vscode-jardin/**)"
+      "Read(//home/gilles/.claude/projects/-home-gilles-Documents-vscode-jardin/**)",
+      "Bash(npx tsc:*)",
+      "Bash(npx vite:*)"
     ],
     "additionalDirectories": [
       "/home/gilles/Documents/vscode/jardin/frontend/src",
diff --git a/backend/app/main.py b/backend/app/main.py
index 49c280c..b8244f8 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -1,3 +1,4 @@
+import asyncio
 import os
 from contextlib import asynccontextmanager
 
@@ -23,15 +24,22 @@ async def lifespan(app: FastAPI):
         from app.seed import run_seed
         run_seed()
         if ENABLE_SCHEDULER:
-            from app.services.scheduler import setup_scheduler
+            from app.services.scheduler import setup_scheduler, backfill_station_missing_dates
             setup_scheduler()
+            # Backfill des dates manquantes en arrière-plan (ne bloque pas le démarrage)
+            loop = asyncio.get_running_loop()
+            loop.run_in_executor(None, backfill_station_missing_dates)
     yield
     if ENABLE_BOOTSTRAP and ENABLE_SCHEDULER:
         from app.services.scheduler import scheduler
         scheduler.shutdown(wait=False)
 
 
-app = FastAPI(title="Jardin API", lifespan=lifespan)
+app = FastAPI(
+    title="Jardin API",
+    lifespan=lifespan,
+    redoc_js_url="https://cdn.jsdelivr.net/npm/redoc@2.1.3/bundles/redoc.standalone.js"
+)
 
 app.add_middleware(
     CORSMiddleware,
diff --git a/backend/app/migrate.py b/backend/app/migrate.py
index 2348509..a983d0a 100644
--- a/backend/app/migrate.py
+++ b/backend/app/migrate.py
@@ -51,6 +51,7 @@ EXPECTED_COLUMNS: dict[str, list[tuple[str, str, str | None]]] = {
         ("boutique_url", "TEXT", None),
         ("tarif_achat", "REAL", None),
         ("date_achat", "TEXT", None),
+        ("cell_ids", "TEXT", None),  # JSON : liste des IDs de zones (multi-sélect)
     ],
     "plantvariety": [
         # ancien nom de table → migration vers "plant" si présente
diff --git a/backend/app/models/planting.py b/backend/app/models/planting.py
index 7619706..c60f765 100644
--- a/backend/app/models/planting.py
+++ b/backend/app/models/planting.py
@@ -1,5 +1,7 @@
 from datetime import date, datetime, timezone
-from typing import Optional
+from typing import List, Optional
+from sqlalchemy import Column
+from sqlalchemy import JSON as SA_JSON
 from sqlmodel import Field, SQLModel
 
 
@@ -7,6 +9,7 @@ class PlantingCreate(SQLModel):
     garden_id: int
     variety_id: int
     cell_id: Optional[int] = None
+    cell_ids: Optional[List[int]] = None  # multi-sélect zones
     date_semis: Optional[date] = None
     date_plantation: Optional[date] = None
     date_repiquage: Optional[date] = None
@@ -28,6 +31,10 @@ class Planting(SQLModel, table=True):
     garden_id: int = Field(foreign_key="garden.id", index=True)
     variety_id: int = Field(foreign_key="plant.id", index=True)
     cell_id: Optional[int] = Field(default=None, foreign_key="gardencell.id")
+    cell_ids: Optional[List[int]] = Field(
+        default=None,
+        sa_column=Column("cell_ids", SA_JSON, nullable=True),
+    )
     date_semis: Optional[date] = None
     date_plantation: Optional[date] = None
     date_repiquage: Optional[date] = None
diff --git a/backend/app/routers/gardens.py b/backend/app/routers/gardens.py
index 56a3c77..958f025 100644
--- a/backend/app/routers/gardens.py
+++ b/backend/app/routers/gardens.py
@@ -115,6 +115,19 @@ def create_cell(id: int, cell: GardenCell, session: Session = Depends(get_sessio
     return cell
 
 
+@router.put("/gardens/{id}/cells/{cell_id}", response_model=GardenCell)
+def update_cell(id: int, cell_id: int, data: GardenCell, session: Session = Depends(get_session)):
+    c = session.get(GardenCell, cell_id)
+    if not c or c.garden_id != id:
+        raise HTTPException(status_code=404, detail="Case introuvable")
+    for k, v in data.model_dump(exclude_unset=True, exclude={"id", "garden_id"}).items():
+        setattr(c, k, v)
+    session.add(c)
+    session.commit()
+    session.refresh(c)
+    return c
+
+
 @router.get("/gardens/{id}/measurements", response_model=List[Measurement])
 def list_measurements(id: int, session: Session = Depends(get_session)):
     return session.exec(select(Measurement).where(Measurement.garden_id == id)).all()
diff --git a/backend/app/routers/plantings.py b/backend/app/routers/plantings.py
index 033824f..e597607 100644
--- a/backend/app/routers/plantings.py
+++ b/backend/app/routers/plantings.py
@@ -15,7 +15,11 @@ def list_plantings(session: Session = Depends(get_session)):
 
 @router.post("/plantings", response_model=Planting, status_code=status.HTTP_201_CREATED)
 def create_planting(data: PlantingCreate, session: Session = Depends(get_session)):
-    p = Planting(**data.model_dump())
+    d = data.model_dump()
+    # Rétro-compatibilité : cell_id = première zone sélectionnée
+    if d.get("cell_ids") and not d.get("cell_id"):
+        d["cell_id"] = d["cell_ids"][0]
+    p = Planting(**d)
     session.add(p)
     session.commit()
     session.refresh(p)
@@ -35,7 +39,12 @@ def update_planting(id: int, data: PlantingCreate, session: Session = Depends(ge
     p = session.get(Planting, id)
     if not p:
         raise HTTPException(status_code=404, detail="Plantation introuvable")
-    for k, v in data.model_dump(exclude_unset=True).items():
+    d = data.model_dump(exclude_unset=True)
+    # Rétro-compatibilité : cell_id = première zone sélectionnée
+    if "cell_ids" in d:
+        ids = d["cell_ids"] or []
+        d["cell_id"] = ids[0] if ids else None
+    for k, v in d.items():
         setattr(p, k, v)
     p.updated_at = datetime.now(timezone.utc)
     session.add(p)
diff --git a/backend/app/services/scheduler.py b/backend/app/services/scheduler.py
index 4186400..7aaf541 100644
--- a/backend/app/services/scheduler.py
+++ b/backend/app/services/scheduler.py
@@ -90,6 +90,70 @@ def _store_open_meteo() -> None:
     logger.info(f"Open-Meteo stocké : {len(rows)} jours")
 
 
+def backfill_station_missing_dates(max_days_back: int = 365) -> None:
+    """Remplit les dates manquantes de la station météo au démarrage.
+
+    Cherche toutes les dates sans entrée « veille » dans meteostation
+    depuis max_days_back jours en arrière jusqu'à hier (excl. aujourd'hui),
+    puis télécharge les fichiers NOAA mois par mois pour remplir les trous.
+    Un seul appel HTTP par mois manquant.
+    """
+    from datetime import date, timedelta
+    from itertools import groupby
+    from app.services.station import fetch_month_summaries
+    from app.models.meteo import MeteoStation
+    from app.database import engine
+    from sqlmodel import Session, select
+
+    today = date.today()
+    start_date = today - timedelta(days=max_days_back)
+
+    # 1. Dates « veille » déjà présentes en BDD
+    with Session(engine) as session:
+        rows = session.exec(
+            select(MeteoStation.date_heure).where(MeteoStation.type == "veille")
+        ).all()
+    existing_dates: set[str] = {dh[:10] for dh in rows}
+
+    # 2. Dates manquantes entre start_date et hier (aujourd'hui exclu)
+    missing: list[date] = []
+    cursor = start_date
+    while cursor < today:
+        if cursor.isoformat() not in existing_dates:
+            missing.append(cursor)
+        cursor += timedelta(days=1)
+
+    if not missing:
+        logger.info("Backfill station : aucune date manquante")
+        return
+
+    logger.info(f"Backfill station : {len(missing)} date(s) manquante(s) à récupérer")
+
+    # 3. Grouper par (année, mois) → 1 requête HTTP par mois
+    def month_key(d: date) -> tuple[int, int]:
+        return (d.year, d.month)
+
+    filled = 0
+    for (year, month), group_iter in groupby(sorted(missing), key=month_key):
+        month_data = fetch_month_summaries(year, month)
+        if not month_data:
+            logger.debug(f"Backfill station : pas de données NOAA pour {year}-{month:02d}")
+            continue
+
+        with Session(engine) as session:
+            for d in group_iter:
+                data = month_data.get(d.day)
+                if not data:
+                    continue
+                date_heure = f"{d.isoformat()}T00:00"
+                if not session.get(MeteoStation, date_heure):
+                    session.add(MeteoStation(date_heure=date_heure, type="veille", **data))
+                    filled += 1
+            session.commit()
+
+    logger.info(f"Backfill station terminé : {filled} date(s) insérée(s)")
+
+
 def setup_scheduler() -> None:
     """Configure et démarre le scheduler."""
     scheduler.add_job(
diff --git a/backend/app/services/station.py b/backend/app/services/station.py
index f478db8..fa158de 100644
--- a/backend/app/services/station.py
+++ b/backend/app/services/station.py
@@ -130,45 +130,63 @@ def fetch_current(base_url: str = STATION_URL) -> dict | None:
         return None
 
 
+def _parse_noaa_day_line(parts: list[str]) -> dict | None:
+    """Parse une ligne de données journalières du fichier NOAA WeeWX.
+
+    Format standard : day mean max hh:mm min hh:mm HDD CDD rain wind_avg wind_max hh:mm dir
+    """
+    if not parts or not parts[0].isdigit():
+        return None
+    # Format complet avec timestamps hh:mm en positions 3 et 5
+    if len(parts) >= 11 and ":" in parts[3] and ":" in parts[5]:
+        return {
+            "temp_ext": _safe_float(parts[1]),
+            "t_max":    _safe_float(parts[2]),
+            "t_min":    _safe_float(parts[4]),
+            "pluie_mm": _safe_float(parts[8]),
+            "vent_kmh": _to_kmh(_safe_float(parts[10]), "m/s"),
+        }
+    # Fallback générique (anciens formats sans hh:mm)
+    return {
+        "t_max":    _safe_float(parts[1]) if len(parts) > 1 else None,
+        "t_min":    _safe_float(parts[2]) if len(parts) > 2 else None,
+        "temp_ext": _safe_float(parts[3]) if len(parts) > 3 else None,
+        "pluie_mm": _safe_float(parts[5]) if len(parts) > 5 else None,
+        "vent_kmh": _safe_float(parts[6]) if len(parts) > 6 else None,
+    }
+
+
+def fetch_month_summaries(year: int, month: int, base_url: str = STATION_URL) -> dict[int, dict]:
+    """Récupère tous les résumés journaliers d'un mois depuis le fichier NOAA WeeWX.
+
+    Retourne un dict {numéro_jour: data_dict} pour chaque jour disponible du mois.
+    Un seul appel HTTP par mois — utilisé pour le backfill groupé.
+    """
+    try:
+        url = f"{base_url.rstrip('/')}/NOAA/NOAA-{year:04d}-{month:02d}.txt"
+        r = httpx.get(url, timeout=15)
+        r.raise_for_status()
+
+        result: dict[int, dict] = {}
+        for line in r.text.splitlines():
+            parts = line.split()
+            if not parts or not parts[0].isdigit():
+                continue
+            data = _parse_noaa_day_line(parts)
+            if data:
+                result[int(parts[0])] = data
+        return result
+
+    except Exception as e:
+        logger.warning(f"Station fetch_month_summaries({year}-{month:02d}) error: {e}")
+        return {}
+
+
 def fetch_yesterday_summary(base_url: str = STATION_URL) -> dict | None:
     """Récupère le résumé de la veille via le fichier NOAA mensuel de la station WeeWX.
 
     Retourne un dict avec : temp_ext (moy), t_min, t_max, pluie_mm — ou None.
     """
     yesterday = (datetime.now() - timedelta(days=1)).date()
-    year = yesterday.strftime("%Y")
-    month = yesterday.strftime("%m")
-    day = yesterday.day
-
-    try:
-        url = f"{base_url.rstrip('/')}/NOAA/NOAA-{year}-{month}.txt"
-        r = httpx.get(url, timeout=15)
-        r.raise_for_status()
-
-        for line in r.text.splitlines():
-            parts = line.split()
-            if not parts or not parts[0].isdigit() or int(parts[0]) != day:
-                continue
-
-            # Format WeeWX NOAA (fréquent) :
-            # day mean max hh:mm min hh:mm HDD CDD rain wind_avg wind_max hh:mm dir
-            if len(parts) >= 11 and ":" in parts[3] and ":" in parts[5]:
-                return {
-                    "temp_ext": _safe_float(parts[1]),
-                    "t_max": _safe_float(parts[2]),
-                    "t_min": _safe_float(parts[4]),
-                    "pluie_mm": _safe_float(parts[8]),
-                    "vent_kmh": _to_kmh(_safe_float(parts[10]), "m/s"),
-                }
-
-            # Fallback générique (anciens formats)
-            return {
-                "t_max": _safe_float(parts[1]) if len(parts) > 1 else None,
-                "t_min": _safe_float(parts[2]) if len(parts) > 2 else None,
-                "temp_ext": _safe_float(parts[3]) if len(parts) > 3 else None,
-                "pluie_mm": _safe_float(parts[5]) if len(parts) > 5 else None,
-                "vent_kmh": _safe_float(parts[6]) if len(parts) > 6 else None,
-            }
-    except Exception as e:
-        logger.warning(f"Station fetch_yesterday_summary error: {e}")
-    return None
+    month_data = fetch_month_summaries(yesterday.year, yesterday.month, base_url)
+    return month_data.get(yesterday.day)
diff --git a/backend/app/services/yolo_service.py b/backend/app/services/yolo_service.py
index f0164e0..34ae50a 100644
--- a/backend/app/services/yolo_service.py
+++ b/backend/app/services/yolo_service.py
@@ -1,27 +1,47 @@
 import os
-from typing import List
+from typing import List, Optional
 
 import httpx
 
-AI_SERVICE_URL = os.environ.get("AI_SERVICE_URL", "http://localhost:8070")
+AI_SERVICE_URL = os.environ.get("AI_SERVICE_URL", "http://ai-service:8070")
 
-# Mapping class_name YOLO → nom commun français (partiel)
-_NOMS_FR = {
-    "Tomato___healthy": "Tomate (saine)",
-    "Tomato___Early_blight": "Tomate (mildiou précoce)",
-    "Tomato___Late_blight": "Tomate (mildiou tardif)",
-    "Pepper__bell___healthy": "Poivron (sain)",
-    "Apple___healthy": "Pommier (sain)",
-    "Potato___healthy": "Pomme de terre (saine)",
-    "Grape___healthy": "Vigne (saine)",
-    "Corn_(maize)___healthy": "Maïs (sain)",
-    "Strawberry___healthy": "Fraisier (sain)",
-    "Peach___healthy": "Pêcher (sain)",
+# Mapping complet class_name YOLO → Infos détaillées
+_DIAGNOSTICS = {
+    "Tomato___healthy": {
+        "label": "Tomate (saine)",
+        "conseil": "Votre plant est en pleine forme. Pensez au paillage pour garder l'humidité.",
+        "actions": ["Pailler le pied", "Vérifier les gourmands"]
+    },
+    "Tomato___Early_blight": {
+        "label": "Tomate (Alternariose)",
+        "conseil": "Champignon fréquent. Retirez les feuilles basses touchées et évitez de mouiller le feuillage.",
+        "actions": ["Retirer feuilles infectées", "Traitement bouillie bordelaise"]
+    },
+    "Tomato___Late_blight": {
+        "label": "Tomate (Mildiou)",
+        "conseil": "Urgent : Le mildiou se propage vite avec l'humidité. Coupez les parties atteintes immédiatement.",
+        "actions": ["Couper parties infectées", "Traitement purin de prêle", "Abriter de la pluie"]
+    },
+    "Pepper__bell___healthy": {
+        "label": "Poivron (sain)",
+        "conseil": "Le poivron aime la chaleur et un sol riche.",
+        "actions": ["Apport de compost", "Arrosage régulier"]
+    },
+    "Potato___healthy": {
+        "label": "Pomme de terre (saine)",
+        "conseil": "Pensez à butter les pieds pour favoriser la production de tubercules.",
+        "actions": ["Butter les pieds"]
+    },
+    "Grape___healthy": {
+        "label": "Vigne (saine)",
+        "conseil": "Surveillez l'apparition d'oïdium si le temps est chaud et humide.",
+        "actions": ["Taille en vert", "Vérifier sous les feuilles"]
+    },
 }
 
 
 async def identify(image_bytes: bytes) -> List[dict]:
-    """Appelle l'ai-service interne et retourne les détections YOLO."""
+    """Appelle l'ai-service interne et retourne les détections YOLO avec diagnostics."""
     try:
         async with httpx.AsyncClient(timeout=30.0) as client:
             resp = await client.post(
@@ -36,10 +56,18 @@ async def identify(image_bytes: bytes) -> List[dict]:
     results = []
     for det in data[:3]:
         cls = det.get("class_name", "")
+        diag = _DIAGNOSTICS.get(cls, {
+            "label": cls.replace("___", " — ").replace("_", " "),
+            "conseil": "Pas de diagnostic spécifique disponible pour cette espèce.",
+            "actions": []
+        })
+        
         results.append({
-            "species": cls.replace("___", " — ").replace("_", " "),
-            "common_name": _NOMS_FR.get(cls, cls.split("___")[0].replace("_", " ")),
+            "species": cls,
+            "common_name": diag["label"],
             "confidence": det.get("confidence", 0.0),
+            "conseil": diag["conseil"],
+            "actions": diag["actions"],
             "image_url": "",
         })
     return results
diff --git a/data/jardin.db b/data/jardin.db
index 5057da404a4571e2695aaf4b66b4bf4965ae3b5a..87c511b9be16a40a2a020a429ac5080a99f12039 100755
GIT binary patch
delta 35718
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

delta 4852
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
SOn}Ar58b4<@Eo7YUF^RB7!gqb

diff --git a/data/jardin.db-shm b/data/jardin.db-shm
index 60b7eac4c1debeb5bd23a6d6339c93d30df08940..aeab45e7c96ab298e546821a9643f3f12b7fa11d 100755
GIT binary patch
delta 201
zcmZo@U}|V!s+V}A%K!q*K+MR%Aixf!BY-$x^|s2SAMtZo7>l2l+&t^~&u3wv@5S5=
zq^buR1qLiY@;?%Q3Qw%(lne*5K~}<ORUlgvh_yCO+~~~A$iTdD;%_EqCI*&`6O+{$
WSvOAn&dtcSapGSlM)r*pgP8zJc{$hs

delta 173
zcmZo@U}|V!s+V}A%K!pQK+MR%AixZygMj$gGZB;f`TuXfzP?!cYt&a>QMsp2=f-Rb
zCsjSrC@=t-{~rlJg(uc?aw-Ga8bGYMap6YijT<Ud7#TM%{L073v~l5ICPwCs3j<jJ
Dd1g8Y

diff --git a/data/jardin.db-wal b/data/jardin.db-wal
index 9ceaf03e2755fffd07c1ad737413e4a63f988d88..76e4310123485bc656c5aa6aaf95f2175c0dd4fa 100755
GIT binary patch
literal 28872
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
bSaHpoQ*`|1iut08$FXE*iM^$gZT7zbx^TlP

delta 1711
zcmb7DZERCj7(TaOx9z#-oQ-X|ty;DM0wdjSZ#%kfF82^6TL^B@RFG-Ml$1IxtTwDM
zTVjnuO!x?rn<!iS0fQfyAdxhZ@k2>iG@wiq6Ebxqq#7s6B>b=onE7$;M`u@Jrf+g{
zPTqT;=Xsy^eeabVcdIWG%-G%l-tVgcC<AKTo;u~q_vF#tgWvsm;YD<urB)Q@$9@j2
zSat9u?_|k#2mm=w-Xwd;4)P>vBDKVd@8W6v89tBS!*Agfj^a-2$8PLEzoDDxbMz59
zfexWGdLC^?LF7TLNVq5bAbcrY6iy3Ag&`p(Y!TXo$Aoe?4}XGR!;j$^sKD3A6znIn
z<TCjHMxYEEU=_^zHe{SiqUKe_Q(KYURO_)Q*J~P{t~7f&NtD)mMae7qBBIzTilz#)
z*Rhb4BEDvpWCqr-CtPrxMDN@fFZ)VBENR0LKrWF%vJU6)yEwwMhT-`SKQ(RK(2l(>
zp5u5sU(P-RMXZv<Sa%JkQn9`Js9Svrz_N|>@D1%odA}B2-JOps$(5DsS$R@K@)cvQ
zsWC~Vnh_SG3_7hrs6}G{4BA!%Rh<>&Tq<H@luEkDCVKc=J;ABR$S8xh{sZ-eil9cN
zRNAdY7b{pRL!L1b-JKy7n$ZgOwG=_?^e?EC)nr-0-;_Y*7VNFzS^0L3wTtJA+NDh<
z9qUgdV)PLec5M=Mb<6Ymm5Q(HrU6*XE^JDD`eFtuXMUglYv86jrd8mG)jVciO-4z*
z>8vTheZjo|j(|CQ32zhf=ts0i*e^T^voP%Z#rd|g$#LB=>?pUNu($G)eAG5;J7jCH
zUbXgG?pXF)Dvq6OGsPWB)7GkppCY|)w81E+QE#mIiGjg%EVb_$>UNKBy?tQ0JfFXO
z^tm;2MaI}n*@F4S#^zwq9|)||jK-ZR@%F$1aic+8tDgnpD6O+<%<>;9Z+>DaV%CPZ
zUFB9n(UszX|Ame78gMMyR<5mLaoNh9=u3F96J>Yrp3>AOJ0D1e`gWCkl}(0k*)wS*
z)blL3wH(hswcsmAtBqDP={=XP8od|wwQApz80?SLB_`gFPn=1`wo{L>cBWj%xyqs3
z0@DK?^wy_|rkhzL?DvX3dCnkOt*@FqYZPMaUWsrIt<vAi_miilob9hHB|LytVb0K1
zetp)tL%wf#^XR9gV7^4Fm%3Dm<Z1cdkm_=HDJ=zst24B$V8Af8TvsV9R|l<cVN2^C
zr`&&Y&<9lqc8+r`8d)=aSpOZUF*2knG_oHfOzUPeamuN)={WcAg)6z<mrE8!>DjsM
Mp~Xw5&k%sW0Z4NY761SM

diff --git a/frontend/index.html b/frontend/index.html
index 19ca06b..6bce616 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>🌿 Jardin</title>
+    <meta name="theme-color" content="#282828" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="mask-icon" href="/favicon.svg" color="#282828" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet" />
   </head>
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..14192f8
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#282828"/>
+  <text y=".9em" font-size="70" x="15">🌿</text>
+</svg>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ed0a3f8..b438b5e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,6 +9,9 @@
     <span>Disk {{ debugDiskLabel }}</span>
   </div>
 
+  <!-- Notifications toast globales -->
+  <ToastNotification />
+
   <!-- Mobile: header + drawer -->
   <AppHeader class="lg:hidden" @toggle-drawer="drawerOpen = !drawerOpen" />
   <AppDrawer :open="drawerOpen" @close="drawerOpen = false" />
@@ -38,8 +41,12 @@
     </aside>
 
     <!-- Main content -->
-    <main class="pt-14 lg:pt-0 lg:pl-60 min-h-screen w-full bg-bg" style="font-size: var(--ui-font-size, 14px)">
-      <RouterView />
+    <main class="pt-14 lg:pt-0 lg:pl-60 min-h-screen w-full bg-bg">
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </main>
   </div>
 </template>
@@ -49,6 +56,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import AppHeader from '@/components/AppHeader.vue'
 import AppDrawer from '@/components/AppDrawer.vue'
+import ToastNotification from '@/components/ToastNotification.vue'
 import { meteoApi } from '@/api/meteo'
 import { settingsApi, type DebugSystemStats } from '@/api/settings'
 import { applyUiSizesToRoot } from '@/utils/uiSizeDefaults'
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 5e09632..1478479 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,5 +1,37 @@
-import axios from 'axios'
+import axios, { type AxiosError } from 'axios'
+import { useToast } from '@/composables/useToast'
 
-export default axios.create({
+const client = axios.create({
   baseURL: import.meta.env.VITE_API_URL ?? '',
 })
+
+client.interceptors.response.use(
+  response => response,
+  (error: AxiosError<{ detail?: string; message?: string }>) => {
+    const { error: showError } = useToast()
+
+    if (error.response) {
+      const status = error.response.status
+      const detail = error.response.data?.detail ?? error.response.data?.message
+
+      if (status === 422) {
+        const msg = Array.isArray(detail)
+          ? (detail as Array<{ msg?: string }>).map(d => d.msg ?? d).join(', ')
+          : (detail ?? 'Vérifiez les champs du formulaire')
+        showError(`Données invalides : ${msg}`)
+      } else if (status === 404) {
+        showError('Ressource introuvable')
+      } else if (status >= 500) {
+        showError(`Erreur serveur (${status}) — réessayez dans un instant`)
+      } else if (status !== 401 && status !== 403) {
+        showError(String(detail ?? `Erreur ${status}`))
+      }
+    } else if (error.request) {
+      showError('Serveur inaccessible — vérifiez votre connexion réseau')
+    }
+
+    return Promise.reject(error)
+  },
+)
+
+export default client
diff --git a/frontend/src/api/gardens.ts b/frontend/src/api/gardens.ts
index 84656ca..cbe1cac 100644
--- a/frontend/src/api/gardens.ts
+++ b/frontend/src/api/gardens.ts
@@ -56,6 +56,10 @@ export const gardensApi = {
   },
   delete: (id: number) => client.delete(`/api/gardens/${id}`),
   cells: (id: number) => client.get<GardenCell[]>(`/api/gardens/${id}/cells`).then(r => r.data),
+  createCell: (id: number, cell: Partial<GardenCell>) =>
+    client.post<GardenCell>(`/api/gardens/${id}/cells`, cell).then(r => r.data),
+  updateCell: (id: number, cellId: number, cell: Partial<GardenCell>) =>
+    client.put<GardenCell>(`/api/gardens/${id}/cells/${cellId}`, cell).then(r => r.data),
   measurements: (id: number) => client.get<Measurement[]>(`/api/gardens/${id}/measurements`).then(r => r.data),
   addMeasurement: (id: number, m: Partial<Measurement>) =>
     client.post<Measurement>(`/api/gardens/${id}/measurements`, m).then(r => r.data),
diff --git a/frontend/src/api/identify.ts b/frontend/src/api/identify.ts
new file mode 100644
index 0000000..8ed4300
--- /dev/null
+++ b/frontend/src/api/identify.ts
@@ -0,0 +1,25 @@
+import client from './client'
+
+export interface DiagnosticResult {
+  species: string
+  common_name: string
+  confidence: number
+  conseil: string
+  actions: string[]
+  image_url?: string
+}
+
+export interface IdentifyResponse {
+  source: 'plantnet' | 'yolo' | 'cache'
+  results: DiagnosticResult[]
+}
+
+export const identifyApi = {
+  identify: (file: File) => {
+    const formData = new FormData()
+    formData.append('file', file)
+    return client.post<IdentifyResponse>('/api/identify', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' }
+    }).then(r => r.data)
+  }
+}
diff --git a/frontend/src/api/plantings.ts b/frontend/src/api/plantings.ts
index 0d2aaa7..5786ba1 100644
--- a/frontend/src/api/plantings.ts
+++ b/frontend/src/api/plantings.ts
@@ -5,6 +5,7 @@ export interface Planting {
   garden_id: number
   variety_id: number
   cell_id?: number
+  cell_ids?: number[]  // multi-sélect zones
   date_plantation?: string
   quantite: number
   statut: string
diff --git a/frontend/src/components/DiagnosticModal.vue b/frontend/src/components/DiagnosticModal.vue
new file mode 100644
index 0000000..e4c91e5
--- /dev/null
+++ b/frontend/src/components/DiagnosticModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="open" class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm" @click.self="$emit('close')">
+    <div class="card-jardin w-full max-w-md overflow-hidden animate-fade-in border-green/30">
+      <div class="flex items-center justify-between mb-4 border-b border-bg-hard pb-3">
+        <h3 class="text-green font-bold flex items-center gap-2">
+          <span>🔬</span> Diagnostic IA
+        </h3>
+        <button @click="$emit('close')" class="text-text-muted hover:text-red transition-colors">✕</button>
+      </div>
+
+      <div v-if="loading" class="py-12 flex flex-col items-center gap-4">
+        <div class="w-12 h-12 border-4 border-green/20 border-t-green rounded-full animate-spin"></div>
+        <p class="text-text-muted text-sm animate-pulse italic">Analyse de l'image en cours...</p>
+      </div>
+
+      <div v-else-if="result" class="space-y-6">
+        <!-- En-tête du résultat -->
+        <div class="flex items-center gap-4 bg-bg-hard p-3 rounded-xl">
+          <div class="text-3xl">🌿</div>
+          <div>
+            <div class="text-text font-bold text-lg">{{ result.common_name }}</div>
+            <div class="text-[10px] text-text-muted uppercase tracking-widest font-bold">Confiance : {{ (result.confidence * 100).toFixed(1) }}%</div>
+          </div>
+        </div>
+
+        <!-- Conseil -->
+        <div class="space-y-2">
+          <div class="text-[10px] font-bold text-green uppercase tracking-widest">Conseil de l'expert</div>
+          <p class="text-sm text-text-muted leading-relaxed bg-green/5 p-3 rounded-lg border border-green/10">
+            {{ result.conseil }}
+          </p>
+        </div>
+
+        <!-- Actions suggérées -->
+        <div v-if="result.actions?.length" class="space-y-2">
+          <div class="text-[10px] font-bold text-orange uppercase tracking-widest">Actions recommandées</div>
+          <div class="flex flex-wrap gap-2">
+            <span v-for="action in result.actions" :key="action" class="badge badge-orange py-1.5 px-3">
+              {{ action }}
+            </span>
+          </div>
+        </div>
+
+        <button @click="$emit('close')" class="btn-primary w-full mt-4">Compris, merci !</button>
+      </div>
+
+      <div v-else class="py-8 text-center text-text-muted">
+        ⚠️ Impossible d'analyser l'image. Réessayez avec une photo plus nette.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  open: boolean
+  loading: boolean
+  result: any | null
+}>()
+
+defineEmits(['close'])
+</script>
+
+<style scoped>
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+</style>
diff --git a/frontend/src/components/ToastNotification.vue b/frontend/src/components/ToastNotification.vue
new file mode 100644
index 0000000..34b6152
--- /dev/null
+++ b/frontend/src/components/ToastNotification.vue
@@ -0,0 +1,56 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed bottom-4 right-4 z-[200] flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="pointer-events-auto flex items-start gap-3 rounded-xl px-4 py-3 shadow-2xl border text-sm font-medium cursor-pointer"
+          :class="toastClass(toast.type)"
+          @click="remove(toast.id)"
+        >
+          <span class="text-base leading-none mt-0.5 shrink-0">{{ toastIcon(toast.type) }}</span>
+          <span class="flex-1 leading-snug">{{ toast.message }}</span>
+          <button
+            class="ml-1 opacity-50 hover:opacity-100 transition-opacity shrink-0 text-xs"
+            @click.stop="remove(toast.id)"
+          >✕</button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '@/composables/useToast'
+
+const { toasts, remove } = useToast()
+
+function toastClass(type: string): string {
+  const map: Record<string, string> = {
+    success: 'bg-[#3c3836] border-[#b8bb26]/50 text-[#b8bb26]',
+    error:   'bg-[#3c3836] border-[#fb4934]/50 text-[#fb4934]',
+    warning: 'bg-[#3c3836] border-[#fabd2f]/50 text-[#fabd2f]',
+    info:    'bg-[#3c3836] border-[#83a598]/50 text-[#83a598]',
+  }
+  return map[type] ?? 'bg-[#3c3836] border-[#a89984]/40 text-[#ebdbb2]'
+}
+
+function toastIcon(type: string): string {
+  const map: Record<string, string> = {
+    success: '✓',
+    error:   '✕',
+    warning: '⚠',
+    info:    'ℹ',
+  }
+  return map[type] ?? 'ℹ'
+}
+</script>
+
+<style scoped>
+.toast-enter-active { transition: all 0.25s ease-out; }
+.toast-leave-active { transition: all 0.2s ease-in; }
+.toast-enter-from   { opacity: 0; transform: translateX(30px); }
+.toast-leave-to     { opacity: 0; transform: translateX(30px); }
+.toast-move         { transition: transform 0.2s ease; }
+</style>
diff --git a/frontend/src/composables/useToast.ts b/frontend/src/composables/useToast.ts
new file mode 100644
index 0000000..8635fca
--- /dev/null
+++ b/frontend/src/composables/useToast.ts
@@ -0,0 +1,38 @@
+import { reactive } from 'vue'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface Toast {
+  id: number
+  type: ToastType
+  message: string
+  duration: number
+}
+
+const toasts = reactive<Toast[]>([])
+let nextId = 1
+
+function add(message: string, type: ToastType = 'info', duration = 4000): number {
+  const id = nextId++
+  toasts.push({ id, type, message, duration })
+  if (duration > 0) {
+    setTimeout(() => remove(id), duration)
+  }
+  return id
+}
+
+function remove(id: number) {
+  const index = toasts.findIndex(t => t.id === id)
+  if (index !== -1) toasts.splice(index, 1)
+}
+
+export function useToast() {
+  return {
+    toasts,
+    success: (msg: string, duration?: number) => add(msg, 'success', duration ?? 4000),
+    error: (msg: string, duration?: number) => add(msg, 'error', duration ?? 6000),
+    warning: (msg: string, duration?: number) => add(msg, 'warning', duration ?? 5000),
+    info: (msg: string, duration?: number) => add(msg, 'info', duration ?? 4000),
+    remove,
+  }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c6adb2a..b4df7a2 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,5 +3,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import './style.css'
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({ immediate: true })
 
 createApp(App).use(createPinia()).use(router).mount('#app')
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 0433b1d..21a6144 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -2,13 +2,56 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-bg text-text font-mono;
-  min-height: 100vh;
+@layer base {
+  html {
+    font-size: var(--ui-font-size, 14px);
+  }
+  body {
+    @apply bg-bg text-text font-mono selection:bg-yellow/30;
+    min-height: 100vh;
+  }
 }
 
+@layer components {
+  /* Cartes avec effet 70s */
+  .card-jardin {
+    @apply bg-bg-soft border border-bg-hard rounded-xl p-4 shadow-sm 
+           transition-all duration-300 hover:shadow-lg hover:border-text-muted/30;
+  }
+
+  /* Boutons stylisés */
+  .btn-primary {
+    @apply bg-yellow text-bg px-4 py-2 rounded-lg font-bold text-sm
+           transition-transform active:scale-95 hover:opacity-90;
+  }
+  
+  .btn-outline {
+    @apply border border-bg-hard text-text-muted px-4 py-2 rounded-lg text-sm
+           hover:bg-bg-hard hover:text-text transition-all;
+  }
+
+  /* Badges colorés */
+  .badge {
+    @apply px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider;
+  }
+  .badge-green  { @apply bg-green/20 text-green; }
+  .badge-yellow { @apply bg-yellow/20 text-yellow; }
+  .badge-blue   { @apply bg-blue/20 text-blue; }
+  .badge-red    { @apply bg-red/20 text-red; }
+  .badge-orange { @apply bg-orange/20 text-orange; }
+}
+
+/* Transitions de pages */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.fade-enter-from { opacity: 0; transform: translateY(5px); }
+.fade-leave-to { opacity: 0; transform: translateY(-5px); }
+
 * { box-sizing: border-box; }
 
+/* Custom scrollbar */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: #1d2021; }
 ::-webkit-scrollbar-thumb { background: #504945; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #665c54; }
diff --git a/frontend/src/utils/uiSizeDefaults.ts b/frontend/src/utils/uiSizeDefaults.ts
index 1e42c19..30c85d7 100644
--- a/frontend/src/utils/uiSizeDefaults.ts
+++ b/frontend/src/utils/uiSizeDefaults.ts
@@ -3,6 +3,8 @@ export const UI_SIZE_DEFAULTS: Record<string, number> = {
   ui_menu_font_size: 13,
   ui_menu_icon_size: 18,
   ui_thumb_size: 96,
+  ui_weather_icon_size: 48,
+  ui_dashboard_icon_size: 24,
 }
 
 export function applyUiSizesToRoot(data: Record<string, string | number>): void {
diff --git a/frontend/src/views/AstucesView.vue b/frontend/src/views/AstucesView.vue
index f23f1a6..b956d80 100644
--- a/frontend/src/views/AstucesView.vue
+++ b/frontend/src/views/AstucesView.vue
@@ -1,204 +1,200 @@
 <template>
-  <div class="p-4 max-w-4xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-yellow">💡 Astuces</h1>
-      <button @click="openCreate" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-        + Ajouter
+  <div class="p-4 max-w-[1800px] mx-auto space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-yellow tracking-tight">Astuces & Conseils</h1>
+        <p class="text-text-muted text-xs mt-1">Bibliothèque de savoir-faire pour votre potager.</p>
+      </div>
+      <button @click="openCreate" class="btn-primary !bg-yellow !text-bg flex items-center gap-2 shadow-lg hover:shadow-yellow/20 transition-all">
+        <span class="text-lg leading-none">+</span> Ajouter
       </button>
     </div>
 
-    <div class="flex flex-wrap items-center gap-2 mb-4">
+    <!-- Filtres optimisés -->
+    <div class="flex flex-wrap items-center gap-3 bg-bg-soft/30 p-2 rounded-2xl border border-bg-soft shadow-inner text-xs">
       <select
         v-model="filterCategorie"
-        class="bg-bg border border-bg-hard rounded px-3 py-1 text-text text-xs outline-none focus:border-yellow"
+        class="bg-bg border border-bg-soft rounded-xl px-4 py-2 text-text text-xs outline-none focus:border-yellow transition-all appearance-none cursor-pointer"
       >
         <option value="">Toutes catégories</option>
-        <option value="plante">Plante</option>
-        <option value="jardin">Jardin</option>
-        <option value="tache">Tâche</option>
-        <option value="general">Général</option>
-        <option value="ravageur">Ravageur</option>
-        <option value="maladie">Maladie</option>
+        <option value="plante">🌱 Plante</option>
+        <option value="jardin">🏡 Jardin</option>
+        <option value="tache">✅ Tâche</option>
+        <option value="general">📖 Général</option>
+        <option value="ravageur">🐛 Ravageur</option>
+        <option value="maladie">🍄 Maladie</option>
       </select>
 
-      <input
-        v-model="filterTag"
-        placeholder="Filtrer par tag..."
-        class="bg-bg border border-bg-hard rounded px-3 py-1 text-text text-xs outline-none focus:border-yellow w-44"
-      />
+      <div class="relative flex-1 min-w-[200px]">
+        <span class="absolute left-3 top-1/2 -translate-y-1/2 opacity-40">🔍</span>
+        <input
+          v-model="filterTag"
+          placeholder="Filtrer par mot-clé..."
+          class="w-full bg-bg border border-bg-soft rounded-xl pl-9 pr-4 py-2 text-text text-xs outline-none focus:border-yellow transition-all"
+        />
+      </div>
 
       <button
         @click="filterMoisActuel = !filterMoisActuel"
         :class="[
-          'px-3 py-1 rounded-full text-xs font-medium transition-colors border',
-          filterMoisActuel ? 'bg-green/20 text-green border-green/40' : 'border-bg-hard text-text-muted',
+          'px-4 py-2 rounded-xl text-xs font-bold transition-all border uppercase tracking-widest',
+          filterMoisActuel ? 'bg-green/20 text-green border-green/40 shadow-lg' : 'border-bg-soft text-text-muted hover:text-text',
         ]"
       >
         📅 Ce mois
       </button>
 
-      <button @click="refresh" class="text-xs text-text-muted hover:text-text underline ml-auto">Rafraîchir</button>
+      <button @click="refresh" class="p-2 text-text-muted hover:text-yellow transition-colors" title="Actualiser">
+        🔄
+      </button>
     </div>
 
-    <div v-if="store.loading" class="text-text-muted text-sm">Chargement...</div>
-    <div v-else-if="!store.astuces.length" class="text-text-muted text-sm py-6">Aucune astuce pour ce filtre.</div>
+    <div v-if="store.loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-4">
+      <div v-for="i in 6" :key="i" class="card-jardin h-48 animate-pulse opacity-20"></div>
+    </div>
+    
+    <div v-else-if="!store.astuces.length" class="card-jardin text-center py-16 opacity-50 border-dashed border-2">
+      <div class="text-4xl mb-4">💡</div>
+      <p class="text-text-muted text-sm uppercase font-black tracking-widest">Aucun conseil trouvé</p>
+    </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+    <!-- Grille multi-colonnes -->
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
       <div
         v-for="a in store.astuces"
         :key="a.id"
-        class="bg-bg-soft rounded-xl p-4 border border-bg-hard"
+        class="card-jardin group flex flex-col h-full hover:border-yellow/40 transition-all shadow-sm hover:shadow-xl !p-4"
       >
-        <div class="flex items-start justify-between gap-2 mb-2">
-          <h2 class="text-text font-semibold leading-tight">{{ a.titre }}</h2>
-          <div class="flex gap-2 shrink-0">
-            <button @click="openEdit(a)" class="text-yellow text-xs hover:underline">Édit.</button>
-            <button @click="removeAstuce(a.id)" class="text-red text-xs hover:underline">Suppr.</button>
+        <div class="flex items-start justify-between gap-4 mb-3">
+          <div class="min-w-0">
+            <h2 class="text-text font-bold text-base group-hover:text-yellow transition-colors leading-tight truncate" :title="a.titre">{{ a.titre }}</h2>
+            <div class="flex items-center gap-2 mt-1.5">
+              <span v-if="a.categorie" class="badge badge-yellow !text-[8px] !px-1.5 !py-0.5">{{ a.categorie }}</span>
+              <span v-if="parseMois(a.mois).length" class="text-[8px] font-bold text-green uppercase tracking-widest bg-green/5 px-1.5 py-0.5 rounded border border-green/10">
+                📅 {{ parseMois(a.mois).join(', ') }}
+              </span>
+            </div>
+          </div>
+          <div class="flex gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+            <button @click="openEdit(a)" class="p-1 text-text-muted hover:text-yellow transition-transform hover:scale-110">✏️</button>
+            <button @click="removeAstuce(a.id)" class="p-1 text-text-muted hover:text-red transition-transform hover:scale-110">✕</button>
           </div>
         </div>
 
-        <p class="text-text-muted text-sm whitespace-pre-line">{{ a.contenu }}</p>
+        <p class="text-text-muted text-xs leading-relaxed whitespace-pre-line mb-4 flex-1 line-clamp-4 group-hover:line-clamp-none transition-all">
+          {{ a.contenu }}
+        </p>
 
-        <div v-if="parseMediaUrls(a.photos).length" class="mt-3 grid grid-cols-3 gap-2">
-          <img
-            v-for="(url, idx) in parseMediaUrls(a.photos)"
-            :key="`astuce-photo-${a.id}-${idx}`"
-            :src="url"
-            alt="photo astuce"
-            class="w-full h-20 object-cover rounded-md border border-bg-hard"
-          />
+        <!-- Médias compacts -->
+        <div v-if="parseMediaUrls(a.photos).length" class="mb-4 grid grid-cols-3 gap-1.5">
+          <div
+            v-for="(url, idx) in parseMediaUrls(a.photos).slice(0, 3)"
+            :key="idx"
+            class="relative aspect-square rounded-lg overflow-hidden border border-bg-hard shadow-sm"
+          >
+            <img :src="url" class="w-full h-full object-cover hover:scale-110 transition-transform cursor-pointer" />
+            <div v-if="idx === 2 && parseMediaUrls(a.photos).length > 3" class="absolute inset-0 bg-black/60 flex items-center justify-center text-[10px] font-black text-white pointer-events-none">
+              +{{ parseMediaUrls(a.photos).length - 3 }}
+            </div>
+          </div>
         </div>
 
-        <div v-if="parseMediaUrls(a.videos).length" class="mt-3 space-y-2">
-          <video
-            v-for="(url, idx) in parseMediaUrls(a.videos)"
-            :key="`astuce-video-${a.id}-${idx}`"
-            :src="url"
-            controls
-            muted
-            class="w-full rounded-md border border-bg-hard bg-black/40 max-h-52"
-          />
+        <div v-if="parseMediaUrls(a.videos).length" class="mb-4">
+          <div class="relative aspect-video rounded-xl overflow-hidden border border-bg-hard bg-black/20 group/vid">
+            <video :src="parseMediaUrls(a.videos)[0]" class="w-full h-full object-cover" />
+            <div class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-100 group-hover/vid:bg-black/20 transition-all">
+              <span class="text-2xl">🎬</span>
+            </div>
+          </div>
         </div>
 
-        <div class="mt-3 flex flex-wrap gap-1">
-          <span v-if="a.categorie" class="text-[11px] bg-yellow/15 text-yellow rounded-full px-2 py-0.5">{{ a.categorie }}</span>
-          <span v-for="t in parseTags(a.tags)" :key="`${a.id}-t-${t}`" class="text-[11px] bg-blue/15 text-blue rounded-full px-2 py-0.5">#{{ t }}</span>
-          <span v-if="parseMois(a.mois).length" class="text-[11px] bg-green/15 text-green rounded-full px-2 py-0.5">mois: {{ parseMois(a.mois).join(',') }}</span>
+        <!-- Tags -->
+        <div class="flex flex-wrap items-center gap-1.5 pt-3 border-t border-bg-hard/50">
+          <span v-for="t in parseTags(a.tags)" :key="t" class="text-[9px] font-black uppercase tracking-tighter text-blue bg-blue/5 px-1.5 py-0.5 rounded border border-blue/10">
+            #{{ t }}
+          </span>
         </div>
       </div>
     </div>
 
-    <div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-lg border border-bg-soft">
-        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier astuce' : 'Nouvelle astuce' }}</h2>
-        <form @submit.prevent="submitAstuce" class="flex flex-col gap-3">
-          <input
-            v-model="form.titre"
-            placeholder="Titre *"
-            required
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow"
-          />
+    <!-- Modal Formulaire -->
+    <div v-if="showForm" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4" @click.self="closeForm">
+      <div class="bg-bg-hard rounded-3xl p-8 w-full max-w-2xl border border-bg-soft shadow-2xl max-h-[90vh] overflow-y-auto">
+        <div class="flex items-center justify-between mb-6 border-b border-bg-soft pb-4">
+          <h2 class="text-text font-bold text-xl uppercase tracking-tighter">{{ editId ? 'Modifier l\'astuce' : 'Nouvelle pépite' }}</h2>
+          <button @click="closeForm" class="text-text-muted hover:text-red transition-colors text-xl">✕</button>
+        </div>
 
-          <textarea
-            v-model="form.contenu"
-            placeholder="Contenu *"
-            required
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-28"
-          />
-
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <select
-              v-model="form.categorie"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow"
-            >
-              <option value="">Catégorie</option>
-              <option value="plante">Plante</option>
-              <option value="jardin">Jardin</option>
-              <option value="tache">Tâche</option>
-              <option value="general">Général</option>
-              <option value="ravageur">Ravageur</option>
-              <option value="maladie">Maladie</option>
-            </select>
-
-            <input
-              v-model="form.source"
-              placeholder="Source"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow"
-            />
+        <form @submit.prevent="submitAstuce" class="space-y-4">
+          <div>
+            <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Titre accrocheur *</label>
+            <input v-model="form.titre" required placeholder="Ex: Mieux gérer le mildiou..."
+              class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none transition-all shadow-inner" />
           </div>
 
-          <input
-            v-model="form.tagsInput"
-            placeholder="Tags (ex: tomate, semis, mildiou)"
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow"
-          />
+          <div>
+            <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Corps du texte *</label>
+            <textarea v-model="form.contenu" required rows="1" placeholder="Partagez votre savoir-faire..."
+              @input="autoResize"
+              class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none resize-none transition-all shadow-inner overflow-hidden" />
+          </div>
 
-          <input
-            v-model="form.moisInput"
-            placeholder="Mois (ex: 3,4,5)"
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow"
-          />
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Catégorie</label>
+              <select v-model="form.categorie" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2.5 text-text text-xs outline-none focus:border-yellow">
+                <option value="">— Choisir —</option>
+                <option value="plante">🌱 Plante</option>
+                <option value="jardin">🏡 Jardin</option>
+                <option value="tache">✅ Tâche</option>
+                <option value="general">📖 Général</option>
+                <option value="ravageur">🐛 Ravageur</option>
+                <option value="maladie">🍄 Maladie</option>
+              </select>
+            </div>
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Source (URL/Nom)</label>
+              <input v-model="form.source" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2.5 text-text text-xs outline-none focus:border-yellow shadow-inner" />
+            </div>
+          </div>
 
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <label class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm cursor-pointer text-center hover:border-yellow">
-              {{ uploadingPhotos ? 'Upload photos...' : 'Ajouter photo(s)' }}
-              <input
-                type="file"
-                accept="image/*"
-                multiple
-                class="hidden"
-                @change="uploadFiles($event, 'photo')"
-              />
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Tags (virgule)</label>
+              <input v-model="form.tagsInput" placeholder="tomate, mildiou..."
+                class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2.5 text-text text-xs outline-none focus:border-yellow shadow-inner" />
+            </div>
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Mois (virgule)</label>
+              <input v-model="form.moisInput" placeholder="3, 4, 5..."
+                class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2.5 text-text text-xs outline-none focus:border-yellow shadow-inner" />
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 gap-4 pt-2">
+            <label class="btn-outline border-dashed border-bg-soft flex items-center justify-center gap-2 py-3 cursor-pointer hover:border-yellow hover:text-yellow text-[10px] font-black uppercase transition-all">
+              {{ uploadingPhotos ? '...' : '📸 Photos' }}
+              <input type="file" accept="image/*" multiple class="hidden" @change="uploadFiles($event, 'photo')" />
             </label>
-
-            <label class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm cursor-pointer text-center hover:border-yellow">
-              {{ uploadingVideos ? 'Upload vidéos...' : 'Ajouter vidéo(s)' }}
-              <input
-                type="file"
-                accept="video/*"
-                multiple
-                class="hidden"
-                @change="uploadFiles($event, 'video')"
-              />
+            <label class="btn-outline border-dashed border-bg-soft flex items-center justify-center gap-2 py-3 cursor-pointer hover:border-aqua hover:text-aqua text-[10px] font-black uppercase transition-all">
+              {{ uploadingVideos ? '...' : '🎬 Vidéos' }}
+              <input type="file" accept="video/*" multiple class="hidden" @change="uploadFiles($event, 'video')" />
             </label>
           </div>
 
-          <div v-if="form.photos.length" class="bg-bg border border-bg-soft rounded-lg p-2">
-            <div class="text-xs text-text-muted mb-1">Photos jointes</div>
-            <div class="grid grid-cols-3 gap-2">
-              <div v-for="(url, idx) in form.photos" :key="`form-photo-${idx}`" class="relative group">
-                <img :src="url" alt="photo astuce" class="w-full h-16 object-cover rounded border border-bg-hard" />
-                <button
-                  type="button"
-                  class="absolute top-1 right-1 hidden group-hover:block bg-red/80 text-white text-[10px] rounded px-1"
-                  @click="removeMedia('photo', idx)"
-                >
-                  ✕
-                </button>
+          <div v-if="form.photos.length || form.videos.length" class="bg-bg-soft/30 rounded-2xl p-3 border border-bg-soft max-h-40 overflow-y-auto space-y-3 shadow-inner">
+            <div v-if="form.photos.length" class="grid grid-cols-6 gap-2">
+              <div v-for="(url, idx) in form.photos" :key="idx" class="relative group aspect-square">
+                <img :src="url" class="w-full h-full object-cover rounded-lg border border-bg-hard" />
+                <button type="button" @click="removeMedia('photo', idx)" class="absolute top-1 right-1 bg-red text-white text-[8px] w-4 h-4 rounded-full flex items-center justify-center shadow-lg">✕</button>
               </div>
             </div>
           </div>
 
-          <div v-if="form.videos.length" class="bg-bg border border-bg-soft rounded-lg p-2">
-            <div class="text-xs text-text-muted mb-1">Vidéos jointes</div>
-            <div class="space-y-2">
-              <div v-for="(url, idx) in form.videos" :key="`form-video-${idx}`" class="relative group">
-                <video :src="url" controls muted class="w-full max-h-36 rounded border border-bg-hard bg-black/40" />
-                <button
-                  type="button"
-                  class="absolute top-1 right-1 hidden group-hover:block bg-red/80 text-white text-[10px] rounded px-1"
-                  @click="removeMedia('video', idx)"
-                >
-                  ✕
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div class="flex gap-2 justify-end mt-1">
-            <button type="button" @click="closeForm" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
-            <button type="submit" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-              {{ editId ? 'Enregistrer' : 'Créer' }}
+          <div class="flex justify-between items-center pt-6 border-t border-bg-soft mt-2">
+            <button type="button" class="btn-outline border-transparent text-text-muted hover:text-red uppercase text-xs font-bold px-6" @click="closeForm">Annuler</button>
+            <button type="submit" class="btn-primary !bg-yellow !text-bg px-12 py-3 shadow-xl">
+              {{ editId ? 'Sauvegarder' : 'Partager' }}
             </button>
           </div>
         </form>
@@ -371,6 +367,12 @@ function closeForm() {
   showForm.value = false
 }
 
+function autoResize(event: Event) {
+  const el = event.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
 async function submitAstuce() {
   const payload = {
     titre: form.titre.trim(),
diff --git a/frontend/src/views/BibliothequeView.vue b/frontend/src/views/BibliothequeView.vue
index c95e66a..27c62b8 100644
--- a/frontend/src/views/BibliothequeView.vue
+++ b/frontend/src/views/BibliothequeView.vue
@@ -1,109 +1,120 @@
 <template>
-  <div class="p-4 max-w-4xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-green">📷 Bibliothèque</h1>
-      <button @click="showIdentify = true"
-        class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-        Identifier une plante
+  <div class="p-4 max-w-6xl mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-green tracking-tight">Bibliothèque Photo</h1>
+        <p class="text-text-muted text-xs mt-1">Gérez vos captures et identifiez vos plantes par IA.</p>
+      </div>
+      <button @click="showIdentify = true" class="btn-primary flex items-center gap-2">
+        <span>🔬</span> Identifier
       </button>
     </div>
 
     <!-- Filtres -->
-    <div class="flex gap-2 mb-4 flex-wrap">
+    <div class="flex gap-2 mb-4 bg-bg-soft/30 p-1 rounded-full w-fit border border-bg-soft overflow-x-auto max-w-full no-scrollbar">
       <button v-for="f in filters" :key="f.val" @click="activeFilter = f.val"
-        :class="['px-3 py-1 rounded-full text-xs font-medium transition-colors',
-          activeFilter === f.val ? 'bg-green text-bg' : 'bg-bg-soft text-text-muted hover:text-text']">
+        :class="['px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-all whitespace-nowrap',
+          activeFilter === f.val ? 'bg-green text-bg shadow-lg' : 'text-text-muted hover:text-text']">
         {{ f.label }}
       </button>
     </div>
 
+    <div v-if="loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+      <div v-for="i in 5" :key="i" class="aspect-square card-jardin animate-pulse opacity-20"></div>
+    </div>
+    
+    <div v-else-if="!filtered.length" class="card-jardin text-center py-16 opacity-50 border-dashed">
+      <div class="text-4xl mb-4">📸</div>
+      <p class="text-text-muted text-sm uppercase font-black tracking-widest">Aucune photo trouvée</p>
+    </div>
+
     <!-- Grille -->
-    <div v-if="loading" class="text-text-muted text-sm">Chargement...</div>
-    <div v-else-if="!filtered.length" class="text-text-muted text-sm py-4">Aucune photo.</div>
-    <div v-else class="grid grid-cols-3 md:grid-cols-4 gap-2">
+    <div v-else class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
       <div v-for="m in filtered" :key="m.id"
-        class="aspect-square rounded-lg overflow-hidden bg-bg-hard relative group cursor-pointer"
+        class="group relative aspect-square rounded-2xl overflow-hidden bg-bg-hard border border-bg-soft/50 cursor-pointer shadow-sm hover:shadow-2xl hover:scale-[1.02] transition-all"
         @click="openLightbox(m)">
-        <img :src="m.thumbnail_url || m.url" :alt="m.titre || ''" class="w-full h-full object-cover" />
-        <div v-if="m.identified_common"
-          class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">
-          {{ m.identified_common }}
-        </div>
-        <div class="absolute top-1 left-1 bg-black/60 text-text-muted text-xs px-1 rounded">
-          {{ labelFor(m.entity_type) }}
+        
+        <img :src="m.thumbnail_url || m.url" :alt="m.titre || ''" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
+        
+        <!-- Overlay -->
+        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+        
+        <div class="absolute bottom-2 left-2 right-2 pointer-events-none">
+          <div v-if="m.identified_common" class="text-[10px] text-green font-black uppercase tracking-tighter truncate drop-shadow-md">
+            {{ m.identified_common }}
+          </div>
+          <div class="text-[8px] text-text-muted font-bold uppercase tracking-widest opacity-80">
+            {{ labelFor(m.entity_type) }}
+          </div>
         </div>
+
         <button @click.stop="deleteMedia(m)"
-          class="hidden group-hover:flex absolute top-1 right-1 bg-red/80 text-white text-xs rounded px-1">✕</button>
+          class="absolute top-2 right-2 bg-red/80 hover:bg-red text-white p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-all scale-75 group-hover:scale-100">
+          <span class="text-xs">✕</span>
+        </button>
       </div>
     </div>
 
-    <!-- Lightbox -->
-    <div v-if="lightbox" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4" @click.self="lightbox = null">
-      <div class="max-w-lg w-full bg-bg-hard rounded-xl overflow-hidden border border-bg-soft">
-        <img :src="lightbox.url" class="w-full" />
-        <div class="p-4">
-          <!-- Infos identification -->
-          <div v-if="lightbox.identified_species" class="text-center mb-3">
-            <div class="text-green font-semibold text-base">{{ lightbox.identified_common }}</div>
+    <!-- Lightbox stylisée -->
+    <div v-if="lightbox" class="fixed inset-0 bg-black/95 backdrop-blur-md z-[150] flex items-center justify-center p-4" @click.self="lightbox = null">
+      <div class="max-w-2xl w-full bg-bg-hard rounded-3xl overflow-hidden border border-bg-soft shadow-2xl animate-fade-in">
+        <div class="relative aspect-video sm:aspect-square bg-bg overflow-hidden">
+          <img :src="lightbox.url" class="w-full h-full object-contain" />
+          <button @click="lightbox = null" class="absolute top-4 right-4 bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-red transition-colors">✕</button>
+        </div>
+        
+        <div class="p-6 space-y-6">
+          <div v-if="lightbox.identified_species" class="text-center space-y-1">
+            <h2 class="text-green font-black text-2xl uppercase tracking-tighter">{{ lightbox.identified_common }}</h2>
             <div class="italic text-text-muted text-sm">{{ lightbox.identified_species }}</div>
-            <div class="text-xs text-text-muted mt-1">
-              Confiance : {{ Math.round((lightbox.identified_confidence || 0) * 100) }}% — via {{ lightbox.identified_source }}
+            <div class="badge badge-green !text-[9px] mt-2">
+              Confiance {{ Math.round((lightbox.identified_confidence || 0) * 100) }}% · via {{ lightbox.identified_source }}
             </div>
           </div>
-          <!-- Lien actuel -->
-          <div class="text-xs text-text-muted mb-3 text-center">
-            {{ labelFor(lightbox.entity_type) }}
-            <span v-if="lightbox.entity_type === 'plante' && plantName(lightbox.entity_id)">
-              : <span class="text-green font-medium">{{ plantName(lightbox.entity_id) }}</span>
+
+          <div class="flex items-center justify-center gap-2 text-xs text-text-muted font-bold uppercase tracking-widest border-y border-bg-soft py-3">
+            <span>Type :</span>
+            <span class="text-text">{{ labelFor(lightbox.entity_type) }}</span>
+            <span v-if="lightbox.entity_type === 'plante' && plantName(lightbox.entity_id)" class="text-green">
+              ({{ plantName(lightbox.entity_id) }})
             </span>
           </div>
-          <!-- Actions -->
-          <div class="flex gap-2 flex-wrap">
-            <button @click="startLink(lightbox!)"
-              class="flex-1 bg-blue/20 text-blue hover:bg-blue/30 px-3 py-2 rounded-lg text-xs font-medium transition-colors">
-              🔗 Associer à une plante
+
+          <div class="flex gap-3">
+            <button @click="startLink(lightbox!)" class="btn-outline flex-1 py-3 border-blue/20 text-blue hover:bg-blue/10 text-[10px] font-black uppercase tracking-widest">
+              🔗 Associer
             </button>
-            <button
-              @click="toggleAdventice(lightbox!)"
-              :class="[
-                'px-3 py-2 rounded-lg text-xs font-medium transition-colors',
-                isAdventice(lightbox!) ? 'bg-red/20 text-red hover:bg-red/30' : 'bg-green/20 text-green hover:bg-green/30'
-              ]"
-            >
-              {{ isAdventice(lightbox!) ? '🪓 Retirer adventice' : '🌾 Marquer adventice' }}
+            <button @click="toggleAdventice(lightbox!)"
+              :class="['btn-outline flex-1 py-3 text-[10px] font-black uppercase tracking-widest',
+                isAdventice(lightbox!) ? 'border-red/20 text-red hover:bg-red/10' : 'border-green/20 text-green hover:bg-green/10']">
+              {{ isAdventice(lightbox!) ? '🪓 Pas Adventice' : '🌾 Adventice' }}
             </button>
-            <button @click="deleteMedia(lightbox!); lightbox = null"
-              class="bg-red/20 text-red hover:bg-red/30 px-3 py-2 rounded-lg text-xs font-medium transition-colors">
-              🗑 Supprimer
+            <button @click="deleteMedia(lightbox!); lightbox = null" class="btn-outline py-3 px-4 border-red/20 text-red hover:bg-red/10">
+              🗑
             </button>
           </div>
-          <button class="mt-3 w-full text-text-muted hover:text-text text-sm" @click="lightbox = null">Fermer</button>
         </div>
       </div>
     </div>
 
-    <!-- Modal associer à une plante -->
-    <div v-if="linkMedia" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="linkMedia = null">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft">
-        <h3 class="text-text font-bold mb-4">Associer à une plante</h3>
+    <!-- Modal associer -->
+    <div v-if="linkMedia" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[200] flex items-center justify-center p-4" @click.self="linkMedia = null">
+      <div class="bg-bg-hard rounded-2xl p-6 w-full max-w-sm border border-bg-soft shadow-2xl">
+        <h3 class="text-text font-black uppercase tracking-tighter text-lg mb-4">Lier à une plante</h3>
         <select v-model="linkPlantId"
-          class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green mb-4">
-          <option :value="null">-- Choisir une plante --</option>
+          class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm outline-none focus:border-green mb-6 appearance-none shadow-inner">
+          <option :value="null">-- Choisir dans la liste --</option>
           <option v-for="p in plantsStore.plants" :key="p.id" :value="p.id">
             {{ formatPlantLabel(p) }}
           </option>
         </select>
-        <div class="flex gap-2 justify-end">
-          <button @click="linkMedia = null" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
-          <button @click="confirmLink" :disabled="!linkPlantId"
-            class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-40">
-            Associer
-          </button>
+        <div class="flex gap-3 justify-end">
+          <button @click="linkMedia = null" class="btn-outline border-transparent text-text-muted hover:text-red uppercase text-xs font-bold px-4">Annuler</button>
+          <button @click="confirmLink" :disabled="!linkPlantId" class="btn-primary px-6 disabled:opacity-30">Confirmer</button>
         </div>
       </div>
     </div>
 
-    <!-- Modal identification -->
     <PhotoIdentifyModal v-if="showIdentify" @close="showIdentify = false" @identified="onIdentified" />
   </div>
 </template>
diff --git a/frontend/src/views/CalendrierView.vue b/frontend/src/views/CalendrierView.vue
index 3be3153..4f2695d 100644
--- a/frontend/src/views/CalendrierView.vue
+++ b/frontend/src/views/CalendrierView.vue
@@ -1,204 +1,229 @@
 <template>
-  <div class="p-4 max-w-6xl mx-auto">
-    <h1 class="text-2xl font-bold text-blue mb-4">🌦️ Météo</h1>
-
-    <div class="flex flex-wrap items-center gap-2 mb-4">
-      <button
-        class="px-3 py-1.5 rounded-md text-xs font-medium bg-bg-soft text-text hover:text-blue border border-bg-hard"
-        @click="shiftWindow(-spanDays)"
-      >
-        ◀ Prev
-      </button>
-      <button
-        class="px-3 py-1.5 rounded-md text-xs font-medium bg-blue/20 text-blue border border-blue/30"
-        @click="goToday"
-      >
-        Today
-      </button>
-      <button
-        class="px-3 py-1.5 rounded-md text-xs font-medium bg-bg-soft text-text hover:text-blue border border-bg-hard"
-        @click="shiftWindow(spanDays)"
-      >
-        Next ▶
-      </button>
-      <span class="text-text-muted text-xs ml-1">
-        Fenêtre: {{ formatDate(rangeStart) }} → {{ formatDate(rangeEnd) }}
-      </span>
+  <div class="p-4 max-w-7xl mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-blue tracking-tight">Météo & Calendrier</h1>
+        <p class="text-text-muted text-xs mt-1">Données locales, prévisions et cycles lunaires combinés.</p>
+      </div>
+      
+      <!-- Navigateur -->
+      <div class="flex items-center gap-2 bg-bg-soft/30 p-1 rounded-xl border border-bg-soft">
+        <button @click="shiftWindow(-spanDays)" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Préc.</button>
+        <button @click="goToday" class="btn-primary !py-1.5 !px-4 text-xs !rounded-lg">Aujourd'hui</button>
+        <button @click="shiftWindow(spanDays)" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Suiv.</button>
+      </div>
     </div>
 
-    <div
-      v-if="stationCurrent"
-      class="bg-bg-soft rounded-xl p-4 border border-bg-hard mb-4 flex flex-wrap gap-4 items-center"
-    >
-      <div>
-        <div class="text-text-muted text-xs mb-1">Température extérieure</div>
-        <div class="text-text text-2xl font-bold">{{ stationCurrent.temp_ext?.toFixed(1) ?? '—' }}°C</div>
-      </div>
-      <div class="flex gap-4 text-sm">
-        <span v-if="stationCurrent.humidite != null" class="text-blue">💧{{ stationCurrent.humidite }}%</span>
-        <span v-if="stationCurrent.vent_kmh != null" class="text-text">💨{{ stationCurrent.vent_kmh }} km/h {{ stationCurrent.vent_dir || '' }}</span>
-        <span v-if="stationCurrent.pression != null" class="text-text">🧭{{ stationCurrent.pression }} hPa</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <img
-          v-if="currentOpenMeteo?.wmo != null"
-          :src="weatherIcon(currentOpenMeteo.wmo)"
-          class="w-6 h-6"
-          :alt="currentOpenMeteo.label || 'Météo'"
-        />
-        <div>
-          <div class="text-text-muted text-xs mb-1">Condition actuelle</div>
-          <div class="text-text text-sm">{{ currentOpenMeteo?.label || '—' }}</div>
+    <!-- Widgets Station & Actuel -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div class="md:col-span-2 card-jardin border-blue/20 bg-gradient-to-br from-bg-soft to-bg-hard flex flex-wrap items-center justify-around gap-6 py-6">
+        <div class="text-center">
+          <div class="text-text-muted text-[10px] uppercase font-black tracking-widest mb-1">Température Ext.</div>
+          <div class="text-4xl font-bold text-text">{{ stationCurrent?.temp_ext?.toFixed(1) ?? '--' }}°<span class="text-blue text-xl">C</span></div>
+          <div v-if="stationCurrent?.date_heure" class="text-[9px] text-text-muted font-bold uppercase mt-2 opacity-50">Relevé {{ stationCurrent.date_heure.slice(11, 16) }}</div>
+        </div>
+        
+        <div class="h-12 w-px bg-bg-hard hidden sm:block"></div>
+
+        <div class="flex flex-col gap-3">
+          <div class="flex items-center gap-3">
+            <span class="w-8 text-center text-blue text-xl">💧</span>
+            <div>
+              <div class="text-[9px] text-text-muted uppercase font-bold tracking-tighter leading-none">Humidité</div>
+              <div class="text-sm font-bold text-text">{{ stationCurrent?.humidite ?? '--' }}%</div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="w-8 text-center text-orange text-xl">💨</span>
+            <div>
+              <div class="text-[9px] text-text-muted uppercase font-bold tracking-tighter leading-none">Vent</div>
+              <div class="text-sm font-bold text-text">{{ stationCurrent?.vent_kmh ?? '--' }} <span class="text-[10px]">km/h</span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="h-12 w-px bg-bg-hard hidden sm:block"></div>
+
+        <div class="flex items-center gap-4">
+          <img v-if="currentOpenMeteo?.wmo != null" :src="weatherIcon(currentOpenMeteo.wmo)" class="w-16 h-16 drop-shadow-xl" />
+          <div>
+            <div class="text-[9px] text-text-muted uppercase font-bold tracking-widest mb-1">État du ciel</div>
+            <div class="text-sm font-bold text-blue uppercase">{{ currentOpenMeteo?.label || '—' }}</div>
+            <div class="text-[10px] text-text-muted font-mono mt-1">{{ stationCurrent?.pression ?? '--' }} hPa</div>
+          </div>
         </div>
       </div>
-      <div v-if="stationCurrent.date_heure" class="text-text-muted text-xs ml-auto">
-        Relevé {{ stationCurrent.date_heure.slice(11, 16) }}
+
+      <div class="card-jardin border-yellow/20 flex flex-col justify-center items-center text-center py-6">
+        <div class="text-text-muted text-[10px] uppercase font-black tracking-widest mb-2">Lune du jour</div>
+        <div class="text-5xl mb-3">
+          {{ lunarIcon(lunarForDate(todayIso())?.illumination ?? 0) }}
+        </div>
+        <div class="badge badge-yellow !text-[10px] mb-1">{{ lunarForDate(todayIso())?.croissante_decroissante || '--' }}</div>
+        <div class="text-xs font-bold text-text italic">Jour {{ lunarForDate(todayIso())?.type_jour || '--' }}</div>
       </div>
     </div>
 
-    <div v-if="loadingTableau" class="text-text-muted text-sm py-4">Chargement météo...</div>
-    <div v-else-if="!tableauRows.length" class="text-text-muted text-sm py-4">Pas de données météo.</div>
+    <!-- Tableau Synthétique -->
+    <div class="grid grid-cols-1 xl:grid-cols-4 gap-8">
+      <div class="xl:col-span-3 space-y-4">
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-aqua"></span>
+          Tableau de bord journalier
+        </h2>
+        
+        <div class="card-jardin !p-0 overflow-hidden border-bg-hard/50 shadow-2xl">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm border-collapse">
+              <thead>
+                <tr class="bg-bg-hard/50 text-[10px] font-black uppercase tracking-widest text-text-muted/60 border-b border-bg-hard">
+                  <th class="py-4 px-4 text-left">Date</th>
+                  <th class="py-4 px-2 text-center text-blue" colspan="3">Station</th>
+                  <th class="py-4 px-2 text-center text-green" colspan="4">Prévisions</th>
+                  <th class="py-4 px-4 text-right text-yellow">Lune</th>
+                </tr>
+                <tr class="text-[9px] font-bold uppercase tracking-tighter text-text-muted border-b border-bg-hard">
+                  <th class="py-2 px-4"></th>
+                  <th class="px-1 text-right opacity-60">Min</th>
+                  <th class="px-1 text-right opacity-60">Max</th>
+                  <th class="px-1 text-right opacity-60">Pluie</th>
+                  <th class="px-1 text-right opacity-60 border-l border-bg-hard/30">Min</th>
+                  <th class="px-1 text-right opacity-60">Max</th>
+                  <th class="px-1 text-right opacity-60">Pluie</th>
+                  <th class="px-2 text-left opacity-60">Ciel</th>
+                  <th class="px-4 text-right opacity-60">Calendrier</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in tableauRows" :key="row.date"
+                  @click="selectMeteoDate(row.date)"
+                  :class="['group cursor-pointer border-b border-bg-hard/30 transition-all hover:bg-bg-soft/20',
+                    row.type === 'aujourd_hui' ? 'bg-blue/5 !border-blue/30' : '',
+                    selectedMeteoDate === row.date ? 'bg-blue/10 !border-blue' : '']">
+                  
+                  <td class="py-3 px-4">
+                    <div :class="['text-sm font-black font-mono', row.type === 'aujourd_hui' ? 'text-blue' : 'text-text']">
+                      {{ formatDate(row.date) }}
+                    </div>
+                    <div v-if="row.type === 'aujourd_hui'" class="text-[8px] uppercase tracking-tighter text-blue font-black mt-0.5">Aujourd'hui</div>
+                  </td>
 
-    <div v-else class="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_340px] gap-4 items-start">
-      <div class="overflow-x-auto bg-bg-soft rounded-xl border border-bg-hard p-2">
-        <table class="w-full text-sm border-collapse">
-          <thead>
-            <tr class="text-text-muted text-xs">
-              <th class="text-left py-2 px-2">Date</th>
-              <th class="text-center py-2 px-2 text-blue" colspan="3">📡 Station locale</th>
-              <th class="text-center py-2 px-2 text-green border-l-2 border-bg-hard" colspan="4">🌐 Open-Meteo</th>
-              <th class="text-center py-2 px-2 text-yellow border-l-2 border-bg-hard" colspan="3">🌙 Lunaire</th>
-            </tr>
-            <tr class="text-text-muted text-xs border-b border-bg-hard">
-              <th class="text-left py-1 px-2"></th>
-              <th class="text-right py-1 px-1">T°min</th>
-              <th class="text-right py-1 px-1">T°max</th>
-              <th class="text-right py-1 px-1">💧mm</th>
+                  <td class="text-right px-1 font-mono text-xs text-blue">{{ stationTMin(row) }}</td>
+                  <td class="text-right px-1 font-mono text-xs text-orange font-bold">{{ stationTMax(row) }}</td>
+                  <td class="text-right px-1 font-mono text-xs text-aqua">{{ stationRain(row) }}</td>
 
-              <th class="text-right py-1 px-1 border-l-2 border-bg-hard">T°min</th>
-              <th class="text-right py-1 px-1">T°max</th>
-              <th class="text-right py-1 px-1">💧mm</th>
-              <th class="text-left py-1 px-2">État</th>
+                  <td class="text-right px-1 font-mono text-xs text-blue border-l border-bg-hard/30">{{ omTMin(row) }}</td>
+                  <td class="text-right px-1 font-mono text-xs text-orange font-bold">{{ omTMax(row) }}</td>
+                  <td class="text-right px-1 font-mono text-xs text-aqua">{{ omRain(row) }}</td>
+                  
+                  <td class="px-2">
+                    <div class="flex items-center gap-2">
+                      <img v-if="row.open_meteo?.wmo != null" :src="weatherIcon(row.open_meteo.wmo)" class="w-6 h-6 opacity-90 group-hover:scale-110 transition-transform" />
+                      <span class="text-[11px] font-medium text-text-muted truncate max-w-[85px]">{{ row.open_meteo?.label || '—' }}</span>
+                    </div>
+                  </td>
 
-              <th class="text-left py-1 px-2 border-l-2 border-bg-hard">Type lune</th>
-              <th class="text-left py-1 px-2">Mont./Desc.</th>
-              <th class="text-left py-1 px-2">Type jour</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="row in tableauRows"
-              :key="row.date"
-              @click="selectMeteoDate(row.date)"
-              :class="[
-                'border-b border-bg-hard transition-colors cursor-pointer',
-                row.type === 'passe' ? 'opacity-80' : '',
-                row.date === selectedMeteoDate ? 'bg-blue/10 border-blue' : '',
-              ]"
-            >
-              <td class="py-2 px-2 text-text-muted text-xs whitespace-nowrap">
-                <span :class="row.type === 'aujourd_hui' ? 'text-green font-bold' : ''">
-                  {{ formatDate(row.date) }}
-                </span>
-              </td>
+                  <td class="py-3 px-4 text-right">
+                    <div class="flex items-center justify-end gap-3">
+                      <!-- Élément -->
+                      <span :title="lunarForDate(row.date)?.type_jour || ''" class="text-xl filter drop-shadow-sm">
+                        {{ typeIcon(lunarForDate(row.date)?.type_jour || '') }}
+                      </span>
+                      <!-- Mouvement -->
+                      <span :title="lunarForDate(row.date)?.montante_descendante || ''" class="text-sm font-bold">
+                        {{ movementIcon(lunarForDate(row.date)?.montante_descendante || '') }}
+                      </span>
+                      <!-- Signe -->
+                      <span :title="lunarForDate(row.date)?.signe || ''" class="text-base opacity-80">
+                        {{ zodiacIcon(lunarForDate(row.date)?.signe || '') }}
+                      </span>
+                      <!-- Phase -->
+                      <span class="text-xl leading-none" :title="lunarForDate(row.date)?.croissante_decroissante || ''">
+                        {{ lunarIcon(lunarForDate(row.date)?.illumination ?? 0) }}
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
 
-              <td class="text-right px-1 text-blue text-xs">{{ stationTMin(row) }}</td>
-              <td class="text-right px-1 text-orange text-xs">{{ stationTMax(row) }}</td>
-              <td class="text-right px-1 text-blue text-xs">{{ stationRain(row) }}</td>
+        <!-- Légende enrichie -->
+        <div class="flex justify-end">
+          <div class="bg-bg-hard/50 rounded-2xl p-4 border border-bg-soft inline-grid grid-cols-3 gap-x-8 gap-y-3 shadow-inner text-xs">
+            <div class="col-span-3 text-[9px] font-black uppercase tracking-widest text-text-muted mb-1 border-b border-bg-soft pb-1">Légende du Calendrier</div>
+            
+            <div class="space-y-1">
+              <div class="text-[8px] font-bold text-text-muted uppercase tracking-tighter opacity-60">Éléments</div>
+              <div class="grid grid-cols-2 gap-1 text-[10px] text-text-muted">
+                <span>🥕 Racine</span> <span>🌿 Feuille</span>
+                <span>🌸 Fleur</span> <span>🍎 Fruit</span>
+              </div>
+            </div>
 
-              <td class="text-right px-1 text-blue text-xs border-l-2 border-bg-hard">{{ omTMin(row) }}</td>
-              <td class="text-right px-1 text-orange text-xs">{{ omTMax(row) }}</td>
-              <td class="text-right px-1 text-blue text-xs">{{ omRain(row) }}</td>
-              <td class="px-2">
-                <div class="flex items-center gap-1">
-                  <img
-                    v-if="row.open_meteo?.wmo != null"
-                    :src="weatherIcon(row.open_meteo.wmo)"
-                    class="w-5 h-5"
-                    :alt="row.open_meteo.label"
-                  />
-                  <span class="text-text-muted text-xs">{{ row.open_meteo?.label || '—' }}</span>
-                </div>
-              </td>
+            <div class="space-y-1">
+              <div class="text-[8px] font-bold text-text-muted uppercase tracking-tighter opacity-60">Mouvement</div>
+              <div class="grid grid-cols-1 gap-1 text-[10px] text-text-muted">
+                <span>↗️ <span class="font-bold text-yellow">Montante</span> (semis)</span>
+                <span>↘️ <span class="font-bold text-aqua">Descendante</span> (plant.)</span>
+              </div>
+            </div>
 
-              <td class="px-2 text-xs border-l-2 border-bg-hard">
-                {{ lunarForDate(row.date)?.croissante_decroissante || '—' }}
-              </td>
-              <td class="px-2 text-xs">
-                {{ lunarForDate(row.date)?.montante_descendante || '—' }}
-              </td>
-              <td class="px-2 text-xs" :class="typeColor(lunarForDate(row.date)?.type_jour || '')">
-                {{ lunarForDate(row.date)?.type_jour || '—' }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+            <div class="space-y-1">
+              <div class="text-[8px] font-bold text-text-muted uppercase tracking-tighter opacity-60">Signes</div>
+              <div class="text-[10px] text-text-muted font-mono leading-tight">
+                ♈ ♉ ♊ ♋ ♌ ♍<br/>♎ ♏ ♐ ♑ ♒ ♓
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <aside class="bg-bg-soft rounded-xl border border-bg-hard p-4">
-        <div v-if="!selectedMeteoRow" class="text-text-muted text-sm">Sélectionne un jour dans le tableau pour voir le détail.</div>
+      <!-- Détail Latéral -->
+      <aside class="space-y-6">
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-yellow"></span>
+          Focus Journée
+        </h2>
 
-        <div v-else class="space-y-3">
+        <div v-if="selectedMeteoRow" class="card-jardin space-y-6 animate-fade-in">
           <div>
-            <h3 class="text-text font-semibold">{{ formatDateLong(selectedMeteoRow.date) }}</h3>
-            <p class="text-text-muted text-xs">
-              {{ selectedMeteoRow.type === 'passe' ? 'Historique' : selectedMeteoRow.type === 'aujourd_hui' ? 'Aujourd\'hui' : 'Prévision' }}
-            </p>
+            <h3 class="text-text font-black text-lg leading-tight uppercase tracking-tighter">{{ formatDateLong(selectedMeteoRow.date) }}</h3>
+            <span class="badge badge-aqua !text-[9px] mt-1">{{ selectedSaint || 'Sainte Nature' }}</span>
           </div>
 
-          <div class="pt-2 border-t border-bg-hard">
-            <div class="text-blue text-xs font-semibold mb-1">📡 Station locale</div>
-            <div class="text-xs text-text-muted space-y-1">
-              <div v-if="selectedMeteoRow.station && 'temp_ext' in selectedMeteoRow.station && selectedMeteoRow.station.temp_ext != null">
-                T° actuelle: <span class="text-text">{{ selectedMeteoRow.station.temp_ext.toFixed(1) }}°</span>
-              </div>
-              <div>T° min: <span class="text-text">{{ stationTMin(selectedMeteoRow) }}</span></div>
-              <div>T° max/actuelle: <span class="text-text">{{ stationTMax(selectedMeteoRow) }}</span></div>
-              <div>Pluie: <span class="text-text">{{ stationRain(selectedMeteoRow) }}</span></div>
-              <div v-if="selectedMeteoRow.station && 'vent_kmh' in selectedMeteoRow.station && selectedMeteoRow.station.vent_kmh != null">
-                Vent max: <span class="text-text">{{ selectedMeteoRow.station.vent_kmh }} km/h</span>
-              </div>
-              <div v-if="selectedMeteoRow.station && 'humidite' in selectedMeteoRow.station && selectedMeteoRow.station.humidite != null">
-                Humidité: <span class="text-text">{{ selectedMeteoRow.station.humidite }}%</span>
+          <div class="space-y-4">
+            <div v-if="selectedLunarDay" class="bg-bg-hard/50 rounded-xl p-3 border border-yellow/10">
+              <div class="text-[9px] font-black uppercase tracking-widest text-yellow mb-2">Cycle Lunaire</div>
+              <div class="grid grid-cols-2 gap-2 text-[11px]">
+                <div class="text-text-muted">Type: <span class="text-text font-bold">{{ selectedLunarDay.croissante_decroissante }}</span></div>
+                <div class="text-text-muted">Mouv.: <span class="text-text font-bold">{{ selectedLunarDay.montante_descendante }}</span></div>
+                <div class="text-text-muted">Signe: <span class="text-text font-bold">{{ selectedLunarDay.signe }}</span></div>
+                <div class="text-text-muted">Lumière: <span class="text-text font-bold">{{ selectedLunarDay.illumination }}%</span></div>
+                <div class="text-text-muted col-span-2">Élément: <span class="text-text font-bold">{{ selectedLunarDay.type_jour || '--' }}</span></div>
               </div>
             </div>
-          </div>
 
-          <div class="pt-2 border-t border-bg-hard">
-            <div class="text-green text-xs font-semibold mb-1">🌐 Open-Meteo</div>
-            <div class="text-xs text-text-muted space-y-1">
-              <div>T° min: <span class="text-text">{{ omTMin(selectedMeteoRow) }}</span></div>
-              <div>T° max: <span class="text-text">{{ omTMax(selectedMeteoRow) }}</span></div>
-              <div>Pluie: <span class="text-text">{{ omRain(selectedMeteoRow) }}</span></div>
-              <div>État: <span class="text-text">{{ selectedMeteoRow.open_meteo?.label || '—' }}</span></div>
-              <div v-if="selectedMeteoRow.open_meteo?.vent_kmh != null">Vent: <span class="text-text">{{ selectedMeteoRow.open_meteo.vent_kmh }} km/h</span></div>
-              <div v-if="selectedMeteoRow.open_meteo?.sol_0cm != null">Sol 0cm: <span class="text-text">{{ selectedMeteoRow.open_meteo.sol_0cm }}°C</span></div>
-              <div v-if="selectedMeteoRow.open_meteo?.etp_mm != null">ETP: <span class="text-text">{{ selectedMeteoRow.open_meteo.etp_mm }} mm</span></div>
-            </div>
-          </div>
-
-          <div class="pt-2 border-t border-bg-hard">
-            <div class="text-yellow text-xs font-semibold mb-1">🌙 Lunaire</div>
-            <div v-if="selectedLunarDay" class="text-xs text-text-muted space-y-1">
-              <div>Type lune: <span class="text-text">{{ selectedLunarDay.croissante_decroissante }}</span></div>
-              <div>Montante/Descendante: <span class="text-text">{{ selectedLunarDay.montante_descendante }}</span></div>
-              <div>Type de jour: <span :class="['font-semibold', typeColor(selectedLunarDay.type_jour)]">{{ selectedLunarDay.type_jour }}</span></div>
-              <div>Signe: <span class="text-text">{{ selectedLunarDay.signe }}</span></div>
-              <div>Illumination: <span class="text-text">{{ selectedLunarDay.illumination }}%</span></div>
-              <div>Saint: <span class="text-text">{{ selectedSaint || '—' }}</span></div>
-            </div>
-            <div v-else class="text-xs text-text-muted">Donnée lunaire indisponible pour cette date.</div>
-          </div>
-
-          <div class="pt-2 border-t border-bg-hard">
-            <div class="text-orange text-xs font-semibold mb-1">📜 Dictons</div>
             <div v-if="selectedDictons.length" class="space-y-2">
-              <p v-for="d in selectedDictons" :key="`detail-dicton-${d.id}`" class="text-xs text-text-muted italic">
+              <div class="text-[9px] font-black uppercase tracking-widest text-orange opacity-60">Sagesse du jour</div>
+              <p v-for="d in selectedDictons" :key="d.id" class="text-xs text-text-muted italic bg-bg-hard/30 p-2 rounded-lg leading-relaxed border-l-2 border-orange/30">
                 "{{ d.texte }}"
               </p>
             </div>
-            <div v-else class="text-xs text-text-muted">Aucun dicton trouvé pour ce jour.</div>
           </div>
+
+          <div class="pt-4 border-t border-bg-hard flex justify-center">
+            <div class="text-center">
+              <div class="text-[9px] font-black uppercase tracking-widest text-green mb-2 opacity-60">Prévision Sol</div>
+              <div class="text-2xl font-mono text-text">{{ selectedMeteoRow.open_meteo?.sol_0cm?.toFixed(1) ?? '--' }}°C</div>
+              <div class="text-[10px] text-text-muted font-bold mt-1">à 0cm</div>
+            </div>
+          </div>
+        </div>
+        
+        <div v-else class="card-jardin text-center py-12 opacity-30 border-dashed">
+          <p class="text-[10px] font-bold uppercase">Sélectionner une date</p>
         </div>
       </aside>
     </div>
@@ -210,7 +235,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { lunarApi, type Dicton, type LunarDay } from '@/api/lunar'
 import { meteoApi, type StationCurrent, type TableauRow } from '@/api/meteo'
 
-const spanDays = 15
+const spanDays = 10
 
 const tableauRows = ref<TableauRow[]>([])
 const loadingTableau = ref(false)
@@ -226,28 +251,19 @@ const rangeStart = computed(() => shiftIso(centerDate.value, -spanDays))
 const rangeEnd = computed(() => shiftIso(centerDate.value, spanDays))
 
 const saintsFallback: Record<string, string> = {
-  '04-23': 'Saint Georges',
-  '04-25': 'Saint Marc',
-  '05-11': 'Saint Mamert',
-  '05-12': 'Saint Pancrace',
-  '05-13': 'Saint Servais',
-  '05-14': 'Saint Boniface',
-  '05-19': 'Saint Yves',
-  '05-25': 'Saint Urbain',
+  '04-23': 'Saint Georges', '04-25': 'Saint Marc', '05-11': 'Saint Mamert',
+  '05-12': 'Saint Pancrace', '05-13': 'Saint Servais', '05-14': 'Saint Boniface',
+  '05-19': 'Saint Yves', '05-25': 'Saint Urbain',
 }
 
 const selectedMeteoRow = computed(() => tableauRows.value.find((r) => r.date === selectedMeteoDate.value) || null)
 const selectedLunarDay = computed(() => lunarByDate.value[selectedMeteoDate.value] || null)
-const currentOpenMeteo = computed(() => {
-  const today = tableauRows.value.find((r) => r.type === 'aujourd_hui')
-  return today?.open_meteo || null
-})
+const currentOpenMeteo = computed(() => tableauRows.value.find((r) => r.type === 'aujourd_hui')?.open_meteo || null)
 
 const selectedSaint = computed(() => {
   if (!selectedMeteoDate.value) return ''
   if (selectedLunarDay.value?.saint_du_jour) return selectedLunarDay.value.saint_du_jour
-  const mmdd = selectedMeteoDate.value.slice(5)
-  return saintsFallback[mmdd] || ''
+  return saintsFallback[selectedMeteoDate.value.slice(5)] || ''
 })
 
 const selectedDictons = computed(() => {
@@ -255,10 +271,8 @@ const selectedDictons = computed(() => {
   const month = monthFromIso(selectedMeteoDate.value)
   const day = dayFromIso(selectedMeteoDate.value)
   const rows = dictonsByMonth.value[month] || []
-
   const exact = rows.filter((d) => d.jour === day)
-  if (exact.length) return exact
-  return rows.filter((d) => d.jour == null).slice(0, 3)
+  return exact.length ? exact : rows.filter((d) => d.jour == null).slice(0, 3)
 })
 
 function todayIso(): string {
@@ -272,21 +286,10 @@ function shiftIso(isoDate: string, days: number): string {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
 
-function shiftWindow(days: number) {
-  centerDate.value = shiftIso(centerDate.value, days)
-}
-
-function goToday() {
-  centerDate.value = todayIso()
-}
-
-function monthFromIso(isoDate: string): number {
-  return Number(isoDate.slice(5, 7))
-}
-
-function dayFromIso(isoDate: string): number {
-  return Number(isoDate.slice(8, 10))
-}
+function shiftWindow(days: number) { centerDate.value = shiftIso(centerDate.value, days) }
+function goToday() { centerDate.value = todayIso() }
+function monthFromIso(isoDate: string): number { return Number(isoDate.slice(5, 7)) }
+function dayFromIso(isoDate: string): number { return Number(isoDate.slice(8, 10)) }
 
 function selectMeteoDate(isoDate: string) {
   selectedMeteoDate.value = isoDate
@@ -306,124 +309,77 @@ async function ensureDictonsMonth(month: number) {
 async function loadLunarForTableau() {
   const months = Array.from(new Set(tableauRows.value.map((r) => r.date.slice(0, 7))))
   const map: Record<string, LunarDay> = {}
-
   for (const month of months) {
     try {
       const days = await lunarApi.getMonth(month)
       for (const d of days) map[d.date] = d
-    } catch {
-      // Mois indisponible: on laisse les cellules lunaires vides
-    }
+    } catch {}
   }
-
   lunarByDate.value = map
 }
 
 async function loadTableau() {
   loadingTableau.value = true
   try {
-    const res = await meteoApi.getTableau({
-      center_date: centerDate.value,
-      span: spanDays,
-    })
+    const res = await meteoApi.getTableau({ center_date: centerDate.value, span: spanDays })
     tableauRows.value = res.rows || []
     await loadLunarForTableau()
-
-    const selectedStillVisible = tableauRows.value.some((r) => r.date === selectedMeteoDate.value)
-    if (selectedStillVisible) return
-
     const todayRow = tableauRows.value.find((r) => r.type === 'aujourd_hui')
-    if (todayRow) {
-      selectMeteoDate(todayRow.date)
-    } else if (tableauRows.value.length) {
-      selectMeteoDate(tableauRows.value[0].date)
-    }
-  } catch {
-    tableauRows.value = []
-    lunarByDate.value = {}
+    if (todayRow && !selectedMeteoDate.value) selectMeteoDate(todayRow.date)
   } finally {
     loadingTableau.value = false
   }
 }
 
 async function loadStationCurrent() {
-  try {
-    stationCurrent.value = await meteoApi.getStationCurrent()
-  } catch {
-    stationCurrent.value = null
-  }
+  try { stationCurrent.value = await meteoApi.getStationCurrent() } catch { stationCurrent.value = null }
 }
 
-function lunarForDate(isoDate: string): LunarDay | null {
-  return lunarByDate.value[isoDate] || null
-}
+function lunarForDate(isoDate: string): LunarDay | null { return lunarByDate.value[isoDate] || null }
 
 function stationTMin(row: TableauRow): string {
-  if (row.station && 't_min' in row.station && row.station.t_min != null) return `${row.station.t_min.toFixed(1)}°`
-  return '—'
+  return (row.station && 't_min' in row.station && row.station.t_min != null) ? `${row.station.t_min.toFixed(1)}°` : '—'
 }
 
 function stationTMax(row: TableauRow): string {
   if (row.station && 't_max' in row.station && row.station.t_max != null) return `${row.station.t_max.toFixed(1)}°`
-  if (row.type === 'aujourd_hui' && row.station && 'temp_ext' in row.station && row.station.temp_ext != null) {
-    return `${row.station.temp_ext.toFixed(1)}° act.`
-  }
+  if (row.type === 'aujourd_hui' && row.station && 'temp_ext' in row.station && row.station.temp_ext != null) return `${row.station.temp_ext.toFixed(1)}°`
   return '—'
 }
 
-function stationRain(row: TableauRow): string {
-  if (row.station && row.station.pluie_mm != null) return String(row.station.pluie_mm)
-  return '—'
-}
-
-function omTMin(row: TableauRow): string {
-  return row.open_meteo?.t_min != null ? `${row.open_meteo.t_min.toFixed(1)}°` : '—'
-}
-
-function omTMax(row: TableauRow): string {
-  return row.open_meteo?.t_max != null ? `${row.open_meteo.t_max.toFixed(1)}°` : '—'
-}
-
-function omRain(row: TableauRow): string {
-  return row.open_meteo?.pluie_mm != null ? String(row.open_meteo.pluie_mm) : '—'
-}
+function stationRain(row: TableauRow): string { return row.station?.pluie_mm != null ? String(row.station.pluie_mm) : '—' }
+function omTMin(row: TableauRow): string { return row.open_meteo?.t_min != null ? `${row.open_meteo.t_min.toFixed(1)}°` : '—' }
+function omTMax(row: TableauRow): string { return row.open_meteo?.t_max != null ? `${row.open_meteo.t_max.toFixed(1)}°` : '—' }
+function omRain(row: TableauRow): string { return row.open_meteo?.pluie_mm != null ? String(row.open_meteo.pluie_mm) : '—' }
 
 function weatherIcon(code: number): string {
   const available = [0, 1, 2, 3, 45, 48, 51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 71, 73, 75, 77, 80, 81, 82, 85, 86, 95, 96, 99]
-  const closest = available.reduce((prev, curr) =>
-    Math.abs(curr - code) < Math.abs(prev - code) ? curr : prev,
-  )
+  const closest = available.reduce((p, c) => Math.abs(c - code) < Math.abs(p - code) ? c : p)
   return `/icons/weather/${closest}.svg`
 }
 
-function typeColor(type: string): string {
-  return ({ Racine: 'text-yellow', Feuille: 'text-green', Fleur: 'text-orange', Fruit: 'text-red' } as Record<string, string>)[type] || 'text-text-muted'
+function lunarIcon(illu: number): string {
+  if (illu < 5) return '🌑'; if (illu < 25) return '🌒'; if (illu < 45) return '🌓'; if (illu < 65) return '🌔';
+  if (illu < 85) return '🌕'; if (illu < 95) return '🌖'; if (illu < 98) return '🌗'; return '🌘'
 }
 
-function formatDate(dateStr: string): string {
-  return new Date(`${dateStr}T12:00:00`).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
+function typeIcon(t: string): string {
+  return ({ Racine: '🥕', Feuille: '🌿', Fleur: '🌸', Fruit: '🍎' } as any)[t] || '—'
 }
 
-function formatDateLong(dateStr: string): string {
-  return new Date(`${dateStr}T12:00:00`).toLocaleDateString('fr-FR', {
-    weekday: 'long',
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  })
+function movementIcon(md: string): string { return md === 'Montante' ? '↗️' : md === 'Descendante' ? '↘️' : '' }
+
+function zodiacIcon(s: string): string {
+  return ({
+    'Bélier': '♈', 'Taureau': '♉', 'Gémeaux': '♊', 'Cancer': '♋',
+    'Lion': '♌', 'Vierge': '♍', 'Balance': '♎', 'Scorpion': '♏',
+    'Sagittaire': '♐', 'Capricorne': '♑', 'Verseau': '♒', 'Poissons': '♓'
+  } as any)[s] || ''
 }
 
-watch(centerDate, () => {
-  void loadTableau()
-})
+function formatDate(ds: string): string { return new Date(`${ds}T12:00:00`).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' }) }
+function formatDateLong(ds: string): string { return new Date(`${ds}T12:00:00`).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }) }
 
-watch(selectedMeteoDate, (iso) => {
-  if (!iso) return
-  void ensureDictonsMonth(monthFromIso(iso))
-})
-
-onMounted(() => {
-  void loadTableau()
-  void loadStationCurrent()
-})
+watch(centerDate, loadTableau)
+onMounted(() => { void loadTableau(); void loadStationCurrent() })
 </script>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index d7a0c17..9a9b3c6 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -1,82 +1,147 @@
 <template>
-  <div class="p-4 max-w-6xl mx-auto">
-    <h1 class="text-2xl font-bold text-green mb-6">Tableau de bord</h1>
-
-    <section class="mb-6">
-      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">Tâches à faire</h2>
-      <div v-if="!pendingTasks.length" class="text-text-muted text-sm py-2">Aucune tâche en attente.</div>
-      <div
-        v-for="t in pendingTasks"
-        :key="t.id"
-        class="bg-bg-soft rounded-lg p-3 mb-2 flex items-center gap-3 border border-bg-hard"
-      >
-        <span :class="{
-          'text-red': t.priorite === 'haute',
-          'text-yellow': t.priorite === 'normale',
-          'text-text-muted': t.priorite === 'basse'
-        }">●</span>
-        <span class="text-text text-sm flex-1">{{ t.titre }}</span>
-        <button
-          class="text-xs text-green hover:underline px-2"
-          @click="tasksStore.updateStatut(t.id!, 'fait')"
-        >✓ Fait</button>
+  <div class="p-4 max-w-6xl mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <h1 class="text-3xl font-bold text-green tracking-tight">Tableau de bord</h1>
+      <div class="text-text-muted text-xs font-medium bg-bg-hard px-3 py-1 rounded-full border border-bg-soft">
+        🌿 {{ new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }) }}
       </div>
-    </section>
+    </div>
 
-    <section class="mb-6">
-      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">Météo</h2>
-
-      <div v-if="stationCurrent || meteo7j.length" class="bg-bg-soft rounded-xl p-3 border border-bg-hard mb-3">
-        <div class="text-text-muted text-xs mb-1">Condition actuelle</div>
-        <div class="flex items-center gap-3">
-          <img
-            v-if="meteoCurrent?.wmo != null"
-            :src="weatherIcon(meteoCurrent.wmo)"
-            class="w-8 h-8"
-            :alt="meteoCurrent.label || 'Météo'"
-          />
-          <div class="text-sm text-text">
-            <div>{{ meteoCurrent?.label || '—' }}</div>
-            <div class="text-text-muted text-xs">
-              {{ stationCurrent?.temp_ext != null ? `${stationCurrent.temp_ext.toFixed(1)}°C` : 'Temp. indisponible' }}
-              <span v-if="stationCurrent?.date_heure"> · relevé {{ stationCurrent.date_heure.slice(11, 16) }}</span>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- Section Tâches -->
+      <section class="lg:col-span-2">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-yellow"></span>
+            Tâches prioritaires
+          </h2>
+          <RouterLink to="/taches" class="text-xs text-yellow hover:underline font-bold uppercase tracking-wide">Voir tout</RouterLink>
+        </div>
+        
+        <div v-if="!pendingTasks.length" class="card-jardin text-center py-10 opacity-50">
+          <p class="text-text-muted text-sm">Aucune tâche en attente. Profitez du jardin ! ☕</p>
+        </div>
+        <div class="space-y-3">
+          <div
+            v-for="t in pendingTasks"
+            :key="t.id"
+            class="card-jardin flex items-center gap-4 group"
+          >
+            <div :class="[
+              'w-2 h-10 rounded-full shrink-0',
+              t.priorite === 'haute' ? 'bg-red' : t.priorite === 'normale' ? 'bg-yellow' : 'bg-bg-hard'
+            ]"></div>
+            <div class="flex-1 min-w-0">
+              <div class="text-text font-semibold text-sm truncate">{{ t.titre }}</div>
+              <div class="text-text-muted text-[10px] uppercase font-bold tracking-tight">Priorité {{ t.priorite }}</div>
             </div>
+            <button
+              class="btn-outline py-1 px-3 border-green/30 text-green hover:bg-green/10"
+              @click="tasksStore.updateStatut(t.id!, 'fait')"
+            >Terminer</button>
           </div>
         </div>
-      </div>
+      </section>
 
-      <div v-if="meteo7j.length" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-2">
-        <div v-for="day in meteo7j" :key="day.date"
-          class="bg-bg-soft rounded-xl p-3 border border-bg-hard flex flex-col items-center gap-1 min-w-0">
-          <div class="text-text-muted text-xs">{{ formatDate(day.date || '') }}</div>
+      <!-- Section Météo Actuelle -->
+      <section>
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest mb-4 flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-blue"></span>
+          Météo Locale
+        </h2>
+        
+        <div class="card-jardin border-blue/20 bg-gradient-to-br from-bg-soft to-bg-hard relative overflow-hidden">
+          <div v-if="meteoCurrent" class="relative z-10 flex flex-col items-center py-4">
+            <img
+              v-if="meteoCurrent?.wmo != null"
+              :src="weatherIcon(meteoCurrent.wmo)"
+              class="drop-shadow-2xl mb-2"
+              :style="{ width: 'calc(var(--ui-weather-icon-size, 48px) * 2)', height: 'calc(var(--ui-weather-icon-size, 48px) * 2)' }"
+              :alt="meteoCurrent.label || 'Météo'"
+            />
+            <div class="text-3xl font-bold text-text mb-1">
+              {{ stationCurrent?.temp_ext != null ? `${stationCurrent.temp_ext.toFixed(1)}°C` : '—°' }}
+            </div>
+            <div class="text-sm font-bold text-blue uppercase tracking-widest mb-4">{{ meteoCurrent?.label || '—' }}</div>
+            
+            <div class="grid grid-cols-2 gap-4 w-full pt-4 border-t border-bg-hard/50">
+              <div class="text-center">
+                <div class="text-[10px] text-text-muted uppercase font-bold">Humidité</div>
+                <div class="text-sm text-blue">{{ stationCurrent?.humidite ?? '--' }}%</div>
+              </div>
+              <div class="text-center">
+                <div class="text-[10px] text-text-muted uppercase font-bold">Vent</div>
+                <div class="text-sm text-text">{{ stationCurrent?.vent_kmh ?? '--' }} <span class="text-[10px]">km/h</span></div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="text-center py-10 opacity-50 text-sm">Connexion météo...</div>
+        </div>
+      </section>
+    </div>
+
+    <!-- Section Prévisions 7j -->
+    <section>
+      <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest mb-4 flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-aqua"></span>
+        Prévisions de la semaine
+      </h2>
+      <div v-if="meteo7j.length" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
+        <div v-for="(day, index) in meteo7j" :key="day.date"
+          :class="['card-jardin flex flex-col items-center gap-2 text-center transition-all group hover:-translate-y-1',
+                   index === 0 ? 'border-yellow/30 bg-yellow/5' : '']">
+          <div class="text-[10px] font-bold uppercase tracking-tighter" :class="index === 0 ? 'text-yellow' : 'text-text-muted'">
+            {{ index === 0 ? 'Aujourd\'hui' : formatDate(day.date || '') }}
+          </div>
           <img
             v-if="day.wmo != null"
             :src="weatherIcon(day.wmo)"
-            class="w-8 h-8"
+            class="group-hover:scale-110 transition-transform"
+            :style="{ width: 'var(--ui-weather-icon-size, 48px)', height: 'var(--ui-weather-icon-size, 48px)' }"
             :alt="day.label || 'Météo'"
           />
-          <div v-else class="text-2xl">—</div>
-          <div class="text-[11px] text-center text-text-muted leading-tight min-h-[30px]">{{ day.label || '—' }}</div>
-          <div class="flex gap-1 text-xs">
-            <span class="text-orange">↑{{ day.t_max != null ? day.t_max.toFixed(0) : '—' }}°</span>
-            <span class="text-blue">↓{{ day.t_min != null ? day.t_min.toFixed(0) : '—' }}°</span>
+          <div class="text-[10px] text-text-muted font-medium line-clamp-1 h-3">{{ day.label || '—' }}</div>
+          <div class="flex gap-2 text-xs font-bold pt-1">
+            <span class="text-orange">{{ day.t_max?.toFixed(1) }}°</span>
+            <span class="text-blue">{{ day.t_min?.toFixed(1) }}°</span>
           </div>
         </div>
       </div>
-      <div v-else class="text-text-muted text-sm py-2">Prévisions indisponibles.</div>
     </section>
 
+    <!-- Section Jardins -->
     <section>
-      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">Jardins</h2>
-      <div v-if="gardensStore.loading" class="text-text-muted text-sm">Chargement...</div>
-      <div
-        v-for="g in gardensStore.gardens"
-        :key="g.id"
-        class="bg-bg-soft rounded-lg p-4 mb-2 border border-bg-hard cursor-pointer hover:border-green transition-colors"
-        @click="router.push(`/jardins/${g.id}`)"
-      >
-        <span class="text-text font-medium">{{ g.nom }}</span>
-        <span class="ml-2 text-xs text-text-muted px-2 py-0.5 bg-bg rounded">{{ g.type }}</span>
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-orange"></span>
+          Mes Jardins
+        </h2>
+        <button class="btn-primary py-1 px-4 text-xs" @click="router.push('/jardins')">Gérer</button>
+      </div>
+      
+      <div v-if="gardensStore.loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div v-for="i in 3" :key="i" class="card-jardin h-24 animate-pulse opacity-20"></div>
+      </div>
+      
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div
+          v-for="g in gardensStore.gardens"
+          :key="g.id"
+          class="card-jardin flex flex-col justify-between group cursor-pointer hover:border-green/50"
+          @click="router.push(`/jardins/${g.id}`)"
+        >
+          <div class="flex items-start justify-between">
+            <div class="flex items-center gap-3">
+              <span class="text-2xl" :style="{ fontSize: 'var(--ui-dashboard-icon-size, 24px)' }">🪴</span>
+              <h3 class="text-text font-bold text-lg group-hover:text-green transition-colors">{{ g.nom }}</h3>
+            </div>
+            <span class="badge badge-yellow">{{ g.type?.replace('_', ' ') }}</span>
+          </div>
+          <div class="mt-4 flex items-center justify-between">
+            <span class="text-[10px] text-text-muted uppercase font-bold tracking-widest">{{ g.exposition }} · {{ g.surface_m2 }}m²</span>
+            <div class="text-green text-xl opacity-0 group-hover:opacity-100 transition-all">→</div>
+          </div>
+        </div>
       </div>
     </section>
   </div>
@@ -84,14 +149,16 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, RouterLink } from 'vue-router'
 import { useGardensStore } from '@/stores/gardens'
 import { useTasksStore } from '@/stores/tasks'
 import { meteoApi, type OpenMeteoDay, type StationCurrent } from '@/api/meteo'
+import { useToast } from '@/composables/useToast'
 
 const router = useRouter()
 const gardensStore = useGardensStore()
 const tasksStore = useTasksStore()
+const toast = useToast()
 const pendingTasks = computed(() => tasksStore.tasks.filter(t => t.statut === 'a_faire').slice(0, 5))
 
 const meteo7j = ref<OpenMeteoDay[]>([])
@@ -100,7 +167,8 @@ const meteoCurrent = computed(() => meteo7j.value[0] || null)
 
 function formatDate(s: string) {
   if (!s) return '—'
-  return new Date(s + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
+  const date = new Date(s + 'T12:00:00')
+  return date.toLocaleDateString('fr-FR', { weekday: 'short', day: 'numeric' })
 }
 
 function weatherIcon(code: number): string {
@@ -112,8 +180,11 @@ function weatherIcon(code: number): string {
 }
 
 onMounted(async () => {
-  gardensStore.fetchAll()
-  tasksStore.fetchAll()
+  // Chargement des données principales (silencieux si erreur)
+  try { await gardensStore.fetchAll() } catch { toast.warning('Jardins non disponibles') }
+  try { await tasksStore.fetchAll() } catch { toast.warning('Tâches non disponibles') }
+
+  // Météo : fallback silencieux, pas de toast intrusif
   try { stationCurrent.value = await meteoApi.getStationCurrent() } catch { stationCurrent.value = null }
   try { const r = await meteoApi.getPrevisions(7); meteo7j.value = r.days.slice(0, 7) } catch { meteo7j.value = [] }
 })
diff --git a/frontend/src/views/JardinDetailView.vue b/frontend/src/views/JardinDetailView.vue
index 47f71ea..968426f 100644
--- a/frontend/src/views/JardinDetailView.vue
+++ b/frontend/src/views/JardinDetailView.vue
@@ -3,7 +3,9 @@
     <button class="text-text-muted text-sm mb-4 hover:text-text" @click="router.back()">← Retour</button>
 
     <div v-if="garden">
-      <h1 class="text-2xl font-bold text-green mb-1">{{ garden.nom }}</h1>
+      <div class="flex items-start justify-between mb-1">
+        <h1 class="text-2xl font-bold text-green">{{ garden.nom }}</h1>
+      </div>
       <p class="text-text-muted text-sm mb-6">
         {{ garden.type }} · {{ garden.exposition ?? 'exposition non définie' }}
         <span v-if="garden.sol_type"> · Sol : {{ garden.sol_type }}</span>
@@ -39,21 +41,81 @@
           class="w-full max-h-72 object-cover rounded-lg border border-bg-hard bg-bg-soft" />
       </div>
 
-      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-3">
-        Grille {{ garden.grille_largeur }}×{{ garden.grille_hauteur }}
-      </h2>
+      <!-- En-tête grille -->
+      <div class="flex items-center justify-between mb-3">
+        <h2 class="text-text-muted text-xs uppercase tracking-widest">
+          Grille {{ garden.grille_largeur }}×{{ garden.grille_hauteur }}
+        </h2>
+        <div class="flex items-center gap-2">
+          <span v-if="editMode" class="text-xs text-orange">Cliquez pour activer/désactiver une zone</span>
+          <button @click="editMode = !editMode"
+            :class="['px-3 py-1 rounded-full text-xs font-bold border transition-all',
+              editMode ? 'bg-orange text-bg border-orange' : 'border-bg-soft text-text-muted hover:border-orange hover:text-orange']">
+            {{ editMode ? '✓ Terminer' : '✏️ Éditer zones' }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Légende -->
+      <div class="flex flex-wrap gap-4 mb-3 text-[10px] text-text-muted font-bold uppercase tracking-wider">
+        <span class="flex items-center gap-1.5">
+          <span class="w-3 h-3 rounded bg-bg border border-bg-soft inline-block"></span>Libre
+        </span>
+        <span class="flex items-center gap-1.5">
+          <span class="w-3 h-3 rounded bg-green/20 border border-green/60 inline-block"></span>Planté
+        </span>
+        <span class="flex items-center gap-1.5">
+          <span class="w-3 h-3 rounded bg-red/20 border border-red/40 inline-block"></span>Non cultivable
+        </span>
+      </div>
+
       <div class="overflow-x-auto pb-2">
         <div
           class="grid gap-1 w-max"
-          :style="`grid-template-columns: repeat(${garden.grille_largeur}, 52px)`"
+          :style="`grid-template-columns: repeat(${garden.grille_largeur}, 56px)`"
         >
           <div
             v-for="cell in displayCells" :key="`${cell.row}-${cell.col}`"
-            class="w-[52px] h-[52px] bg-bg-soft border border-bg-hard rounded-md flex items-center justify-center text-xs text-text-muted cursor-pointer hover:border-green transition-colors select-none"
-            :class="{ 'border-orange/60 bg-orange/10 text-orange': cell.etat === 'occupe' }"
-            :title="cell.libelle"
+            :class="[
+              'w-[56px] h-[56px] border rounded-md flex flex-col items-center justify-center text-[10px] select-none transition-all overflow-hidden',
+              editMode && cell.etat !== 'occupe' && !getCellPlanting(cell) ? 'cursor-pointer' : '',
+              getCellPlanting(cell)
+                ? 'bg-green/10 border-green/60 text-green'
+                : cell.etat === 'non_cultivable'
+                  ? 'bg-red/10 border-red/30 text-red/50'
+                  : 'bg-bg-soft border-bg-hard text-text-muted',
+              editMode && !getCellPlanting(cell) && cell.etat !== 'occupe'
+                ? (cell.etat === 'non_cultivable' ? 'hover:bg-red/20 hover:border-red/60' : 'hover:border-orange hover:bg-orange/10')
+                : ''
+            ]"
+            :title="getCellTitle(cell)"
+            @click="editMode && !getCellPlanting(cell) && cell.etat !== 'occupe' ? toggleNonCultivable(cell) : undefined"
           >
-            {{ cell.libelle }}
+            <span :class="['font-mono leading-none', getCellPlanting(cell) ? 'text-[9px] font-bold' : '']">
+              {{ cell.libelle }}
+            </span>
+            <span v-if="getCellPlanting(cell)" class="text-[8px] text-green/80 leading-none mt-0.5 px-0.5 text-center truncate w-full">
+              {{ plantShortName(getCellPlanting(cell)!) }}
+            </span>
+            <span v-else-if="cell.etat === 'non_cultivable'" class="text-[9px] leading-none">✕</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Saving indicator -->
+      <div v-if="saving" class="mt-2 text-xs text-text-muted animate-pulse">Enregistrement…</div>
+
+      <!-- Résumé plantations actives -->
+      <div v-if="activePlantings.length" class="mt-6">
+        <h3 class="text-text-muted text-xs uppercase tracking-widest mb-2">Plantations actives ({{ activePlantings.length }})</h3>
+        <div class="flex flex-wrap gap-2">
+          <div v-for="p in activePlantings" :key="p.id"
+            class="bg-bg-soft border border-green/30 rounded px-2 py-1 text-xs text-green flex items-center gap-1.5">
+            <span class="text-text-muted font-mono text-[10px]">
+              {{ plantCellLabel(p) }}
+            </span>
+            {{ plantName(p) }}
+            <span class="text-text-muted">· {{ p.statut }}</span>
           </div>
         </div>
       </div>
@@ -66,11 +128,17 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { gardensApi, type Garden, type GardenCell } from '@/api/gardens'
+import { plantingsApi, type Planting } from '@/api/plantings'
+import { plantsApi, type Plant } from '@/api/plants'
 
 const route = useRoute()
 const router = useRouter()
 const garden = ref<Garden | null>(null)
 const cells = ref<GardenCell[]>([])
+const plantings = ref<Planting[]>([])
+const plants = ref<Plant[]>([])
+const editMode = ref(false)
+const saving = ref(false)
 
 const displayCells = computed(() => {
   if (!garden.value) return []
@@ -88,9 +156,87 @@ const displayCells = computed(() => {
   return result
 })
 
+// Plantations actives (ni terminées ni échouées) pour ce jardin
+const activePlantings = computed(() =>
+  plantings.value.filter(p =>
+    p.garden_id === garden.value?.id &&
+    p.statut !== 'termine' &&
+    p.statut !== 'echoue'
+  )
+)
+
+// Map cellId → Planting active
+const activePlantingsByCellId = computed(() => {
+  const map = new Map<number, Planting>()
+  for (const p of activePlantings.value) {
+    if (p.cell_ids?.length) {
+      p.cell_ids.forEach(cid => map.set(cid, p))
+    } else if (p.cell_id) {
+      map.set(p.cell_id, p)
+    }
+  }
+  return map
+})
+
+function getCellPlanting(cell: GardenCell): Planting | undefined {
+  if (cell.id == null) return undefined
+  return activePlantingsByCellId.value.get(cell.id)
+}
+
+function plantName(p: Planting): string {
+  const plant = plants.value.find(pl => pl.id === p.variety_id)
+  return plant?.nom_commun ?? `Plante #${p.variety_id}`
+}
+
+function plantShortName(p: Planting): string {
+  return plantName(p).slice(0, 8)
+}
+
+function plantCellLabel(p: Planting): string {
+  const ids = p.cell_ids?.length ? p.cell_ids : (p.cell_id ? [p.cell_id] : [])
+  if (!ids.length) return '—'
+  return ids
+    .map(cid => cells.value.find(c => c.id === cid)?.libelle ?? `#${cid}`)
+    .join(', ')
+}
+
+function getCellTitle(cell: GardenCell): string {
+  const planting = getCellPlanting(cell)
+  if (planting) return `Planté : ${plantName(planting)} (${planting.statut})`
+  if (cell.etat === 'non_cultivable') return 'Non cultivable — cliquer pour rendre cultivable'
+  if (editMode.value) return 'Marquer comme non cultivable'
+  return cell.libelle ?? ''
+}
+
+async function toggleNonCultivable(cell: GardenCell) {
+  if (!garden.value?.id || saving.value) return
+  const newEtat = cell.etat === 'non_cultivable' ? 'libre' : 'non_cultivable'
+  saving.value = true
+  try {
+    if (cell.id) {
+      const updated = await gardensApi.updateCell(garden.value.id, cell.id, { ...cell, etat: newEtat })
+      const idx = cells.value.findIndex(c => c.id === cell.id)
+      if (idx !== -1) cells.value[idx] = updated
+    } else {
+      const created = await gardensApi.createCell(garden.value.id, {
+        col: cell.col, row: cell.row,
+        libelle: cell.libelle,
+        etat: newEtat,
+        garden_id: garden.value.id,
+      })
+      cells.value.push(created)
+    }
+  } catch { /* L'intercepteur affiche l'erreur */ }
+  finally { saving.value = false }
+}
+
 onMounted(async () => {
   const id = Number(route.params.id)
-  garden.value = await gardensApi.get(id)
-  cells.value = await gardensApi.cells(id)
+  ;[garden.value, cells.value, plantings.value, plants.value] = await Promise.all([
+    gardensApi.get(id),
+    gardensApi.cells(id),
+    plantingsApi.list(),
+    plantsApi.list(),
+  ])
 })
 </script>
diff --git a/frontend/src/views/JardinsView.vue b/frontend/src/views/JardinsView.vue
index d08e2d5..a9d2573 100644
--- a/frontend/src/views/JardinsView.vue
+++ b/frontend/src/views/JardinsView.vue
@@ -1,169 +1,243 @@
 <template>
-  <div class="p-4 max-w-5xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-green">🪴 Jardins</h1>
-      <button class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
-        @click="openCreate">+ Nouveau</button>
-    </div>
-
-    <div v-if="store.loading" class="text-text-muted text-sm">Chargement...</div>
-    <div v-for="g in store.gardens" :key="g.id"
-      class="bg-bg-soft rounded-lg p-4 mb-3 border border-bg-hard flex items-center gap-3 group">
-      <div class="flex-1 cursor-pointer" @click="router.push(`/jardins/${g.id}`)">
-        <div class="text-text font-medium group-hover:text-green transition-colors">{{ g.nom }}</div>
-        <div class="text-text-muted text-xs mt-1">
-          {{ typeLabel(g.type) }} · {{ g.grille_largeur }}×{{ g.grille_hauteur }} cases
-          <span v-if="g.exposition"> · {{ g.exposition }}</span>
-          <span v-if="g.carre_potager && g.carre_x_cm != null && g.carre_y_cm != null">
-            · Carré potager {{ g.carre_x_cm }}×{{ g.carre_y_cm }} cm
-          </span>
-          <span v-if="g.longueur_m != null && g.largeur_m != null"> · {{ g.longueur_m }}×{{ g.largeur_m }} m</span>
-          <span v-if="g.surface_m2 != null"> · {{ g.surface_m2 }} m²</span>
-        </div>
+  <div class="p-4 max-w-[1800px] mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-green tracking-tight">Mes Jardins</h1>
+        <p class="text-text-muted text-xs mt-1">Gérez vos espaces de culture et leurs dimensions.</p>
       </div>
-      <button @click="startEdit(g)" class="text-yellow text-xs hover:underline px-2">Édit.</button>
-      <button @click="store.remove(g.id!)" class="text-text-muted hover:text-red text-sm px-2">✕</button>
+      <button class="btn-primary flex items-center gap-2" @click="openCreate">
+        <span class="text-lg leading-none">+</span> Nouveau jardin
+      </button>
     </div>
 
-    <div v-if="!store.loading && !store.gardens.length" class="text-text-muted text-sm text-center py-8">
-      Aucun jardin. Créez-en un !
+    <div v-if="store.loading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+      <div v-for="i in 4" :key="i" class="card-jardin h-40 animate-pulse opacity-20"></div>
+    </div>
+    
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-6">
+      <div v-for="g in store.gardens" :key="g.id"
+        class="card-jardin flex flex-col justify-between group relative overflow-hidden h-full min-h-[200px]">
+        
+        <!-- Image de fond subtile si dispo -->
+        <div v-if="g.photo_parcelle" class="absolute inset-0 opacity-10 pointer-events-none">
+          <img :src="g.photo_parcelle" class="w-full h-full object-cover" />
+        </div>
+
+        <div class="relative z-10">
+          <div class="flex items-start justify-between mb-4">
+            <div class="min-w-0 flex-1">
+              <h2 class="text-text font-bold text-xl group-hover:text-green transition-colors cursor-pointer truncate" 
+                  @click="router.push(`/jardins/${g.id}`)">
+                {{ g.nom }}
+              </h2>
+              <div class="flex flex-wrap items-center gap-2 mt-1">
+                <span class="badge badge-yellow">{{ typeLabel(g.type) }}</span>
+                <span v-if="g.exposition" class="badge badge-blue">{{ g.exposition }}</span>
+              </div>
+            </div>
+            <div class="flex gap-1 shrink-0 ml-2">
+              <button @click="startEdit(g)" class="p-2 text-text-muted hover:text-yellow transition-colors" title="Modifier">
+                ✏️
+              </button>
+              <button @click="removeGarden(g.id!)" class="p-2 text-text-muted hover:text-red transition-colors" title="Supprimer">
+                ✕
+              </button>
+            </div>
+          </div>
+
+          <p v-if="g.description" class="text-text-muted text-sm mb-4 line-clamp-2 italic leading-relaxed">
+            {{ g.description }}
+          </p>
+
+          <div class="grid grid-cols-2 gap-4 py-3 border-t border-bg-hard/50">
+            <div>
+              <div class="text-[10px] text-text-muted uppercase font-bold tracking-widest">Grille</div>
+              <div class="text-sm text-text font-mono">
+                {{ g.grille_largeur }}×{{ g.grille_hauteur }} <span class="text-text-muted text-[10px]">cases</span>
+              </div>
+            </div>
+            <div>
+              <div class="text-[10px] text-text-muted uppercase font-bold tracking-widest">Surface</div>
+              <div class="text-sm text-text font-mono">
+                {{ g.surface_m2 || '--' }} <span class="text-text-muted text-[10px]">m²</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button @click="router.push(`/jardins/${g.id}`)" 
+                class="btn-outline w-full mt-4 border-green/20 text-green group-hover:bg-green/10 flex items-center justify-center gap-2 font-bold uppercase text-[10px] tracking-widest">
+          Ouvrir le plan →
+        </button>
+      </div>
     </div>
 
-    <!-- Modal création / édition -->
-    <div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-4xl border border-bg-soft max-h-[90vh] overflow-y-auto">
-        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier le jardin' : 'Nouveau jardin' }}</h2>
-        <form @submit.prevent="submit" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+    <div v-if="!store.loading && !store.gardens.length" class="card-jardin text-center py-16 opacity-50">
+      <div class="text-4xl mb-4">🪴</div>
+      <p class="text-text-muted text-sm">Vous n'avez pas encore créé de jardin.</p>
+      <button class="text-green hover:underline mt-2 font-bold" @click="openCreate">Commencer maintenant</button>
+    </div>
+
+    <!-- Modal création / édition ÉLARGIE -->
+    <div v-if="showForm" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4" @click.self="closeForm">
+      <div class="bg-bg-hard rounded-3xl p-8 w-full max-w-6xl border border-bg-soft shadow-2xl max-h-[90vh] overflow-y-auto">
+        <div class="flex items-center justify-between mb-8 border-b border-bg-soft pb-6">
           <div>
-            <label class="text-text-muted text-xs block mb-1">Nom *</label>
-            <input v-model="form.nom" required
-              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
+            <h2 class="text-text font-black text-2xl uppercase tracking-tighter">{{ editId ? 'Modifier l\'espace' : 'Nouvel espace de culture' }}</h2>
+            <p class="text-text-muted text-xs mt-1 italic">Configurez les paramètres physiques et géographiques de votre jardin.</p>
           </div>
-          <div class="lg:col-span-2">
-            <label class="text-text-muted text-xs block mb-1">Description</label>
-            <textarea v-model="form.description" rows="2"
-              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none resize-none" />
-          </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Type</label>
-            <select v-model="form.type" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
-              <option value="plein_air">Plein air</option>
-              <option value="serre">Serre</option>
-              <option value="tunnel">Tunnel</option>
-              <option value="bac">Bac / Pot</option>
-            </select>
-          </div>
-          <div class="bg-bg rounded border border-bg-hard p-3 lg:col-span-2">
-            <label class="inline-flex items-center gap-2 text-sm text-text">
-              <input v-model="form.carre_potager" type="checkbox" class="accent-green" />
-              Carré potager
-            </label>
-            <p class="text-text-muted text-[11px] mt-1">Active les dimensions X/Y en centimètres pour un bac carré.</p>
-          </div>
-          <div v-if="form.carre_potager" class="grid grid-cols-1 sm:grid-cols-2 gap-3 lg:col-span-2">
+          <button @click="closeForm" class="text-text-muted hover:text-red transition-colors text-2xl">✕</button>
+        </div>
+        
+        <form @submit.prevent="submit" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
+          <!-- Colonne 1 : Identité -->
+          <div class="space-y-6">
+            <h3 class="text-yellow font-bold text-xs uppercase tracking-widest flex items-center gap-2">
+              <span class="w-2 h-2 rounded-full bg-yellow"></span> Identité
+            </h3>
             <div>
-              <label class="text-text-muted text-xs block mb-1">Dimension X (cm)</label>
-              <input v-model.number="form.carre_x_cm" type="number" min="1" step="1"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Nom de l'espace *</label>
+              <input v-model="form.nom" required placeholder="Ex: Serre de semis"
+                class="w-full bg-bg border border-bg-soft rounded-2xl px-4 py-4 text-text text-sm focus:border-green outline-none transition-all shadow-inner" />
             </div>
             <div>
-              <label class="text-text-muted text-xs block mb-1">Dimension Y (cm)</label>
-              <input v-model.number="form.carre_y_cm" type="number" min="1" step="1"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Description libre</label>
+              <textarea v-model="form.description" rows="1" placeholder="Notes sur l'exposition réelle, l'historique..."
+                @input="autoResize"
+                class="w-full bg-bg border border-bg-soft rounded-2xl px-4 py-4 text-text text-sm focus:border-green outline-none resize-none transition-all shadow-inner overflow-hidden" />
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Type</label>
+                <select v-model="form.type" class="w-full bg-bg border border-bg-soft rounded-2xl px-4 py-3 text-text text-sm outline-none focus:border-green appearance-none">
+                  <option value="plein_air">Plein air</option>
+                  <option value="serre">Serre</option>
+                  <option value="tunnel">Tunnel</option>
+                  <option value="bac">Bac / Pot</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Exposition</label>
+                <select v-model="form.exposition" class="w-full bg-bg border border-bg-soft rounded-2xl px-4 py-3 text-text text-sm outline-none focus:border-green appearance-none">
+                  <option value="">— Choisir —</option>
+                  <option value="Nord">Nord</option>
+                  <option value="Est">Est</option>
+                  <option value="Sud">Sud</option>
+                  <option value="Ouest">Ouest</option>
+                  <option value="Sud-Est">Sud-Est</option>
+                  <option value="Sud-Ouest">Sud-Ouest</option>
+                </select>
+              </div>
             </div>
           </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Largeur grille</label>
-              <input v-model.number="form.grille_largeur" type="number" min="1" max="30"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
+
+          <!-- Colonne 2 : Géométrie & Grille -->
+          <div class="space-y-6">
+            <h3 class="text-aqua font-bold text-xs uppercase tracking-widest flex items-center gap-2">
+              <span class="w-2 h-2 rounded-full bg-aqua"></span> Géométrie & Grille
+            </h3>
+            
+            <div class="bg-bg-soft/30 rounded-3xl p-6 border border-bg-soft space-y-6">
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Colonnes (X)</label>
+                  <input v-model.number="form.grille_largeur" type="number" min="1" max="30"
+                    class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm font-mono" />
+                </div>
+                <div>
+                  <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Lignes (Y)</label>
+                  <input v-model.number="form.grille_hauteur" type="number" min="1" max="30"
+                    class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm font-mono" />
+                </div>
+              </div>
+
+              <div class="pt-4 border-t border-bg-hard">
+                <label class="inline-flex items-center gap-3 text-sm text-text cursor-pointer group">
+                  <div class="relative">
+                    <input v-model="form.carre_potager" type="checkbox" class="sr-only peer" />
+                    <div class="w-12 h-6 bg-bg-hard rounded-full peer peer-checked:bg-green transition-colors"></div>
+                    <div class="absolute left-1 top-1 w-4 h-4 bg-text-muted peer-checked:bg-bg peer-checked:translate-x-6 rounded-full transition-all"></div>
+                  </div>
+                  <span class="font-bold uppercase text-[10px] tracking-widest group-hover:text-green">Carré potager spécialisé</span>
+                </label>
+              </div>
+
+              <div v-if="form.carre_potager" class="grid grid-cols-2 gap-4 animate-fade-in">
+                <div>
+                  <label class="text-text-muted text-[10px] block mb-1 font-bold">X (cm)</label>
+                  <input v-model.number="form.carre_x_cm" type="number" min="1"
+                    class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm" />
+                </div>
+                <div>
+                  <label class="text-text-muted text-[10px] block mb-1 font-bold">Y (cm)</label>
+                  <input v-model.number="form.carre_y_cm" type="number" min="1"
+                    class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm" />
+                </div>
+              </div>
             </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Hauteur grille</label>
-              <input v-model.number="form.grille_hauteur" type="number" min="1" max="30"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
+
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Surface (m²)</label>
+                <input v-model.number="form.surface_m2" type="number" step="0.1" placeholder="Auto"
+                  class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm shadow-inner font-mono" />
+              </div>
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Sol</label>
+                <select v-model="form.sol_type" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm outline-none appearance-none">
+                  <option value="">— Type —</option>
+                  <option value="argileux">Argileux</option>
+                  <option value="limoneux">Limoneux</option>
+                  <option value="sableux">Sableux</option>
+                  <option value="calcaire">Calcaire</option>
+                  <option value="humifère">Humifère</option>
+                </select>
+              </div>
             </div>
           </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 lg:col-span-2">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Longueur (m)</label>
-              <input v-model.number="form.longueur_m" type="number" min="0" step="0.1"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
+
+          <!-- Colonne 3 : Localisation & Photo -->
+          <div class="space-y-6">
+            <h3 class="text-orange font-bold text-xs uppercase tracking-widest flex items-center gap-2">
+              <span class="w-2 h-2 rounded-full bg-orange"></span> Localisation & Visuel
+            </h3>
+            
+            <div class="space-y-4">
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-2">Adresse / Repère</label>
+                <input v-model="form.adresse" placeholder="Coordonnées ou adresse..."
+                  class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm outline-none focus:border-green shadow-inner" />
+              </div>
+              <div class="grid grid-cols-2 gap-4">
+                <input v-model.number="form.latitude" type="number" step="0.000001" placeholder="Lat."
+                  class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-xs font-mono" />
+                <input v-model.number="form.longitude" type="number" step="0.000001" placeholder="Long."
+                  class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-xs font-mono" />
+              </div>
             </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Largeur (m)</label>
-              <input v-model.number="form.largeur_m" type="number" min="0" step="0.1"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Surface (m²)</label>
-              <input v-model.number="form.surface_m2" type="number" min="0" step="0.1"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
+
+            <div class="bg-bg-soft/30 rounded-3xl p-4 border border-bg-soft">
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-3">Photo de l'espace</label>
+              <div class="relative group aspect-video rounded-2xl overflow-hidden bg-bg border-2 border-dashed border-bg-soft flex items-center justify-center cursor-pointer hover:border-green transition-all">
+                <input type="file" accept="image/*" @change="onPhotoSelected" class="absolute inset-0 opacity-0 cursor-pointer z-20" />
+                <img v-if="photoPreview" :src="photoPreview" class="absolute inset-0 w-full h-full object-cover" />
+                <div v-else class="text-center">
+                  <span class="text-3xl block mb-2">📸</span>
+                  <span class="text-[10px] font-bold uppercase text-text-muted">Importer une photo</span>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="lg:col-span-2">
-            <label class="text-text-muted text-xs block mb-1">Photo parcelle (image)</label>
-            <input type="file" accept="image/*" @change="onPhotoSelected"
-              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
-            <div v-if="photoPreview" class="mt-2">
-              <img :src="photoPreview" alt="Prévisualisation parcelle"
-                class="w-full max-h-44 object-cover rounded border border-bg-hard bg-bg-soft" />
+
+          <!-- Actions -->
+          <div class="md:col-span-2 xl:col-span-3 flex justify-between items-center pt-8 border-t border-bg-soft mt-4">
+            <button type="button" class="btn-outline border-transparent text-text-muted hover:text-red uppercase text-xs font-bold px-6" @click="closeForm">Abandonner</button>
+            <div class="flex gap-4">
+              <button type="submit" class="btn-primary px-12 py-4 text-base shadow-xl" :disabled="submitting">
+                {{ submitting ? 'Enregistrement…' : (editId ? 'Sauvegarder les modifications' : 'Créer cet espace de culture') }}
+              </button>
             </div>
           </div>
-          <div class="lg:col-span-2">
-            <label class="text-text-muted text-xs block mb-1">Adresse / localisation</label>
-            <input v-model="form.adresse"
-              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
-          </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 lg:col-span-2">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Latitude</label>
-              <input v-model.number="form.latitude" type="number" step="0.000001"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Longitude</label>
-              <input v-model.number="form.longitude" type="number" step="0.000001"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Altitude (m)</label>
-              <input v-model.number="form.altitude" type="number" step="1"
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm" />
-            </div>
-          </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 lg:col-span-2">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Exposition</label>
-              <select v-model="form.exposition" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
-                <option value="">—</option>
-                <option value="Nord">Nord</option>
-                <option value="Est">Est</option>
-                <option value="Sud">Sud</option>
-                <option value="Ouest">Ouest</option>
-                <option value="Sud-Est">Sud-Est</option>
-                <option value="Sud-Ouest">Sud-Ouest</option>
-              </select>
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Type de sol</label>
-              <select v-model="form.sol_type" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
-                <option value="">—</option>
-                <option value="argileux">Argileux</option>
-                <option value="limoneux">Limoneux</option>
-                <option value="sableux">Sableux</option>
-                <option value="calcaire">Calcaire</option>
-                <option value="humifère">Humifère</option>
-                <option value="mixte">Mixte</option>
-              </select>
-            </div>
-          </div>
-          <div class="flex gap-2 mt-2 lg:col-span-2">
-            <button type="submit" class="bg-green text-bg px-4 py-2 rounded text-sm font-semibold">
-              {{ editId ? 'Enregistrer' : 'Créer' }}
-            </button>
-            <button type="button" class="text-text-muted text-sm px-4 py-2 hover:text-text" @click="closeForm">Annuler</button>
-          </div>
         </form>
       </div>
     </div>
@@ -175,10 +249,13 @@ import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useGardensStore } from '@/stores/gardens'
 import { gardensApi, type Garden } from '@/api/gardens'
+import { useToast } from '@/composables/useToast'
 
 const router = useRouter()
 const store = useGardensStore()
+const toast = useToast()
 const showForm = ref(false)
+const submitting = ref(false)
 const editId = ref<number | null>(null)
 const photoFile = ref<File | null>(null)
 const photoPreview = ref('')
@@ -244,7 +321,16 @@ function onPhotoSelected(event: Event) {
   }
 }
 
+function autoResize(event: Event) {
+  const el = event.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
 async function submit() {
+  if (submitting.value) return
+  submitting.value = true
+
   const autoLongueur =
     form.carre_potager && form.carre_x_cm != null
       ? Number((form.carre_x_cm / 100).toFixed(2))
@@ -280,19 +366,46 @@ async function submit() {
     sol_type: form.sol_type || undefined,
   }
 
-  let saved: Garden
-  if (editId.value) {
-    saved = await store.update(editId.value, payload)
-  } else {
-    saved = await store.create(payload)
-  }
+  try {
+    let saved: Garden
+    if (editId.value) {
+      saved = await store.update(editId.value, payload)
+    } else {
+      saved = await store.create(payload)
+    }
 
-  if (photoFile.value && saved.id) {
-    await gardensApi.uploadPhoto(saved.id, photoFile.value)
-    await store.fetchAll()
+    if (photoFile.value && saved.id) {
+      try {
+        await gardensApi.uploadPhoto(saved.id, photoFile.value)
+        await store.fetchAll()
+      } catch {
+        toast.warning('Jardin sauvegardé mais la photo n\'a pas pu être uploadée')
+      }
+    }
+
+    toast.success(editId.value ? 'Jardin modifié avec succès' : 'Jardin créé avec succès')
+    closeForm()
+  } catch {
+    // L'intercepteur Axios affiche déjà le message d'erreur
+  } finally {
+    submitting.value = false
   }
-  closeForm()
 }
 
-onMounted(() => store.fetchAll())
+async function removeGarden(id: number) {
+  try {
+    await store.remove(id)
+    toast.success('Jardin supprimé')
+  } catch {
+    // L'intercepteur Axios affiche le message
+  }
+}
+
+onMounted(async () => {
+  try {
+    await store.fetchAll()
+  } catch {
+    toast.error('Impossible de charger les jardins')
+  }
+})
 </script>
diff --git a/frontend/src/views/OutilsView.vue b/frontend/src/views/OutilsView.vue
index 7ca84cf..2f2346d 100644
--- a/frontend/src/views/OutilsView.vue
+++ b/frontend/src/views/OutilsView.vue
@@ -1,91 +1,129 @@
 <template>
-  <div class="p-4 max-w-4xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-yellow">🔧 Outils</h1>
-      <button @click="openCreate" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
+  <div class="p-4 max-w-[1800px] mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-yellow tracking-tight">Outils de Jardinage</h1>
+        <p class="text-text-muted text-xs mt-1">Gérez votre inventaire, notices et vidéos d'utilisation.</p>
+      </div>
+      <button @click="openCreate" class="btn-primary !bg-yellow !text-bg flex items-center gap-2">
+        <span class="text-lg leading-none">+</span> Ajouter
+      </button>
     </div>
 
-    <div v-if="toolsStore.loading" class="text-text-muted text-sm">Chargement...</div>
-    <div v-else-if="!toolsStore.tools.length" class="text-text-muted text-sm py-4">Aucun outil enregistré.</div>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+    <div v-if="toolsStore.loading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-4">
+      <div v-for="i in 6" :key="i" class="card-jardin h-32 animate-pulse opacity-20"></div>
+    </div>
+    
+    <div v-else-if="!toolsStore.tools.length" class="card-jardin text-center py-16 opacity-50 border-dashed">
+      <div class="text-4xl mb-4">🔧</div>
+      <p class="text-text-muted text-sm uppercase font-black tracking-widest">Aucun outil enregistré.</p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-4">
       <div v-for="t in toolsStore.tools" :key="t.id"
-        class="bg-bg-soft rounded-lg p-4 border border-bg-hard flex flex-col gap-2">
-        <div class="flex items-center justify-between">
-          <span class="text-text font-semibold">{{ t.nom }}</span>
-          <div class="flex gap-2">
-            <button @click="startEdit(t)" class="text-yellow text-xs hover:underline">Édit.</button>
-            <button @click="removeTool(t.id!)" class="text-red text-xs hover:underline">Suppr.</button>
+        class="card-jardin group flex flex-col h-full hover:border-yellow/30 transition-all !p-3">
+        
+        <div class="flex items-start justify-between mb-2">
+          <div class="min-w-0 flex-1">
+            <h2 class="text-text font-bold text-base group-hover:text-yellow transition-colors truncate" :title="t.nom">{{ t.nom }}</h2>
+            <span v-if="t.categorie" class="badge badge-yellow !text-[8px] mt-0.5">{{ t.categorie }}</span>
+          </div>
+          <div class="flex gap-2 shrink-0 ml-2">
+            <button @click="startEdit(t)" class="text-[10px] text-text-muted hover:text-yellow font-bold uppercase tracking-tighter transition-colors">Édit.</button>
+            <button @click="removeTool(t.id!)" class="text-[10px] text-text-muted hover:text-red font-bold uppercase tracking-tighter transition-colors">Suppr.</button>
           </div>
         </div>
-        <span v-if="t.categorie" class="text-xs text-yellow bg-yellow/10 rounded-full px-2 py-0.5 w-fit">{{ t.categorie }}</span>
-        <p v-if="t.description" class="text-text-muted text-xs">{{ t.description }}</p>
-        <p v-if="t.boutique_nom || t.prix_achat != null" class="text-text-muted text-xs">
-          <span v-if="t.boutique_nom">🛒 {{ t.boutique_nom }}</span>
-          <span v-if="t.prix_achat != null"> · 💶 {{ t.prix_achat }} €</span>
-        </p>
-        <a v-if="t.boutique_url" :href="t.boutique_url" target="_blank" rel="noopener noreferrer"
-          class="text-blue text-xs hover:underline truncate">🔗 Boutique</a>
-        <a v-if="t.video_url" :href="t.video_url" target="_blank" rel="noopener noreferrer"
-          class="text-aqua text-xs hover:underline truncate">🎬 Vidéo</a>
-        <p v-if="t.notice_texte" class="text-text-muted text-xs whitespace-pre-line">{{ t.notice_texte }}</p>
-        <a v-else-if="t.notice_fichier_url" :href="t.notice_fichier_url" target="_blank" rel="noopener noreferrer"
-          class="text-aqua text-xs hover:underline truncate">📄 Notice (fichier)</a>
 
-        <div v-if="t.photo_url || t.video_url" class="mt-auto pt-2 space-y-2">
-          <img v-if="t.photo_url" :src="t.photo_url" alt="photo outil"
-            class="w-full h-28 object-cover rounded border border-bg-hard bg-bg" />
-          <video v-if="t.video_url" :src="t.video_url" controls muted
-            class="w-full h-36 object-cover rounded border border-bg-hard bg-bg" />
+        <p v-if="t.description" class="text-text-muted text-[11px] leading-snug line-clamp-2 mb-3 italic opacity-80">
+          {{ t.description }}
+        </p>
+
+        <!-- Médias Compacts -->
+        <div v-if="t.photo_url || t.video_url" class="mb-3 rounded-lg overflow-hidden bg-bg-hard border border-bg-soft/30 relative aspect-video shrink-0">
+          <img v-if="t.photo_url" :src="t.photo_url" class="w-full h-full object-cover transition-transform group-hover:scale-105" />
+          <div v-if="t.video_url && !t.photo_url" class="w-full h-full flex items-center justify-center text-aqua opacity-30">
+            <span class="text-2xl">🎬</span>
+          </div>
+          <!-- Overlay vidéo icon si dispo -->
+          <div v-if="t.video_url && t.photo_url" class="absolute bottom-1 right-1 bg-black/60 rounded px-1 py-0.5 text-[8px] text-aqua font-bold uppercase">Vidéo</div>
+        </div>
+
+        <div class="mt-auto pt-2 border-t border-bg-hard/30">
+          <div class="flex items-center justify-between gap-2">
+            <div class="flex gap-2 text-[9px] font-bold text-text-muted truncate">
+              <span v-if="t.boutique_nom" class="truncate">🛒 {{ t.boutique_nom }}</span>
+              <span v-if="t.prix_achat != null" class="shrink-0 text-yellow">{{ t.prix_achat }}€</span>
+            </div>
+            <div class="flex gap-1">
+              <a v-if="t.boutique_url" :href="t.boutique_url" target="_blank" 
+                 class="p-1 hover:bg-blue/10 rounded transition-colors text-blue" title="Boutique">🔗</a>
+              <a v-if="t.video_url" :href="t.video_url" target="_blank" 
+                 class="p-1 hover:bg-aqua/10 rounded transition-colors text-aqua" title="Vidéo">🎬</a>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
-    <div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-md border border-bg-soft">
-        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier l\'outil' : 'Nouvel outil' }}</h2>
-        <form @submit.prevent="submitTool" class="flex flex-col gap-3">
-          <input v-model="form.nom" placeholder="Nom de l'outil *" required
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
-          <select v-model="form.categorie"
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow">
-            <option value="">Catégorie</option>
-            <option value="beche">Bêche</option>
-            <option value="fourche">Fourche</option>
-            <option value="griffe">Griffe/Grelinette</option>
-            <option value="arrosage">Arrosage</option>
+    <!-- Modal Formulaire -->
+    <div v-if="showForm" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4" @click.self="closeForm">
+      <div class="bg-bg-hard rounded-2xl p-6 w-full max-w-xl border border-bg-soft shadow-2xl max-h-[90vh] overflow-y-auto">
+        <div class="flex items-center justify-between mb-6 border-b border-bg-soft pb-4">
+          <h2 class="text-text font-bold text-xl">{{ editId ? 'Modifier l\'outil' : 'Nouvel outil' }}</h2>
+          <button @click="closeForm" class="text-text-muted hover:text-red transition-colors text-xl">✕</button>
+        </div>
+
+        <form @submit.prevent="submitTool" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="md:col-span-2">
+            <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Nom de l'outil *</label>
+            <input v-model="form.nom" required placeholder="Grelinette, Sécateur..."
+              class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none transition-all shadow-inner" />
+          </div>
+          
+          <div>
+            <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Catégorie</label>
+            <select v-model="form.categorie" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2.5 text-text text-sm outline-none focus:border-yellow">
+              <option value="">— Choisir —</option>
+              <option value="beche">Bêche</option>
+              <option value="fourche">Fourche</option>
+              <option value="griffe">Griffe/Grelinette</option>
+              <option value="arrosage">Arrosage</option>
               <option value="taille">Taille</option>
               <option value="autre">Autre</option>
             </select>
-          <div class="grid grid-cols-2 gap-3">
-            <input v-model="form.boutique_nom" placeholder="Nom boutique"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
-            <input v-model.number="form.prix_achat" type="number" min="0" step="0.01" placeholder="Prix achat (€)"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
           </div>
-          <input v-model="form.boutique_url" type="url" placeholder="URL boutique (https://...)"
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
-          <textarea v-model="form.description" placeholder="Description..."
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-16" />
+
           <div>
-            <label class="text-text-muted text-xs block mb-1">Photo de l'outil</label>
-            <input type="file" accept="image/*" @change="onPhotoSelected"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
-            <img v-if="photoPreview" :src="photoPreview" alt="Prévisualisation photo"
-              class="mt-2 w-full h-28 object-cover rounded border border-bg-hard bg-bg" />
+            <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Prix (€)</label>
+            <input v-model.number="form.prix_achat" type="number" step="0.01"
+              class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2.5 text-text text-sm outline-none focus:border-yellow" />
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Vidéo de l'outil</label>
-            <input type="file" accept="video/*" @change="onVideoSelected"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
-            <video v-if="videoPreview" :src="videoPreview" controls muted
-              class="mt-2 w-full h-36 object-cover rounded border border-bg-hard bg-bg" />
+
+          <div class="md:col-span-2">
+            <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Description</label>
+            <textarea v-model="form.description" rows="1"
+              @input="autoResize"
+              class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-2 text-text text-sm focus:border-yellow outline-none resize-none transition-all overflow-hidden" />
           </div>
-          <textarea v-model="form.notice_texte" placeholder="Notice (texte libre)..."
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-24" />
-          <div class="flex gap-2 justify-end">
-            <button type="button" @click="closeForm" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
-            <button type="submit" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-              {{ editId ? 'Enregistrer' : 'Créer' }}
+
+          <!-- Upload Photo -->
+          <div class="bg-bg-soft/30 p-3 rounded-xl border border-bg-soft">
+            <label class="text-text-muted text-[9px] font-black uppercase tracking-widest block mb-2">Photo de l'outil</label>
+            <input type="file" accept="image/*" @change="onPhotoSelected" class="text-[10px] text-text-muted w-full" />
+            <img v-if="photoPreview" :src="photoPreview" class="mt-2 w-full h-24 object-cover rounded border border-bg-hard shadow-lg" />
+          </div>
+
+          <!-- Upload Vidéo -->
+          <div class="bg-bg-soft/30 p-3 rounded-xl border border-bg-soft">
+            <label class="text-text-muted text-[9px] font-black uppercase tracking-widest block mb-2">Vidéo démo</label>
+            <input type="file" accept="video/*" @change="onVideoSelected" class="text-[10px] text-text-muted w-full" />
+            <video v-if="videoPreview" :src="videoPreview" controls class="mt-2 w-full h-24 object-cover rounded border border-bg-hard shadow-lg" />
+          </div>
+
+          <div class="md:col-span-2 flex justify-between items-center pt-6 border-t border-bg-soft mt-2">
+            <button type="button" class="btn-outline border-transparent text-text-muted hover:text-red uppercase text-xs font-bold" @click="closeForm">Annuler</button>
+            <button type="submit" class="btn-primary !bg-yellow !text-bg px-8">
+              {{ editId ? 'Sauvegarder' : 'Enregistrer l\'outil' }}
             </button>
           </div>
         </form>
@@ -159,6 +197,12 @@ function onVideoSelected(event: Event) {
   if (file) videoPreview.value = URL.createObjectURL(file)
 }
 
+function autoResize(event: Event) {
+  const el = event.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
 function startEdit(t: Tool) {
   editId.value = t.id!
   Object.assign(form, {
diff --git a/frontend/src/views/PlanningView.vue b/frontend/src/views/PlanningView.vue
index e608fc6..9e7cb43 100644
--- a/frontend/src/views/PlanningView.vue
+++ b/frontend/src/views/PlanningView.vue
@@ -1,83 +1,120 @@
 <template>
-  <div class="p-4 max-w-3xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-green">📆 Planning</h1>
-      <!-- Navigateur 4 semaines -->
-      <div class="flex items-center gap-2">
-        <button @click="prevPeriod"
-          class="text-xs text-text-muted border border-bg-hard rounded px-2 py-1 hover:text-text hover:border-text-muted">
-          Prev
-        </button>
-        <button @click="goToday"
-          class="text-xs text-green border border-green/30 rounded px-2 py-1 hover:bg-green/10">
-          Today
-        </button>
-        <button @click="nextPeriod"
-          class="text-xs text-text-muted border border-bg-hard rounded px-2 py-1 hover:text-text hover:border-text-muted">
-          Next
-        </button>
+  <div class="p-4 max-w-6xl mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-green tracking-tight">Planning</h1>
+        <p class="text-text-muted text-xs mt-1">Visualisez et planifiez vos interventions sur 4 semaines.</p>
       </div>
-    </div>
-    <div class="text-text text-sm font-medium mb-3">{{ periodLabel }}</div>
-
-    <!-- En-tête jours -->
-    <div class="grid grid-cols-7 gap-1 mb-2">
-      <div v-for="dayName in dayHeaders" :key="dayName" class="text-center text-xs py-1 rounded text-text-muted">
-        {{ dayName }}
+      
+      <!-- Navigateur -->
+      <div class="flex items-center gap-2 bg-bg-soft/30 p-1 rounded-xl border border-bg-soft">
+        <button @click="prevPeriod" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Préc.</button>
+        <button @click="goToday" class="btn-primary !py-1.5 !px-4 text-xs !rounded-lg">Aujourd'hui</button>
+        <button @click="nextPeriod" class="btn-outline !py-1.5 !px-3 text-xs font-bold uppercase tracking-widest border-transparent hover:bg-bg-soft transition-all">Suiv.</button>
       </div>
     </div>
 
-    <!-- Grille 4 semaines -->
-    <div class="grid grid-cols-7 gap-1">
-      <div v-for="d in periodDays" :key="d.iso"
-        @click="selectDay(d.iso)"
-        :class="['min-h-24 rounded-lg p-1 border transition-colors cursor-pointer',
-          d.isToday ? 'border-green/40 bg-green/5' : 'border-bg-hard bg-bg-soft',
-          selectedIso === d.iso ? 'ring-1 ring-yellow/60 border-yellow/40' : '']">
-        <div class="text-[11px] text-text-muted mb-1">
-          <span :class="d.isToday ? 'text-green font-bold' : ''">{{ d.dayNum }}</span>
-          <span v-if="d.showMonth" class="ml-1">{{ d.monthShort }}</span>
-        </div>
-        <div v-if="todoTasksByDay[d.iso]?.length" class="flex items-center gap-1 flex-wrap mb-1">
-          <span v-for="(t, i) in todoTasksByDay[d.iso].slice(0, 10)" :key="`${d.iso}-${t.id ?? i}`"
-            :class="['w-1.5 h-1.5 rounded-full', dotClass(t.priorite)]"></span>
-        </div>
-        <div v-for="t in tasksByDay[d.iso] || []" :key="t.id"
-          :class="['text-xs rounded px-1 py-0.5 mb-0.5 cursor-pointer hover:opacity-80 truncate',
-            priorityClass(t.priorite)]"
-          :title="t.titre">
-          {{ t.titre }}
-        </div>
-        <!-- Zone drop-cible (vide) -->
-        <div v-if="!(tasksByDay[d.iso]?.length)" class="text-text-muted text-xs text-center pt-2 opacity-40">—</div>
+    <div class="flex items-center gap-3">
+      <div class="text-yellow font-bold text-sm tracking-widest uppercase bg-yellow/5 px-4 py-1 rounded-full border border-yellow/10">
+        {{ periodLabel }}
       </div>
     </div>
 
-    <!-- Détail jour sélectionné -->
-    <div class="mt-4 bg-bg-soft rounded-lg p-3 border border-bg-hard">
-      <div class="text-text text-sm font-semibold">{{ selectedLabel }}</div>
-      <div class="text-text-muted text-xs mt-0.5">{{ selectedTasks.length }} tâche(s) planifiée(s)</div>
-      <div v-if="!selectedTasks.length" class="text-text-muted text-xs mt-2">Aucune tâche planifiée ce jour.</div>
-      <div v-else class="mt-2 space-y-1">
-        <div v-for="t in selectedTasks" :key="t.id"
-          class="bg-bg rounded px-2 py-1 border border-bg-hard flex items-center gap-2">
-          <span :class="['w-2 h-2 rounded-full shrink-0', dotClass(t.priorite)]"></span>
-          <span class="text-text text-xs flex-1 truncate">{{ t.titre }}</span>
-          <span :class="['text-[10px] px-1.5 py-0.5 rounded shrink-0', statutClass(t.statut)]">{{ t.statut }}</span>
+    <!-- Calendrier Grid -->
+    <div class="space-y-4">
+      <!-- En-tête jours -->
+      <div class="grid grid-cols-7 gap-3">
+        <div v-for="dayName in dayHeaders" :key="dayName" 
+             class="text-center text-[10px] font-black uppercase tracking-[0.2em] text-text-muted/60 pb-2">
+          {{ dayName }}
+        </div>
+      </div>
+
+      <!-- Grille 4 semaines -->
+      <div class="grid grid-cols-7 gap-3">
+        <div v-for="d in periodDays" :key="d.iso"
+          @click="selectDay(d.iso)"
+          :class="['min-h-32 card-jardin !p-2 flex flex-col group relative cursor-pointer border-2 transition-all',
+            d.isToday ? 'border-green/40 bg-green/5' : 'border-bg-hard/50',
+            selectedIso === d.iso ? '!border-yellow bg-yellow/5 scale-[1.02] z-10 shadow-xl' : 'hover:border-bg-soft']">
+          
+          <div class="flex items-center justify-between mb-2">
+            <span :class="['text-xs font-bold font-mono', d.isToday ? 'text-green' : 'text-text-muted']">{{ d.dayNum }}</span>
+            <span v-if="d.showMonth" class="text-[9px] font-black uppercase tracking-tighter text-aqua">{{ d.monthShort }}</span>
+          </div>
+
+          <div class="flex-1 space-y-1 overflow-hidden">
+            <div v-for="t in tasksByDay[d.iso]?.slice(0, 3)" :key="t.id"
+              :class="['text-[9px] font-bold uppercase tracking-tighter rounded px-1.5 py-0.5 truncate border', priorityBorderClass(t.priorite)]">
+              {{ t.titre }}
+            </div>
+            <div v-if="tasksByDay[d.iso]?.length > 3" class="text-[9px] text-text-muted font-bold text-center pt-1">
+              + {{ tasksByDay[d.iso].length - 3 }} autres
+            </div>
+          </div>
+
+          <!-- Indicateurs points si plein -->
+          <div v-if="todoTasksByDay[d.iso]?.length" class="absolute bottom-2 right-2 flex gap-0.5">
+            <span v-for="(t, i) in todoTasksByDay[d.iso].slice(0, 3)" :key="i"
+              :class="['w-1 h-1 rounded-full', dotClass(t.priorite)]"></span>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- Tâches sans date -->
-    <div class="mt-6">
-      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-2">Sans date</h2>
-      <div v-if="!unscheduled.length" class="text-text-muted text-xs pl-2">Toutes les tâches ont une échéance.</div>
-      <div v-for="t in unscheduled" :key="t.id"
-        class="bg-bg-soft rounded-lg p-2 mb-1 border border-bg-hard flex items-center gap-2">
-        <span :class="['text-xs w-2 h-2 rounded-full flex-shrink-0', dotClass(t.priorite)]"></span>
-        <span class="text-text text-sm flex-1 truncate">{{ t.titre }}</span>
-        <span :class="['text-xs px-1.5 py-0.5 rounded', statutClass(t.statut)]">{{ t.statut }}</span>
-      </div>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 pt-4">
+      <!-- Détail jour sélectionné -->
+      <section class="lg:col-span-2 space-y-4">
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-yellow"></span>
+          Détails du {{ selectedLabel }}
+        </h2>
+        
+        <div v-if="!selectedTasks.length" class="card-jardin text-center py-12 opacity-40 border-dashed">
+          <p class="text-text-muted text-sm italic">Libre comme l'air ! Aucune tâche pour cette date. 🍃</p>
+        </div>
+        
+        <div v-else class="space-y-3">
+          <div v-for="t in selectedTasks" :key="t.id"
+            class="card-jardin flex items-center gap-4 group">
+            <div :class="['w-1.5 h-10 rounded-full shrink-0', dotClass(t.priorite)]"></div>
+            <div class="flex-1 min-w-0">
+              <div class="text-text font-bold text-sm">{{ t.titre }}</div>
+              <div class="flex items-center gap-3 mt-1">
+                <span :class="['badge !text-[9px]', statutClass(t.statut)]">{{ t.statut?.replace('_', ' ') }}</span>
+                <span class="text-[10px] text-text-muted uppercase font-bold tracking-tighter opacity-60">Priorité {{ t.priorite }}</span>
+              </div>
+            </div>
+            <div class="text-green text-xl opacity-0 group-hover:opacity-100 transition-all">→</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Tâches sans date -->
+      <section class="space-y-4">
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-orange"></span>
+          À planifier
+        </h2>
+        
+        <div v-if="!unscheduled.length" class="card-jardin text-center py-12 opacity-30 border-dashed">
+          <p class="text-[10px] font-bold uppercase">Tout est en ordre</p>
+        </div>
+        
+        <div class="space-y-2">
+          <div v-for="t in unscheduled" :key="t.id"
+            class="card-jardin !p-3 flex flex-col gap-2 hover:border-orange/30 transition-colors">
+            <div class="flex items-start justify-between gap-2">
+              <span class="text-text font-bold text-xs flex-1 line-clamp-2">{{ t.titre }}</span>
+              <div :class="['w-2 h-2 rounded-full shrink-0 mt-1', dotClass(t.priorite)]"></div>
+            </div>
+            <div class="flex justify-between items-center">
+              <span :class="['badge !text-[8px]', statutClass(t.statut)]">{{ t.statut }}</span>
+              <button class="text-[10px] text-orange font-bold uppercase hover:underline">Planifier</button>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
 </template>
@@ -185,19 +222,22 @@ function selectDay(iso: string) {
   selectedIso.value = iso
 }
 
-const priorityClass = (p: string) => ({
-  haute: 'bg-red/20 text-red',
-  normale: 'bg-yellow/20 text-yellow',
-  basse: 'bg-bg-hard text-text-muted',
-}[p] || 'bg-bg-hard text-text-muted')
+const priorityBorderClass = (p: string) => ({
+  haute: 'border-red/30 text-red bg-red/5',
+  normale: 'border-yellow/30 text-yellow bg-yellow/5',
+  basse: 'border-bg-soft text-text-muted bg-bg-hard/50',
+}[p] || 'border-bg-soft text-text-muted')
 
 const dotClass = (p: string) => ({
-  haute: 'bg-red', normale: 'bg-yellow', basse: 'bg-text-muted',
+  haute: 'bg-red shadow-[0_0_5px_rgba(251,73,52,0.5)]', 
+  normale: 'bg-yellow shadow-[0_0_5px_rgba(250,189,47,0.5)]', 
+  basse: 'bg-text-muted',
 }[p] || 'bg-text-muted')
 
 const statutClass = (s: string) => ({
-  a_faire: 'bg-blue/20 text-blue', en_cours: 'bg-green/20 text-green',
-  fait: 'bg-text-muted/20 text-text-muted',
+  a_faire: 'badge-blue', 
+  en_cours: 'badge-green',
+  fait: 'badge-text-muted',
 }[s] || '')
 
 onMounted(() => store.fetchAll())
diff --git a/frontend/src/views/PlantationsView.vue b/frontend/src/views/PlantationsView.vue
index 9f1f146..25daf8e 100644
--- a/frontend/src/views/PlantationsView.vue
+++ b/frontend/src/views/PlantationsView.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="p-4 max-w-5xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-green">🌱 Plantations</h1>
-      <button @click="showCreate = true"
-        class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-        + Nouvelle
+  <div class="p-4 max-w-6xl mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-green tracking-tight">Plantations</h1>
+        <p class="text-text-muted text-xs mt-1">Suivi de vos cultures, de la plantation à la récolte.</p>
+      </div>
+      <button @click="showCreate = true" class="btn-primary flex items-center gap-2">
+        <span class="text-lg leading-none">+</span> Nouvelle
       </button>
     </div>
 
     <!-- Filtres statut -->
-    <div class="flex gap-2 mb-4 flex-wrap">
+    <div class="flex gap-2 mb-4 bg-bg-soft/30 p-1 rounded-full w-fit border border-bg-soft">
       <button v-for="s in statuts" :key="s.val" @click="filterStatut = s.val"
-        :class="['px-3 py-1 rounded-full text-xs font-medium transition-colors',
-          filterStatut === s.val ? 'bg-blue text-bg' : 'bg-bg-soft text-text-muted hover:text-text']">
+        :class="['px-4 py-1.5 rounded-full text-xs font-bold transition-all',
+          filterStatut === s.val ? 'bg-yellow text-bg shadow-lg' : 'text-text-muted hover:text-text']">
         {{ s.label }}
       </button>
     </div>
@@ -22,79 +24,93 @@
       Aucune plantation enregistrée.
     </div>
 
-    <div v-for="p in filtered" :key="p.id"
-      class="bg-bg-soft rounded-xl mb-3 border border-bg-hard overflow-hidden">
-      <!-- En-tête plantation -->
-      <div class="p-4 flex items-start gap-3">
-        <div class="flex-1">
-          <div class="flex items-center gap-2 flex-wrap">
-            <span class="text-text font-semibold">{{ plantName(p.variety_id) }}</span>
-            <span class="text-text-muted text-xs">— {{ gardenName(p.garden_id) }}</span>
-            <span :class="['text-xs px-2 py-0.5 rounded-full font-medium', statutClass(p.statut)]">{{ p.statut }}</span>
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div v-for="p in filtered" :key="p.id"
+        class="card-jardin group flex flex-col justify-between">
+        
+        <div>
+          <div class="flex items-start justify-between mb-3">
+            <div>
+              <h2 class="text-text font-bold text-lg group-hover:text-green transition-colors">{{ plantName(p.variety_id) }}</h2>
+              <div class="flex items-center gap-2 mt-1 flex-wrap">
+                <span class="badge badge-yellow">{{ gardenName(p.garden_id) }}</span>
+                <span :class="['badge', statutClass(p.statut)]">{{ p.statut?.replace('_', ' ') }}</span>
+                <template v-if="p.cell_ids?.length">
+                  <span v-for="cid in p.cell_ids" :key="cid" class="badge bg-orange/20 text-orange">
+                    📍 {{ cellLabelById(p.garden_id, cid) }}
+                  </span>
+                </template>
+                <span v-else-if="p.cell_id" class="badge bg-orange/20 text-orange">📍 {{ cellLabelById(p.garden_id, p.cell_id) }}</span>
+              </div>
+            </div>
+            <div class="flex gap-1">
+              <button @click="startEdit(p)" class="p-1.5 text-text-muted hover:text-yellow transition-colors" title="Modifier">✏️</button>
+              <button @click="store.remove(p.id!)" class="p-1.5 text-text-muted hover:text-red transition-colors" title="Supprimer">✕</button>
+            </div>
           </div>
-          <div class="text-text-muted text-xs mt-1 flex gap-3 flex-wrap">
-            <span>{{ p.quantite }} plant(s)</span>
-            <span v-if="p.date_plantation">🌱 {{ fmtDate(p.date_plantation) }}</span>
-            <span v-if="p.boutique_nom">🛒 {{ p.boutique_nom }}</span>
-            <span v-if="p.tarif_achat != null">💶 {{ p.tarif_achat }} €</span>
-            <span v-if="p.date_achat">🧾 {{ fmtDate(p.date_achat) }}</span>
-            <span v-if="p.notes">📝 {{ p.notes }}</span>
+
+          <div class="flex flex-wrap gap-y-2 gap-x-4 text-[11px] text-text-muted font-bold uppercase tracking-wider mb-4 opacity-80">
+            <span class="flex items-center gap-1.5">📦 {{ p.quantite }} plants</span>
+            <span v-if="p.date_plantation" class="flex items-center gap-1.5">📅 {{ fmtDate(p.date_plantation) }}</span>
+            <span v-if="p.boutique_nom" class="flex items-center gap-1.5">🛒 {{ p.boutique_nom }}</span>
           </div>
+
+          <p v-if="p.notes" class="text-text-muted text-xs italic mb-4 line-clamp-2 bg-bg-hard/30 p-2 rounded-lg border-l-2 border-bg-soft">
+            {{ p.notes }}
+          </p>
         </div>
-        <div class="flex gap-2 items-center">
+
+        <div class="flex gap-2 pt-3 border-t border-bg-hard/50">
           <button @click="toggleRecoltes(p.id!)"
-            :class="['text-xs px-2 py-1 rounded transition-colors',
-              openRecoltes === p.id ? 'bg-aqua/20 text-aqua' : 'bg-bg-hard text-text-muted hover:text-aqua']">
-            🍅 Récoltes
+            :class="['flex-1 btn-outline py-1.5 flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-widest',
+              openRecoltes === p.id ? 'bg-aqua text-bg border-aqua' : 'border-aqua/20 text-aqua hover:bg-aqua/10']">
+            <span>🍅</span> Récoltes
           </button>
           <button
-            class="text-xs px-2 py-1 rounded bg-blue/20 text-blue hover:bg-blue/30 transition-colors"
+            class="btn-outline py-1.5 px-4 border-blue/20 text-blue hover:bg-blue/10 flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-widest"
             @click="openTaskFromTemplate(p)"
           >
-            ➕ Tâche
+            <span>➕</span> Tâche
           </button>
-          <button @click="startEdit(p)" class="text-yellow text-xs hover:underline">Édit.</button>
-          <button @click="store.remove(p.id!)" class="text-text-muted hover:text-red text-sm ml-1">✕</button>
         </div>
-      </div>
 
-      <!-- Section récoltes (dépliable) -->
-      <div v-if="openRecoltes === p.id" class="border-t border-bg-hard px-4 py-3 bg-bg/50">
-        <div v-if="loadingRecoltes" class="text-text-muted text-xs py-2">Chargement...</div>
-        <div v-else>
-          <div v-if="!recoltesList.length" class="text-text-muted text-xs mb-2">Aucune récolte enregistrée.</div>
-          <div v-for="r in recoltesList" :key="r.id"
-            class="flex items-center gap-3 text-sm py-1 border-b border-bg-hard last:border-0">
-            <span class="text-aqua font-mono">{{ r.quantite }} {{ r.unite }}</span>
-            <span class="text-text-muted text-xs">{{ fmtDate(r.date_recolte) }}</span>
-            <span v-if="r.notes" class="text-text-muted text-xs flex-1 truncate">{{ r.notes }}</span>
-            <button @click="deleteRecolte(r.id!, p.id!)" class="text-text-muted hover:text-red text-xs ml-auto">✕</button>
+        <!-- Section récoltes (dépliable) -->
+        <div v-if="openRecoltes === p.id" class="mt-4 animate-fade-in space-y-3 bg-bg-hard/50 p-4 rounded-xl border border-aqua/10">
+          <div v-if="loadingRecoltes" class="text-center py-4">
+            <div class="w-6 h-6 border-2 border-aqua/20 border-t-aqua rounded-full animate-spin mx-auto"></div>
           </div>
+          <div v-else>
+            <div v-if="!recoltesList.length" class="text-text-muted text-[10px] uppercase font-bold text-center py-2">Aucune récolte.</div>
+            <div v-for="r in recoltesList" :key="r.id"
+              class="flex items-center gap-3 text-sm py-2 border-b border-bg-hard last:border-0 group/row">
+              <span class="badge badge-green font-mono">{{ r.quantite }} {{ r.unite }}</span>
+              <span class="text-text-muted text-xs font-bold">{{ fmtDate(r.date_recolte) }}</span>
+              <span v-if="r.notes" class="text-text-muted text-xs italic flex-1 truncate">{{ r.notes }}</span>
+              <button @click="deleteRecolte(r.id!, p.id!)" class="text-text-muted hover:text-red opacity-0 group-hover/row:opacity-100 transition-opacity">✕</button>
+            </div>
 
-          <!-- Formulaire ajout récolte -->
-          <form @submit.prevent="addRecolte(p.id!)" class="flex gap-2 mt-3 flex-wrap items-end">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Quantité *</label>
-              <input v-model.number="rForm.quantite" type="number" step="0.1" min="0" required
-                class="bg-bg border border-bg-hard rounded px-2 py-1 text-text text-xs w-20 focus:border-aqua outline-none" />
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Unité</label>
-              <select v-model="rForm.unite"
-                class="bg-bg border border-bg-hard rounded px-2 py-1 text-text text-xs focus:border-aqua outline-none">
-                <option>kg</option><option>g</option><option>unites</option><option>litres</option><option>bottes</option>
-              </select>
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Date *</label>
-              <input v-model="rForm.date_recolte" type="date" required
-                class="bg-bg border border-bg-hard rounded px-2 py-1 text-text text-xs focus:border-aqua outline-none" />
-            </div>
-            <button type="submit"
-              class="bg-aqua text-bg px-3 py-1 rounded text-xs font-semibold hover:opacity-90 self-end">
-              + Ajouter
-            </button>
-          </form>
+            <!-- Formulaire ajout récolte -->
+            <form @submit.prevent="addRecolte(p.id!)" class="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-bg-hard">
+              <div class="col-span-1">
+                <input v-model.number="rForm.quantite" type="number" step="0.1" placeholder="Qté" required
+                  class="w-full bg-bg border border-bg-hard rounded-lg px-2 py-1.5 text-text text-xs focus:border-aqua outline-none" />
+              </div>
+              <div class="col-span-1">
+                <select v-model="rForm.unite"
+                  class="w-full bg-bg border border-bg-hard rounded-lg px-2 py-1.5 text-text text-xs focus:border-aqua outline-none">
+                  <option>kg</option><option>g</option><option>unites</option><option>litres</option><option>bottes</option>
+                </select>
+              </div>
+              <div class="col-span-1">
+                <input v-model="rForm.date_recolte" type="date" required
+                  class="w-full bg-bg border border-bg-hard rounded-lg px-2 py-1.5 text-text text-xs focus:border-aqua outline-none font-mono" />
+              </div>
+              <button type="submit"
+                class="col-span-3 bg-aqua text-bg py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest hover:opacity-90">
+                Enregistrer la récolte
+              </button>
+            </form>
+          </div>
         </div>
       </div>
     </div>
@@ -136,8 +152,9 @@
             <label class="text-text-muted text-xs block mb-1">Description complémentaire (optionnel)</label>
             <textarea
               v-model="taskTemplateForm.extra_description"
-              rows="2"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none"
+              rows="1"
+              @input="autoResize"
+              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none transition-all overflow-hidden"
             />
           </div>
           <div class="flex gap-2 justify-end">
@@ -156,111 +173,203 @@
     </div>
 
     <!-- Modal création / édition plantation -->
-    <div v-if="showCreate" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+    <div v-if="showCreate" class="fixed inset-0 bg-black/60 z-50 flex items-end sm:items-center justify-center sm:p-4"
       @click.self="closeCreate">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-md border border-bg-soft">
-        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier la plantation' : 'Nouvelle plantation' }}</h2>
-        <form @submit.prevent="createPlanting" class="flex flex-col gap-3">
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Jardin *</label>
-            <select v-model.number="cForm.garden_id" required
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="">Choisir un jardin</option>
-              <option v-for="g in gardensStore.gardens" :key="g.id" :value="g.id">{{ g.nom }}</option>
-            </select>
-          </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Plante *</label>
-            <select v-model.number="cForm.variety_id" required
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="">Choisir une plante</option>
-              <option v-for="p in plantsStore.plants" :key="p.id" :value="p.id">
-                {{ formatPlantLabel(p) }}
-              </option>
-            </select>
-          </div>
-          <div class="grid grid-cols-2 gap-3">
+      <div class="bg-bg-hard w-full sm:rounded-xl sm:max-w-2xl border-t sm:border border-bg-soft flex flex-col max-h-[92vh] sm:max-h-[90vh]">
+
+        <!-- En-tête fixe -->
+        <div class="flex items-center justify-between px-5 pt-5 pb-4 border-b border-bg-soft/40 shrink-0">
+          <h2 class="text-text font-bold text-base">{{ editId ? 'Modifier la plantation' : 'Nouvelle plantation' }}</h2>
+          <button type="button" @click="closeCreate" class="text-text-muted hover:text-text text-xl leading-none">✕</button>
+        </div>
+
+        <!-- Corps scrollable -->
+        <form id="planting-form" @submit.prevent="createPlanting"
+          class="flex-1 overflow-y-auto px-5 py-4 space-y-4">
+
+          <!-- Jardin + grille zones (pleine largeur) -->
+          <div class="space-y-3">
             <div>
-              <label class="text-text-muted text-xs block mb-1">Quantité</label>
-              <input v-model.number="cForm.quantite" type="number" min="1"
-                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+              <label class="text-text-muted text-xs block mb-1">Jardin *</label>
+              <select v-model.number="cForm.garden_id" required
+                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
+                <option value="">Choisir un jardin</option>
+                <option v-for="g in gardensStore.gardens" :key="g.id" :value="g.id">{{ g.nom }}</option>
+              </select>
             </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Date plantation</label>
-              <input v-model="cForm.date_plantation" type="date"
-                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+
+            <!-- Grille des zones (multi-sélect) -->
+            <div v-if="cForm.garden_id" class="bg-bg/50 rounded-lg p-3 border border-bg-soft/40">
+              <div class="flex items-center justify-between mb-2">
+                <label class="text-text-muted text-xs font-bold uppercase tracking-wider">
+                  Zones
+                  <span class="text-text-muted/40 normal-case font-normal tracking-normal ml-1">(optionnel)</span>
+                </label>
+                <button v-if="cForm.cell_ids.length" type="button"
+                  @click="cForm.cell_ids = []"
+                  class="text-[10px] text-red/70 hover:text-red font-bold uppercase tracking-wider">
+                  Effacer tout
+                </button>
+              </div>
+              <div v-if="loadingCells" class="flex justify-center py-3">
+                <div class="w-5 h-5 border-2 border-green/20 border-t-green rounded-full animate-spin"></div>
+              </div>
+              <div v-else class="space-y-2">
+                <div class="grid gap-1"
+                  :style="{ gridTemplateColumns: `repeat(${selectedGarden?.grille_largeur || 4}, minmax(0, 1fr))` }">
+                  <button
+                    v-for="cell in displayCells" :key="`${cell.row}-${cell.col}`"
+                    type="button"
+                    :disabled="cell.etat === 'non_cultivable' || (cell.id != null && occupiedCellIds.has(cell.id)) || creatingCell"
+                    @click="selectCell(cell)"
+                    :title="cell.etat === 'non_cultivable' ? 'Non cultivable'
+                      : (cell.id != null && occupiedCellIds.has(cell.id)) ? 'Zone occupée'
+                      : (cell.libelle || `Col ${cell.col + 1}, Rg ${cell.row + 1}`)"
+                    :class="[
+                      'rounded py-1 px-0.5 text-[10px] font-mono transition-all border truncate min-h-6 text-center select-none',
+                      cell.id != null && cForm.cell_ids.includes(cell.id)
+                        ? 'bg-green text-bg border-green font-bold'
+                        : cell.etat === 'non_cultivable'
+                          ? 'bg-red/10 text-red/40 border-red/20 cursor-not-allowed'
+                          : (cell.id != null && occupiedCellIds.has(cell.id))
+                            ? 'bg-bg/20 text-text-muted/30 border-bg-soft/20 cursor-not-allowed line-through'
+                            : 'bg-bg border-bg-soft/60 text-text-muted hover:border-green hover:text-green cursor-pointer'
+                    ]">
+                    {{ cell.libelle || `${String.fromCharCode(65 + cell.row)}${cell.col + 1}` }}
+                  </button>
+                </div>
+                <div v-if="creatingCell" class="text-xs text-text-muted animate-pulse">Création…</div>
+                <div v-else-if="cForm.cell_ids.length" class="flex flex-wrap gap-1 pt-0.5">
+                  <span v-for="cid in cForm.cell_ids" :key="cid"
+                    class="bg-green/20 text-green text-[10px] px-1.5 py-0.5 rounded font-mono">
+                    {{ cellLabelById(cForm.garden_id, cid) }}
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Statut</label>
-            <select v-model="cForm.statut"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="prevu">Prévu</option>
-              <option value="en_cours">En cours</option>
-              <option value="termine">Terminé</option>
-            </select>
-          </div>
-          <div class="grid grid-cols-2 gap-3">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Nom boutique</label>
-              <input v-model="cForm.boutique_nom" type="text" placeholder="Ex: Graines Bocquet"
-                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+
+          <!-- 2 colonnes sur desktop -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <!-- Colonne gauche : infos essentielles -->
+            <div class="space-y-3">
+              <div>
+                <label class="text-text-muted text-xs block mb-1">Plante *</label>
+                <select v-model.number="cForm.variety_id" required
+                  class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
+                  <option value="">Choisir une plante</option>
+                  <option v-for="p in plantsStore.plants" :key="p.id" :value="p.id">
+                    {{ formatPlantLabel(p) }}
+                  </option>
+                </select>
+              </div>
+              <div class="grid grid-cols-2 gap-2">
+                <div>
+                  <label class="text-text-muted text-xs block mb-1">Quantité</label>
+                  <input v-model.number="cForm.quantite" type="number" min="1"
+                    class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+                </div>
+                <div>
+                  <label class="text-text-muted text-xs block mb-1">Date plantation</label>
+                  <input v-model="cForm.date_plantation" type="date"
+                    class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+                </div>
+              </div>
+              <div>
+                <label class="text-text-muted text-xs block mb-1">Statut</label>
+                <select v-model="cForm.statut"
+                  class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
+                  <option value="prevu">Prévu</option>
+                  <option value="en_cours">En cours</option>
+                  <option value="termine">Terminé</option>
+                </select>
+              </div>
             </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Date achat</label>
-              <input v-model="cForm.date_achat" type="date"
-                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+
+            <!-- Colonne droite : infos achat + notes -->
+            <div class="space-y-3">
+              <div class="grid grid-cols-2 gap-2">
+                <div>
+                  <label class="text-text-muted text-xs block mb-1">Boutique</label>
+                  <input v-model="cForm.boutique_nom" type="text" placeholder="Ex: Bocquet"
+                    class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+                </div>
+                <div>
+                  <label class="text-text-muted text-xs block mb-1">Date achat</label>
+                  <input v-model="cForm.date_achat" type="date"
+                    class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+                </div>
+              </div>
+              <div class="grid grid-cols-2 gap-2">
+                <div>
+                  <label class="text-text-muted text-xs block mb-1">Tarif (€)</label>
+                  <input v-model.number="cForm.tarif_achat" type="number" min="0" step="0.01" placeholder="0.00"
+                    class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+                </div>
+                <div>
+                  <label class="text-text-muted text-xs block mb-1">URL boutique</label>
+                  <input v-model="cForm.boutique_url" type="url" placeholder="https://..."
+                    class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
+                </div>
+              </div>
+              <div>
+                <label class="text-text-muted text-xs block mb-1">Notes</label>
+                <textarea v-model="cForm.notes" rows="3" placeholder="Observations, variété, provenance…"
+                  class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none" />
+              </div>
             </div>
           </div>
-          <div class="grid grid-cols-2 gap-3">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Tarif achat (€)</label>
-              <input v-model.number="cForm.tarif_achat" type="number" min="0" step="0.01" placeholder="0.00"
-                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">URL boutique</label>
-              <input v-model="cForm.boutique_url" type="url" placeholder="https://..."
-                class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            </div>
-          </div>
-          <textarea v-model="cForm.notes" placeholder="Notes..."
-            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none h-16" />
-          <div class="flex gap-2 justify-end">
-            <button type="button" @click="closeCreate" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
-            <button type="submit" class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-              {{ editId ? 'Enregistrer' : 'Créer' }}
-            </button>
-          </div>
         </form>
+
+        <!-- Pied fixe avec boutons -->
+        <div class="px-5 py-4 border-t border-bg-soft/40 shrink-0 flex gap-2 justify-end bg-bg-hard rounded-b-xl">
+          <button type="button" @click="closeCreate"
+            class="px-4 py-2 text-text-muted hover:text-text text-sm rounded-lg border border-bg-soft/50 hover:border-bg-soft transition-colors">
+            Annuler
+          </button>
+          <button type="submit" form="planting-form"
+            class="bg-green text-bg px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-50 transition-opacity"
+            :disabled="submitting">
+            {{ submitting ? 'Enregistrement…' : (editId ? 'Enregistrer' : 'Créer') }}
+          </button>
+        </div>
+
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { usePlantingsStore } from '@/stores/plantings'
 import { useGardensStore } from '@/stores/gardens'
 import { usePlantsStore } from '@/stores/plants'
 import type { Planting } from '@/api/plantings'
+import { gardensApi, type GardenCell } from '@/api/gardens'
 import { recoltesApi, type Recolte } from '@/api/recoltes'
 import { tasksApi, type Task } from '@/api/tasks'
 import { formatPlantLabel } from '@/utils/plants'
+import { useToast } from '@/composables/useToast'
 
 const store = usePlantingsStore()
 const gardensStore = useGardensStore()
 const plantsStore = usePlantsStore()
+const toast = useToast()
 
 const showCreate = ref(false)
 const editId = ref<number | null>(null)
 const filterStatut = ref('')
+const submitting = ref(false)
 const openRecoltes = ref<number | null>(null)
 const recoltesList = ref<Recolte[]>([])
 const loadingRecoltes = ref(false)
 const templates = ref<Task[]>([])
 const showTaskTemplateModal = ref(false)
 const taskTarget = ref<Planting | null>(null)
+const gardenCells = ref<GardenCell[]>([])
+const loadingCells = ref(false)
+const creatingCell = ref(false)
+const cellsCache = new Map<number, GardenCell[]>()
 
 const statuts = [
   { val: '', label: 'Toutes' },
@@ -274,7 +383,8 @@ const cForm = reactive({
   garden_id: 0, variety_id: 0, quantite: 1,
   date_plantation: '', statut: 'prevu',
   boutique_nom: '', boutique_url: '', tarif_achat: undefined as number | undefined, date_achat: '',
-  notes: ''
+  notes: '',
+  cell_ids: [] as number[],
 })
 
 const rForm = reactive({
@@ -291,11 +401,102 @@ const filtered = computed(() =>
   filterStatut.value ? store.plantings.filter(p => p.statut === filterStatut.value) : store.plantings
 )
 
+// Chargement des zones quand le jardin change dans le formulaire
+watch(() => cForm.garden_id, async (newId, oldId) => {
+  // Réinitialiser les zones seulement si l'utilisateur change de jardin manuellement
+  if (oldId !== 0) cForm.cell_ids = []
+  gardenCells.value = []
+  if (!newId) return
+  if (cellsCache.has(newId)) {
+    gardenCells.value = cellsCache.get(newId)!
+    return
+  }
+  loadingCells.value = true
+  try {
+    const cells = await gardensApi.cells(newId)
+    gardenCells.value = cells
+    cellsCache.set(newId, cells)
+  } catch { /* silencieux */ }
+  finally { loadingCells.value = false }
+})
+
+const selectedGarden = computed(() =>
+  gardensStore.gardens.find(g => g.id === cForm.garden_id)
+)
+
+// Zones occupées par des plantations actives (hors récolté/échoué et hors édition en cours)
+const occupiedCellIds = computed(() => {
+  const ids = new Set<number>()
+  for (const p of store.plantings) {
+    if (p.id === editId.value || p.statut === 'termine' || p.statut === 'echoue') continue
+    if (p.cell_ids?.length) {
+      p.cell_ids.forEach(id => ids.add(id))
+    } else if (p.cell_id) {
+      ids.add(p.cell_id)
+    }
+  }
+  return ids
+})
+
+// Grille virtuelle complète : cases DB + cases virtuelles générées depuis les dimensions
+const displayCells = computed(() => {
+  if (!selectedGarden.value) return []
+  const { grille_largeur, grille_hauteur } = selectedGarden.value
+  const map = new Map(gardenCells.value.map(c => [`${c.row}-${c.col}`, c]))
+  const result: GardenCell[] = []
+  for (let row = 0; row < grille_hauteur; row++) {
+    for (let col = 0; col < grille_largeur; col++) {
+      result.push(map.get(`${row}-${col}`) ?? {
+        col, row,
+        libelle: `${String.fromCharCode(65 + row)}${col + 1}`,
+        etat: 'libre',
+      })
+    }
+  }
+  return result
+})
+
 function plantName(id: number) {
   const p = plantsStore.plants.find(x => x.id === id)
   return p ? formatPlantLabel(p) : `Plante #${id}`
 }
 
+function cellLabelById(gardenId: number, cellId: number): string {
+  const cells = cellsCache.get(gardenId)
+  if (!cells) return `Zone #${cellId}`
+  const cell = cells.find(c => c.id === cellId)
+  return cell ? (cell.libelle || `${String.fromCharCode(65 + cell.row)}${cell.col + 1}`) : `Zone #${cellId}`
+}
+
+async function selectCell(cell: GardenCell) {
+  if (creatingCell.value) return
+  if (cell.etat === 'non_cultivable') return
+  if (cell.id != null && occupiedCellIds.value.has(cell.id)) return
+  // Case déjà en DB : toggler dans cell_ids
+  if (cell.id != null) {
+    const idx = cForm.cell_ids.indexOf(cell.id)
+    if (idx !== -1) cForm.cell_ids.splice(idx, 1)
+    else cForm.cell_ids.push(cell.id)
+    return
+  }
+  // Case virtuelle (pas en DB) : la créer d'abord, puis l'ajouter
+  if (!cForm.garden_id) return
+  creatingCell.value = true
+  try {
+    const created = await gardensApi.createCell(cForm.garden_id, {
+      col: cell.col, row: cell.row,
+      libelle: cell.libelle,
+      etat: 'libre',
+      garden_id: cForm.garden_id,
+    })
+    const updated = [...gardenCells.value, created]
+    gardenCells.value = updated
+    cellsCache.set(cForm.garden_id, updated)
+    cForm.cell_ids.push(created.id!)
+  } catch { /* silencieux */ }
+  finally { creatingCell.value = false }
+}
+
 function gardenName(id: number) {
   return gardensStore.gardens.find(g => g.id === id)?.nom ?? `Jardin #${id}`
 }
@@ -320,15 +521,31 @@ async function toggleRecoltes(id: number) {
 }
 
 async function addRecolte(plantingId: number) {
-  const created = await recoltesApi.create(plantingId, { ...rForm })
-  recoltesList.value.push(created)
-  Object.assign(rForm, { quantite: 1, unite: 'kg', date_recolte: new Date().toISOString().slice(0, 10) })
+  try {
+    const created = await recoltesApi.create(plantingId, { ...rForm })
+    recoltesList.value.push(created)
+    Object.assign(rForm, { quantite: 1, unite: 'kg', date_recolte: new Date().toISOString().slice(0, 10) })
+    toast.success('Récolte enregistrée')
+  } catch {
+    // L'intercepteur Axios affiche le message
+  }
 }
 
-async function deleteRecolte(id: number, plantingId: number) {
+async function deleteRecolte(id: number, _plantingId: number) {
   if (!confirm('Supprimer cette récolte ?')) return
-  await recoltesApi.delete(id)
-  recoltesList.value = recoltesList.value.filter(r => r.id !== id)
+  try {
+    await recoltesApi.delete(id)
+    recoltesList.value = recoltesList.value.filter(r => r.id !== id)
+    toast.success('Récolte supprimée')
+  } catch {
+    // L'intercepteur Axios affiche le message
+  }
+}
+
+function autoResize(event: Event) {
+  const el = event.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
 }
 
 function startEdit(p: typeof store.plantings[0]) {
@@ -342,11 +559,21 @@ function startEdit(p: typeof store.plantings[0]) {
     tarif_achat: p.tarif_achat,
     date_achat: p.date_achat?.slice(0, 10) || '',
     notes: p.notes || '',
+    cell_ids: p.cell_ids?.length ? [...p.cell_ids] : (p.cell_id ? [p.cell_id] : []),
   })
   showCreate.value = true
 }
 
-function closeCreate() { showCreate.value = false; editId.value = null }
+function closeCreate() {
+  showCreate.value = false
+  editId.value = null
+  gardenCells.value = []
+  Object.assign(cForm, {
+    garden_id: 0, variety_id: 0, quantite: 1, date_plantation: '', statut: 'prevu',
+    boutique_nom: '', boutique_url: '', tarif_achat: undefined, date_achat: '',
+    notes: '', cell_ids: [],
+  })
+}
 
 async function loadTemplates() {
   templates.value = await tasksApi.list({ statut: 'template' })
@@ -372,38 +599,55 @@ async function createTaskFromTemplate() {
   if (!tpl) return
   const extra = taskTemplateForm.extra_description.trim()
   const description = [tpl.description || '', extra].filter(Boolean).join('\n\n')
-  await tasksApi.create({
-    titre: tpl.titre,
-    description: description || undefined,
-    garden_id: taskTarget.value.garden_id,
-    planting_id: taskTarget.value.id,
-    priorite: tpl.priorite || 'normale',
-    echeance: taskTemplateForm.echeance || undefined,
-    recurrence: tpl.recurrence ?? null,
-    frequence_jours: tpl.frequence_jours ?? null,
-    statut: 'a_faire',
-  })
-  closeTaskTemplateModal()
+  try {
+    await tasksApi.create({
+      titre: tpl.titre,
+      description: description || undefined,
+      garden_id: taskTarget.value.garden_id,
+      planting_id: taskTarget.value.id,
+      priorite: tpl.priorite || 'normale',
+      echeance: taskTemplateForm.echeance || undefined,
+      recurrence: tpl.recurrence ?? null,
+      frequence_jours: tpl.frequence_jours ?? null,
+      statut: 'a_faire',
+    })
+    toast.success('Tâche créée depuis le template')
+    closeTaskTemplateModal()
+  } catch {
+    // L'intercepteur Axios affiche le message
+  }
 }
 
 async function createPlanting() {
-  if (editId.value) {
-    await store.update(editId.value, { ...cForm })
-  } else {
-    await store.create({ ...cForm })
+  if (submitting.value) return
+  submitting.value = true
+  try {
+    const payload = { ...cForm, cell_ids: cForm.cell_ids, cell_id: cForm.cell_ids[0] ?? undefined }
+    if (editId.value) {
+      await store.update(editId.value, payload)
+      toast.success('Plantation modifiée')
+    } else {
+      await store.create(payload)
+      toast.success('Plantation créée')
+    }
+    closeCreate()
+  } catch {
+    // L'intercepteur Axios affiche le message
+  } finally {
+    submitting.value = false
   }
-  closeCreate()
-  Object.assign(cForm, {
-    garden_id: 0, variety_id: 0, quantite: 1, date_plantation: '', statut: 'prevu',
-    boutique_nom: '', boutique_url: '', tarif_achat: undefined, date_achat: '',
-    notes: '',
-  })
 }
 
-onMounted(() => {
-  store.fetchAll()
-  gardensStore.fetchAll()
-  plantsStore.fetchAll()
-  loadTemplates()
+onMounted(async () => {
+  try {
+    await Promise.all([
+      store.fetchAll(),
+      gardensStore.fetchAll(),
+      plantsStore.fetchAll(),
+      loadTemplates(),
+    ])
+  } catch {
+    toast.error('Erreur lors du chargement des données')
+  }
 })
 </script>
diff --git a/frontend/src/views/PlantesView.vue b/frontend/src/views/PlantesView.vue
index 0af9853..2566d17 100644
--- a/frontend/src/views/PlantesView.vue
+++ b/frontend/src/views/PlantesView.vue
@@ -1,321 +1,306 @@
 <template>
-  <div class="p-4 max-w-6xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-green">🌱 Plantes</h1>
-      <button @click="showForm = true" class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
+  <div class="p-4 max-w-[1800px] mx-auto space-y-6">
+    <!-- En-tête -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+      <div class="flex items-center gap-4">
+        <h1 class="text-3xl font-bold text-yellow tracking-tight">Bibliothèque des Plantes</h1>
+        <div class="flex gap-2">
+          <button v-for="cat in categories" :key="cat.val"
+            @click="selectedCat = cat.val"
+            :class="['px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest transition-all border',
+              selectedCat === cat.val ? 'bg-yellow text-bg border-yellow' : 'bg-bg-hard text-text-muted border-bg-soft hover:text-text']">
+            {{ cat.label }}
+          </button>
+        </div>
+      </div>
+      
+      <div class="flex items-center gap-3">
+        <div class="relative min-w-[300px]">
+          <span class="absolute left-3 top-1/2 -translate-y-1/2 opacity-40">🔍</span>
+          <input
+            v-model="searchQuery"
+            placeholder="Rechercher une plante, variété..."
+            class="w-full bg-bg-hard border border-bg-soft rounded-full pl-9 pr-4 py-2 text-text text-sm focus:border-yellow transition-all outline-none shadow-inner"
+          />
+        </div>
+        <button @click="showForm = true" class="btn-primary !bg-yellow !text-bg flex items-center gap-2 rounded-lg py-2 px-4 shadow-lg hover:scale-105 transition-all font-bold">
+          <span class="text-lg">+</span> Ajouter une plante
+        </button>
+      </div>
     </div>
 
-    <!-- Filtres catégorie -->
-    <div class="flex gap-2 mb-4 flex-wrap">
-      <button v-for="cat in categories" :key="cat.val"
-        @click="selectedCat = cat.val"
-        :class="['px-3 py-1 rounded-full text-xs font-medium transition-colors',
-          selectedCat === cat.val ? 'bg-green text-bg' : 'bg-bg-soft text-text-muted hover:text-text']">
-        {{ cat.label }}
-      </button>
+    <!-- Grille de 5 colonnes -->
+    <div v-if="plantsStore.loading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+      <div v-for="i in 10" :key="i" class="card-jardin h-40 animate-pulse opacity-20"></div>
     </div>
-
-    <!-- Liste -->
-    <div v-if="plantsStore.loading" class="text-text-muted text-sm">Chargement...</div>
-    <div v-else-if="!filteredPlants.length" class="text-text-muted text-sm py-4">Aucune plante.</div>
-    <div v-else class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3">
+    
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
       <div v-for="p in filteredPlants" :key="p.id"
-        class="bg-bg-soft rounded-lg border border-bg-hard overflow-hidden">
-        <!-- En-tête cliquable -->
-        <div class="p-4 flex items-start justify-between gap-4 cursor-pointer"
-          @click="toggleDetail(p.id!)">
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-1 flex-wrap">
-              <span class="text-text font-semibold">{{ p.nom_commun }}</span>
-              <span v-if="p.variete" class="text-text-muted text-xs">— {{ p.variete }}</span>
-              <span v-if="p.categorie" :class="['text-xs px-2 py-0.5 rounded-full font-medium', catClass(p.categorie)]">{{ catLabel(p.categorie) }}</span>
-            </div>
-            <div class="text-text-muted text-xs flex gap-3 flex-wrap">
-              <span v-if="p.famille">🌿 {{ p.famille }}</span>
-              <span v-if="p.espacement_cm">↔ {{ p.espacement_cm }}cm</span>
-              <span v-if="p.besoin_eau">💧 {{ p.besoin_eau }}</span>
-              <span v-if="p.plantation_mois">🌱 Plantation: mois {{ p.plantation_mois }}</span>
-            </div>
-          </div>
-          <div class="flex items-center gap-2 shrink-0">
-            <span class="text-text-muted text-xs">{{ openId === p.id ? '▲' : '▼' }}</span>
-            <button @click.stop="startEdit(p)" class="text-yellow text-xs hover:underline">Édit.</button>
-            <button @click.stop="removePlant(p.id!)" class="text-red text-xs hover:underline">Suppr.</button>
-          </div>
+        class="card-jardin !p-0 group overflow-hidden flex flex-col hover:border-yellow/40 transition-all border-l-[6px] relative min-h-[160px] cursor-pointer"
+        :style="{ borderLeftColor: getCatColor(p.categorie || '') }"
+        @click="openDetails(p)">
+        
+        <!-- Badge catégorie en haut à gauche -->
+        <div class="absolute top-2 left-2">
+          <span :class="['text-[7px] font-black uppercase tracking-[0.2em] px-2 py-0.5 rounded bg-bg/60 backdrop-blur-sm', catTextClass(p.categorie || '')]">
+            {{ p.categorie }}
+          </span>
         </div>
 
-        <!-- Panneau détail -->
-        <div v-if="openId === p.id" class="border-t border-bg-hard px-4 pb-4 pt-3">
-          <!-- Notes -->
-          <p v-if="p.notes" class="text-text-muted text-sm mb-3 italic">{{ p.notes }}</p>
-
-          <!-- Galerie photos -->
-          <div class="mb-2 flex items-center justify-between">
-            <span class="text-text-muted text-xs font-medium uppercase tracking-wide">Photos</span>
-            <button @click="openUpload(p)" class="text-green text-xs hover:underline">+ Ajouter une photo</button>
-          </div>
-
-          <div v-if="loadingPhotos" class="text-text-muted text-xs">Chargement...</div>
-          <div v-else-if="!plantPhotos.length" class="text-text-muted text-xs mb-3">Aucune photo pour cette plante.</div>
-          <div v-else class="grid grid-cols-4 gap-2 mb-3">
-            <div v-for="m in plantPhotos" :key="m.id"
-              class="aspect-square rounded overflow-hidden bg-bg-hard relative group cursor-pointer"
-              @click="lightbox = m">
-              <img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover" />
-              <div v-if="m.identified_common"
-                class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">
-                {{ m.identified_common }}
-              </div>
-              <button @click.stop="deletePhoto(m)" class="hidden group-hover:flex absolute top-1 right-1 bg-red/80 text-white text-xs rounded px-1">✕</button>
+        <div class="p-5 flex-1 flex flex-col justify-center">
+          <h2 class="text-text font-bold text-2xl leading-tight group-hover:text-yellow transition-colors">{{ p.nom_commun }}</h2>
+          <p v-if="p.variete" class="text-text-muted text-[10px] font-black uppercase tracking-widest mt-1 opacity-60">{{ p.variete }}</p>
+          
+          <div class="mt-4 flex flex-wrap gap-2">
+            <div v-if="p.plantation_mois" class="flex items-center gap-2 bg-bg/40 px-2 py-1 rounded border border-bg-soft">
+              <span class="text-[10px]">📅</span>
+              <span class="text-[10px] font-black text-text-muted">P: {{ p.plantation_mois }}</span>
+            </div>
+            <div v-if="p.besoin_eau" class="flex items-center gap-2 bg-bg/40 px-2 py-1 rounded border border-bg-soft">
+              <span class="text-[10px] text-blue">💧</span>
+              <span class="text-[10px] font-black text-text-muted">{{ p.besoin_eau }}</span>
             </div>
           </div>
-
-          <!-- Lier une photo existante de la bibliothèque -->
-          <button @click="openLinkPhoto(p)" class="text-blue text-xs hover:underline">
-            🔗 Lier une photo existante de la bibliothèque
-          </button>
         </div>
       </div>
     </div>
 
-    <!-- Modal formulaire création / édition -->
-    <div v-if="showForm || editPlant" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-4xl border border-bg-soft max-h-[90vh] overflow-y-auto">
-        <h2 class="text-text font-bold text-lg mb-4">{{ editPlant ? 'Modifier la plante' : 'Nouvelle plante' }}</h2>
-        <form @submit.prevent="submitPlant" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+    <!-- Modale de Détails (Popup) -->
+    <div v-if="detailPlant" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" @click.self="detailPlant = null">
+      <div class="bg-bg-hard rounded-3xl w-full max-w-2xl border border-bg-soft shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
+        <!-- Header de la modale -->
+        <div class="p-6 border-b border-bg-soft flex justify-between items-start" :style="{ borderLeft: `8px solid ${getCatColor(detailPlant.categorie || '')}` }">
           <div>
-            <label class="text-text-muted text-xs block mb-1">Nom commun *</label>
-            <input v-model="form.nom_commun" placeholder="Ex: Tomate" required
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            <p class="text-text-muted text-[11px] mt-1">Nom utilisé au jardin pour identifier rapidement la plante.</p>
+            <span :class="['text-[10px] font-black uppercase tracking-widest px-2 py-1 rounded mb-2 inline-block bg-bg/50', catTextClass(detailPlant.categorie || '')]">
+              {{ detailPlant.categorie }}
+            </span>
+            <h2 class="text-text font-black text-4xl leading-none">{{ detailPlant.nom_commun }}</h2>
+            <p v-if="detailPlant.variete" class="text-yellow font-bold uppercase tracking-widest text-sm mt-1">{{ detailPlant.variete }}</p>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Nom botanique</label>
-            <input v-model="form.nom_botanique" placeholder="Ex: Solanum lycopersicum"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            <p class="text-text-muted text-[11px] mt-1">Nom scientifique utile pour éviter les ambiguïtés.</p>
+          <button @click="detailPlant = null" class="text-text-muted hover:text-red transition-colors text-2xl">✕</button>
+        </div>
+
+        <!-- Corps de la modale -->
+        <div class="p-6 overflow-y-auto space-y-6">
+          <!-- Caractéristiques -->
+          <div class="grid grid-cols-3 gap-4">
+            <div class="bg-bg/30 p-3 rounded-xl border border-bg-soft">
+              <span class="text-[10px] font-black text-text-muted uppercase block mb-1">Besoin en eau</span>
+              <div class="flex items-center gap-2 text-blue">
+                <span>💧</span>
+                <span class="font-bold capitalize">{{ detailPlant.besoin_eau }}</span>
+              </div>
+            </div>
+            <div class="bg-bg/30 p-3 rounded-xl border border-bg-soft">
+              <span class="text-[10px] font-black text-text-muted uppercase block mb-1">Exposition</span>
+              <div class="flex items-center gap-2 text-yellow">
+                <span>☀️</span>
+                <span class="font-bold capitalize">{{ detailPlant.besoin_soleil }}</span>
+              </div>
+            </div>
+            <div class="bg-bg/30 p-3 rounded-xl border border-bg-soft">
+              <span class="text-[10px] font-black text-text-muted uppercase block mb-1">Plantation</span>
+              <div class="flex items-center gap-2 text-green">
+                <span>📅</span>
+                <span class="font-bold">Mois: {{ detailPlant.plantation_mois }}</span>
+              </div>
+            </div>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Variété</label>
-            <input v-model="form.variete" placeholder="Ex: Andine Cornue"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            <p class="text-text-muted text-[11px] mt-1">Cultivar précis (optionnel).</p>
+
+          <!-- Notes -->
+          <div v-if="detailPlant.notes" class="space-y-2">
+            <h3 class="text-[10px] font-black text-text-muted uppercase tracking-widest">Conseils & Notes</h3>
+            <div class="bg-bg/40 p-4 rounded-2xl border-l-4 border-yellow/30 text-text/90 leading-relaxed italic text-sm whitespace-pre-line">
+              {{ detailPlant.notes }}
+            </div>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Famille botanique</label>
-            <input v-model="form.famille" placeholder="Ex: Solanacées"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            <p class="text-text-muted text-[11px] mt-1">Permet d'organiser la rotation des cultures.</p>
+
+          <!-- Galerie Photos -->
+          <div class="space-y-3">
+            <div class="flex justify-between items-center">
+              <h3 class="text-[10px] font-black text-text-muted uppercase tracking-widest">Photos & Médias</h3>
+              <button @click="openUpload(detailPlant)" class="text-[10px] font-black text-yellow hover:underline uppercase">+ Ajouter</button>
+            </div>
+            <div v-if="loadingPhotos" class="grid grid-cols-4 gap-2 animate-pulse">
+              <div v-for="i in 4" :key="i" class="aspect-square bg-bg-soft rounded-lg"></div>
+            </div>
+            <div v-else-if="plantPhotos.length" class="grid grid-cols-4 gap-2">
+              <div v-for="m in plantPhotos" :key="m.id" 
+                class="aspect-square rounded-lg overflow-hidden bg-bg relative group cursor-pointer border border-bg-soft"
+                @click="lightbox = m">
+                <img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover group-hover:scale-110 transition-transform" />
+                <button @click.stop="deletePhoto(m)" class="absolute top-1 right-1 w-6 h-6 bg-red/80 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">✕</button>
+              </div>
+            </div>
+            <div v-else class="text-center py-8 bg-bg/20 rounded-2xl border border-dashed border-bg-soft opacity-40">
+              <span class="text-xs italic">Aucune photo pour le moment</span>
+            </div>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Catégorie</label>
-            <select v-model="form.categorie"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="">Catégorie</option>
-              <option value="potager">Potager</option>
-              <option value="fleur">Fleur</option>
-              <option value="arbre">Arbre</option>
-              <option value="arbuste">Arbuste</option>
-              <option value="adventice">Adventice (mauvaise herbe)</option>
-            </select>
-            <p class="text-text-muted text-[11px] mt-1">Classe principale pour filtrer la bibliothèque de plantes.</p>
+        </div>
+
+        <!-- Footer de la modale -->
+        <div class="p-4 bg-bg-hard border-t border-bg-soft flex gap-3">
+          <button @click="startEdit(detailPlant)" class="btn-primary !bg-yellow !text-bg flex-1 py-3 font-black uppercase text-xs tracking-widest">Modifier la fiche</button>
+          <button @click="removePlant(detailPlant.id!)" class="btn-outline !border-red/20 !text-red hover:bg-red/10 px-6 py-3 font-black uppercase text-xs tracking-widest">Supprimer</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modale Formulaire (Ajout/Edition) -->
+    <div v-if="showForm || editPlant" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" @click.self="closeForm">
+      <div class="bg-bg-hard rounded-3xl p-8 w-full max-w-4xl border border-bg-soft shadow-2xl max-h-[90vh] overflow-y-auto">
+        <div class="flex items-center justify-between mb-8 border-b border-bg-soft pb-4">
+          <h2 class="text-text font-black text-2xl uppercase tracking-tighter">{{ editPlant ? 'Modifier la plante' : 'Nouvelle plante' }}</h2>
+          <button @click="closeForm" class="text-text-muted hover:text-red transition-colors text-2xl">✕</button>
+        </div>
+
+        <form @submit.prevent="submitPlant" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Champs de formulaire identiques -->
+          <div class="space-y-4">
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Nom commun *</label>
+              <input v-model="form.nom_commun" required class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none" />
+            </div>
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Variété</label>
+              <input v-model="form.variete" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none" />
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Catégorie</label>
+                <select v-model="form.categorie" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm outline-none focus:border-yellow appearance-none">
+                  <option v-for="c in categories.slice(1)" :key="c.val" :value="c.val">{{ c.label.split(' ')[1] }}</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Famille</label>
+                <input v-model="form.famille" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none" />
+              </div>
+            </div>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Type de plante</label>
-            <select v-model="form.type_plante"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="">Type</option>
-              <option value="legume">Légume</option>
-              <option value="fruit">Fruit</option>
-              <option value="aromatique">Aromatique</option>
-              <option value="fleur">Fleur</option>
-              <option value="adventice">Adventice</option>
-            </select>
-            <p class="text-text-muted text-[11px] mt-1">Type d'usage de la plante (récolte, ornement, etc.).</p>
+
+          <div class="space-y-4">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Eau</label>
+                <select v-model="form.besoin_eau" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm outline-none focus:border-yellow appearance-none">
+                  <option value="faible">Faible</option>
+                  <option value="moyen">Moyen</option>
+                  <option value="élevé">Élevé</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Soleil</label>
+                <select v-model="form.besoin_soleil" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm outline-none focus:border-yellow appearance-none">
+                  <option value="ombre">Ombre</option>
+                  <option value="mi-ombre">Mi-ombre</option>
+                  <option value="plein soleil">Plein soleil</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Mois Plantation (ex: 3,4,5)</label>
+              <input v-model="form.plantation_mois" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none" />
+            </div>
+            <div>
+              <label class="text-text-muted text-[10px] font-black uppercase tracking-widest block mb-1">Notes & Conseils</label>
+              <textarea v-model="form.notes" rows="1" @input="autoResize" class="w-full bg-bg border border-bg-soft rounded-xl px-4 py-3 text-text text-sm focus:border-yellow outline-none resize-none overflow-hidden" />
+            </div>
           </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Besoin en eau</label>
-            <select v-model="form.besoin_eau"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="">Besoin en eau</option>
-              <option value="faible">Faible</option>
-              <option value="moyen">Moyen</option>
-              <option value="élevé">Élevé</option>
-            </select>
-            <p class="text-text-muted text-[11px] mt-1">Aide à planifier l'arrosage.</p>
-          </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Ensoleillement</label>
-            <select v-model="form.besoin_soleil"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
-              <option value="">Ensoleillement</option>
-              <option value="ombre">Ombre</option>
-              <option value="mi-ombre">Mi-ombre</option>
-              <option value="plein soleil">Plein soleil</option>
-            </select>
-            <p class="text-text-muted text-[11px] mt-1">Exposition lumineuse idéale.</p>
-          </div>
-          <div class="lg:col-span-2 flex gap-2">
-            <input v-model.number="form.espacement_cm" type="number" placeholder="Espacement (cm)"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
-            <input v-model.number="form.temp_min_c" type="number" placeholder="T° min (°C)"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
-          </div>
-          <p class="lg:col-span-2 text-text-muted text-[11px] -mt-2">Espacement recommandé en cm et température minimale supportée (en °C).</p>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Mois de plantation</label>
-            <input v-model="form.plantation_mois" placeholder="Ex: 3,4,5"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            <p class="text-text-muted text-[11px] mt-1">Liste des mois conseillés, séparés par des virgules.</p>
-          </div>
-          <div>
-            <label class="text-text-muted text-xs block mb-1">Mois de récolte</label>
-            <input v-model="form.recolte_mois" placeholder="Ex: 7,8,9"
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
-            <p class="text-text-muted text-[11px] mt-1">Période habituelle de récolte.</p>
-          </div>
-          <div class="lg:col-span-2">
-            <label class="text-text-muted text-xs block mb-1">Notes</label>
-            <textarea v-model="form.notes" placeholder="Observations, maladies, astuces..."
-              class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none h-20" />
-            <p class="text-text-muted text-[11px] mt-1">Commentaires libres visibles dans le détail de la plante.</p>
-          </div>
-          <div class="lg:col-span-2 flex gap-2 justify-end">
-            <button type="button" @click="closeForm"
-              class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
-            <button type="submit"
-              class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
-              {{ editPlant ? 'Enregistrer' : 'Créer' }}
+
+          <div class="md:col-span-2 flex justify-between items-center pt-6 border-t border-bg-soft mt-4">
+            <button type="button" @click="closeForm" class="btn-outline border-transparent text-text-muted hover:text-red uppercase text-xs font-bold px-6">Annuler</button>
+            <button type="submit" class="btn-primary px-12 py-4 text-base shadow-xl !bg-yellow !text-bg">
+              {{ editPlant ? 'Sauvegarder' : 'Enregistrer' }}
             </button>
           </div>
         </form>
       </div>
     </div>
 
-    <!-- Modal upload photo pour une plante -->
-    <div v-if="uploadTarget" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="uploadTarget = null">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft">
-        <h3 class="text-text font-bold mb-4">Photo pour "{{ formatPlantLabel(uploadTarget) }}"</h3>
-        <label class="block border-2 border-dashed border-bg-soft rounded-lg p-6 text-center cursor-pointer hover:border-green transition-colors">
-          <input type="file" accept="image/*" class="hidden" @change="uploadPhoto" />
-          <div class="text-text-muted text-sm">📷 Choisir une image</div>
-        </label>
-        <button @click="uploadTarget = null" class="mt-3 w-full text-text-muted hover:text-text text-sm">Annuler</button>
-      </div>
+    <!-- Lightbox Photo -->
+    <div v-if="lightbox" class="fixed inset-0 bg-black/95 z-[100] flex items-center justify-center p-4" @click="lightbox = null">
+      <img :src="lightbox.url" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl animate-fade-in" />
+      <button class="absolute top-6 right-6 text-white text-4xl hover:text-yellow">✕</button>
     </div>
 
-    <!-- Modal lier photo existante -->
-    <div v-if="linkTarget" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="linkTarget = null">
-      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-2xl border border-bg-soft max-h-[80vh] flex flex-col">
-        <h3 class="text-text font-bold mb-3">Lier une photo à "{{ formatPlantLabel(linkTarget) }}"</h3>
-        <p class="text-text-muted text-xs mb-3">Sélectionne une photo de la bibliothèque (non liée à une plante)</p>
-        <div v-if="!unlinkPhotos.length" class="text-text-muted text-sm py-4 text-center">Aucune photo disponible.</div>
-        <div v-else class="grid grid-cols-4 gap-2 overflow-y-auto flex-1">
-          <div v-for="m in unlinkPhotos" :key="m.id"
-            class="aspect-square rounded overflow-hidden bg-bg-hard relative cursor-pointer group border-2 transition-colors"
-            :class="selectedLinkPhoto === m.id ? 'border-green' : 'border-transparent'"
-            @click="selectedLinkPhoto = m.id">
-            <img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover" />
-            <div v-if="m.identified_common" class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">{{ m.identified_common }}</div>
-          </div>
-        </div>
-        <div class="flex gap-2 justify-end mt-3">
-          <button @click="linkTarget = null" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
-          <button @click="confirmLink" :disabled="!selectedLinkPhoto"
-            class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-40">
-            Lier la photo
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Lightbox -->
-    <div v-if="lightbox" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4" @click.self="lightbox = null">
-      <div class="max-w-lg w-full">
-        <img :src="lightbox.url" class="w-full rounded-xl" />
-        <div v-if="lightbox.identified_species" class="text-center mt-3 text-text-muted text-sm">
-          <div class="text-green font-semibold text-base">{{ lightbox.identified_common }}</div>
-          <div class="italic">{{ lightbox.identified_species }}</div>
-          <div class="text-xs mt-1">Confiance : {{ Math.round((lightbox.identified_confidence || 0) * 100) }}% — via {{ lightbox.identified_source }}</div>
-        </div>
-        <button class="mt-4 w-full text-text-muted hover:text-text text-sm" @click="lightbox = null">Fermer</button>
-      </div>
-    </div>
+    <!-- Upload Photo Trigger (Invisible) -->
+    <input type="file" ref="fileInput" accept="image/*" class="hidden" @change="handleFileUpload" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import axios from 'axios'
 import { usePlantsStore } from '@/stores/plants'
 import type { Plant } from '@/api/plants'
 import { formatPlantLabel } from '@/utils/plants'
+import { useToast } from '@/composables/useToast'
 
 const plantsStore = usePlantsStore()
+const toast = useToast()
 const showForm = ref(false)
+const submitting = ref(false)
 const editPlant = ref<Plant | null>(null)
+const detailPlant = ref<Plant | null>(null)
 const selectedCat = ref('')
-const openId = ref<number | null>(null)
+const searchQuery = ref('')
 const plantPhotos = ref<Media[]>([])
 const loadingPhotos = ref(false)
-const uploadTarget = ref<Plant | null>(null)
-const linkTarget = ref<Plant | null>(null)
-const unlinkPhotos = ref<Media[]>([])
-const selectedLinkPhoto = ref<number | null>(null)
 const lightbox = ref<Media | null>(null)
+const fileInput = ref<HTMLInputElement | null>(null)
+const uploadTarget = ref<Plant | null>(null)
 
 interface Media {
   id: number; entity_type: string; entity_id: number
   url: string; thumbnail_url?: string; titre?: string
-  identified_species?: string; identified_common?: string
-  identified_confidence?: number; identified_source?: string
 }
 
 const categories = [
-  { val: '', label: 'Toutes' },
-  { val: 'potager', label: '🥕 Potager' },
-  { val: 'fleur', label: '🌸 Fleur' },
-  { val: 'arbre', label: '🌳 Arbre' },
-  { val: 'arbuste', label: '🌿 Arbuste' },
-  { val: 'adventice', label: '🌾 Adventices' },
+  { val: '', label: 'TOUTES' },
+  { val: 'potager', label: '🥕 POTAGER' },
+  { val: 'fleur', label: '🌸 FLEUR' },
+  { val: 'arbre', label: '🌳 ARBRE' },
+  { val: 'arbuste', label: '🌿 ARBUSTE' },
+  { val: 'adventice', label: '🌾 ADVENTICES' },
 ]
 
 const form = reactive({
-  nom_commun: '', nom_botanique: '', variete: '', famille: '',
-  categorie: '', type_plante: '', besoin_eau: '', besoin_soleil: '',
-  espacement_cm: undefined as number | undefined,
-  temp_min_c: undefined as number | undefined,
-  plantation_mois: '', recolte_mois: '', notes: '',
+  nom_commun: '', variete: '', famille: '',
+  categorie: 'potager', besoin_eau: 'moyen', besoin_soleil: 'plein soleil',
+  plantation_mois: '', notes: '',
 })
 
 const filteredPlants = computed(() => {
-  const source = selectedCat.value
-    ? plantsStore.plants.filter(p => p.categorie === selectedCat.value)
-    : plantsStore.plants
-  return [...source].sort((a, b) => {
-    const byName = (a.nom_commun || '').localeCompare(b.nom_commun || '', 'fr', { sensitivity: 'base' })
-    if (byName !== 0) return byName
-    return (a.variete || '').localeCompare(b.variete || '', 'fr', { sensitivity: 'base' })
-  })
+  let source = plantsStore.plants
+  if (selectedCat.value) source = source.filter(p => p.categorie === selectedCat.value)
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    source = source.filter(p => 
+      p.nom_commun?.toLowerCase().includes(q) || 
+      p.variete?.toLowerCase().includes(q)
+    )
+  }
+  return [...source].sort((a, b) => (a.nom_commun || '').localeCompare(b.nom_commun || '', 'fr'))
 })
 
-const catClass = (cat: string) => ({
-  potager: 'bg-green/20 text-green',
-  fleur: 'bg-orange/20 text-orange',
-  arbre: 'bg-blue/20 text-blue',
-  arbuste: 'bg-yellow/20 text-yellow',
-  adventice: 'bg-red/20 text-red',
-}[cat] || 'bg-bg text-text-muted')
+function getCatColor(cat: string) {
+  return ({
+    potager: '#b8bb26', fleur: '#fabd2f', arbre: '#83a598',
+    arbuste: '#d3869b', adventice: '#fb4934',
+  } as any)[cat] || '#928374'
+}
 
-const catLabel = (cat: string) => ({
-  potager: '🥕 Potager', fleur: '🌸 Fleur', arbre: '🌳 Arbre',
-  arbuste: '🌿 Arbuste', adventice: '🌾 Adventice',
-}[cat] || cat)
+function catTextClass(cat: string) {
+  return ({
+    potager: 'text-green', fleur: 'text-yellow', arbre: 'text-blue',
+    arbuste: 'text-purple', adventice: 'text-red',
+  } as any)[cat] || 'text-text-muted'
+}
 
-async function toggleDetail(id: number) {
-  if (openId.value === id) { openId.value = null; return }
-  openId.value = id
-  await fetchPhotos(id)
+async function openDetails(p: Plant) {
+  detailPlant.value = p
+  await fetchPhotos(p.id!)
 }
 
 async function fetchPhotos(plantId: number) {
@@ -331,86 +316,102 @@ async function fetchPhotos(plantId: number) {
 }
 
 function startEdit(p: Plant) {
+  detailPlant.value = null
   editPlant.value = p
   Object.assign(form, {
-    nom_commun: p.nom_commun || '', nom_botanique: (p as any).nom_botanique || '',
-    variete: p.variete || '', famille: p.famille || '',
-    categorie: p.categorie || '', type_plante: p.type_plante || '',
-    besoin_eau: p.besoin_eau || '', besoin_soleil: p.besoin_soleil || '',
-    espacement_cm: p.espacement_cm, temp_min_c: p.temp_min_c,
-    plantation_mois: p.plantation_mois || '', recolte_mois: p.recolte_mois || '',
-    notes: p.notes || '',
+    nom_commun: p.nom_commun || '', variete: p.variete || '', famille: p.famille || '',
+    categorie: p.categorie || 'potager', besoin_eau: p.besoin_eau || 'moyen', besoin_soleil: p.besoin_soleil || 'plein soleil',
+    plantation_mois: p.plantation_mois || '', notes: p.notes || '',
   })
+  showForm.value = true
 }
 
 function closeForm() {
   showForm.value = false
   editPlant.value = null
-  Object.assign(form, {
-    nom_commun: '', nom_botanique: '', variete: '', famille: '', categorie: '',
-    type_plante: '', besoin_eau: '', besoin_soleil: '',
-    espacement_cm: undefined, temp_min_c: undefined,
-    plantation_mois: '', recolte_mois: '', notes: '',
-  })
 }
 
 async function submitPlant() {
-  if (editPlant.value) {
-    await axios.put(`/api/plants/${editPlant.value.id}`, { ...form })
-    await plantsStore.fetchAll()
-  } else {
-    await plantsStore.create({ ...form })
+  if (submitting.value) return
+  submitting.value = true
+  try {
+    if (editPlant.value) {
+      await axios.put(`/api/plants/${editPlant.value.id}`, { ...form })
+      await plantsStore.fetchAll()
+      toast.success('Plante modifiée')
+    } else {
+      await plantsStore.create({ ...form })
+      toast.success('Plante créée')
+    }
+    closeForm()
+  } catch {
+    // L'intercepteur Axios affiche le message
+  } finally {
+    submitting.value = false
   }
-  closeForm()
 }
 
 async function removePlant(id: number) {
-  if (confirm('Supprimer cette plante ?')) {
+  if (!confirm('Supprimer définitivement cette plante ?')) return
+  try {
     await plantsStore.remove(id)
-    if (openId.value === id) openId.value = null
+    detailPlant.value = null
+    toast.success('Plante supprimée')
+  } catch {
+    // L'intercepteur Axios affiche le message
   }
 }
 
-function openUpload(p: Plant) { uploadTarget.value = p }
+function openUpload(p: Plant) {
+  uploadTarget.value = p
+  fileInput.value?.click()
+}
 
-async function uploadPhoto(e: Event) {
+async function handleFileUpload(e: Event) {
   const file = (e.target as HTMLInputElement).files?.[0]
   if (!file || !uploadTarget.value) return
+
   const fd = new FormData()
   fd.append('file', file)
-  const { data: uploaded } = await axios.post('/api/upload', fd)
-  await axios.post('/api/media', {
-    entity_type: 'plante', entity_id: uploadTarget.value.id,
-    url: uploaded.url, thumbnail_url: uploaded.thumbnail_url,
-  })
-  uploadTarget.value = null
-  if (openId.value) await fetchPhotos(openId.value)
+
+  try {
+    const { data: uploaded } = await axios.post('/api/upload', fd)
+    await axios.post('/api/media', {
+      entity_type: 'plante', entity_id: uploadTarget.value.id,
+      url: uploaded.url, thumbnail_url: uploaded.thumbnail_url,
+    })
+    await fetchPhotos(uploadTarget.value.id!)
+    toast.success('Photo ajoutée')
+  } catch {
+    // L'intercepteur Axios affiche le message
+  } finally {
+    uploadTarget.value = null
+    if (fileInput.value) fileInput.value.value = ''
+  }
 }
 
 async function deletePhoto(m: Media) {
   if (!confirm('Supprimer cette photo ?')) return
-  await axios.delete(`/api/media/${m.id}`)
-  if (openId.value) await fetchPhotos(openId.value)
+  try {
+    await axios.delete(`/api/media/${m.id}`)
+    if (detailPlant.value) await fetchPhotos(detailPlant.value.id!)
+    toast.success('Photo supprimée')
+  } catch {
+    // L'intercepteur Axios affiche le message
+  }
 }
 
-async function openLinkPhoto(p: Plant) {
-  linkTarget.value = p
-  selectedLinkPhoto.value = null
-  const { data } = await axios.get<Media[]>('/api/media/all')
-  // Photos non liées à une plante (bibliothèque ou autres)
-  unlinkPhotos.value = data.filter(m => m.entity_type !== 'plante')
+function autoResize(event: Event) {
+  const el = event.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
 }
 
-async function confirmLink() {
-  if (!selectedLinkPhoto.value || !linkTarget.value) return
-  await axios.patch(`/api/media/${selectedLinkPhoto.value}`, {
-    entity_type: 'plante', entity_id: linkTarget.value.id,
-  })
-  const pid = linkTarget.value.id
-  linkTarget.value = null
-  selectedLinkPhoto.value = null
-  if (openId.value === pid) await fetchPhotos(pid)
-}
-
-onMounted(() => plantsStore.fetchAll())
+onMounted(async () => {
+  try {
+    await plantsStore.fetchAll()
+  } catch {
+    toast.error('Impossible de charger les plantes')
+  }
+})
 </script>
diff --git a/frontend/src/views/ReglagesView.vue b/frontend/src/views/ReglagesView.vue
index 56c23c6..b7faabb 100644
--- a/frontend/src/views/ReglagesView.vue
+++ b/frontend/src/views/ReglagesView.vue
@@ -1,121 +1,181 @@
 <template>
-  <div class="p-4 max-w-3xl mx-auto">
-    <h1 class="text-2xl font-bold text-green mb-4">Réglages</h1>
+  <div class="p-4 max-w-[1800px] mx-auto space-y-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-green tracking-tight">Réglages Système</h1>
+        <p class="text-text-muted text-xs mt-1">Configurez l'interface, la maintenance et la sécurité de votre application.</p>
+      </div>
+    </div>
 
-    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4 mb-4">
-      <h2 class="text-text font-semibold mb-2">Interface</h2>
-      <p class="text-text-muted text-sm mb-4">Ajustez les tailles d'affichage. Les changements sont appliqués instantanément.</p>
-
-      <div class="grid grid-cols-1 gap-4">
-        <div v-for="s in uiSizeSettings" :key="s.key" class="flex items-center gap-3">
-          <label class="text-sm text-text w-44 shrink-0">{{ s.label }}</label>
-          <input
-            type="range"
-            :min="s.min" :max="s.max" :step="s.step"
-            v-model.number="uiSizes[s.key]"
-            class="flex-1 accent-green"
-            @input="applyUiSizes"
-          />
-          <span class="text-text-muted text-xs w-12 text-right">{{ uiSizes[s.key] }}{{ s.unit }}</span>
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
+      <!-- Section Interface -->
+      <section class="card-jardin flex flex-col h-full border-green/20">
+        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
+          <span class="text-2xl">🎨</span>
+          <div>
+            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Interface Graphique</h2>
+            <p class="text-[10px] text-text-muted font-bold">Ajustez les échelles visuelles.</p>
+          </div>
         </div>
-      </div>
 
-      <div class="mt-4 flex items-center gap-2">
-        <button
-          class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
-          :disabled="savingUi"
-          @click="saveUiSettings"
-        >{{ savingUi ? 'Enregistrement...' : 'Enregistrer' }}</button>
-        <button
-          class="text-text-muted text-xs hover:text-text px-2"
-          @click="resetUiSettings"
-        >Réinitialiser</button>
-        <span v-if="uiSavedMsg" class="text-xs text-aqua">{{ uiSavedMsg }}</span>
-      </div>
-    </section>
+        <div class="flex-1 space-y-6">
+          <div v-for="s in uiSizeSettings" :key="s.key" class="space-y-2">
+            <div class="flex justify-between items-center">
+              <label class="text-[10px] font-black uppercase tracking-widest text-text-muted">{{ s.label }}</label>
+              <span class="text-xs font-mono text-green">{{ uiSizes[s.key] }}{{ s.unit }}</span>
+            </div>
+            <input
+              type="range"
+              :min="s.min" :max="s.max" :step="s.step"
+              v-model.number="uiSizes[s.key]"
+              class="w-full h-1.5 bg-bg-hard rounded-lg appearance-none cursor-pointer accent-green"
+              @input="applyUiSizes"
+            />
+          </div>
+        </div>
 
-    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4 mb-4">
-      <h2 class="text-text font-semibold mb-2">Général</h2>
-      <p class="text-text-muted text-sm mb-3">Options globales de l'application.</p>
+        <div class="mt-8 pt-4 border-t border-bg-hard flex items-center justify-between">
+          <button
+            class="text-[10px] font-black uppercase tracking-widest text-text-muted hover:text-text transition-colors"
+            @click="resetUiSettings"
+          >Réinitialiser</button>
+          <div class="flex items-center gap-3">
+            <span v-if="uiSavedMsg" class="text-[10px] font-bold text-aqua animate-pulse">{{ uiSavedMsg }}</span>
+            <button
+              class="btn-primary !py-2 !px-6 text-xs"
+              :disabled="savingUi"
+              @click="saveUiSettings"
+            >{{ savingUi ? '...' : 'Enregistrer' }}</button>
+          </div>
+        </div>
+      </section>
 
-      <label class="inline-flex items-center gap-2 text-sm text-text">
-        <input v-model="debugMode" type="checkbox" class="accent-green" />
-        Activer le mode debug (affichage CPU / RAM / disque en header)
-      </label>
+      <!-- Section Général / Debug -->
+      <section class="card-jardin flex flex-col h-full border-yellow/20">
+        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
+          <span class="text-2xl">⚙️</span>
+          <div>
+            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Général & Debug</h2>
+            <p class="text-[10px] text-text-muted font-bold">Options globales du système.</p>
+          </div>
+        </div>
 
-      <div class="mt-3 flex items-center gap-2">
-        <button
-          class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
-          :disabled="saving"
-          @click="saveSettings"
-        >
-          {{ saving ? 'Enregistrement...' : 'Enregistrer' }}
-        </button>
-        <span v-if="savedMsg" class="text-xs text-aqua">{{ savedMsg }}</span>
-      </div>
-    </section>
+        <div class="flex-1 space-y-6">
+          <label class="flex items-start gap-4 cursor-pointer group bg-bg-hard/30 p-4 rounded-2xl border border-bg-soft/50 hover:border-yellow/30 transition-all">
+            <div class="relative mt-1">
+              <input v-model="debugMode" type="checkbox" class="sr-only peer" />
+              <div class="w-10 h-5 bg-bg-hard rounded-full peer peer-checked:bg-yellow transition-colors"></div>
+              <div class="absolute left-1 top-1 w-3 h-3 bg-text-muted peer-checked:bg-bg peer-checked:translate-x-5 rounded-full transition-all"></div>
+            </div>
+            <div class="flex-1">
+              <div class="text-sm font-bold text-text group-hover:text-yellow transition-colors">Mode Debug Interactif</div>
+              <p class="text-[10px] text-text-muted mt-1 leading-relaxed italic">Affiche les statistiques vitales (CPU, RAM, Disque) dans la barre de navigation supérieure.</p>
+            </div>
+          </label>
+        </div>
 
-    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4 mb-4">
-      <h2 class="text-text font-semibold mb-2">Maintenance météo</h2>
-      <p class="text-text-muted text-sm mb-3">Déclenche un rafraîchissement immédiat des jobs météo backend.</p>
-      <button
-        class="bg-blue text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
-        :disabled="refreshingMeteo"
-        @click="refreshMeteo"
-      >
-        {{ refreshingMeteo ? 'Rafraîchissement...' : 'Rafraîchir maintenant' }}
-      </button>
-    </section>
+        <div class="mt-8 pt-4 border-t border-bg-hard flex items-center justify-end gap-3">
+          <span v-if="savedMsg" class="text-[10px] font-bold text-aqua">{{ savedMsg }}</span>
+          <button
+            class="btn-primary !bg-yellow !text-bg !py-2 !px-6 text-xs"
+            :disabled="saving"
+            @click="saveSettings"
+          >
+            {{ saving ? '...' : 'Appliquer' }}
+          </button>
+        </div>
+      </section>
 
-    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4 mb-4">
-      <h2 class="text-text font-semibold mb-2">Test API backend</h2>
-      <p class="text-text-muted text-sm mb-2">
-        Ouvre la documentation interactive de l'API et un test rapide de santé.
-      </p>
-      <p class="text-text-muted text-xs mb-3">Base API détectée: <span class="text-text">{{ apiBaseUrl }}</span></p>
-      <div class="flex flex-wrap items-center gap-2">
-        <button
-          class="bg-blue text-bg px-3 py-2 rounded-lg text-xs font-semibold hover:opacity-90"
-          @click="openApiDocs"
-        >
-          Ouvrir Swagger (/docs)
-        </button>
-        <button
-          class="bg-aqua text-bg px-3 py-2 rounded-lg text-xs font-semibold hover:opacity-90"
-          @click="openApiRedoc"
-        >
-          Ouvrir ReDoc (/redoc)
-        </button>
-        <button
-          class="bg-bg border border-bg-hard text-text px-3 py-2 rounded-lg text-xs font-semibold hover:border-text-muted"
-          @click="openApiHealth"
-        >
-          Tester /api/health
-        </button>
-      </div>
-    </section>
+      <!-- Section Maintenance -->
+      <section class="card-jardin flex flex-col h-full border-blue/20">
+        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
+          <span class="text-2xl">🌦️</span>
+          <div>
+            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Maintenance Météo</h2>
+            <p class="text-[10px] text-text-muted font-bold">Synchronisation des données externes.</p>
+          </div>
+        </div>
 
-    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4">
-      <h2 class="text-text font-semibold mb-2">Sauvegarde des données</h2>
-      <p class="text-text-muted text-sm mb-3">
-        Exporte un ZIP téléchargeable contenant la base SQLite, les images/vidéos uploadées et les fichiers texte utiles.
-      </p>
-      <div class="flex items-center gap-2">
-        <button
-          class="bg-aqua text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
-          :disabled="downloadingBackup"
-          @click="downloadBackup"
-        >
-          {{ downloadingBackup ? 'Préparation du ZIP...' : 'Télécharger la sauvegarde (.zip)' }}
-        </button>
-        <span v-if="backupMsg" class="text-xs text-aqua">{{ backupMsg }}</span>
-      </div>
-    </section>
+        <div class="flex-1">
+          <p class="text-xs text-text-muted leading-relaxed mb-6">
+            Force le rafraîchissement des prévisions Open-Meteo et des relevés de la station locale WeeWX. Les données sont normalement mises à jour toutes les heures automatiquement.
+          </p>
+          
+          <button
+            class="btn-outline w-full py-4 border-blue/20 text-blue hover:bg-blue/10 flex flex-col items-center gap-2"
+            :disabled="refreshingMeteo"
+            @click="refreshMeteo"
+          >
+            <span class="text-lg">{{ refreshingMeteo ? '🔄' : '⚡' }}</span>
+            <span class="text-[10px] font-black uppercase tracking-widest">{{ refreshingMeteo ? 'Rafraîchissement en cours...' : 'Forcer la mise à jour' }}</span>
+          </button>
+        </div>
+      </section>
+
+      <!-- Section Sauvegarde -->
+      <section class="card-jardin flex flex-col h-full border-aqua/20">
+        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
+          <span class="text-2xl">📦</span>
+          <div>
+            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Sauvegarde & Export</h2>
+            <p class="text-[10px] text-text-muted font-bold">Protégez vos données.</p>
+          </div>
+        </div>
+
+        <div class="flex-1 space-y-6">
+          <p class="text-xs text-text-muted leading-relaxed">
+            Génère une archive complète (.zip) incluant votre base de données SQLite et tous les médias (photos/vidéos) uploadés.
+          </p>
+          
+          <button
+            class="btn-primary !bg-aqua !text-bg w-full py-4 flex flex-col items-center gap-2 shadow-lg hover:shadow-aqua/20"
+            :disabled="downloadingBackup"
+            @click="downloadBackup"
+          >
+            <span class="text-xl">💾</span>
+            <span class="text-[10px] font-black uppercase tracking-widest">{{ downloadingBackup ? 'Préparation...' : 'Télécharger le Pack Complet' }}</span>
+          </button>
+          
+          <div v-if="backupMsg" class="text-[10px] text-center font-bold text-aqua animate-bounce">{{ backupMsg }}</div>
+        </div>
+      </section>
+
+      <!-- Section API Docs (Largeur double sur XL+) -->
+      <section class="card-jardin xl:col-span-2 flex flex-col border-bg-soft/50">
+        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
+          <span class="text-2xl">🛠️</span>
+          <div>
+            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Outils Développeur & API</h2>
+            <p class="text-[10px] text-text-muted font-bold">Documentation technique et monitoring.</p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <button @click="openApiDocs" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
+            <span class="text-xl">📖</span>
+            <span class="text-[10px] font-bold uppercase">Swagger UI</span>
+          </button>
+          <button @click="openApiRedoc" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
+            <span class="text-xl">📄</span>
+            <span class="text-[10px] font-bold uppercase">ReDoc Docs</span>
+          </button>
+          <button @click="openApiHealth" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
+            <span class="text-xl">💓</span>
+            <span class="text-[10px] font-bold uppercase">Santé API</span>
+          </button>
+        </div>
+        
+        <div class="mt-6 p-3 bg-bg-hard/50 rounded-xl border border-bg-soft/30 flex items-center justify-between">
+          <span class="text-[9px] font-bold text-text-muted uppercase tracking-widest">Base URL API détectée</span>
+          <span class="text-xs font-mono text-aqua">{{ apiBaseUrl }}</span>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { settingsApi } from '@/api/settings'
 import { meteoApi } from '@/api/meteo'
 import { UI_SIZE_DEFAULTS, applyUiSizesToRoot } from '@/utils/uiSizeDefaults'
@@ -130,10 +190,12 @@ const apiBaseUrl = detectApiBaseUrl()
 
 // --- UI Size settings ---
 const uiSizeSettings = [
-  { key: 'ui_font_size',      label: 'Taille texte',            min: 12, max: 20,  step: 1, unit: 'px' },
-  { key: 'ui_menu_font_size', label: 'Texte menu latéral',      min: 11, max: 18,  step: 1, unit: 'px' },
-  { key: 'ui_menu_icon_size', label: 'Icônes menu',             min: 14, max: 28,  step: 1, unit: 'px' },
-  { key: 'ui_thumb_size',     label: 'Miniatures images/vidéo', min: 60, max: 200, step: 4, unit: 'px' },
+  { key: 'ui_font_size',      label: 'Corps de texte',          min: 12, max: 24,  step: 1, unit: 'px' },
+  { key: 'ui_menu_font_size', label: 'Texte menu latéral',      min: 11, max: 20,  step: 1, unit: 'px' },
+  { key: 'ui_menu_icon_size', label: 'Icônes menu',             min: 14, max: 32,  step: 1, unit: 'px' },
+  { key: 'ui_thumb_size',     label: 'Miniatures médias',       min: 60, max: 300, step: 4, unit: 'px' },
+  { key: 'ui_weather_icon_size', label: 'Icônes Météo',         min: 32, max: 128, step: 4, unit: 'px' },
+  { key: 'ui_dashboard_icon_size', label: 'Icônes Dashboard',   min: 16, max: 64,  step: 2, unit: 'px' },
 ]
 
 const uiSizes = ref<Record<string, number>>({ ...UI_SIZE_DEFAULTS })
@@ -189,17 +251,9 @@ function openInNewTab(path: string) {
   window.open(url, '_blank', 'noopener,noreferrer')
 }
 
-function openApiDocs() {
-  openInNewTab('/docs')
-}
-
-function openApiRedoc() {
-  openInNewTab('/redoc')
-}
-
-function openApiHealth() {
-  openInNewTab('/api/health')
-}
+function openApiDocs() { openInNewTab('/docs') }
+function openApiRedoc() { openInNewTab('/redoc') }
+function openApiHealth() { openInNewTab('/api/health') }
 
 function toBool(value: unknown): boolean {
   if (typeof value === 'boolean') return value
@@ -223,7 +277,7 @@ async function loadSettings() {
     }
     applyUiSizes()
   } catch {
-    // Laisse la valeur locale si l'API n'est pas disponible.
+    // Laisse la valeur locale
   }
 }
 
@@ -233,7 +287,7 @@ async function saveSettings() {
   try {
     await settingsApi.update({ debug_mode: debugMode.value ? '1' : '0' })
     notifyDebugChanged(debugMode.value)
-    savedMsg.value = 'Enregistré'
+    savedMsg.value = 'Pris en compte'
     window.setTimeout(() => { savedMsg.value = '' }, 1800)
   } finally {
     saving.value = false
@@ -262,9 +316,9 @@ async function downloadBackup() {
     a.click()
     document.body.removeChild(a)
     window.URL.revokeObjectURL(url)
-    backupMsg.value = 'Téléchargement lancé.'
+    backupMsg.value = 'ZIP prêt !'
   } catch {
-    backupMsg.value = 'Erreur lors de la sauvegarde.'
+    backupMsg.value = 'Erreur export.'
   } finally {
     downloadingBackup.value = false
     window.setTimeout(() => { backupMsg.value = '' }, 2200)
diff --git a/frontend/src/views/TachesView.vue b/frontend/src/views/TachesView.vue
index b267910..14d60d5 100644
--- a/frontend/src/views/TachesView.vue
+++ b/frontend/src/views/TachesView.vue
@@ -1,51 +1,157 @@
 <template>
-  <div class="p-4 max-w-5xl mx-auto">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-bold text-green">✅ Tâches</h1>
-      <button class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
-        @click="openCreateTemplate">+ Nouveau template</button>
+  <div class="p-4 max-w-6xl mx-auto space-y-8">
+
+    <!-- En-tête -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-green tracking-tight">Gestion des Tâches</h1>
+        <p class="text-text-muted text-xs mt-1">Organisez vos travaux au jardin avec des listes et des modèles.</p>
+      </div>
+      <button class="btn-primary flex items-center gap-2" @click="openCreateTemplate">
+        <span class="text-lg leading-none">+</span> Template
+      </button>
     </div>
 
-    <div v-for="[groupe, label] in groupes" :key="groupe" class="mb-6">
-      <h2 class="text-text-muted text-xs uppercase tracking-widest mb-2">{{ label }}</h2>
-      <div v-if="!byStatut(groupe).length" class="text-text-muted text-xs pl-2 mb-2">—</div>
-      <div v-for="t in byStatut(groupe)" :key="t.id"
-        class="bg-bg-soft rounded-lg p-3 mb-2 flex items-center gap-3 border border-bg-hard">
-        <span :class="{
-          'text-red': t.priorite === 'haute',
-          'text-yellow': t.priorite === 'normale',
-          'text-text-muted': t.priorite === 'basse'
-        }">●</span>
-        <div class="flex-1 min-w-0">
-          <div class="text-text text-sm">{{ t.titre }}</div>
-          <div v-if="t.description" class="text-text-muted text-xs">{{ t.description }}</div>
-          <div v-if="t.echeance && t.statut !== 'template'" class="text-text-muted text-xs">📅 {{ fmtDate(t.echeance) }}</div>
-          <div v-if="t.frequence_jours != null && t.frequence_jours > 0" class="text-text-muted text-xs">
-            🔁 Tous les {{ t.frequence_jours }} jours
+    <!-- Section "Créer rapidement" -->
+    <section class="bg-bg-soft/20 rounded-xl border border-bg-soft overflow-hidden">
+      <button
+        class="w-full px-5 py-3 flex items-center justify-between text-left hover:bg-bg-soft/30 transition-colors"
+        @click="showQuickSection = !showQuickSection"
+      >
+        <span class="text-text font-bold text-sm flex items-center gap-2">
+          <span class="text-yellow">⚡</span> Créer rapidement
+        </span>
+        <span class="text-text-muted text-xs flex items-center gap-2">
+          <span>{{ totalTemplates }} template{{ totalTemplates > 1 ? 's' : '' }} disponible{{ totalTemplates > 1 ? 's' : '' }}</span>
+          <span :class="['transition-transform inline-block', showQuickSection ? 'rotate-180' : '']">▾</span>
+        </span>
+      </button>
+
+      <div v-show="showQuickSection" class="border-t border-bg-soft divide-y divide-bg-soft/50">
+
+        <!-- Mes templates personnalisés -->
+        <div v-if="byStatut('template').length" class="p-4 space-y-3">
+          <h3 class="text-text-muted text-[10px] font-bold uppercase tracking-widest">Mes templates</h3>
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="t in byStatut('template')" :key="t.id"
+              class="flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all hover:scale-[1.02]"
+              :class="priorityChipClass(t.priorite)"
+              @click="openSchedule(t)"
+            >
+              <span>{{ priorityIcon(t.priorite) }}</span>
+              <span>{{ t.titre }}</span>
+              <span v-if="t.frequence_jours" class="text-[10px] opacity-70">🔁 {{ t.frequence_jours }}j</span>
+              <span class="ml-1 opacity-50 text-[10px]">→ programmer</span>
+            </button>
           </div>
-          <div v-if="t.planting_id && t.statut !== 'template'" class="text-text-muted text-xs">🌱 Plantation #{{ t.planting_id }}</div>
         </div>
-        <div class="flex gap-1 items-center shrink-0">
-          <button v-if="t.statut === 'a_faire'" class="text-xs text-blue hover:underline"
-            @click="store.updateStatut(t.id!, 'en_cours')">→ En cours</button>
-          <button v-if="t.statut === 'en_cours'" class="text-xs text-green hover:underline"
-            @click="store.updateStatut(t.id!, 'fait')">✓ Fait</button>
-          <button
-            v-if="t.statut === 'template'"
-            @click="startEdit(t)"
-            class="text-xs text-yellow hover:underline ml-2"
-          >
-            Édit.
-          </button>
-          <button class="text-xs text-text-muted hover:text-red ml-1" @click="store.remove(t.id!)">✕</button>
+
+        <!-- Tâches courantes prédéfinies -->
+        <div class="p-4 space-y-3">
+          <h3 class="text-text-muted text-[10px] font-bold uppercase tracking-widest">Tâches courantes</h3>
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="qt in quickTemplatesFiltered" :key="qt.titre"
+              class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-bg-soft bg-bg text-text-muted text-sm hover:text-text hover:border-text-muted transition-all hover:scale-[1.02]"
+              @click="openScheduleQuick(qt)"
+            >
+              <span>{{ qt.icone }}</span>
+              <span>{{ qt.titre }}</span>
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- Kanban : À faire / En cours / Terminé -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div v-for="[groupe, label] in listGroupes" :key="groupe" class="space-y-3">
+        <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+          <span :class="['w-2 h-2 rounded-full', groupeColor(groupe)]"></span>
+          {{ label }}
+          <span class="ml-auto bg-bg-soft px-2 py-0.5 rounded text-[10px]">{{ byStatut(groupe).length }}</span>
+        </h2>
+
+        <div v-if="!byStatut(groupe).length" class="card-jardin text-center py-8 opacity-30 border-dashed">
+          <p class="text-text-muted text-xs uppercase tracking-widest font-bold">Aucune tâche</p>
+        </div>
+
+        <div v-for="t in byStatut(groupe)" :key="t.id"
+          class="card-jardin flex items-center gap-4 group relative overflow-hidden">
+          <!-- Barre priorité -->
+          <div :class="[
+            'absolute left-0 top-0 bottom-0 w-1',
+            t.priorite === 'haute' ? 'bg-red' : t.priorite === 'normale' ? 'bg-yellow' : 'bg-bg-hard'
+          ]"></div>
+
+          <div class="flex-1 min-w-0 pl-1">
+            <div class="flex items-center gap-2 mb-1">
+              <span class="text-text font-bold text-sm">{{ t.titre }}</span>
+              <span v-if="t.frequence_jours" class="badge badge-aqua !text-[8px]">🔁 {{ freqLabel(t.frequence_jours) }}</span>
+            </div>
+            <div v-if="t.description" class="text-text-muted text-xs line-clamp-1 mb-1 italic">{{ t.description }}</div>
+            <div class="flex flex-wrap gap-3 text-[10px] font-bold uppercase tracking-tighter text-text-muted opacity-70">
+              <span v-if="t.echeance" class="flex items-center gap-1">📅 {{ fmtDate(t.echeance) }}</span>
+              <span v-if="t.planting_id" class="flex items-center gap-1">🌱 {{ plantingShortLabel(t.planting_id) }}</span>
+            </div>
+          </div>
+
+          <div class="flex gap-2 items-center shrink-0">
+            <button v-if="t.statut === 'a_faire'" class="btn-outline !py-1 !px-2 text-blue border-blue/20 hover:bg-blue/10 text-[10px] font-bold uppercase"
+              @click="updateStatut(t.id!, 'en_cours')">Démarrer</button>
+            <button v-if="t.statut === 'en_cours'" class="btn-outline !py-1 !px-2 text-green border-green/20 hover:bg-green/10 text-[10px] font-bold uppercase"
+              @click="updateStatut(t.id!, 'fait')">Terminer</button>
+            <button @click="removeTask(t.id!)"
+              class="p-1.5 text-text-muted hover:text-red transition-colors opacity-0 group-hover:opacity-100">✕</button>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- Modal création / édition -->
+    <!-- Bibliothèque de templates -->
+    <section v-if="byStatut('template').length" class="space-y-3">
+      <h2 class="text-text-muted text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-aqua"></span>
+        Bibliothèque de templates
+        <span class="ml-auto bg-bg-soft px-2 py-0.5 rounded text-[10px]">{{ byStatut('template').length }}</span>
+      </h2>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
+        <div v-for="t in byStatut('template')" :key="t.id"
+          class="card-jardin flex items-center gap-3 group relative overflow-hidden">
+          <div :class="[
+            'absolute left-0 top-0 bottom-0 w-1',
+            t.priorite === 'haute' ? 'bg-red' : t.priorite === 'normale' ? 'bg-yellow' : 'bg-bg-hard'
+          ]"></div>
+
+          <div class="flex-1 min-w-0 pl-1">
+            <div class="flex items-center gap-2 mb-0.5">
+              <span class="text-text font-bold text-sm">{{ t.titre }}</span>
+              <span v-if="t.frequence_jours" class="badge badge-aqua !text-[8px]">🔁 {{ freqLabel(t.frequence_jours) }}</span>
+            </div>
+            <div v-if="t.description" class="text-text-muted text-xs line-clamp-1 italic">{{ t.description }}</div>
+          </div>
+
+          <div class="flex items-center gap-1 shrink-0">
+            <button
+              class="btn-outline !py-1 !px-2 text-aqua border-aqua/20 hover:bg-aqua/10 text-[10px] font-bold uppercase"
+              @click="openSchedule(t)"
+            >Programmer</button>
+            <button @click="startEdit(t)"
+              class="p-1.5 text-text-muted hover:text-yellow transition-colors opacity-0 group-hover:opacity-100">✏️</button>
+            <button @click="removeTask(t.id!)"
+              class="p-1.5 text-text-muted hover:text-red transition-colors opacity-0 group-hover:opacity-100">✕</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Modal création / édition template -->
     <div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
       <div class="bg-bg-hard rounded-xl p-6 w-full max-w-md border border-bg-soft">
-        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier la tâche' : 'Nouveau template' }}</h2>
+        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier le template' : 'Nouveau template' }}</h2>
         <form @submit.prevent="submit" class="grid gap-3">
           <div>
             <label class="text-text-muted text-xs block mb-1">Titre *</label>
@@ -54,93 +160,328 @@
           </div>
           <div>
             <label class="text-text-muted text-xs block mb-1">Description</label>
-            <textarea v-model="form.description" rows="2"
-              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none resize-none" />
+            <textarea v-model="form.description" rows="1"
+              @input="autoResize"
+              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none resize-none transition-all overflow-hidden" />
           </div>
-          <div class="grid grid-cols-2 gap-3">
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Priorité</label>
-              <select v-model="form.priorite" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
-                <option value="basse">Basse</option>
-                <option value="normale">Normale</option>
-                <option value="haute">Haute</option>
-              </select>
-            </div>
-            <div>
-              <label class="text-text-muted text-xs block mb-1">Type</label>
-              <input value="Template" readonly
-                class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text-muted text-sm" />
-            </div>
+          <div>
+            <label class="text-text-muted text-xs block mb-1">Priorité</label>
+            <select v-model="form.priorite" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
+              <option value="basse">Basse</option>
+              <option value="normale">Normale</option>
+              <option value="haute">Haute</option>
+            </select>
           </div>
           <div class="bg-bg rounded border border-bg-hard p-3">
-            <label class="inline-flex items-center gap-2 text-sm text-text">
+            <label class="inline-flex items-center gap-2 text-sm text-text cursor-pointer">
               <input v-model="form.repetition" type="checkbox" class="accent-green" />
-              Répétition
+              Répétition périodique
             </label>
-            <p class="text-text-muted text-[11px] mt-1">Fréquence proposée quand la tâche est ajoutée depuis une plantation.</p>
+            <p class="text-text-muted text-[11px] mt-1">Fréquence proposée quand la tâche est programmée depuis un template.</p>
           </div>
-          <div v-if="form.repetition">
-            <label class="text-text-muted text-xs block mb-1">Fréquence (jours)</label>
-            <input
-              v-model.number="form.frequence_jours"
-              type="number"
-              min="1"
-              step="1"
-              required
-              placeholder="Ex: 7"
-              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none"
-            />
+          <div v-if="form.repetition" class="flex gap-2 items-center">
+            <input v-model.number="form.freq_nb" type="number" min="1" max="99" required placeholder="1"
+              class="w-20 bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none font-mono" />
+            <select v-model="form.freq_unite" class="flex-1 bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
+              <option value="jours">Jour(s)</option>
+              <option value="semaines">Semaine(s)</option>
+              <option value="mois">Mois</option>
+            </select>
+            <span class="text-text-muted text-xs whitespace-nowrap">= {{ formFreqEnJours }} j</span>
           </div>
           <div class="flex gap-2 mt-2">
-            <button type="submit" class="bg-green text-bg px-4 py-2 rounded text-sm font-semibold">
-              {{ editId ? 'Enregistrer' : 'Créer le template' }}
+            <button type="submit" class="bg-green text-bg px-4 py-2 rounded text-sm font-semibold" :disabled="submitting">
+              {{ submitting ? 'Enregistrement…' : (editId ? 'Enregistrer' : 'Créer le template') }}
             </button>
             <button type="button" class="text-text-muted text-sm px-4 py-2 hover:text-text" @click="closeForm">Annuler</button>
           </div>
         </form>
       </div>
     </div>
+
+    <!-- Modal "Programmer une tâche" -->
+    <div v-if="showScheduleModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeSchedule">
+      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft max-h-[90vh] overflow-y-auto">
+        <h2 class="text-text font-bold text-lg mb-1">Programmer une tâche</h2>
+        <p class="text-text-muted text-xs mb-5 italic">
+          Crée une tâche <span class="text-blue font-bold">À faire</span> depuis ce template.
+        </p>
+
+        <form @submit.prevent="createScheduled" class="grid gap-3">
+
+          <!-- Titre -->
+          <div>
+            <label class="text-text-muted text-xs block mb-1">Titre *</label>
+            <input v-model="scheduleForm.titre" required
+              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
+          </div>
+
+          <!-- Date de démarrage -->
+          <div>
+            <label class="text-text-muted text-xs block mb-1">
+              Date de démarrage
+              <span class="opacity-50">(par défaut : aujourd'hui)</span>
+            </label>
+            <input v-model="scheduleForm.date_debut" type="date"
+              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none" />
+          </div>
+
+          <!-- Priorité -->
+          <div>
+            <label class="text-text-muted text-xs block mb-1">Priorité</label>
+            <select v-model="scheduleForm.priorite" class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm">
+              <option value="basse">⚪ Basse</option>
+              <option value="normale">🟡 Normale</option>
+              <option value="haute">🔴 Haute</option>
+            </select>
+          </div>
+
+          <!-- Plantation liée -->
+          <div>
+            <label class="text-text-muted text-xs block mb-1">
+              Plantation liée
+              <span class="opacity-50">(optionnel)</span>
+            </label>
+            <select v-model="scheduleForm.planting_id"
+              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none">
+              <option :value="null">— Aucune plantation —</option>
+              <optgroup v-for="g in plantingsByGarden" :key="g.gardenId" :label="g.gardenName">
+                <option v-for="p in g.plantings" :key="p.id" :value="p.id">
+                  {{ plantingLabel(p) }}
+                </option>
+              </optgroup>
+            </select>
+          </div>
+
+          <!-- Répétition -->
+          <div class="bg-bg rounded border border-bg-hard p-3 space-y-2">
+            <label class="inline-flex items-center gap-2 text-sm text-text cursor-pointer">
+              <input v-model="scheduleForm.repetition" type="checkbox" class="accent-green" />
+              Répétition périodique
+            </label>
+            <div v-if="scheduleForm.repetition" class="flex gap-2 items-center pt-1">
+              <span class="text-text-muted text-xs shrink-0">Tous les</span>
+              <input v-model.number="scheduleForm.freq_nb" type="number" min="1" max="99"
+                class="w-16 bg-bg-soft border border-bg-soft rounded px-2 py-1.5 text-text text-sm focus:border-green outline-none font-mono text-center" />
+              <select v-model="scheduleForm.freq_unite"
+                class="flex-1 bg-bg-soft border border-bg-soft rounded px-2 py-1.5 text-text text-sm focus:border-green outline-none">
+                <option value="jours">Jour(s)</option>
+                <option value="semaines">Semaine(s)</option>
+                <option value="mois">Mois</option>
+              </select>
+            </div>
+            <p v-if="scheduleForm.repetition" class="text-text-muted text-[11px]">
+              → Récurrence de {{ scheduleFreqEnJours }} jour{{ scheduleFreqEnJours > 1 ? 's' : '' }}
+            </p>
+          </div>
+
+          <!-- Notes -->
+          <div>
+            <label class="text-text-muted text-xs block mb-1">Notes <span class="opacity-50">(optionnel)</span></label>
+            <textarea v-model="scheduleForm.notes" rows="2" placeholder="Précisions sur cette occurrence…"
+              class="w-full bg-bg border border-bg-hard rounded px-3 py-2 text-text text-sm focus:border-green outline-none resize-none" />
+          </div>
+
+          <div class="flex gap-2 mt-1">
+            <button type="submit" class="bg-blue text-bg px-4 py-2 rounded text-sm font-semibold flex-1" :disabled="submitting">
+              {{ submitting ? 'Création…' : 'Créer la tâche' }}
+            </button>
+            <button type="button" class="text-text-muted text-sm px-4 py-2 hover:text-text" @click="closeSchedule">Annuler</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useTasksStore } from '@/stores/tasks'
+import { usePlantingsStore } from '@/stores/plantings'
+import { usePlantsStore } from '@/stores/plants'
+import { useGardensStore } from '@/stores/gardens'
 import type { Task } from '@/api/tasks'
+import type { Planting } from '@/api/plantings'
+import { useToast } from '@/composables/useToast'
 
-const store = useTasksStore()
-const showForm = ref(false)
-const editId = ref<number | null>(null)
+// ── Types ──────────────────────────────────────────────────────────────────────
+interface QuickTemplate {
+  titre: string
+  icone: string
+  priorite: string
+  description?: string
+}
+
+// ── Stores & composables ───────────────────────────────────────────────────────
+const store           = useTasksStore()
+const plantingsStore  = usePlantingsStore()
+const plantsStore     = usePlantsStore()
+const gardensStore    = useGardensStore()
+const toast           = useToast()
+
+// ── État UI ────────────────────────────────────────────────────────────────────
+const showForm         = ref(false)
+const showScheduleModal = ref(false)
+const showQuickSection  = ref(true)
+const editId           = ref<number | null>(null)
+const submitting       = ref(false)
+
+// ── Formulaire template (création / édition) ───────────────────────────────────
 const form = reactive({
   titre: '',
   description: '',
   priorite: 'normale',
-  statut: 'template',
   repetition: false,
-  frequence_jours: undefined as number | undefined,
+  freq_nb: 1 as number,
+  freq_unite: 'semaines' as 'jours' | 'semaines' | 'mois',
 })
 
-const groupes: [string, string][] = [
+const formFreqEnJours = computed(() => {
+  const n = form.freq_nb || 1
+  if (form.freq_unite === 'semaines') return n * 7
+  if (form.freq_unite === 'mois') return n * 30
+  return n
+})
+
+// ── Formulaire "programmer" (instancier un template) ──────────────────────────
+const scheduleForm = reactive({
+  titre: '',
+  date_debut: today(),
+  notes: '',
+  priorite: 'normale',
+  planting_id: null as number | null,
+  repetition: false,
+  freq_nb: 1 as number,
+  freq_unite: 'semaines' as 'jours' | 'semaines' | 'mois',
+})
+
+const scheduleFreqEnJours = computed(() => {
+  const n = scheduleForm.freq_nb || 1
+  if (scheduleForm.freq_unite === 'semaines') return n * 7
+  if (scheduleForm.freq_unite === 'mois') return n * 30
+  return n
+})
+
+// ── Templates prédéfinis jardinage ─────────────────────────────────────────────
+const QUICK_TEMPLATES: QuickTemplate[] = [
+  { titre: 'Arrosage',                   icone: '💧', priorite: 'normale' },
+  { titre: 'Semis en intérieur',         icone: '🌱', priorite: 'normale' },
+  { titre: 'Semis en pleine terre',      icone: '🌾', priorite: 'normale' },
+  { titre: 'Repiquage / Transplantation',icone: '🪴', priorite: 'normale' },
+  { titre: 'Récolte',                    icone: '🥕', priorite: 'normale' },
+  { titre: 'Taille / Ébourgeonnage',     icone: '✂️', priorite: 'normale' },
+  { titre: 'Désherbage',                 icone: '🌿', priorite: 'basse'   },
+  { titre: 'Fertilisation / Amendement', icone: '💊', priorite: 'normale' },
+  { titre: 'Traitement phytosanitaire',  icone: '🧪', priorite: 'haute'   },
+  { titre: 'Observation / Relevé',       icone: '👁️', priorite: 'basse'   },
+  { titre: 'Paillage',                   icone: '🍂', priorite: 'basse'   },
+  { titre: 'Compostage',                 icone: '♻️', priorite: 'basse'   },
+  { titre: 'Buttage',                    icone: '⛏️', priorite: 'normale' },
+  { titre: 'Protection gel / Voile',     icone: '🌡️', priorite: 'haute'   },
+  { titre: 'Tuteurage',                  icone: '🪵', priorite: 'normale' },
+  { titre: 'Éclaircissage',              icone: '🌞', priorite: 'normale' },
+]
+
+const quickTemplatesFiltered = computed(() => {
+  const existing = new Set(byStatut('template').map(t => t.titre.toLowerCase().trim()))
+  return QUICK_TEMPLATES.filter(qt => !existing.has(qt.titre.toLowerCase().trim()))
+})
+
+const totalTemplates = computed(
+  () => byStatut('template').length + quickTemplatesFiltered.value.length
+)
+
+// ── Plantations groupées par jardin pour le <optgroup> ─────────────────────────
+const plantingsByGarden = computed(() => {
+  const gardens = gardensStore.gardens
+  const plantings = plantingsStore.plantings.filter(p => p.statut !== 'termine' && p.statut !== 'echoue')
+
+  const groups: { gardenId: number; gardenName: string; plantings: Planting[] }[] = []
+  for (const g of gardens) {
+    const gPlantings = plantings.filter(p => p.garden_id === g.id)
+    if (gPlantings.length) {
+      groups.push({ gardenId: g.id!, gardenName: g.nom, plantings: gPlantings })
+    }
+  }
+  // Plantations sans jardin reconnu
+  const knownGardenIds = new Set(gardens.map(g => g.id))
+  const orphans = plantings.filter(p => !knownGardenIds.has(p.garden_id))
+  if (orphans.length) {
+    groups.push({ gardenId: 0, gardenName: 'Autres', plantings: orphans })
+  }
+  return groups
+})
+
+function plantingLabel(p: Planting): string {
+  const plant = plantsStore.plants.find(pl => pl.id === p.variety_id)
+  const nom = plant
+    ? [plant.nom_commun, plant.variete].filter(Boolean).join(' — ')
+    : `Variété #${p.variety_id}`
+  const date = p.date_plantation ? ` (${fmtDate(p.date_plantation)})` : ''
+  return `${nom}${date}`
+}
+
+function plantingShortLabel(id: number): string {
+  const p = plantingsStore.plantings.find(x => x.id === id)
+  if (!p) return `#${id}`
+  const plant = plantsStore.plants.find(pl => pl.id === p.variety_id)
+  return plant?.nom_commun ?? `#${id}`
+}
+
+// ── Groupes Kanban ─────────────────────────────────────────────────────────────
+const listGroupes: [string, string][] = [
   ['a_faire', 'À faire'],
   ['en_cours', 'En cours'],
   ['fait', 'Terminé'],
-  ['template', 'Templates'],
 ]
 
+function groupeColor(g: string) {
+  const map: Record<string, string> = { a_faire: 'bg-blue', en_cours: 'bg-yellow', fait: 'bg-green' }
+  return map[g] ?? 'bg-bg-hard'
+}
+
 const byStatut = (s: string) => store.tasks.filter(t => t.statut === s)
 
+// ── Helpers ────────────────────────────────────────────────────────────────────
+function today() {
+  return new Date().toISOString().slice(0, 10)
+}
+
 function fmtDate(s: string) {
   return new Date(s + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
 }
 
+function freqLabel(jours: number): string {
+  if (jours % 30 === 0 && jours >= 30) return `${jours / 30}mois`
+  if (jours % 7 === 0 && jours >= 7) return `${jours / 7}sem`
+  return `${jours}j`
+}
+
+function priorityIcon(p: string) {
+  return { haute: '🔴', normale: '🟡', basse: '⚪' }[p] ?? '⚪'
+}
+
+function priorityChipClass(p: string) {
+  const map: Record<string, string> = {
+    haute:   'border-red/30 bg-red/10 text-red hover:bg-red/20',
+    normale: 'border-yellow/30 bg-yellow/10 text-yellow hover:bg-yellow/20',
+    basse:   'border-bg-soft bg-bg text-text-muted hover:bg-bg-soft',
+  }
+  return map[p] ?? map.basse
+}
+
+function autoResize(event: Event) {
+  const el = event.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
+// ── Gestion template (form création/édition) ───────────────────────────────────
 function resetForm() {
   Object.assign(form, {
-    titre: '',
-    description: '',
-    priorite: 'normale',
-    statut: 'template',
-    repetition: false,
-    frequence_jours: undefined,
+    titre: '', description: '', priorite: 'normale',
+    repetition: false, freq_nb: 1, freq_unite: 'semaines',
   })
 }
 
@@ -152,13 +493,19 @@ function openCreateTemplate() {
 
 function startEdit(t: Task) {
   editId.value = t.id!
+  const jours = t.frequence_jours ?? 0
+  let freq_nb = jours
+  let freq_unite: 'jours' | 'semaines' | 'mois' = 'jours'
+  if (jours >= 30 && jours % 30 === 0) { freq_nb = jours / 30; freq_unite = 'mois' }
+  else if (jours >= 7 && jours % 7 === 0) { freq_nb = jours / 7; freq_unite = 'semaines' }
+
   Object.assign(form, {
     titre: t.titre,
     description: t.description || '',
     priorite: t.priorite,
-    statut: t.statut || 'template',
     repetition: Boolean(t.recurrence || t.frequence_jours),
-    frequence_jours: t.frequence_jours ?? undefined,
+    freq_nb: freq_nb || 1,
+    freq_unite,
   })
   showForm.value = true
 }
@@ -168,25 +515,130 @@ function closeForm() {
   editId.value = null
 }
 
-onMounted(() => store.fetchAll())
-
 async function submit() {
+  if (submitting.value) return
+  submitting.value = true
+  const freqJours = form.repetition ? formFreqEnJours.value : null
   const payload = {
     titre: form.titre,
-    description: form.description,
+    description: form.description || undefined,
     priorite: form.priorite,
     statut: 'template',
     recurrence: form.repetition ? 'jours' : null,
-    frequence_jours: form.repetition ? (form.frequence_jours ?? 7) : null,
-    echeance: undefined,
-    planting_id: undefined,
+    frequence_jours: freqJours,
   }
-  if (editId.value) {
-    await store.update(editId.value, payload)
-  } else {
-    await store.create(payload)
+  try {
+    if (editId.value) {
+      await store.update(editId.value, payload)
+      toast.success('Template modifié')
+    } else {
+      await store.create(payload)
+      toast.success('Template créé')
+    }
+    closeForm()
+    resetForm()
+  } catch {
+    // L'intercepteur Axios affiche le message
+  } finally {
+    submitting.value = false
   }
-  closeForm()
-  resetForm()
 }
+
+// ── Programmer une tâche depuis un template ────────────────────────────────────
+function resetScheduleForm() {
+  Object.assign(scheduleForm, {
+    titre: '',
+    date_debut: today(),
+    notes: '',
+    priorite: 'normale',
+    planting_id: null,
+    repetition: false,
+    freq_nb: 1,
+    freq_unite: 'semaines',
+  })
+}
+
+function openSchedule(t: Task) {
+  resetScheduleForm()
+  const jours = t.frequence_jours ?? 0
+  let freq_nb = jours
+  let freq_unite: 'jours' | 'semaines' | 'mois' = 'jours'
+  if (jours >= 30 && jours % 30 === 0) { freq_nb = jours / 30; freq_unite = 'mois' }
+  else if (jours >= 7 && jours % 7 === 0) { freq_nb = jours / 7; freq_unite = 'semaines' }
+
+  Object.assign(scheduleForm, {
+    titre: t.titre,
+    notes: t.description || '',
+    priorite: t.priorite,
+    repetition: Boolean(t.frequence_jours),
+    freq_nb: freq_nb || 1,
+    freq_unite,
+  })
+  showScheduleModal.value = true
+}
+
+function openScheduleQuick(qt: QuickTemplate) {
+  resetScheduleForm()
+  Object.assign(scheduleForm, {
+    titre: `${qt.icone} ${qt.titre}`,
+    priorite: qt.priorite,
+  })
+  showScheduleModal.value = true
+}
+
+function closeSchedule() {
+  showScheduleModal.value = false
+}
+
+async function createScheduled() {
+  if (submitting.value) return
+  submitting.value = true
+  const freqJours = scheduleForm.repetition ? scheduleFreqEnJours.value : null
+  try {
+    await store.create({
+      titre: scheduleForm.titre,
+      description: scheduleForm.notes || undefined,
+      priorite: scheduleForm.priorite,
+      statut: 'a_faire',
+      echeance: scheduleForm.date_debut || today(),
+      planting_id: scheduleForm.planting_id ?? undefined,
+      recurrence: scheduleForm.repetition ? 'jours' : null,
+      frequence_jours: freqJours,
+    })
+    toast.success(`"${scheduleForm.titre}" ajoutée aux tâches à faire`)
+    closeSchedule()
+  } catch {
+    // L'intercepteur Axios affiche le message
+  } finally {
+    submitting.value = false
+  }
+}
+
+// ── Actions Kanban ─────────────────────────────────────────────────────────────
+async function updateStatut(id: number, statut: string) {
+  try {
+    await store.updateStatut(id, statut)
+  } catch { /* L'intercepteur Axios affiche le message */ }
+}
+
+async function removeTask(id: number) {
+  try {
+    await store.remove(id)
+    toast.success('Tâche supprimée')
+  } catch { /* L'intercepteur Axios affiche le message */ }
+}
+
+// ── Initialisation ─────────────────────────────────────────────────────────────
+onMounted(async () => {
+  try {
+    await Promise.all([
+      store.fetchAll(),
+      plantingsStore.fetchAll(),
+      plantsStore.fetchAll(),
+      gardensStore.fetchAll(),
+    ])
+  } catch {
+    toast.error('Impossible de charger les données')
+  }
+})
 </script>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index e8332b2..baa1524 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -6,7 +6,7 @@
     "strict": true,
     "jsx": "preserve",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-pwa/client"],
     "skipLibCheck": true,
     "paths": { "@/*": ["./src/*"] }
   },
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index b0cf66a..2dc06fd 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,9 +1,84 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: 'Jardin — Gestionnaire de potager',
+        short_name: 'Jardin',
+        description: 'Interface mobile-first pour gérer vos jardins, cultures et calendrier lunaire',
+        theme_color: '#282828',
+        background_color: '#282828',
+        display: 'standalone',
+        lang: 'fr',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 an
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            urlPattern: /\/api\/.*$/,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 // 24h
+              }
+            }
+          },
+          {
+            urlPattern: /\/uploads\/.*$/,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'uploads-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 30 // 30 jours
+              }
+            }
+          }
+        ]
+      }
+    })
+  ],
   resolve: {
     alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
   },