Passe 3 DA : mode sombre + finition "premium type iPhone"

Vrai mode sombre via prefers-color-scheme (palette repensée, pas une
inversion — fond brun quasi-noir pour rester dans la famille chaude de la
marque, contrastes vérifiés WCAG AA). Répond aux deux demandes de Kévin en
une implémentation : mode sombre réel + rendu moins agressif en usage
réel (soirée en intérieur tamisé). Appliqué à la page upload, la galerie
admin et le générateur QR ; le carton imprimable reste volontairement en
clair uniquement (pas de mode sombre pertinent pour un PDF imprimé).

Finition : easing dédié aux transitions d'état (séparé du rebond ludique
existant), halo de couleur en fond de page, hover desktop enrichi,
focus ring teinté, entrées en fondu au chargement, modale de bienvenue
peaufinée.

Brainstorm documenté (voir rapport de tâche) : palette/typo confirmées
plutôt qu'étendues avec une 4e couleur ou une police supplémentaire, pour
rester fidèle à l'identité perso de Kévin plutôt que de la diluer.

src/admin/qrcode/index.html

@@ -5,15 +5,22 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Générateur de QR code — photobooth-qr (admin)</title>
 <meta name="robots" content="noindex, nofollow" />
+<meta name="theme-color" content="#faf6f0" media="(prefers-color-scheme: light)" />
+<meta name="theme-color" content="#1b120b" media="(prefers-color-scheme: dark)" />
 <style>
   /* Mêmes tokens que src/e/style.css et src/admin/gallery/style.css —
      cohérence visuelle même sur cet outil interne que les clients ne
      voient pas (cf. retour Kévin 2026-09-16). Palette/rayons resynchronisés
      avec la passe 2 (2026-09-16, direction "punchy/friendly") ; outil
-     interne, priorité basse donc pas de police d'accent ni d'animation
-     ajoutées ici, juste la cohérence de base (couleurs, rayons). */
+     interne, priorité basse donc pas de police d'accent ni d'animations
+     d'entrée ajoutées ici, juste la cohérence de base (couleurs, rayons).
+
+     Passe 3 (2026-09-16) : mode sombre ajouté (demandé explicitement pour
+     ce fichier) + petites finitions hover/focus à coût nul, mais toujours
+     sans Fraunces ni animation d'entrée — la priorité basse de cet outil
+     reste valable, seul le mode sombre est une demande directe. */
   :root {
-    color-scheme: light;
+    color-scheme: light dark;
     --color-bg: #fff8f0;
     --color-surface: #ffffff;
     --color-surface-muted: #fdecdd;
@@ -28,9 +35,27 @@
     --radius-sm: 12px;
     --radius: 20px;
     --shadow-sm: 0 2px 6px rgba(163, 78, 30, 0.1);
+    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
     --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
   }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-bg: #1b120b;
+      --color-surface: #26190f;
+      --color-surface-muted: #32211a;
+      --color-text: #f7ead9;
+      --color-muted: #b39d84;
+      --color-border: #40291a;
+      --color-accent: #ff7a42;
+      --color-accent-hover: #ffa06e;
+      --color-accent-soft: rgba(255, 122, 66, 0.18);
+      --color-accent-contrast: #241206;
+      --color-error-text: #ff9b86;
+      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
+    }
+  }
   * { box-sizing: border-box; }
   body {
     margin: 0;
@@ -90,6 +115,13 @@
     border-radius: var(--radius-sm);
     background: var(--color-surface);
     color: inherit;
+    transition: border-color 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
+  }
+  input:focus,
+  select:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 4px var(--color-accent-soft);
   }
   .preview {
     margin-top: 1.5rem;
@@ -131,6 +163,7 @@
     color: var(--color-accent-contrast);
     box-shadow: var(--shadow-sm);
     cursor: pointer;
+    transition: transform 0.15s var(--ease-standard), background 0.15s ease;
   }
   button:active:not(:disabled) {
     background: var(--color-accent-hover);
@@ -143,6 +176,11 @@
   button.secondary:active:not(:disabled) {
     background: var(--color-accent-soft);
   }
+  @media (hover: hover) {
+    button:hover:not(:disabled) {
+      transform: translateY(-1px);
+    }
+  }
   button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -153,6 +191,13 @@
     margin-top: 0.5rem;
     min-height: 1.2em;
   }
+  @media (prefers-reduced-motion: reduce) {
+    button,
+    input,
+    select {
+      transition: none !important;
+    }
+  }
 </style>
 </head>
 <body>