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).
2026-09-16 13:19:44 +02:00
parent 9bc3464a2b
commit a1e24d1aa8
5 changed files with 645 additions and 45 deletions
@@ -17,6 +17,13 @@
 <body>
 <main class="page">
  <header class="page__header">
+    <p class="brand" aria-hidden="true">
+      <svg class="brand__mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false">
+        <path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
+        <circle cx="12" cy="13" r="3.5"/>
+      </svg>
+      <span class="brand__name">photobooth</span>
+    </p>
    <h1 id="event-name">Ajouter une photo</h1>
  </header>

@@ -42,8 +49,21 @@
           le sélecteur de fichiers classique. Décision actée avec Kévin le
           2026-09-16 : les deux doivent être accessibles en un tap. -->
      <div class="photo-source-buttons">
-        <label for="photo-input" class="btn-secondary">📷 Prendre une photo</label>
-        <label for="photo-input-gallery" class="btn-secondary">🖼️ Depuis la galerie</label>
+        <label for="photo-input" class="btn-secondary">
+          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+            <path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
+            <circle cx="12" cy="13" r="3.5"/>
+          </svg>
+          <span>Prendre une photo</span>
+        </label>
+        <label for="photo-input-gallery" class="btn-secondary">
+          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+            <rect x="3" y="4" width="18" height="16" rx="2.5"/>
+            <circle cx="8.5" cy="9.5" r="1.5"/>
+            <path d="M21 16.5 15.6 11a1 1 0 0 0-1.4 0L6 19"/>
+          </svg>
+          <span>Depuis la galerie</span>
+        </label>
      </div>
      <input
        type="file"
@@ -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 {