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.
This commit is contained in:
2026-09-16 16:10:23 +02:00
parent 45e0bd7bcc
commit 6d6be3ef99
5 changed files with 428 additions and 19 deletions
+6 -2
View File
@@ -12,7 +12,11 @@
lors du déploiement, hors scope de ce fichier front.
-->
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" content="#faf6f0">
<!-- Deux meta theme-color (au lieu d'une seule) : teinte la barre
navigateur/PWA selon le thème système, en cohérence avec le mode sombre
ajouté passe 3 (voir src/e/style.css). -->
<meta name="theme-color" content="#faf6f0" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1b120b" media="(prefers-color-scheme: dark)">
<link rel="preload" href="/vendor/fonts/fraunces-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/e/style.css">
</head>
@@ -96,7 +100,7 @@
<section id="success-block" class="state-block state-block--success" hidden role="status">
<div class="confetti" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="success-check" aria-hidden="true">
<svg viewBox="0 0 52 52" fill="none" focusable="false">