refactor: services layer, valibot validation, shared CSS utilities, aria labels, and drizzle migrate

- Extract groceries/categories/references services with db injection
- Add valibot for form validation and safe numeric id parsing
- Fix category delete FK behavior with onDelete: set null + migration
- Replace custom migrate.js with drizzle-orm/libsql/migrator
- Add shared CSS utility classes in app.css (forms, lists, buttons)
- Add aria-pressed and aria-label on interactive elements
- Remove redundant app.css imports and unused /stores import
- Add integration tests for all services using drizzle migrate helper
- Remove smoke test; add db:migrate and db:studio scripts

2 files changed, 62 insertions, 166 deletions

diff --git a/src/routes/grocery/[id]/+page.server.ts b/src/routes/grocery/[id]/+page.server.ts
index b19825a..3c3967a 100644
--- a/src/routes/grocery/[id]/+page.server.ts
+++ b/src/routes/grocery/[id]/+page.server.ts
@@ -1,11 +1,28 @@
 import { error, fail, redirect } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
-import { groceries, categories, references } from '$lib/server/db/schema';
+import { groceries, categories } from '$lib/server/db/schema';
 import { eq } from 'drizzle-orm';
+import {
+	loadForGrocery,
+	add as addRef,
+	deleteReference,
+} from '$lib/server/services/references';
+import { deleteGrocery } from '$lib/server/services/groceries';
+import {
+	numericId,
+	parseFormString,
+	parseOptionalNumber,
+} from '$lib/server/services/validation';
+import type { Grocery, Reference } from '$lib/server/services/types';
 import type { Actions, PageServerLoad } from './$types';
 
+export interface GroceryDetailOutput {
+	item: Grocery & { categoryName: string | null };
+	references: Reference[];
+}
+
 export const load: PageServerLoad = async ({ params }) => {
-	const id = Number(params.id);
+	const id = numericId(params.id);
 
 	const [item] = await db.select().from(groceries).where(eq(groceries.id, id));
 	if (!item) throw error(404, 'Article introuvable');
@@ -17,10 +34,7 @@ export const load: PageServerLoad = async ({ params }) => {
 				.where(eq(categories.id, item.categoryId))
 		: [null];
 
-	const refs = await db
-		.select()
-		.from(references)
-		.where(eq(references.groceryId, id));
+	const refs = await loadForGrocery(id);
 
 	return {
 		item: {
@@ -34,38 +48,34 @@ export const load: PageServerLoad = async ({ params }) => {
 export const actions: Actions = {
 	add: async ({ request, params }) => {
 		const data = await request.formData();
-		const reference = data.get('reference')?.toString().trim();
-		const price = data.get('price')?.toString().trim();
-		const unit = data.get('unit')?.toString().trim();
-		const qualityScore = data.get('quality_score')?.toString().trim();
+		const groceryId = numericId(params.id);
+		const reference = parseFormString(data.get('reference'));
+		const price = parseOptionalNumber(data.get('price'));
+		const unit = parseFormString(data.get('unit'));
+		const qualityScore = parseOptionalNumber(data.get('quality_score'));
 
 		if (!reference) {
 			return fail(400, { error: 'La référence est requise' });
 		}
 
-		await db.insert(references).values({
-			groceryId: Number(params.id),
-			reference,
-			price: price ? Number(price) : null,
-			unit: unit || null,
-			qualityScore: qualityScore ? Number(qualityScore) : null,
-		});
-
+		await addRef(groceryId, reference, price, unit, qualityScore);
 		return { success: true };
 	},
 
 	delete: async ({ request }) => {
 		const data = await request.formData();
-		const id = Number(data.get('id'));
-
-		await db.delete(references).where(eq(references.id, id));
-
+		try {
+			const id = numericId(data.get('id'));
+			await deleteReference(id);
+		} catch {
+			return fail(400, { error: 'ID invalide' });
+		}
 		return { success: true };
 	},
 
 	deleteItem: async ({ params }) => {
-		await db.delete(groceries).where(eq(groceries.id, Number(params.id)));
-
+		const groceryId = numericId(params.id);
+		await deleteGrocery(groceryId);
 		throw redirect(303, '/');
 	},
 };
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index c3c3706..a49d037 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import '../../../app.css';
 	import { enhance } from '$app/forms';
-	import { page } from '$app/stores';
 
 	let { data, form } = $props();
 	let reference = $state('');
@@ -20,10 +18,11 @@
 
 <h2>Références</h2>
 
-<form class="add-form" method="POST" action="?/add" use:enhance>
+<form class="form-card" method="POST" action="?/add" use:enhance>
 	<label>
-		<span class="label">Référence</span>
+		<span class="form-label">Référence</span>
 		<input
+			class="form-input"
 			type="text"
 			name="reference"
 			bind:value={reference}
@@ -33,8 +32,9 @@
 	</label>
 	<div class="ref-row">
 		<label>
-			<span class="label">Prix</span>
+			<span class="form-label">Prix</span>
 			<input
+				class="form-input"
 				type="number"
 				name="price"
 				bind:value={price}
@@ -43,16 +43,17 @@
 			/>
 		</label>
 		<label>
-			<span class="label">Unité</span>
-			<select name="unit" bind:value={unit}>
+			<span class="form-label">Unité</span>
+			<select class="form-select" name="unit" bind:value={unit}>
 				<option value="€/kg">€/kg</option>
 				<option value="€/L">€/L</option>
 				<option value="€/u">€/u</option>
 			</select>
 		</label>
 		<label>
-			<span class="label">Note</span>
+			<span class="form-label">Note</span>
 			<input
+				class="form-input"
 				type="number"
 				name="quality_score"
 				bind:value={qualityScore}
@@ -62,7 +63,7 @@
 			/>
 		</label>
 	</div>
-	<button type="submit">Ajouter une référence</button>
+	<button class="btn-primary" type="submit">Ajouter une référence</button>
 </form>
 
 {#if form?.error}
@@ -70,9 +71,9 @@
 {/if}
 
 <form method="POST" action="?/delete" use:enhance>
-	<ul class="item-list">
+	<ul class="item-list item-list--wide">
 		{#each data?.references ?? [] as ref (ref.id)}
-			<li class="ref-item">
+			<li class="item-row item-row--ref">
 				<div class="ref-info">
 					<strong>{ref.reference}</strong>
 					{#if ref.price}
@@ -84,7 +85,13 @@
 						<span class="ref-detail">Note : {ref.qualityScore}/100</span>
 					{/if}
 				</div>
-				<button class="delete-btn" name="id" value={ref.id} type="submit">
+				<button
+					class="btn-ghost"
+					name="id"
+					value={ref.id}
+					type="submit"
+					aria-label="Supprimer"
+				>
 					&times;
 				</button>
 			</li>
@@ -110,51 +117,6 @@
 		margin-top: 0.25rem;
 	}
 
-	.add-form {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		margin-bottom: 1.5rem;
-		margin-top: 0.75rem;
-		padding: 1rem;
-		background: var(--surface);
-		border-radius: 0.75rem;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.add-form label {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.label {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--text-secondary);
-	}
-
-	input,
-	select {
-		padding: 0.75rem 1rem;
-		border: 1.5px solid var(--border);
-		border-radius: 0.75rem;
-		font-size: 1rem;
-		font-family: inherit;
-		background: var(--bg);
-		transition: border-color 0.2s, box-shadow 0.2s;
-		min-width: 0;
-	}
-
-	input:focus,
-	select:focus {
-		outline: none;
-		border-color: var(--accent);
-		box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
-	}
-
 	.ref-row {
 		display: flex;
 		gap: 0.75rem;
@@ -166,65 +128,6 @@
 		min-width: 6rem;
 	}
 
-	.add-form button[type='submit'] {
-		padding: 0.75rem 1.5rem;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--accent);
-		color: #fff;
-		font-size: 0.9375rem;
-		font-weight: 500;
-		align-self: flex-start;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.add-form button[type='submit']:hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
-	}
-
-	.error {
-		color: var(--danger);
-		font-size: 0.875rem;
-		margin-top: -0.25rem;
-		margin-bottom: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		background: rgba(217, 83, 79, 0.08);
-		border-radius: 0.5rem;
-	}
-
-	hr {
-		border: none;
-		border-top: 1.5px solid var(--border);
-		margin: 1.5rem 0;
-	}
-
-	.item-list {
-		list-style: none;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.ref-item {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.875rem 1rem;
-		border-radius: 0.75rem;
-		background: var(--surface);
-		box-shadow: 0 1px 2px var(--shadow);
-		transition: all 0.2s ease;
-	}
-
-	.ref-item:hover {
-		box-shadow: 0 2px 6px var(--shadow);
-		transform: translateY(-1px);
-	}
-
 	.ref-info {
 		flex-grow: 1;
 		display: flex;
@@ -242,37 +145,20 @@
 		border-radius: 0.375rem;
 	}
 
-	.delete-btn {
-		flex-shrink: 0;
-		width: 2rem;
-		aspect-ratio: 1;
-		padding: 0;
-		border: none;
-		border-radius: 0.625rem;
-		background: transparent;
-		color: var(--text-secondary);
-		font-size: 1.25rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 0.2s ease;
-	}
-
-	.delete-btn:hover {
-		background: rgba(217, 83, 79, 0.1);
-		color: var(--danger);
+	.error {
+		margin-top: -0.25rem;
+		margin-bottom: 0.5rem;
 	}
 
 	.empty {
-		color: var(--text-secondary);
-		font-size: 0.9375rem;
 		margin-top: 0.75rem;
-		text-align: center;
 		padding: 1.5rem;
-		background: var(--surface);
-		border-radius: 0.75rem;
-		box-shadow: 0 1px 2px var(--shadow);
+	}
+
+	hr {
+		border: none;
+		border-top: 1.5px solid var(--border);
+		margin: 1.5rem 0;
 	}
 
 	.back-link {