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
+7 -2
View File
@@ -13,7 +13,8 @@
fichier front, à mettre en place lors du déploiement.
-->
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" content="#faf6f0">
<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="/admin/gallery/style.css">
</head>
@@ -38,7 +39,11 @@
<section id="status-error" class="state-block state-block--error" hidden role="alert">
<p id="status-error-message"></p>
<button type="button" id="retry-btn" hidden>Réessayer</button>
<!-- class="btn btn--secondary" ajoutée passe 3 : ce bouton n'avait
jusqu'ici aucune classe et retombait donc sur le style navigateur
par défaut (papercut visuel repéré pendant la passe DA, corrigé
ici — rendu uniquement, aucune logique touchée). -->
<button type="button" id="retry-btn" class="btn btn--secondary" hidden>Réessayer</button>
</section>
<section id="gallery-content" hidden>