Scope badges, titles, and one-off styles; add Button outline

ScoreBadge/StatusBadge carry their own color scales, no
bg-*/text-* globals. SectionTitle unifies category-name and
section-title dupes (h2/h3 via level prop). Grocery add-bar
buttons use Button, new outline variant for the secondary
action. save-status moves into its only page. Delete dead
globals and page overrides.

5 files changed, 35 insertions, 71 deletions

diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte
index b134da7..5d88e49 100644
--- a/src/routes/groceries/+page.svelte
+++ b/src/routes/groceries/+page.svelte
@@ -4,7 +4,9 @@
 	import { enhance } from '$app/forms';
 	import FuzzyAutocomplete from '$lib/components/FuzzyAutocomplete.svelte';
 	import GroceryRow from '$lib/components/GroceryRow.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	import type { EnrichedGrocery } from '$lib/server/services/groceries';
 
 	let { data, form } = $props();
@@ -75,11 +77,17 @@
 			handleAdd(false);
 		}}
 	/>
-	<button type="button" aria-label="Ajouter" onclick={() => handleAdd(false)}
-		>+</button
+	<Button
+		type="button"
+		variant="accent"
+		ariaLabel="Ajouter"
+		onclick={() => handleAdd(false)}>+</Button
 	>
-	<button type="button" aria-label="Modifier" onclick={() => handleAdd(true)}
-		>&rarr;</button
+	<Button
+		type="button"
+		variant="outline"
+		ariaLabel="Modifier"
+		onclick={() => handleAdd(true)}>&rarr;</Button
 	>
 </div>
 
@@ -93,7 +101,7 @@
 	{:else}
 		<form method="POST" action="?/toggle" use:enhance>
 			{#each groupByCategory(localItems, data.categories) as [cat, items] (cat)}
-				<h3 class="category-name">{cat}</h3>
+				<SectionTitle level={3}>{cat}</SectionTitle>
 				<ul class="item-list">
 					{#each items as item (item.id)}
 						<GroceryRow {item} from="/groceries" />
@@ -116,46 +124,6 @@
 		z-index: 10;
 	}
 
-	.grocery-add-bar button {
-		width: 3rem;
-		height: 3rem;
-		flex-shrink: 0;
-		padding: 0;
-		border: none;
-		border-radius: 0.75rem;
-		font-size: 1.25rem;
-		font-weight: 500;
-		font-family: inherit;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-	}
-
-	.grocery-add-bar > button:nth-of-type(1) {
-		background: var(--accent);
-		color: var(--white);
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.grocery-add-bar > button:nth-of-type(1):hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
-	}
-
-	.grocery-add-bar > button:nth-of-type(2) {
-		background: var(--surface);
-		color: var(--text-secondary);
-		border: 1.5px solid var(--border);
-	}
-
-	.grocery-add-bar > button:nth-of-type(2):hover {
-		border-color: var(--accent);
-		color: var(--text);
-	}
-
 	.error {
 		margin-bottom: 1rem;
 	}
diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte
index a7f3c0e..076d3ce 100644
--- a/src/routes/groceries/catalog/+page.svelte
+++ b/src/routes/groceries/catalog/+page.svelte
@@ -4,6 +4,7 @@
 	import GroceryRow from '$lib/components/GroceryRow.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 
 	let { data, form } = $props();
 
@@ -73,7 +74,7 @@
 		{:else}
 			<form method="POST" action="?/toggle" use:enhance>
 				{#each groupByCategory(filteredItems, data.categories) as [cat, items] (cat)}
-					<h3 class="category-name">{cat}</h3>
+					<SectionTitle level={3}>{cat}</SectionTitle>
 					<ul class="item-list">
 						{#each items as item (item.id)}
 							<GroceryRow
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index 54134f0..c672730 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -177,6 +177,21 @@
 </main>
 
 <style>
+	.save-status {
+		font-size: 0.875rem;
+		color: var(--success);
+		font-weight: 500;
+		margin-top: -0.25rem;
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		min-height: 1.25rem;
+	}
+
+	.save-status.visible {
+		visibility: visible;
+		opacity: 1;
+	}
 	.ref-row {
 		display: flex;
 		gap: 0.75rem;
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index b48a331..8d62a39 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -11,6 +11,7 @@
 		parseIntervalToDays,
 		type RoutineState,
 	} from '$lib/shared/routine-metrics';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	import { formatDayMonth } from '$lib/shared/temporal';
 
 	let { data, form } = $props();
@@ -44,7 +45,7 @@
 
 	{#if data.healthSeries.length > 0}
 		<section>
-			<h2 class="section-title">Santé</h2>
+			<SectionTitle>Santé</SectionTitle>
 			<div class="form-card chart-card">
 				<HealthChart
 					series={data.healthSeries}
@@ -187,17 +188,6 @@
 </main>
 
 <style>
-	.section-title {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		margin: 1.5rem 0 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
-	}
-
 	.chart-card {
 		align-items: stretch;
 	}
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index 55185cc..ea292ae 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -11,6 +11,7 @@
 		computeHealthSeries,
 	} from '$lib/shared/routine-metrics';
 	import { formatDayMonth, formatDayMonthYear } from '$lib/shared/temporal';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	let { data, form } = $props();
 	let name = $state('');
 	let frequency = $state('');
@@ -125,7 +126,7 @@
 		</form>
 	{/if}
 
-	<h2 class="section-title">Santé</h2>
+	<SectionTitle>Santé</SectionTitle>
 	<div class="form-card chart-card">
 		<HealthChart
 			{series}
@@ -150,7 +151,7 @@
 		{/if}
 	</div>
 
-	<h2 class="section-title">Historique</h2>
+	<SectionTitle>Historique</SectionTitle>
 	{#if !data.routine.archived}
 		<form
 			class="form-card form-card--compact add-completion"
@@ -216,17 +217,6 @@
 		font-family: inherit;
 	}
 
-	.section-title {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		margin: 1.5rem 0 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
-	}
-
 	.archived-badge {
 		margin: 0 0 1rem;
 		color: var(--text-secondary);