From 4f31e98079da139f7165b275f17dbabfd9c922dc Mon Sep 17 00:00:00 2001
From: Kevin Lecou <lecoukevin@gmail.com>
Date: Wed, 16 Sep 2026 16:25:17 +0200
Subject: [PATCH] =?UTF-8?q?Corrige=20un=20bug=20pr=C3=A9sent=20depuis=20le?=
 =?UTF-8?q?=20tout=20premier=20commit=20:=20hidden=20ne=20masquait=20rien?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.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).
---
 src/admin/qrcode/index.html |  7 +++++++
 src/e/style.css             | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/admin/qrcode/index.html b/src/admin/qrcode/index.html
index 8b27343..0111753 100644
--- a/src/admin/qrcode/index.html
+++ b/src/admin/qrcode/index.html
@@ -134,6 +134,13 @@
     align-items: center;
     gap: 0.75rem;
   }
+  /* Une règle auteur avec `display` passe toujours devant `[hidden] {
+     display: none }` du navigateur (origine auteur > origine user-agent
+     dans la cascade), donc il faut le dire explicitement ici pour que
+     preview.hidden = true (JS) masque vraiment l'élément. */
+  .preview[hidden] {
+    display: none;
+  }
   .preview svg {
     width: 100%;
     max-width: 280px;
diff --git a/src/e/style.css b/src/e/style.css
index 4eeb49f..ad5de30 100644
--- a/src/e/style.css
+++ b/src/e/style.css
@@ -415,6 +415,14 @@ body::before {
   animation: fade-rise 0.5s var(--ease-standard) 0.08s both;
 }
 
+/* Même bug que .welcome-modal (voir commentaire plus haut) : présent depuis
+   le tout premier commit de ce fichier. form.hidden = true (JS) ne masquait
+   jamais réellement le formulaire, qui restait affiché en display:flex en
+   permanence, superposé aux états chargement/erreur/succès. */
+.upload-form[hidden] {
+  display: none;
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -657,6 +665,17 @@ button:focus-visible {
   animation: fade-in 0.2s ease both;
 }
 
+/* Bug réel corrigé (2026-09-16) : 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é). Sans cette règle explicite,
+   `welcomeModal.hidden = true` en JS ne masquait jamais visuellement la
+   modale : le bouton "C'est parti" fonctionnait bien (l'état se mettait à
+   jour) mais rien ne changeait à l'écran. */
+.welcome-modal[hidden] {
+  display: none;
+}
+
 .welcome-modal__card {
   position: relative;
   width: 100%;