diff --git a/CHANGELOG.fr.md b/CHANGELOG.fr.md
index a07c8e4..1b4f42f 100644
--- a/CHANGELOG.fr.md
+++ b/CHANGELOG.fr.md
@@ -4,6 +4,7 @@
 
 ### Ajouté
 - **Rapport Cartes** : info-bulle d'aide sur le KPI taux d'épargne expliquant la formule — `(revenus − dépenses) ÷ revenus × 100`, calculée sur le mois de référence (#101)
+- **Rapport Tendances — Par catégorie** (`/reports/trends`) : nouveau toggle segmenté pour basculer le graphique d'évolution par catégorie entre les barres empilées (par défaut, inchangé) et une vue surface empilée Recharts (`<AreaChart stackId="1">`) qui montre la composition totale dans le temps. Les deux modes partagent la même palette de catégories et les mêmes patterns SVG en niveaux de gris. Le type choisi est mémorisé dans `localStorage` (`reports-trends-category-charttype`) (#105)
 
 ### Modifié
 - **Rapport Zoom catégorie** (`/reports/category`) : le sélecteur de catégorie est désormais un combobox saisissable et filtrable avec recherche insensible aux accents, navigation clavier (↑/↓/Entrée/Échap) et indentation hiérarchique, en remplacement du `<select>` natif (#103)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 793445f..4641975 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Added
 - **Cartes report**: help tooltip on the savings-rate KPI explaining the formula — `(income − expenses) ÷ income × 100`, computed on the reference month (#101)
+- **Trends report — by category** (`/reports/trends`): new segmented toggle to switch the category-evolution chart between stacked bars (default, unchanged) and a Recharts stacked-area view (`<AreaChart stackId="1">`) that shows total composition over time. Both modes share the same category palette and SVG grayscale patterns. The chosen type is persisted in `localStorage` (`reports-trends-category-charttype`) (#105)
 
 ### Changed
 - **Category zoom report** (`/reports/category`): the category picker is now a typeable, searchable combobox with accent-insensitive matching, keyboard navigation (↑/↓/Enter/Esc) and hierarchy indentation, replacing the native `<select>` (#103)
diff --git a/src/components/reports/CategoryOverTimeChart.tsx b/src/components/reports/CategoryOverTimeChart.tsx
index a8c8523..184b464 100644
--- a/src/components/reports/CategoryOverTimeChart.tsx
+++ b/src/components/reports/CategoryOverTimeChart.tsx
@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import {
   BarChart,
   Bar,
+  AreaChart,
+  Area,
   XAxis,
   YAxis,
   Tooltip,
@@ -25,6 +27,8 @@ function formatMonth(month: string): string {
   return date.toLocaleDateString("default", { month: "short", year: "2-digit" });
 }
 
+export type CategoryOverTimeChartType = "line" | "area";
+
 interface CategoryOverTimeChartProps {
   data: CategoryOverTimeData;
   hiddenCategories: Set<string>;
@@ -32,6 +36,13 @@ interface CategoryOverTimeChartProps {
   onShowAll: () => void;
   onViewDetails: (item: CategoryBreakdownItem) => void;
   showAmounts?: boolean;
+  /**
+   * Visual rendering mode. `line` (default) keeps the legacy stacked bars —
+   * preserved for backward compatibility. `area` stacks Recharts <Area> layers
+   * (stackId="1") showing total composition over time. Both modes share the
+   * same palette and SVG grayscale patterns (existing signature visual).
+   */
+  chartType?: CategoryOverTimeChartType;
 }
 
 export default function CategoryOverTimeChart({
@@ -41,6 +52,7 @@ export default function CategoryOverTimeChart({
   onShowAll,
   onViewDetails,
   showAmounts,
+  chartType = "line",
 }: CategoryOverTimeChartProps) {
   const { t } = useTranslation();
   const hoveredRef = useRef<string | null>(null);
@@ -68,6 +80,58 @@ export default function CategoryOverTimeChart({
     );
   }
 
+  // Shared chart configuration used by both Bar and Area variants.
+  const patternPrefix = "cat-time";
+  const patternDefs = (
+    <ChartPatternDefs
+      prefix={patternPrefix}
+      categories={categoryEntries.map((c) => ({ color: c.color, index: c.index }))}
+    />
+  );
+  const commonAxes = (
+    <>
+      <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+      <XAxis
+        dataKey="month"
+        tickFormatter={formatMonth}
+        tick={{ fill: "var(--muted-foreground)", fontSize: 12 }}
+        stroke="var(--border)"
+      />
+      <YAxis
+        tickFormatter={(v) => cadFormatter(v)}
+        tick={{ fill: "var(--muted-foreground)", fontSize: 12 }}
+        stroke="var(--border)"
+        width={80}
+      />
+      <Tooltip
+        formatter={(value: unknown, name: unknown) => {
+          if (hoveredCategory && name !== hoveredCategory) return [null, null];
+          return [cadFormatter(Number(value) || 0), String(name)];
+        }}
+        labelFormatter={(label) => formatMonth(String(label))}
+        contentStyle={{
+          backgroundColor: "var(--card)",
+          border: "1px solid var(--border)",
+          borderRadius: "8px",
+          color: "var(--foreground)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+        }}
+        wrapperStyle={{ zIndex: 50 }}
+        labelStyle={{ color: "var(--foreground)" }}
+        itemStyle={{ color: "var(--foreground)" }}
+        filterNull
+      />
+      <Legend
+        onMouseEnter={(e) => {
+          if (e && e.dataKey) setHoveredCategory(String(e.dataKey));
+        }}
+        onMouseLeave={() => setHoveredCategory(null)}
+        wrapperStyle={{ cursor: "pointer" }}
+        formatter={(value) => <span style={{ color: "var(--foreground)" }}>{value}</span>}
+      />
+    </>
+  );
+
   return (
     <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
       {hiddenCategories.size > 0 && (
@@ -94,73 +158,53 @@ export default function CategoryOverTimeChart({
 
       <div onContextMenu={handleContextMenu}>
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={data.data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
-            <ChartPatternDefs
-              prefix="cat-time"
-              categories={categoryEntries.map((c) => ({ color: c.color, index: c.index }))}
-            />
-            <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
-            <XAxis
-              dataKey="month"
-              tickFormatter={formatMonth}
-              tick={{ fill: "var(--muted-foreground)", fontSize: 12 }}
-              stroke="var(--border)"
-            />
-            <YAxis
-              tickFormatter={(v) => cadFormatter(v)}
-              tick={{ fill: "var(--muted-foreground)", fontSize: 12 }}
-              stroke="var(--border)"
-              width={80}
-            />
-            <Tooltip
-              formatter={(value: unknown, name: unknown) => {
-                if (hoveredCategory && name !== hoveredCategory) return [null, null];
-                return [cadFormatter(Number(value) || 0), String(name)];
-              }}
-              labelFormatter={(label) => formatMonth(String(label))}
-              contentStyle={{
-                backgroundColor: "var(--card)",
-                border: "1px solid var(--border)",
-                borderRadius: "8px",
-                color: "var(--foreground)",
-                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-              }}
-              wrapperStyle={{ zIndex: 50 }}
-              labelStyle={{ color: "var(--foreground)" }}
-              itemStyle={{ color: "var(--foreground)" }}
-              filterNull
-            />
-            <Legend
-              onMouseEnter={(e) => {
-                if (e && e.dataKey) setHoveredCategory(String(e.dataKey));
-              }}
-              onMouseLeave={() => setHoveredCategory(null)}
-              wrapperStyle={{ cursor: "pointer" }}
-              formatter={(value) => <span style={{ color: "var(--foreground)" }}>{value}</span>}
-            />
-            {categoryEntries.map((c) => (
-              <Bar
-                key={c.name}
-                dataKey={c.name}
-                stackId="stack"
-                fill={getPatternFill("cat-time", c.index, c.color)}
-                fillOpacity={hoveredCategory === null || hoveredCategory === c.name ? 1 : 0.2}
-                onMouseEnter={() => { hoveredRef.current = c.name; setHoveredCategory(c.name); }}
-                onMouseLeave={() => { hoveredRef.current = null; setHoveredCategory(null); }}
-                cursor="context-menu"
-                style={{ transition: "fill-opacity 150ms" }}
-              >
-                {showAmounts && (
-                  <LabelList
-                    dataKey={c.name}
-                    position="center"
-                    formatter={(v: unknown) => Number(v) ? cadFormatter(Number(v)) : ""}
-                    style={{ fill: "#000", fontSize: 10, fontWeight: 600, paintOrder: "stroke", stroke: "rgba(255,255,255,0.7)", strokeWidth: 3, strokeLinejoin: "round" }}
-                  />
-                )}
-              </Bar>
-            ))}
-          </BarChart>
+          {chartType === "area" ? (
+            <AreaChart data={data.data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
+              {patternDefs}
+              {commonAxes}
+              {categoryEntries.map((c) => (
+                <Area
+                  key={c.name}
+                  type="monotone"
+                  dataKey={c.name}
+                  stackId="1"
+                  stroke={c.color}
+                  fill={getPatternFill(patternPrefix, c.index, c.color)}
+                  fillOpacity={hoveredCategory === null || hoveredCategory === c.name ? 1 : 0.2}
+                  onMouseEnter={() => { hoveredRef.current = c.name; setHoveredCategory(c.name); }}
+                  onMouseLeave={() => { hoveredRef.current = null; setHoveredCategory(null); }}
+                  style={{ transition: "fill-opacity 150ms", cursor: "context-menu" }}
+                />
+              ))}
+            </AreaChart>
+          ) : (
+            <BarChart data={data.data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
+              {patternDefs}
+              {commonAxes}
+              {categoryEntries.map((c) => (
+                <Bar
+                  key={c.name}
+                  dataKey={c.name}
+                  stackId="stack"
+                  fill={getPatternFill(patternPrefix, c.index, c.color)}
+                  fillOpacity={hoveredCategory === null || hoveredCategory === c.name ? 1 : 0.2}
+                  onMouseEnter={() => { hoveredRef.current = c.name; setHoveredCategory(c.name); }}
+                  onMouseLeave={() => { hoveredRef.current = null; setHoveredCategory(null); }}
+                  cursor="context-menu"
+                  style={{ transition: "fill-opacity 150ms" }}
+                >
+                  {showAmounts && (
+                    <LabelList
+                      dataKey={c.name}
+                      position="center"
+                      formatter={(v: unknown) => Number(v) ? cadFormatter(Number(v)) : ""}
+                      style={{ fill: "#000", fontSize: 10, fontWeight: 600, paintOrder: "stroke", stroke: "rgba(255,255,255,0.7)", strokeWidth: 3, strokeLinejoin: "round" }}
+                    />
+                  )}
+                </Bar>
+              ))}
+            </BarChart>
+          )}
         </ResponsiveContainer>
       </div>
 
diff --git a/src/components/reports/TrendsChartTypeToggle.test.ts b/src/components/reports/TrendsChartTypeToggle.test.ts
new file mode 100644
index 0000000..810570d
--- /dev/null
+++ b/src/components/reports/TrendsChartTypeToggle.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { readTrendsChartType, TRENDS_CHART_TYPE_STORAGE_KEY } from "./TrendsChartTypeToggle";
+
+describe("readTrendsChartType", () => {
+  const store = new Map<string, string>();
+  const mockLocalStorage = {
+    getItem: vi.fn((key: string) => store.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      store.delete(key);
+    }),
+    clear: vi.fn(() => store.clear()),
+    key: vi.fn(),
+    length: 0,
+  };
+
+  beforeEach(() => {
+    store.clear();
+    vi.stubGlobal("localStorage", mockLocalStorage);
+  });
+
+  it("returns 'line' fallback when key is missing", () => {
+    expect(readTrendsChartType()).toBe("line");
+  });
+
+  it("returns 'line' when stored value is 'line'", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "line");
+    expect(readTrendsChartType()).toBe("line");
+  });
+
+  it("returns 'area' when stored value is 'area'", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "area");
+    expect(readTrendsChartType()).toBe("area");
+  });
+
+  it("ignores invalid stored values and returns fallback", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "bogus");
+    expect(readTrendsChartType(TRENDS_CHART_TYPE_STORAGE_KEY, "area")).toBe("area");
+  });
+
+  it("respects custom fallback when provided", () => {
+    expect(readTrendsChartType(TRENDS_CHART_TYPE_STORAGE_KEY, "area")).toBe("area");
+  });
+
+  it("uses the expected storage key", () => {
+    expect(TRENDS_CHART_TYPE_STORAGE_KEY).toBe("reports-trends-category-charttype");
+  });
+});
diff --git a/src/components/reports/TrendsChartTypeToggle.tsx b/src/components/reports/TrendsChartTypeToggle.tsx
new file mode 100644
index 0000000..1229214
--- /dev/null
+++ b/src/components/reports/TrendsChartTypeToggle.tsx
@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { LineChart as LineIcon, AreaChart as AreaIcon } from "lucide-react";
+import type { CategoryOverTimeChartType } from "./CategoryOverTimeChart";
+
+export const TRENDS_CHART_TYPE_STORAGE_KEY = "reports-trends-category-charttype";
+
+export interface TrendsChartTypeToggleProps {
+  value: CategoryOverTimeChartType;
+  onChange: (value: CategoryOverTimeChartType) => void;
+  /** localStorage key used to persist the preference. */
+  storageKey?: string;
+}
+
+export function readTrendsChartType(
+  storageKey: string = TRENDS_CHART_TYPE_STORAGE_KEY,
+  fallback: CategoryOverTimeChartType = "line",
+): CategoryOverTimeChartType {
+  if (typeof localStorage === "undefined") return fallback;
+  const saved = localStorage.getItem(storageKey);
+  return saved === "line" || saved === "area" ? saved : fallback;
+}
+
+export default function TrendsChartTypeToggle({
+  value,
+  onChange,
+  storageKey = TRENDS_CHART_TYPE_STORAGE_KEY,
+}: TrendsChartTypeToggleProps) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (storageKey) localStorage.setItem(storageKey, value);
+  }, [value, storageKey]);
+
+  const options: { type: CategoryOverTimeChartType; icon: React.ReactNode; label: string }[] = [
+    { type: "line", icon: <LineIcon size={14} />, label: t("reports.trends.chartLine") },
+    { type: "area", icon: <AreaIcon size={14} />, label: t("reports.trends.chartArea") },
+  ];
+
+  return (
+    <div className="inline-flex gap-1" role="group" aria-label={t("reports.trends.chartTypeAria")}>
+      {options.map(({ type, icon, label }) => (
+        <button
+          key={type}
+          type="button"
+          onClick={() => onChange(type)}
+          aria-pressed={value === type}
+          className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+            value === type
+              ? "bg-[var(--primary)] text-white"
+              : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
+          }`}
+        >
+          {icon}
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b14fe59..bda1312 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -360,7 +360,10 @@
     "overTime": "Category Over Time",
     "trends": {
       "subviewGlobal": "Global flow",
-      "subviewByCategory": "By category"
+      "subviewByCategory": "By category",
+      "chartLine": "Lines",
+      "chartArea": "Stacked area",
+      "chartTypeAria": "Chart type"
     },
     "budgetVsActual": "Budget vs Actual",
     "subtotalsOnTop": "Subtotals on top",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 122aeff..7dcc25a 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -360,7 +360,10 @@
     "overTime": "Catégories dans le temps",
     "trends": {
       "subviewGlobal": "Flux global",
-      "subviewByCategory": "Par catégorie"
+      "subviewByCategory": "Par catégorie",
+      "chartLine": "Lignes",
+      "chartArea": "Surface empilée",
+      "chartTypeAria": "Type de graphique"
     },
     "budgetVsActual": "Budget vs Réel",
     "subtotalsOnTop": "Sous-totaux en haut",
diff --git a/src/pages/ReportsTrendsPage.tsx b/src/pages/ReportsTrendsPage.tsx
index 65b3b9b..f4e61ef 100644
--- a/src/pages/ReportsTrendsPage.tsx
+++ b/src/pages/ReportsTrendsPage.tsx
@@ -6,8 +6,13 @@ import PeriodSelector from "../components/dashboard/PeriodSelector";
 import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
 import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
 import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
+import type { CategoryOverTimeChartType } from "../components/reports/CategoryOverTimeChart";
 import CategoryOverTimeTable from "../components/reports/CategoryOverTimeTable";
 import ViewModeToggle, { readViewMode, type ViewMode } from "../components/reports/ViewModeToggle";
+import TrendsChartTypeToggle, {
+  readTrendsChartType,
+  TRENDS_CHART_TYPE_STORAGE_KEY,
+} from "../components/reports/TrendsChartTypeToggle";
 import { useTrends } from "../hooks/useTrends";
 import { useReportsPeriod } from "../hooks/useReportsPeriod";
 import type { CategoryBreakdownItem } from "../shared/types";
@@ -19,6 +24,7 @@ export default function ReportsTrendsPage() {
   const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
   const { subView, setSubView, monthlyTrends, categoryOverTime, isLoading, error } = useTrends();
   const [viewMode, setViewMode] = useState<ViewMode>(() => readViewMode(STORAGE_KEY));
+  const [chartType, setChartType] = useState<CategoryOverTimeChartType>(() => readTrendsChartType());
   const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
 
   const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
@@ -84,6 +90,13 @@ export default function ReportsTrendsPage() {
               {t("reports.trends.subviewByCategory")}
             </button>
           </div>
+          {subView === "byCategory" && viewMode === "chart" && (
+            <TrendsChartTypeToggle
+              value={chartType}
+              onChange={setChartType}
+              storageKey={TRENDS_CHART_TYPE_STORAGE_KEY}
+            />
+          )}
           <ViewModeToggle value={viewMode} onChange={setViewMode} storageKey={STORAGE_KEY} />
         </div>
       </div>
@@ -107,6 +120,7 @@ export default function ReportsTrendsPage() {
           onToggleHidden={toggleHidden}
           onShowAll={showAll}
           onViewDetails={noOpDetails}
+          chartType={chartType}
         />
       ) : (
         <CategoryOverTimeTable data={categoryOverTime} hiddenCategories={hiddenCategories} />