feat: warm redesign, full French localization, compact sticky form, fixed row heights, and show quality score in list

9 files changed, 371 insertions, 183 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5999926..9dc0244 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <svelte:head>
-	<title>Home</title>
+	<title>Courses</title>
 </svelte:head>
 
 <div class="app">
@@ -16,8 +16,8 @@
 
 <style>
 	.app {
-		max-width: 48rem;
+		max-width: 36rem;
 		margin: 0 auto;
-		padding: 0 1rem;
+		padding: 0 1rem 2rem;
 	}
 </style>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 55ac82d..0a8a3f4 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -40,7 +40,7 @@ export const actions: Actions = {
 		const categoryId = data.get('category_id')?.toString() || null;
 
 		if (!name) {
-			return fail(400, { error: 'Name is required' });
+			return fail(400, { error: 'Le nom est requis' });
 		}
 
 		const [existing] = await db
@@ -77,7 +77,7 @@ export const actions: Actions = {
 			.from(groceries)
 			.where(eq(groceries.id, id));
 		if (!item) {
-			return fail(404, { error: 'Item not found' });
+			return fail(404, { error: 'Article introuvable' });
 		}
 
 		await db
@@ -94,7 +94,7 @@ export const actions: Actions = {
 		const categoryId = data.get('category_id')?.toString() || null;
 
 		if (!name) {
-			return fail(400, { error: 'Name is required' });
+			return fail(400, { error: 'Le nom est requis' });
 		}
 
 		const [existing] = await db
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b0398af..3dcd3bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,7 +10,7 @@
 	function groupByCategory(items: typeof listItems) {
 		const groups: Record<string, typeof listItems> = {};
 		for (const item of items) {
-			const key = item.categoryName ?? 'Uncategorized';
+			const key = item.categoryName ?? 'Non catégorisé';
 			(groups[key] ??= []).push(item);
 		}
 		return Object.entries(groups);
@@ -22,11 +22,11 @@
 		type="text"
 		name="name"
 		bind:value={name}
-		placeholder="Add an item..."
+		placeholder="Ajouter un article..."
 		autocomplete="off"
 	/>
-	<button type="submit">Add</button>
-	<button type="submit" formaction="?/addAndEdit">Edit</button>
+	<button type="submit" aria-label="Ajouter">+</button>
+	<button type="submit" formaction="?/addAndEdit" aria-label="Modifier">→</button>
 </form>
 
 {#if form?.error}
@@ -34,7 +34,7 @@
 {/if}
 
 {#if listItems.length === 0}
-	<p class="empty">Nothing to buy</p>
+	<p class="empty">Rien à acheter</p>
 {:else}
 	<form method="POST" action="?/toggle" use:enhance>
 		{#each groupByCategory(listItems) as [cat, items] (cat)}
@@ -46,12 +46,15 @@
 							<span class="item-text">
 								{item.name}
 								{#if item.bestRef}
-									<span class="best-ref"
-										>{item.bestRef.reference}
-										{#if item.bestRef.price && item.bestRef.unit}
-											&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
-										{/if}
-									</span>
+											<span class="best-ref"
+												>{item.bestRef.reference}
+												{#if item.bestRef.price && item.bestRef.unit}
+													&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+												{/if}
+												{#if item.bestRef.qualityScore != null}
+													&nbsp;({item.bestRef.qualityScore}/100)
+												{/if}
+											</span>
 								{/if}
 							</span>
 						</button>
@@ -67,77 +70,114 @@
 	.add-bar {
 		display: flex;
 		gap: 0.5rem;
-		padding: 0.5rem 1rem 0.5rem;
+		padding: 0.75rem 0;
 		position: sticky;
-		top: 3rem;
-		background: #fafafa;
+		top: 3.1rem;
+		background: var(--bg);
 		z-index: 10;
 	}
 
 	input {
 		flex: 1;
-		padding: 0.75rem;
-		border: 1px solid #ccc;
-		border-radius: 0.5rem;
+		padding: 0.75rem 1rem;
+		border: 1.5px solid var(--border);
+		border-radius: 0.75rem;
 		font-size: 1rem;
 		font-family: inherit;
-		background: #fff;
+		background: var(--surface);
 		min-width: 0;
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	input:focus {
+		outline: none;
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
 	}
 
 	.add-bar button {
-		padding: 0.75rem 1rem;
+		width: 3rem;
+		height: 3rem;
+		flex-shrink: 0;
+		padding: 0;
 		border: none;
-		border-radius: 0.5rem;
-		font-size: 1rem;
+		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;
 	}
 
 	.add-bar button[type='submit']:not([formaction]) {
-		background: #333;
+		background: var(--accent);
 		color: #fff;
+		box-shadow: 0 1px 2px var(--shadow);
+	}
+
+	.add-bar button[type='submit']:not([formaction]):hover {
+		background: var(--accent-hover);
+		transform: translateY(-1px);
+		box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
 	}
 
 	.add-bar button[formaction] {
-		background: #e0e0e0;
-		color: #333;
+		background: var(--surface);
+		color: var(--text-secondary);
+		border: 1.5px solid var(--border);
+	}
+
+	.add-bar button[formaction]:hover {
+		border-color: var(--accent);
+		color: var(--text);
 	}
 
 	.error {
-		color: #d00;
+		color: var(--danger);
+		font-size: 0.875rem;
 		margin-bottom: 1rem;
+		padding: 0.5rem 0.75rem;
+		background: rgba(217, 83, 79, 0.08);
+		border-radius: 0.5rem;
 	}
 
 	.item-list {
 		list-style: none;
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.375rem;
 	}
 
 	.item-list li button {
 		width: 100%;
 		text-align: left;
-		height: 2.5rem;
-		padding: 0 0.75rem;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
+		padding: 0 0.875rem;
+		height: 100%;
+		border: none;
+		border-radius: 0.75rem;
+		background: var(--surface);
 		font-size: 1rem;
+		font-weight: 500;
 		display: flex;
 		align-items: center;
-		transition: background 0.15s;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.item-list li button:hover {
-		background: #f5f5f5;
+		background: #fff8f5;
+		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+		transform: translateY(-1px);
 	}
 
 	.catalog-item {
 		display: flex;
-		gap: 0.25rem;
-		height: 2.5rem;
+		gap: 0.5rem;
+		align-items: center;
+		height: 2.75rem;
 	}
 
 	.catalog-item button:first-child {
@@ -145,6 +185,7 @@
 		width: auto;
 		display: flex;
 		align-items: center;
+		height: 100%;
 	}
 
 	.item-text {
@@ -152,42 +193,59 @@
 		flex-direction: column;
 		text-align: left;
 		line-height: 1.2;
+		gap: 0.0625rem;
+		overflow: hidden;
 	}
 
 	.best-ref {
-		font-size: 0.625rem;
-		color: #999;
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		font-weight: 400;
 	}
 
 	.ref-link {
-		width: 2.5rem;
+		width: 2.75rem;
+		flex-shrink: 0;
+		height: 2.75rem;
+		aspect-ratio: 1;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #333;
+		border-radius: 0.75rem;
+		background: var(--surface);
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-size: 1rem;
-		transition: background 0.15s;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.ref-link:hover {
-		background: #f5f5f5;
+		background: #fff8f5;
+		color: var(--accent);
+		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+		transform: translateY(-1px);
 	}
 
 	.empty {
-		color: #999;
-		font-size: 0.875rem;
-		margin-top: 0.5rem;
+		color: var(--text-secondary);
+		font-size: 0.9375rem;
+		margin-top: 1rem;
+		text-align: center;
+		padding: 2rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.category-name {
 		font-size: 0.75rem;
-		font-weight: 600;
+		font-weight: 700;
 		text-transform: uppercase;
-		color: #999;
-		margin: 1rem 0 0.25rem;
+		letter-spacing: 0.08em;
+		color: var(--accent);
+		margin: 1.25rem 0 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 3px solid var(--accent);
 	}
 </style>
diff --git a/src/routes/catalog/+page.server.ts b/src/routes/catalog/+page.server.ts
index 34d0a06..a3a611e 100644
--- a/src/routes/catalog/+page.server.ts
+++ b/src/routes/catalog/+page.server.ts
@@ -39,7 +39,7 @@ export const actions: Actions = {
 			.from(groceries)
 			.where(eq(groceries.id, id));
 		if (!item) {
-			return fail(404, { error: 'Item not found' });
+			return fail(404, { error: 'Article introuvable' });
 		}
 
 		await db
diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte
index 1ac558f..0fda271 100644
--- a/src/routes/catalog/+page.svelte
+++ b/src/routes/catalog/+page.svelte
@@ -9,7 +9,7 @@
 	function groupByCategory(items: typeof catalogItems) {
 		const groups: Record<string, typeof catalogItems> = {};
 		for (const item of items) {
-			const key = item.categoryName ?? 'Uncategorized';
+			const key = item.categoryName ?? 'Non catégorisé';
 			(groups[key] ??= []).push(item);
 		}
 		return Object.entries(groups);
@@ -17,7 +17,7 @@
 </script>
 
 {#if catalogItems.length === 0}
-	<p class="empty">No items yet</p>
+	<p class="empty">Aucun article</p>
 {:else}
 	<form method="POST" action="?/toggle" use:enhance>
 		{#each groupByCategory(catalogItems) as [cat, items] (cat)}
@@ -29,12 +29,15 @@
 							<span class="item-text">
 								<span class:checked={item.checked}>{item.name}</span>
 								{#if item.bestRef}
-									<span class="best-ref"
-										>{item.bestRef.reference}
-										{#if item.bestRef.price && item.bestRef.unit}
-											&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
-										{/if}
-									</span>
+											<span class="best-ref"
+												>{item.bestRef.reference}
+												{#if item.bestRef.price && item.bestRef.unit}
+													&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+												{/if}
+												{#if item.bestRef.qualityScore != null}
+													&nbsp;({item.bestRef.qualityScore}/100)
+												{/if}
+											</span>
 								{/if}
 							</span>
 						</button>
@@ -51,31 +54,36 @@
 		list-style: none;
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.375rem;
 	}
 
 	.item-list li button {
 		width: 100%;
 		text-align: left;
-		height: 2.5rem;
-		padding: 0 0.75rem;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
+		padding: 0 0.875rem;
+		height: 100%;
+		border: none;
+		border-radius: 0.75rem;
+		background: var(--surface);
 		font-size: 1rem;
+		font-weight: 500;
 		display: flex;
 		align-items: center;
-		transition: background 0.15s;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.item-list li button:hover {
-		background: #f5f5f5;
+		background: #fff8f5;
+		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+		transform: translateY(-1px);
 	}
 
 	.catalog-item {
 		display: flex;
-		gap: 0.25rem;
-		height: 2.5rem;
+		gap: 0.5rem;
+		align-items: center;
+		height: 2.75rem;
 	}
 
 	.catalog-item button:first-child {
@@ -83,6 +91,7 @@
 		width: auto;
 		display: flex;
 		align-items: center;
+		height: 100%;
 	}
 
 	.item-text {
@@ -90,47 +99,65 @@
 		flex-direction: column;
 		text-align: left;
 		line-height: 1.2;
+		gap: 0.0625rem;
+		overflow: hidden;
 	}
 
 	.checked {
 		text-decoration: line-through;
-		opacity: 0.5;
+		color: var(--text-secondary);
+		font-weight: 400;
 	}
 
 	.best-ref {
-		font-size: 0.625rem;
-		color: #999;
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		font-weight: 400;
 	}
 
 	.ref-link {
-		width: 2.5rem;
+		width: 2.75rem;
+		flex-shrink: 0;
+		height: 2.75rem;
+		aspect-ratio: 1;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #333;
+		border-radius: 0.75rem;
+		background: var(--surface);
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-size: 1rem;
-		transition: background 0.15s;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.ref-link:hover {
-		background: #f5f5f5;
+		background: #fff8f5;
+		color: var(--accent);
+		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+		transform: translateY(-1px);
 	}
 
 	.empty {
-		color: #999;
-		font-size: 0.875rem;
-		margin-top: 0.5rem;
+		color: var(--text-secondary);
+		font-size: 0.9375rem;
+		margin-top: 1rem;
+		text-align: center;
+		padding: 2rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.category-name {
 		font-size: 0.75rem;
-		font-weight: 600;
+		font-weight: 700;
 		text-transform: uppercase;
-		color: #999;
-		margin: 1rem 0 0.25rem;
+		letter-spacing: 0.08em;
+		color: var(--accent);
+		margin: 1.25rem 0 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 3px solid var(--accent);
 	}
 </style>
diff --git a/src/routes/categories/+page.server.ts b/src/routes/categories/+page.server.ts
index 241370e..7cedd98 100644
--- a/src/routes/categories/+page.server.ts
+++ b/src/routes/categories/+page.server.ts
@@ -19,7 +19,7 @@ export const actions: Actions = {
 		const name = data.get('name')?.toString().trim();
 
 		if (!name) {
-			return fail(400, { error: 'Name is required' });
+			return fail(400, { error: 'Le nom est requis' });
 		}
 
 		await db.insert(categories).values({ name });
diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte
index 541b280..eab0219 100644
--- a/src/routes/categories/+page.svelte
+++ b/src/routes/categories/+page.svelte
@@ -8,16 +8,16 @@
 
 <form class="add-form" method="POST" action="?/add" use:enhance>
 	<label>
-		<span class="label">New category</span>
+		<span class="label">Nouvelle catégorie</span>
 		<input
 			type="text"
 			name="name"
 			bind:value={name}
-			placeholder="e.g. Boissons"
+			placeholder="ex. Boissons"
 			autocomplete="off"
 		/>
 	</label>
-	<button type="submit">Add</button>
+	<button type="submit">Ajouter</button>
 </form>
 
 {#if form?.error}
@@ -38,7 +38,7 @@
 </form>
 
 {#if (data?.categories?.length ?? 0) === 0}
-	<p class="empty">No categories yet</p>
+	<p class="empty">Aucune catégorie</p>
 {/if}
 
 <style>
@@ -46,70 +46,108 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		margin-bottom: 1rem;
+		margin-bottom: 1.5rem;
+		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.25rem;
+		gap: 0.375rem;
 	}
 
 	.label {
 		font-size: 0.75rem;
-		font-weight: 600;
+		font-weight: 700;
 		text-transform: uppercase;
-		color: #999;
+		letter-spacing: 0.06em;
+		color: var(--text-secondary);
 	}
 
 	input {
-		padding: 0.75rem;
-		border: 1px solid #ccc;
-		border-radius: 0.5rem;
+		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;
+	}
+
+	input:focus {
+		outline: none;
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
 	}
 
 	.add-form button[type='submit'] {
-		padding: 0.75rem 1.25rem;
+		padding: 0.75rem 1.5rem;
 		border: none;
-		border-radius: 0.5rem;
-		background: #333;
+		border-radius: 0.75rem;
+		background: var(--accent);
 		color: #fff;
-		font-size: 1rem;
+		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: #d00;
-		margin-top: -0.5rem;
-		margin-bottom: 1rem;
+		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;
 	}
 
 	.item-list {
 		list-style: none;
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.375rem;
 	}
 
 	.catalog-item {
 		display: flex;
-		gap: 0.25rem;
-		height: 2rem;
+		gap: 0.5rem;
 		align-items: center;
+		padding: 0.5rem 0.75rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
+		transition: all 0.2s ease;
+	}
+
+	.catalog-item:hover {
+		box-shadow: 0 2px 6px var(--shadow);
+		transform: translateY(-1px);
 	}
 
 	.cat-name {
 		flex-grow: 1;
-		padding: 0 0.75rem;
+		font-weight: 500;
+		color: var(--text);
 	}
 
 	.delete-btn {
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #d00;
-		transition: background 0.15s;
+		border: none;
+		border-radius: 0.625rem;
+		background: transparent;
+		color: var(--text-secondary);
+		transition: all 0.2s ease;
 		width: 2rem;
 		aspect-ratio: 1;
 		padding: 0;
@@ -118,15 +156,22 @@
 		justify-content: center;
 		font-size: 1.25rem;
 		cursor: pointer;
+		flex-shrink: 0;
 	}
 
 	.delete-btn:hover {
-		background: #fee;
+		background: rgba(217, 83, 79, 0.1);
+		color: var(--danger);
 	}
 
 	.empty {
-		color: #999;
-		font-size: 0.875rem;
-		margin-top: 0.5rem;
+		color: var(--text-secondary);
+		font-size: 0.9375rem;
+		margin-top: 1rem;
+		text-align: center;
+		padding: 2rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 </style>
diff --git a/src/routes/grocery/[id]/+page.server.ts b/src/routes/grocery/[id]/+page.server.ts
index e434e9f..b19825a 100644
--- a/src/routes/grocery/[id]/+page.server.ts
+++ b/src/routes/grocery/[id]/+page.server.ts
@@ -8,7 +8,7 @@ export const load: PageServerLoad = async ({ params }) => {
 	const id = Number(params.id);
 
 	const [item] = await db.select().from(groceries).where(eq(groceries.id, id));
-	if (!item) throw error(404, 'Item not found');
+	if (!item) throw error(404, 'Article introuvable');
 
 	const [cat] = item.categoryId
 		? await db
@@ -40,7 +40,7 @@ export const actions: Actions = {
 		const qualityScore = data.get('quality_score')?.toString().trim();
 
 		if (!reference) {
-			return fail(400, { error: 'Reference is required' });
+			return fail(400, { error: 'La référence est requise' });
 		}
 
 		await db.insert(references).values({
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index 35cf33a..c3c3706 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -18,22 +18,22 @@
 
 <hr />
 
-<h2>References</h2>
+<h2>Références</h2>
 
 <form class="add-form" method="POST" action="?/add" use:enhance>
 	<label>
-		<span class="label">Reference</span>
+		<span class="label">Référence</span>
 		<input
 			type="text"
 			name="reference"
 			bind:value={reference}
-			placeholder="e.g. Carte Noire"
+			placeholder="ex. Carte Noire"
 			autocomplete="off"
 		/>
 	</label>
 	<div class="ref-row">
 		<label>
-			<span class="label">Price</span>
+			<span class="label">Prix</span>
 			<input
 				type="number"
 				name="price"
@@ -43,7 +43,7 @@
 			/>
 		</label>
 		<label>
-			<span class="label">Unit</span>
+			<span class="label">Unité</span>
 			<select name="unit" bind:value={unit}>
 				<option value="€/kg">€/kg</option>
 				<option value="€/L">€/L</option>
@@ -51,18 +51,18 @@
 			</select>
 		</label>
 		<label>
-			<span class="label">Score</span>
+			<span class="label">Note</span>
 			<input
 				type="number"
 				name="quality_score"
 				bind:value={qualityScore}
-				placeholder="0-100"
+				placeholder="0–100"
 				min="0"
 				max="100"
 			/>
 		</label>
 	</div>
-	<button type="submit">Add reference</button>
+	<button type="submit">Ajouter une référence</button>
 </form>
 
 {#if form?.error}
@@ -81,7 +81,7 @@
 						>
 					{/if}
 					{#if ref.qualityScore != null}
-						<span class="ref-detail">Score: {ref.qualityScore}/100</span>
+						<span class="ref-detail">Note : {ref.qualityScore}/100</span>
 					{/if}
 				</div>
 				<button class="delete-btn" name="id" value={ref.id} type="submit">
@@ -93,81 +93,112 @@
 </form>
 
 {#if (data?.references?.length ?? 0) === 0}
-	<p class="empty">No references yet</p>
+	<p class="empty">Aucune référence</p>
 {/if}
 
 <form method="POST" action="?/deleteItem" use:enhance>
-	<button type="submit" class="delete-item-btn">Delete item</button>
+	<button type="submit" class="delete-item-btn">Supprimer l'article</button>
 </form>
 
-<a href="/" class="back-link">&larr; Back to list</a>
+<a href="/" class="back-link">&larr; Retour à la liste</a>
 
 <style>
 	.category {
-		color: #999;
-		font-size: 0.875rem;
+		color: var(--text-secondary);
+		font-size: 0.9375rem;
+		font-weight: 500;
+		margin-top: 0.25rem;
 	}
 
 	.add-form {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
-		margin-bottom: 1rem;
-		margin-top: 0.5rem;
+		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.25rem;
+		gap: 0.375rem;
 	}
 
 	.label {
 		font-size: 0.75rem;
-		font-weight: 600;
+		font-weight: 700;
 		text-transform: uppercase;
-		color: #999;
+		letter-spacing: 0.06em;
+		color: var(--text-secondary);
 	}
 
 	input,
 	select {
-		padding: 0.75rem;
-		border: 1px solid #ccc;
-		border-radius: 0.5rem;
+		padding: 0.75rem 1rem;
+		border: 1.5px solid var(--border);
+		border-radius: 0.75rem;
 		font-size: 1rem;
 		font-family: inherit;
-		background: #fff;
+		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.5rem;
+		gap: 0.75rem;
+		flex-wrap: wrap;
 	}
 
 	.ref-row label {
 		flex: 1;
-		min-width: 0;
+		min-width: 6rem;
 	}
 
 	.add-form button[type='submit'] {
-		padding: 0.75rem 1.25rem;
+		padding: 0.75rem 1.5rem;
 		border: none;
-		border-radius: 0.5rem;
-		background: #333;
+		border-radius: 0.75rem;
+		background: var(--accent);
 		color: #fff;
-		font-size: 1rem;
+		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: #d00;
-		margin-top: -0.5rem;
-		margin-bottom: 1rem;
+		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: 1px solid #ddd;
+		border-top: 1.5px solid var(--border);
 		margin: 1.5rem 0;
 	}
 
@@ -175,17 +206,23 @@
 		list-style: none;
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.5rem;
 	}
 
 	.ref-item {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
+		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 {
@@ -197,8 +234,12 @@
 	}
 
 	.ref-detail {
-		color: #666;
+		color: var(--text-secondary);
 		font-size: 0.875rem;
+		font-weight: 500;
+		background: var(--bg);
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.375rem;
 	}
 
 	.delete-btn {
@@ -206,48 +247,65 @@
 		width: 2rem;
 		aspect-ratio: 1;
 		padding: 0;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #d00;
+		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: background 0.15s;
+		transition: all 0.2s ease;
 	}
 
 	.delete-btn:hover {
-		background: #fee;
+		background: rgba(217, 83, 79, 0.1);
+		color: var(--danger);
 	}
 
 	.empty {
-		color: #999;
-		font-size: 0.875rem;
-		margin-top: 0.5rem;
+		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);
 	}
 
 	.back-link {
-		display: inline-block;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
 		margin-top: 1.5rem;
-		color: #333;
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-size: 0.875rem;
+		font-weight: 500;
+		transition: color 0.2s;
+	}
+
+	.back-link:hover {
+		color: var(--accent);
 	}
 
 	.delete-item-btn {
 		margin-top: 1.5rem;
-		padding: 0.5rem 1rem;
-		border: 1px solid #d00;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #d00;
+		padding: 0.625rem 1.25rem;
+		border: 1.5px solid var(--danger);
+		border-radius: 0.75rem;
+		background: var(--surface);
+		color: var(--danger);
 		font-size: 0.875rem;
+		font-weight: 500;
 		cursor: pointer;
+		transition: all 0.2s ease;
 	}
 
 	.delete-item-btn:hover {
-		background: #fee;
+		background: rgba(217, 83, 79, 0.08);
+		transform: translateY(-1px);
 	}
 </style>