client/src/styles/base.scss

@@ -18,6 +18,27 @@
 	--radius: 8px;
 }
 
+// Thème sombre selon la préférence système (`prefers-color-scheme`), pas
+// de bascule manuelle demandée : mêmes custom properties, valeurs
+// réadaptées pour le contraste (tout le reste du CSS n'y touche jamais
+// directement, voir plus bas - seule cette feuille définit des couleurs).
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-bg: #16181d;
+		--color-surface: #1f2229;
+		--color-border: #33363f;
+		--color-text: #e7e8ea;
+		--color-text-muted: #9498a3;
+		--color-primary: #5b84ff;
+		--color-primary-hover: #7899ff;
+		--color-danger-bg: #3a2222;
+		--color-danger-text: #e59a97;
+		--color-danger-border: #6b3937;
+		--color-success-border: #4f9c72;
+		--color-neutral-border: #494d59;
+	}
+}
+
 * {
 	box-sizing: border-box;
 }

spec/architecture.md

@@ -40,7 +40,7 @@ Pas de `docker-compose.yml` pour l'instant (une seule image, pas encore de dépe
 - Piège CSS relevé en testant dans un vrai navigateur (pas seulement les tests) : un attribut `hidden` combiné à une règle `display: flex` sur le même sélecteur se fait écraser par cette règle (même spécificité, la feuille de l'auteur gagne sur celle du user-agent) - toujours ajouter `&[hidden] { display: none; }` quand un conteneur togglé porte aussi un `display` explicite.
 - Layout en hauteur pleine page (`html`/`body`/`.shell` à `height:100%`/`100vh`, `overflow:hidden` sur `body`) : la page elle-même ne défile jamais, seules `download-form__results` et `queue-panel__list` le font (chacune `flex:1 1 0; min-height:0; overflow-y:auto` dans un parent qui propage `height:100%`/`min-height:0` depuis `.shell__panel`). `min-height: 0` est nécessaire à *chaque* niveau flex descendant - un enfant flex ne rétrécit jamais sous la taille de son contenu par défaut, ce qui ferait déborder la page entière au lieu de faire défiler juste la liste. Chaque vue neutralise le grow/shrink de ses enfants directs non-scrollables via `> * { flex: 0 0 auto; }`, puis la règle plus spécifique de l'élément scrollable (même spécificité, déclarée après donc prioritaire) le fait remplir l'espace restant.
 - Tests : Vitest (`client/test/`), uniquement sur les fonctions pures (`format.ts`) pour l'instant - pas de configuration jsdom, le câblage DOM (formulaires, rendu de liste) est vérifié manuellement dans le navigateur plutôt que testé automatiquement.
-- `src/styles/base.scss` : palette et styles de base partagés (custom properties CSS sur `:root`, pas de `$variables` Sass - une variable Sass ne traverserait pas les fichiers, chaque vue étant compilée/importée séparément ; une custom property CSS si, puisqu'elle se résout à l'exécution dans le navigateur une fois tout le CSS regroupé par esbuild). Importé une fois depuis `app.ts`.
+- `src/styles/base.scss` : palette et styles de base partagés (custom properties CSS sur `:root`, pas de `$variables` Sass - une variable Sass ne traverserait pas les fichiers, chaque vue étant compilée/importée séparément ; une custom property CSS si, puisqu'elle se résout à l'exécution dans le navigateur une fois tout le CSS regroupé par esbuild). Importé une fois depuis `app.ts`. Thème sombre/clair automatique selon `prefers-color-scheme` (pas de bascule manuelle) : un unique bloc `@media (prefers-color-scheme: dark)` redéfinit les mêmes custom properties dans `:root` - fonctionne partout car aucune autre feuille ne code de couleur en dur (vérifié : toutes passent par `var(--color-*)`).
 
 ## API