Première passe de direction artistique (palette, marque, carton imprimable)

Palette affinée autour de l'accent brun/terracotta déjà en prod (continuité,
pas de rupture) : tokens de couleur/rayon/ombre partagés entre la page
upload et la galerie admin. Emoji remplacés par des icônes SVG inline
(rendu cohérent multi-OS). Bloc de marque discret en en-tête des deux
écrans invité/admin.

Nouveau : carton imprimable A5 (src/admin/print-template/) qui génère le
QR en direct via le module qrcode.js existant, prêt pour l'export PDF
navigateur.

Pas de police custom : stack système conservée pour rester sobre
(zéro poids réseau supplémentaire).

src/e/style.css

@@ -1,18 +1,42 @@
-/* Page upload invité — mobile-first, sobre, sans dépendance externe */
+/* Page upload invité — mobile-first, sobre, sans dépendance externe.
+   Système de design partagé avec la galerie admin (src/admin/gallery/style.css) :
+   mêmes tokens de couleur/rayon/ombre, pour une identité cohérente entre les
+   deux écrans (voir docs/decisions.md pour le contexte produit). */
 
 :root {
   color-scheme: light;
-  --color-bg: #faf9f7;
-  --color-text: #2a2a28;
-  --color-muted: #6b6b66;
+
+  /* Couleurs — palette chaude et sobre, cohérente avec l'identité perso de
+     Kévin Lecou (Rêves Liquides). L'accent brun/terracotta est inchangé par
+     rapport à la V1 déployée : on affine la palette autour, pas de rupture. */
+  --color-bg: #faf8f5;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f2ede4;
+  --color-text: #262420;
+  --color-muted: #6f6a62;
+  --color-border: #e3ddd2;
+
   --color-accent: #8a5a44;
+  --color-accent-hover: #6e4735;
+  --color-accent-soft: #f1e3d8;
   --color-accent-contrast: #ffffff;
-  --color-error-bg: #fdecea;
+
+  --color-error-bg: #fbeceb;
   --color-error-text: #7a1f14;
-  --color-success-bg: #eaf5ec;
+  --color-success-bg: #eaf3ec;
   --color-success-text: #1e5c2d;
-  --radius: 10px;
-  --spacing: 1rem;
+
+  /* Rayon à deux niveaux : sm pour les petits éléments (inputs, chips),
+     base pour les blocs/cards — donne une identité "arrondie/artisanale"
+     un peu plus marquée que le 10px uniforme de la V1. */
+  --radius-sm: 8px;
+  --radius: 14px;
+
+  --shadow-sm: 0 1px 2px rgba(38, 36, 32, 0.06);
+  --shadow-md: 0 6px 20px rgba(38, 36, 32, 0.10);
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
 }
 
 * {
@@ -25,7 +49,7 @@ html {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans);
   background: var(--color-bg);
   color: var(--color-text);
   line-height: 1.45;
@@ -34,7 +58,7 @@ body {
 .page {
   max-width: 480px;
   margin: 0 auto;
-  padding: 1.25rem 1rem 3rem;
+  padding: 1.5rem 1.1rem 3rem;
   min-height: 100dvh;
 }
 
@@ -43,9 +67,38 @@ body {
   margin-bottom: 1.5rem;
 }
 
+/* Bloc de marque — discret, rassure l'invité (outil "pro") et signe le
+   produit pour les organisateurs/prestataires qui verront la page.
+   Volontairement minuscule : ce n'est pas l'écran de l'invité qui doit
+   porter la marque de Kévin, c'est un clin d'œil en filigrane. */
+.brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  margin-bottom: 0.6rem;
+  color: var(--color-muted);
+}
+
+.brand__mark {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--color-accent);
+}
+
+.brand__name {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
 .page__header h1 {
-  font-size: 1.4rem;
-  margin: 0.25rem 0 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0.15rem 0 0;
 }
 
 .state-block {
@@ -101,9 +154,9 @@ input[type="file"],
 textarea {
   font: inherit;
   padding: 0.7rem 0.75rem;
-  border: 1px solid #d8d5cf;
-  border-radius: var(--radius);
-  background: #fff;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
   color: inherit;
   width: 100%;
 }
@@ -134,22 +187,35 @@ input[type="file"] {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.45rem;
   text-align: center;
   font-weight: 600;
   font-size: 0.9rem;
   padding: 0.85rem 0.6rem;
   min-height: 48px;
   border: 1px solid var(--color-accent);
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   color: var(--color-accent);
-  background: #fff;
+  background: var(--color-surface);
   cursor: pointer;
 }
 
 .btn-secondary:active {
+  background: var(--color-accent-soft);
   transform: translateY(1px);
 }
 
+/* Icônes SVG inline (aucune requête réseau) : remplacent les emoji des
+   boutons "Prendre une photo" / "Depuis la galerie". Le rendu des emoji
+   varie fortement selon l'OS (Android/iOS/Windows) — pas assez maîtrisé
+   pour une pièce de portfolio. Les icônes héritent de currentColor, donc
+   suivent l'état du bouton sans CSS supplémentaire. */
+.btn-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
 .file-chosen-label {
   font-size: 0.85rem;
   color: var(--color-muted);
@@ -173,15 +239,15 @@ button:focus-visible {
   max-height: 320px;
   object-fit: contain;
   border-radius: var(--radius);
-  background: #eee;
+  background: var(--color-surface-muted);
 }
 
 .legal-notice {
   font-size: 0.8rem;
   color: var(--color-muted);
-  background: #f1efe9;
+  background: var(--color-surface-muted);
   border-radius: var(--radius);
-  padding: 0.75rem;
+  padding: 0.8rem 0.9rem;
   margin: 0;
 }
 
@@ -197,7 +263,7 @@ button {
   font: inherit;
   font-weight: 600;
   border: none;
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   padding: 0.85rem 1rem;
   min-height: 48px;
   cursor: pointer;
@@ -207,6 +273,12 @@ button {
 #add-another-btn {
   background: var(--color-accent);
   color: var(--color-accent-contrast);
+  box-shadow: var(--shadow-sm);
+}
+
+#submit-btn:active:not(:disabled),
+#add-another-btn:active {
+  background: var(--color-accent-hover);
 }
 
 #submit-btn:disabled {