La modale de bienvenue (position: fixed, inset: 0) recouvre tout
l'écran y compris l'en-tête où vivait le seul lien vers la galerie :
au premier chargement (cas le plus fréquent, un seul passage par
invité et par événement), le lien était visuellement présent mais
totalement inatteignable au clic. Ajout d'un lien dupliqué dans la
carte de la modale elle-même. Au passage, "mur" remplacé par "fête"
partout (jugé pas assez fun) pour rester cohérent avec le texte déjà
utilisé sur l'écran de succès.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Lien "Voir le mur" dans l'en-tête (permanent) et sur l'écran de succès,
demandé par Kévin. href posé dès que le slug est connu, sans attendre la
réponse de get_public_event.
Corrige un oubli réel : la mention RGPD disait encore "mise à disposition
de l'organisateur" alors que la décision du 2026-09-18 (galerie invité
visible par tous) avait été consignée dans docs/decisions.md sans que le
texte affiché aux invités soit réellement mis à jour. Corrigé dans
docs/rgpd.md et dans la modale de bienvenue réelle.
Upload invité (priorité haute, full traitement : fond #12100E, CTA
corail, General Sans/Inter, touche Caveat sur le message de succès),
galerie admin (exception admin du skill : sobre, sombre, cartes #1E1B18,
pas de rotation/confettis, corail réservé aux CTA), générateur QR (même
exception admin, traitement minimal), carton imprimable (reste clair —
un support papier n'a pas vocation à avoir un fond noir — mais adopte les
polices et l'accent corail de la nouvelle DA, contraste recalculé pour
l'impression).
Double thème clair/sombre de l'ancienne DA retiré au profit d'un thème
unique sombre, cohérent avec src/galerie/ (premier écran de cette DA,
déjà validé). Dégradés de texte et halo de fond de l'ancienne DA retirés
(skill : jamais de glow/neon artificiel).
Contrastes vérifiés par calcul WCAG AA pour toutes les nouvelles
combinaisons. Chemins d'assets absolus et pattern [hidden]/display
vérifiés sur les 4 écrans (bugs déjà rencontrés deux fois en prod).
Nouvelle Edge Function publique (aucun token requis — même modèle de
confiance que l'upload, le slug n'est pas un secret) qui résout un slug
via get_public_event puis renvoie les photos de get_event_photos avec
des URLs signées. Déployée et testée en conditions réelles sur
kevin-lecou-hub (slug inconnu -> 404, event sans photo -> 200 vide,
event avec photo -> signed_url fonctionnelle), CORS vérifié.
Front (src/galerie/) : remplace les données factices par un vrai fetch +
sondage (polling 25s, pas de Supabase Realtime — le schéma photobooth
reste volontairement jamais exposé, l'activer aurait demandé de rouvrir
ce verrou RLS). Rotation des cartes figée par photo (pas de "tremblement"
au rafraîchissement), seules les nouvelles photos jouent l'animation de
chute. États chargement/erreur/vide ajoutés (absents de la maquette).
Testé en réel : une photo uploadée apparaît bien sur le mur.
Suppression des données de maquette (gallery-mock.js, mock-photos/).
Nouvelle direction artistique actée (.claude/skills/photobooth-da/SKILL.md)
qui remplace progressivement la DA corail/prune/doré des 3 passes
précédentes. Décision associée : les invités voient désormais toutes les
photos de l'événement (revirement du "upload only" initial), cf.
docs/decisions.md — implique une mise à jour de la mention RGPD à faire.
Écran 3 du brief (galerie invité) livré en premier, comme demandé,
priorité au rendu visuel : grille de cadres polaroid (rotation aléatoire
-4°/+4°, légende manuscrite Caveat), fond noir chaud #12100E, effet
"chute avec rebond" pour un nouveau polaroid (bouton de démo temporaire
pour l'évaluer sans backend réel).
Contrastes vérifiés par calcul WCAG AA (skill) : texte clair sur fond
sombre largement conforme, mais texte clair sur les 3 couleurs d'accent
échouait (1.3:1 à 2.8:1) — corrigé en texte sombre systématique sur les
surfaces accent (6.3:1 à 13.2:1).
Nouvelles polices auto-hébergées (General Sans 700, Caveat variable,
Inter variable — ~144 Ko cumulés, poids documenté dans src/vendor/NOTICE.md).
⚠️ Maquette avec données factices (src/galerie/mock-photos/) : pas encore
câblée à Supabase, il manque une RPC/Edge Function publique de listing
(aucune fonction actuelle ne convient à un accès invité anonyme sans
admin_token). Route /galerie/<slug> ajoutée à deploy/nginx-photobooth.conf
et déployée sur photobooth.assistantaikev.eu.
.upload-form et .welcome-modal déclarent `display: flex` en dur — une
déclaration `display` en CSS auteur passe TOUJOURS devant la règle
[hidden] { display: none } du navigateur (l'origine auteur l'emporte sur
l'origine user-agent dans la cascade, indépendamment de la spécificité).
Résultat concret :
- form.hidden = true/false (JS) ne masquait jamais réellement le
formulaire, resté affiché en permanence superposé aux états
chargement/erreur/succès depuis le commit initial (9b14619).
- welcomeModal.hidden = true (clic sur "C'est parti") mettait bien l'état
à jour mais la modale ne disparaissait jamais visuellement — signalé
par Kévin après test réel.
- Même bug sur .preview dans le générateur QR (src/admin/qrcode/).
Fix : règles explicites .upload-form[hidden], .welcome-modal[hidden],
.preview[hidden] { display: none }, spécificité plus élevée que la règle
display de base donc gagnent correctement la cascade. La galerie admin
n'avait pas ce bug (aucun display explicite sur ses éléments togglés).
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.
Demande Kévin : mot de bienvenue personnalisé (nom de l'événement) +
mention légale RGPD, affiché une fois par événement (localStorage) au
lieu d'un bloc toujours visible dans le formulaire. Texte légal conservé
à l'identique (docs/rgpd.md), seule la présentation change. Reste
consultable à tout moment via un lien "Infos sur tes données" sous le
formulaire, qui rouvre la même modale.
Retour direct de Kévin après la 1ère passe (trop sage) : palette poussée
en saturation (corail vif en primaire, prune + doré en accents), formes
plus rondes (boutons pilule, rayons 20px), micro-animations avec du peps
(easing overshoot, coche qui se dessine + confettis CSS purs à l'envoi,
spinner animé). Police d'accent Fraunces ajoutée pour les titres (2
fichiers .woff2 auto-hébergés, ~44 Ko, SIL OFL, jamais de CDN).
Ton de voix retravaillé : micro-copies plus souriantes, nouvel état
"limite de photos atteinte" traité chaleureusement (pas comme une erreur).
Cohérence maintenue sur galerie admin, carton imprimable, et générateur
QR (sync légère, priorité basse). Testé en conditions réelles sur
photobooth.assistantaikev.eu.
Nouvelle colonne max_photos_per_guest (NULL = illimité). Appliquée via un
guest_id anonyme persisté en localStorage — pas une identité vérifiée,
contournable en changeant d'appareil, mais fait respecter côté serveur
(source de vérité) et bloque l'UI proactivement côté client. Ancienne
signature de insert_public_photo (sans guest_id) supprimée pour empêcher
tout contournement.
Testé en conditions réelles sur kevin-lecou-hub (2 photos acceptées,
3e refusée avec max_photos_per_guest=2).
nginx réécrit /admin/<slug> et /e/<slug> vers le vrai index.html (try_files),
mais l'URL affichée au navigateur reste /admin/<slug> — les chemins relatifs
(style.css, config.js, gallery.js/upload.js) se résolvaient donc contre cette
URL "virtuelle" au lieu du vrai dossier, tombaient sur le fallback nginx et
recevaient du HTML au lieu du CSS/JS attendu. La galerie admin restait
bloquée sur "Chargement..." avec un style complètement cassé. Passage en
chemins absolus (/e/..., /admin/gallery/...) partout.
Signalé par Kévin après test réel sur /admin/demo-kevin.
Au passage : durcit la protection anti-double-soumission du formulaire
upload (garde-fou supplémentaire au niveau de l'event listener) et
remet à zéro photo/nom/message immédiatement après un envoi réussi.
nginx:alpine ne connaît pas l'extension .mjs par défaut et la servait en
application/octet-stream — le navigateur refusait d'exécuter les modules
ES (browser-image-compression.mjs, qrcode-generator.mjs), ce qui plantait
silencieusement TOUT le JS qui les importe : page upload invité bloquée
sur "Chargement...", générateur QR et carton imprimable cassés depuis
leur déploiement. Aucune erreur visible sans ouvrir la console navigateur.
Découvert suite à un vrai test d'upload de Kévin depuis son téléphone.
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).
Deux boutons séparés (deux inputs file) plutôt qu'un seul avec
capture=environment qui masquait l'option galerie — retour de Kévin
après test réel. État de sélection centralisé dans state.selectedFile.
Container nginx dédié, rattaché au réseau Docker de n8n pour réutiliser
Traefik/Let's Encrypt déjà en place. Config versionnée dans deploy/.
APP_BASE_URL configurée sur les Edge Functions pour le CORS. Testé en
conditions réelles : upload invité + galerie admin fonctionnels depuis
le domaine public.
Schéma dédié `photobooth` (jamais exposé via PostgREST, accès exclusivement
via fonctions SECURITY DEFINER dans public) avec RLS, policies Storage sur
bucket privé event-photos, Edge Functions admin-gallery et expire-events,
et job pg_cron d'expiration J+7. Le tout déployé et testé en conditions
réelles sur le projet Supabase kevin-lecou-hub avant relecture sécurité
(faille d'abus sur insert_public_photo corrigée en cours de route).
Côté front : page upload invité (compression + HEIC + RGPD), galerie admin
avec export ZIP, générateur de QR code autonome. Workflow n8n de purge
Storage J+7 fourni (à activer manuellement côté n8n).
KevinLecouandClaude Sonnet 5