Web: PlanningPage — grille hebdomadaire + navigation semaine (step 3/4)

- Remplace HomePage (table jour unique) par PlanningPage : grille
  7 jours × 5 repas, groupés Matin/Midi/Après-midi/Soir (séparateurs
  pleins, plus épais entre groupes), recettes en pastilles pleine
  largeur, bouton "+" pleine largeur sans bordure (pas encore branché
  — pas de catalogue de recettes côté API, tâche future)
- WeekNavigator + CalendarPopover (sur date-tools) : flèches semaine
  précédente/suivante, popover calendrier (mois navigable, clic sur
  un jour → sa semaine), fermeture au clic extérieur
- apiClient.getPlanningForWeek(date) remplace getCurrentPlanning()
- i18n: namespace home → planning (+ nouvelles clés jours/repas/
  calendrier), common.loadError factorisé (repris par les pages
  Foyer/Préférences qui réutilisaient l'ancien home.error)

apps/web/package.json

@@ -13,6 +13,7 @@
     "e2e": "start-server-and-test dev http://localhost:5173 cy:run"
   },
   "dependencies": {
+    "@batch-cooking/date-tools": "workspace:*",
     "@batch-cooking/shared": "workspace:*",
     "i18next": "^26.3.6",
     "react": "^18.3.1",

apps/web/src/App.tsx

@@ -2,8 +2,8 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { RedirectIfAuthenticated } from "./features/auth/RedirectIfAuthenticated";
 import { RequireAuth } from "./features/auth/RequireAuth";
 import { AppLayout } from "./layouts/AppLayout";
-import { HomePage } from "./pages/HomePage";
 import { LoginPage } from "./pages/LoginPage";
+import { PlanningPage } from "./pages/PlanningPage";
 import { RecipesPage } from "./pages/RecipesPage";
 import { ShoppingListPage } from "./pages/ShoppingListPage";
 import { SignupPage } from "./pages/SignupPage";
@@ -45,7 +45,7 @@ export function App() {
           </RequireAuth>
         }
       >
-        <Route path="/" element={<HomePage />} />
+        <Route path="/" element={<PlanningPage />} />
         <Route path="/recettes" element={<RecipesPage />} />
         <Route path="/liste-de-courses" element={<ShoppingListPage />} />
         <Route path="/parametres/compte" element={<AccountSettingsPage />} />

apps/web/src/api/client.ts

@@ -103,9 +103,13 @@ export class ApiClient {
     return this.request("/auth/me", { method: "DELETE", body: JSON.stringify({ password }) });
   }
 
-  /** Fetches the current user's household's planning for today, or `null` if there isn't one yet. */
+  /**
-  public getCurrentPlanning(): Promise<PlanningView | null> {
+   * Fetches the current user's household's planning covering `date`
-    return this.request("/planning/current");
+   * (`YYYY-MM-DD`, e.g. from `date-tools`'s `formatDateOnly`), or `null` if
+   * there isn't one for that week yet.
+   */
+  public getPlanningForWeek(date: string): Promise<PlanningView | null> {
+    return this.request(`/planning?date=${date}`);
   }
 
   /** Reference list of dietary regimes to pick from (signup wizard, `/foyer`). Public — no session required. */

apps/web/src/locales/fr/translation.json

@@ -1,7 +1,8 @@
 {
   "common": {
     "saving": "Enregistrement…",
-    "saved": "Enregistré ✓"
+    "saved": "Enregistré ✓",
+    "loadError": "Impossible de charger le planning, réessayez plus tard"
   },
   "errors": {
     "VALIDATION_ERROR": "Erreur de validation",
@@ -77,15 +78,38 @@
     "greeting": "Bonjour {{firstName}} 👋",
     "logout": "Se déconnecter"
   },
-  "home": {
+  "planning": {
     "title": "Planning de la semaine",
     "loading": "Chargement du planning…",
-    "error": "Impossible de charger le planning, réessayez plus tard",
+    "weekNav": {
-    "empty": "Aucun planning pour cette semaine.",
+      "thisWeek": "Cette semaine",
-    "table": {
+      "prevWeek": "Semaine précédente",
-      "day": "Jour",
+      "nextWeek": "Semaine suivante",
-      "meal": "Repas",
+      "label": "Semaine du {{range}}"
-      "recipe": "Recette"
+    },
+    "calendar": {
+      "prevMonth": "Mois précédent",
+      "nextMonth": "Mois suivant"
+    },
+    "days": {
+      "lundi": "Lundi",
+      "mardi": "Mardi",
+      "mercredi": "Mercredi",
+      "jeudi": "Jeudi",
+      "vendredi": "Vendredi",
+      "samedi": "Samedi",
+      "dimanche": "Dimanche"
+    },
+    "meals": {
+      "petit-dejeuner": "Petit-déjeuner",
+      "collation": "Collation",
+      "dejeuner": "Déjeuner",
+      "gouter": "Goûter",
+      "diner": "Dîner"
+    },
+    "grid": {
+      "addRecipeSoon": "Recherche de recettes à venir",
+      "removeRecipe": "Retirer cette recette"
     }
   },
   "recipes": {

apps/web/src/pages/HomePage.scss

@@ -1,56 +0,0 @@
-// =============================================================================
-// Styles specific to HomePage — colocated next to HomePage.tsx since nothing
-// else uses these classes.
-// =============================================================================
-
-// No `@use` of the theme partial needed here: every design token below is a
-// CSS custom property (--color-*, --space-*...) declared once on :root in
-// styles/global.scss and available globally at runtime — not a Sass-level
-// variable/mixin that would require an explicit compile-time import.
-
-// No outer centering wrapper here (unlike the old version of this file):
-// AppLayout's `.app-content` already owns the page background/padding —
-// this is just the page's own content.
-.home-page {
-  &__status {
-    color: var(--color-text-muted);
-    font-size: var(--font-size-md);
-  }
-
-  &__status--error {
-    color: var(--color-error);
-  }
-}
-
-// The current planning, one row per meal slot. Raised on its own surface,
-// same card treatment used elsewhere in the app, so it reads as a distinct
-// piece of content rather than bare text on the page background.
-.planning-table {
-  width: 100%;
-  max-width: 40rem;
-  margin-top: var(--space-md);
-  border-collapse: collapse;
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-
-  th,
-  td {
-    padding: var(--space-sm) var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  th {
-    background: var(--color-surface-alt);
-    color: var(--color-text-muted);
-    font-size: var(--font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
-}

apps/web/src/pages/HomePage.tsx

@@ -1,81 +0,0 @@
-import type { PlanningView } from "@batch-cooking/shared";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { apiClient } from "../api/client";
-import "./HomePage.scss";
-
-/** Load state for the `GET /planning/current` call — a discriminated union so a stale/impossible combination (e.g. "loading" with data) can't be represented. */
-type PlanningState =
-  | { status: "loading" }
-  | { status: "loaded"; planning: PlanningView | null }
-  | { status: "error" };
-
-/**
- * Landing page for an authenticated visitor — the household's current
- * planning. Behind {@link RequireAuth} (via `AppLayout`), so this only
- * renders once a session is confirmed; the planning itself still has to be
- * fetched separately, hence the loading/error/empty/loaded states below.
- * `null` from the API is a normal, common state (no planning created yet),
- * not an error — see `apps/api`'s `planning.service.ts`.
- */
-export function HomePage() {
-  const { t } = useTranslation();
-  const [state, setState] = useState<PlanningState>({ status: "loading" });
-
-  useEffect(() => {
-    // Guards against setting state after unmount (e.g. the user navigates
-    // away before the request resolves) — no cleanup-worthy resource here,
-    // just avoids a "set state on unmounted component" warning.
-    let cancelled = false;
-
-    apiClient
-      .getCurrentPlanning()
-      .then((planning) => {
-        if (!cancelled) setState({ status: "loaded", planning });
-      })
-      .catch(() => {
-        if (!cancelled) setState({ status: "error" });
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  return (
-    <div className="home-page">
-      <h1>{t("home.title")}</h1>
-
-      {state.status === "loading" && <p className="home-page__status">{t("home.loading")}</p>}
-
-      {state.status === "error" && (
-        <p className="home-page__status home-page__status--error">{t("home.error")}</p>
-      )}
-
-      {state.status === "loaded" && state.planning === null && (
-        <p className="home-page__status">{t("home.empty")}</p>
-      )}
-
-      {state.status === "loaded" && state.planning !== null && (
-        <table className="planning-table">
-          <thead>
-            <tr>
-              <th>{t("home.table.day")}</th>
-              <th>{t("home.table.meal")}</th>
-              <th>{t("home.table.recipe")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {state.planning.items.map((item) => (
-              <tr key={item.id}>
-                <td>{item.weekDay}</td>
-                <td>{item.meal}</td>
-                <td>{item.recipe.name}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-}

apps/web/src/pages/PlanningPage.tsx

@@ -0,0 +1,318 @@
+import {
+  DateTime,
+  addWeeks,
+  buildCalendarMonth,
+  formatDateOnly,
+  getWeekStart,
+  toDateOnly,
+} from "@batch-cooking/date-tools";
+import { MEALS, type Meal, type PlanningView, WEEK_DAYS } from "@batch-cooking/shared";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "../api/client";
+import "./planning-page.scss";
+
+/** Load state for the `GET /planning` call — a discriminated union so a stale/impossible combination (e.g. "loading" with data) can't be represented. */
+type PlanningState =
+  | { status: "loading" }
+  | { status: "loaded"; planning: PlanningView | null }
+  | { status: "error" };
+
+/** Meals that close out a "moment of the day" group (Matin/Midi/Après-midi/Soir) — see `.band-end` in planning-page.scss for the resulting border treatment. */
+const BAND_END_MEALS: ReadonlySet<Meal> = new Set(["collation", "dejeuner", "gouter"]);
+
+/**
+ * Landing page for an authenticated visitor — the household's planning for
+ * a selectable week, laid out as a grid (days × meals). Behind
+ * {@link RequireAuth} (via `AppLayout`), so this only renders once a
+ * session is confirmed.
+ *
+ * `null` from the API is a normal, common state (no planning for that week
+ * yet) — unlike the previous single-day table view this replaces, it isn't
+ * rendered as a separate "empty" message: the grid itself, with every cell
+ * showing just its "+" button, already communicates that. The "+" itself
+ * isn't wired to anything yet (no recipe catalog to search — see the
+ * planning page's plan/PR description) — a future task.
+ */
+export function PlanningPage() {
+  const { t } = useTranslation();
+  const [weekStart, setWeekStart] = useState<DateTime>(() => getWeekStart(DateTime.utc()));
+  const [state, setState] = useState<PlanningState>({ status: "loading" });
+
+  useEffect(() => {
+    let cancelled = false;
+    setState({ status: "loading" });
+
+    apiClient
+      .getPlanningForWeek(formatDateOnly(weekStart))
+      .then((planning) => {
+        if (!cancelled) setState({ status: "loaded", planning });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ status: "error" });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [weekStart]);
+
+  return (
+    <div className="planning-page">
+      <div className="planning-page__header">
+        <h1>{t("planning.title")}</h1>
+        <WeekNavigator weekStart={weekStart} onChangeWeek={setWeekStart} />
+      </div>
+
+      {state.status === "loading" && (
+        <p className="planning-page__status">{t("planning.loading")}</p>
+      )}
+
+      {state.status === "error" && (
+        <p className="planning-page__status planning-page__status--error">
+          {t("common.loadError")}
+        </p>
+      )}
+
+      {state.status === "loaded" && (
+        <PlanningGrid weekStart={weekStart} planning={state.planning} />
+      )}
+    </div>
+  );
+}
+
+/** "17 au 23 août 2026" — collapses the month/year to just the end date when both ends of the week share it, spells it out on both ends otherwise (e.g. a week straddling two months). */
+function formatWeekRange(weekStart: DateTime): string {
+  const weekEnd = weekStart.plus({ days: 6 });
+  const sameMonth = weekStart.hasSame(weekEnd, "month");
+  const startLabel = weekStart.toLocaleString(
+    sameMonth ? { day: "numeric" } : { day: "numeric", month: "long" },
+    { locale: "fr" },
+  );
+  const endLabel = weekEnd.toLocaleString(
+    { day: "numeric", month: "long", year: "numeric" },
+    { locale: "fr" },
+  );
+  return `${startLabel} au ${endLabel}`;
+}
+
+/** Arrows + clickable label opening {@link CalendarPopover} — the week-selection UI at the top of the page. */
+function WeekNavigator({
+  weekStart,
+  onChangeWeek,
+}: {
+  weekStart: DateTime;
+  onChangeWeek: (weekStart: DateTime) => void;
+}) {
+  const { t } = useTranslation();
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const isThisWeek = weekStart.hasSame(getWeekStart(DateTime.utc()), "day");
+
+  return (
+    <div className="week-nav">
+      <button
+        type="button"
+        className="week-nav__arrow"
+        title={t("planning.weekNav.prevWeek")}
+        onClick={() => onChangeWeek(addWeeks(weekStart, -1))}
+      >
+        ‹
+      </button>
+
+      <button
+        type="button"
+        className="week-nav__label"
+        onClick={() => setIsCalendarOpen((open) => !open)}
+      >
+        📅 {t("planning.weekNav.label", { range: formatWeekRange(weekStart) })}
+        {isThisWeek && <span className="today-badge">{t("planning.weekNav.thisWeek")}</span>}
+      </button>
+
+      <button
+        type="button"
+        className="week-nav__arrow"
+        title={t("planning.weekNav.nextWeek")}
+        onClick={() => onChangeWeek(addWeeks(weekStart, 1))}
+      >
+        ›
+      </button>
+
+      {isCalendarOpen && (
+        <CalendarPopover
+          selectedWeekStart={weekStart}
+          onSelectDay={(day) => {
+            onChangeWeek(getWeekStart(day));
+            setIsCalendarOpen(false);
+          }}
+          onClose={() => setIsCalendarOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Month calendar letting the visitor jump to any week at once — selecting a day selects its whole (Monday-first) week. Closes itself on an outside click. */
+function CalendarPopover({
+  selectedWeekStart,
+  onSelectDay,
+  onClose,
+}: {
+  selectedWeekStart: DateTime;
+  onSelectDay: (day: DateTime) => void;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  // Its own state: browsing to a different month to pick a week there
+  // shouldn't jump back every render — only re-anchors when the popover is
+  // first opened (`selectedWeekStart` at that point), not while it's open.
+  const [visibleMonth, setVisibleMonth] = useState(() => selectedWeekStart.startOf("month"));
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+
+  const today = toDateOnly(DateTime.utc());
+  const selectedWeekEnd = selectedWeekStart.plus({ days: 6 });
+  const weeks = buildCalendarMonth(visibleMonth);
+
+  return (
+    <div className="calendar-popover" ref={popoverRef}>
+      <div className="calendar-popover__header">
+        <button
+          type="button"
+          title={t("planning.calendar.prevMonth")}
+          onClick={() => setVisibleMonth((month) => month.minus({ months: 1 }))}
+        >
+          ‹
+        </button>
+        <span>
+          {visibleMonth.toLocaleString({ month: "long", year: "numeric" }, { locale: "fr" })}
+        </span>
+        <button
+          type="button"
+          title={t("planning.calendar.nextMonth")}
+          onClick={() => setVisibleMonth((month) => month.plus({ months: 1 }))}
+        >
+          ›
+        </button>
+      </div>
+
+      <div className="calendar-grid">
+        {WEEK_DAYS.map((weekDay) => (
+          <span key={weekDay} className="calendar-grid__weekday">
+            {t(`planning.days.${weekDay}`).charAt(0)}
+          </span>
+        ))}
+
+        {weeks.flat().map((day) => {
+          const classNames = ["calendar-grid__day"];
+          if (!day.hasSame(visibleMonth, "month")) classNames.push("calendar-grid__day--muted");
+          if (day >= selectedWeekStart && day <= selectedWeekEnd) {
+            classNames.push("calendar-grid__day--in-selected-week");
+          }
+          if (day.hasSame(today, "day")) classNames.push("calendar-grid__day--today");
+
+          return (
+            <button
+              key={day.toISO()}
+              type="button"
+              className={classNames.join(" ")}
+              onClick={() => onSelectDay(day)}
+            >
+              {day.day}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** The week grid itself — 7 day columns × 5 meal rows. */
+function PlanningGrid({
+  weekStart,
+  planning,
+}: { weekStart: DateTime; planning: PlanningView | null }) {
+  const { t } = useTranslation();
+  const today = toDateOnly(DateTime.utc());
+  const days = WEEK_DAYS.map((weekDay, i) => ({ weekDay, date: weekStart.plus({ days: i }) }));
+  const items = planning?.items ?? [];
+
+  return (
+    <div className="planning-grid-wrapper">
+      <table className="planning-grid">
+        <thead>
+          <tr>
+            <th />
+            {days.map(({ weekDay, date }) => (
+              <th key={weekDay} className={date.hasSame(today, "day") ? "today" : undefined}>
+                <span className="day-name">{t(`planning.days.${weekDay}`)}</span>
+                <span className="day-date">{date.day}</span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {MEALS.map((meal) => (
+            <tr key={meal} className={BAND_END_MEALS.has(meal) ? "band-end" : undefined}>
+              <th>{t(`planning.meals.${meal}`)}</th>
+              {days.map(({ weekDay, date }) => (
+                <MealCell
+                  key={weekDay}
+                  isToday={date.hasSame(today, "day")}
+                  recipes={items
+                    .filter((item) => item.weekDay === weekDay && item.meal === meal)
+                    .map((item) => ({ id: item.id, name: item.recipe.name }))}
+                />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/** One (day, meal) cell: the recipes already planned for it (as pills) plus the "+" to add another. */
+function MealCell({
+  isToday,
+  recipes,
+}: {
+  isToday: boolean;
+  recipes: { id: number; name: string }[];
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <td className={isToday ? "meal-cell today" : "meal-cell"}>
+      <div className="meal-cell__content">
+        {recipes.length > 0 && (
+          <div className="meal-cell__recipes">
+            {recipes.map((recipe) => (
+              <span key={recipe.id} className="recipe-chip">
+                <span className="recipe-chip__name">{recipe.name}</span>
+                <button
+                  type="button"
+                  className="recipe-chip__remove"
+                  title={t("planning.grid.removeRecipe")}
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        <button type="button" className="add-recipe-btn" title={t("planning.grid.addRecipeSoon")}>
+          +
+        </button>
+      </div>
+    </td>
+  );
+}

apps/web/src/pages/planning-page.scss

@@ -0,0 +1,356 @@
+// =============================================================================
+// Styles specific to PlanningPage — colocated next to PlanningPage.tsx since
+// nothing else uses these classes. Ported from the reviewed HTML mockup
+// (see the plan file / PR description) onto the app's real design tokens —
+// no light/dark duplication needed here, unlike the standalone mockup:
+// every `var(--color-*)` below already resolves per-theme globally (see
+// styles/_theme.scss).
+// =============================================================================
+
+// `.app-content` (AppLayout.scss) already stretches to the full viewport
+// height (flex item of `.app-layout`, itself `min-height: 100vh` — the
+// same stretch the sidebar relies on to pin its footer at the bottom).
+// `.planning-page` just needs to fill that box and lay out as a column so
+// `.planning-grid-wrapper` can grow to fill whatever's left under the
+// header, instead of the grid being only as tall as its content.
+.planning-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+  }
+
+  &__status {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-md);
+  }
+
+  &__status--error {
+    color: var(--color-error);
+  }
+}
+
+// --- Week navigator (arrows + clickable label opening the calendar) -------
+.week-nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+
+  &__arrow {
+    width: 2rem;
+    height: 2rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-base);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-surface-alt);
+    }
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 0.45rem var(--space-md);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-base);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-surface-alt);
+    }
+  }
+}
+
+.today-badge {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--radius-pill);
+}
+
+// --- Calendar popover -------------------------------------------------------
+.calendar-popover {
+  position: absolute;
+  top: calc(100% + var(--space-xs));
+  right: 0;
+  z-index: 10;
+  width: 18rem;
+  padding: var(--space-md);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-sm);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    text-transform: capitalize;
+
+    button {
+      width: 1.6rem;
+      height: 1.6rem;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: var(--font-size-base);
+      color: var(--color-text-muted);
+      border-radius: var(--radius-base);
+
+      &:hover {
+        background: var(--color-surface-alt);
+      }
+    }
+  }
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+
+  &__weekday {
+    text-align: center;
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    font-weight: 600;
+    padding-bottom: var(--space-xs);
+  }
+
+  &__day {
+    aspect-ratio: 1;
+    display: grid;
+    place-items: center;
+    font-size: var(--font-size-sm);
+    border-radius: var(--radius-base);
+    cursor: pointer;
+    color: var(--color-text);
+    border: none;
+    background: none;
+    font: inherit;
+
+    &:hover {
+      background: var(--color-surface-alt);
+    }
+
+    &--muted {
+      color: var(--color-border);
+    }
+
+    &--in-selected-week {
+      background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+      border-radius: 0;
+    }
+
+    &--today {
+      box-shadow: inset 0 0 0 2px var(--color-primary);
+      font-weight: 700;
+    }
+  }
+}
+
+// --- The grid itself --------------------------------------------------------
+.planning-grid-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+
+table.planning-grid {
+  width: 100%;
+  height: 100%;
+  min-width: 62rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th,
+  td {
+    border: 1px solid var(--color-border);
+    vertical-align: top;
+  }
+
+  thead th {
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-surface-alt);
+    text-align: left;
+
+    &:first-child {
+      width: 9rem;
+    }
+
+    .day-name {
+      display: block;
+      font-size: var(--font-size-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--color-text-muted);
+      font-weight: 600;
+    }
+
+    .day-date {
+      display: block;
+      font-size: var(--font-size-md);
+      font-weight: 700;
+      margin-top: 2px;
+      color: var(--color-text);
+    }
+
+    &.today {
+      background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-alt));
+
+      .day-date {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  tbody th {
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-surface-alt);
+    text-align: center;
+    vertical-align: middle;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+  }
+
+  td.today {
+    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
+  }
+
+  // Repas groupés par moment de la journée (Matin / Midi / Après-midi /
+  // Soir) — piloté uniquement via `border-bottom` (jamais `border-top`) :
+  // avec `border-collapse: collapse`, deux bordures différentes qui se
+  // rencontrent sur la même arête peuvent fusionner de façon ambiguë selon
+  // le navigateur — en désactivant `border-top` sur tbody, chaque arête
+  // horizontale n'est plus définie que d'un seul côté, sans ambiguïté
+  // possible. Toutes les séparations entre repas sont pleines (même couleur
+  // que les séparations de jour) ; seule la frontière entre deux groupes
+  // ("band-end", la dernière ligne d'un groupe) se distingue par une
+  // épaisseur plus marquée.
+  tbody th,
+  tbody td {
+    border-top: none;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  tbody tr.band-end th,
+  tbody tr.band-end td {
+    border-bottom: 2px solid var(--color-border);
+  }
+}
+
+// --- Case : pastilles de recette + bouton "+" -------------------------------
+.meal-cell {
+  padding: var(--space-sm);
+}
+
+.meal-cell__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  height: 100%;
+}
+
+.meal-cell__recipes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.recipe-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.3rem var(--space-sm);
+  border-radius: var(--radius-pill);
+  background: var(--color-tag);
+  color: var(--color-tag-ink);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+
+  &__name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__remove {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    display: grid;
+    place-items: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0;
+    font-size: 0.65rem;
+    border-radius: 50%;
+  }
+
+  &:hover &__remove {
+    opacity: 0.7;
+  }
+
+  &__remove:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.15);
+  }
+}
+
+// Pleine largeur, sans bordure (juste un fond au survol — plus épuré qu'un
+// contour pointillé), et toujours collé en haut de la case (juste sous la
+// dernière recette s'il y en a), jamais centré au milieu d'une case vide.
+.add-recipe-btn {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.35rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-base);
+  background: none;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  }
+}

apps/web/src/pages/settings/HouseholdSettingsPage.tsx

@@ -66,7 +66,9 @@ export function HouseholdSettingsPage() {
     return (
       <div className="settings-page">
         <h1>{t("household.title")}</h1>
-        <p className="settings-page__status settings-page__status--error">{t("home.error")}</p>
+        <p className="settings-page__status settings-page__status--error">
+          {t("common.loadError")}
+        </p>
       </div>
     );
   }

apps/web/src/pages/settings/PreferencesPage.tsx

@@ -129,7 +129,9 @@ export function PreferencesPage() {
     return (
       <div className="settings-page">
         <h1>{t("preferences.title")}</h1>
-        <p className="settings-page__status settings-page__status--error">{t("home.error")}</p>
+        <p className="settings-page__status settings-page__status--error">
+          {t("common.loadError")}
+        </p>
       </div>
     );
   }