Wizard evenement tactile + menu admin simplifie + bouton update + logo SikaPics

- Wizard: 6 etapes (nom, theme, modes, nb photos, partage, resume)
- Gros boutons tactiles, une question par ecran
- Parametres avances accessibles depuis le wizard
- Bouton "Mettre a jour l'affichage" dans Fonctions > Systeme
- Logo SikaPics dans le theme sikapics
- Menu admin reorganise: Materiel / Compteur / Destinations / Personnalisation / Evenement / Fonctions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/index.html

@@ -134,10 +134,100 @@
       <button class="btn-retour" onclick="allerA('accueil')">Retour</button>
     </section>
 
-    <!-- Menu Admin / Backoffice -->
+    <!-- Wizard evenement -->
+    <section id="ecran-wizard" class="ecran">
+      <div class="wizard-header">
+        <button class="btn-fermer" onclick="allerA('accueil')">&times;</button>
+        <div class="wizard-progress" id="wizard-progress"></div>
+      </div>
+
+      <!-- Etape 1 : Nom -->
+      <div class="wizard-step actif" data-step="1">
+        <h2>Nom de l'evenement</h2>
+        <input type="text" id="wiz-nom" class="wizard-input" placeholder="Mariage Julie & Thomas" autocomplete="off">
+        <button class="wizard-btn-next" onclick="wizardSuivant()">Suivant</button>
+      </div>
+
+      <!-- Etape 2 : Theme -->
+      <div class="wizard-step" data-step="2">
+        <h2>Theme visuel</h2>
+        <div class="wizard-choix">
+          <button class="wizard-card" data-val="base" onclick="wizardChoisir(this, 'theme')">
+            <div class="wizard-card-icon" style="background:#1a1a2e;color:#e91e63">&#9790;</div>
+            <span>Sombre</span>
+          </button>
+          <button class="wizard-card" data-val="sikapics" onclick="wizardChoisir(this, 'theme')">
+            <div class="wizard-card-icon" style="background:#fbe7e8;color:#c31f48">&#10047;</div>
+            <span>SikaPics</span>
+          </button>
+        </div>
+        <button class="wizard-btn-next" onclick="wizardSuivant()">Suivant</button>
+      </div>
+
+      <!-- Etape 3 : Modes photo -->
+      <div class="wizard-step" data-step="3">
+        <h2>Modes photo</h2>
+        <div class="wizard-choix">
+          <button class="wizard-card wizard-toggle actif" data-val="simple" onclick="wizardToggle(this)">
+            <div class="wizard-card-icon">&#128247;</div>
+            <span>Photo</span>
+          </button>
+          <button class="wizard-card wizard-toggle actif" data-val="multi" onclick="wizardToggle(this)">
+            <div class="wizard-card-icon">&#127902;</div>
+            <span>Pellicule</span>
+          </button>
+        </div>
+        <button class="wizard-btn-next" onclick="wizardSuivant()">Suivant</button>
+      </div>
+
+      <!-- Etape 4 : Nombre de photos pellicule -->
+      <div class="wizard-step" data-step="4">
+        <h2>Photos par pellicule</h2>
+        <div class="wizard-nombre">
+          <button class="wizard-nb-btn" onclick="wizardNbPhotos(-1)">-</button>
+          <span id="wiz-nb-photos" class="wizard-nb-val">4</span>
+          <button class="wizard-nb-btn" onclick="wizardNbPhotos(1)">+</button>
+        </div>
+        <button class="wizard-btn-next" onclick="wizardSuivant()">Suivant</button>
+      </div>
+
+      <!-- Etape 5 : Fonctions partage -->
+      <div class="wizard-step" data-step="5">
+        <h2>Partage</h2>
+        <div class="wizard-choix wizard-choix-wrap">
+          <button class="wizard-card wizard-toggle" data-val="impression" onclick="wizardToggle(this)">
+            <div class="wizard-card-icon">&#128424;</div>
+            <span>Impression</span>
+          </button>
+          <button class="wizard-card wizard-toggle" data-val="email" onclick="wizardToggle(this)">
+            <div class="wizard-card-icon">&#9993;</div>
+            <span>Email</span>
+          </button>
+          <button class="wizard-card wizard-toggle" data-val="galerie_live" onclick="wizardToggle(this)">
+            <div class="wizard-card-icon">&#127760;</div>
+            <span>Galerie live</span>
+          </button>
+          <button class="wizard-card wizard-toggle" data-val="qr" onclick="wizardToggle(this)">
+            <div class="wizard-card-icon">&#9641;</div>
+            <span>QR Code</span>
+          </button>
+        </div>
+        <button class="wizard-btn-next" onclick="wizardSuivant()">Suivant</button>
+      </div>
+
+      <!-- Etape 6 : Resume -->
+      <div class="wizard-step" data-step="6">
+        <h2>C'est pret !</h2>
+        <div id="wiz-resume" class="wizard-resume"></div>
+        <button class="wizard-btn-next wizard-btn-go" onclick="wizardTerminer()">Lancer le photobooth</button>
+        <button class="btn-secondaire" onclick="allerA('admin')">Parametres avances</button>
+      </div>
+    </section>
+
+    <!-- Menu Admin / Backoffice (avance) -->
     <section id="ecran-admin" class="ecran">
       <div class="admin-header">
-        <h2>Parametres</h2>
+        <h2>Parametres avances</h2>
         <button class="btn-fermer" onclick="allerA('accueil')">&times;</button>
       </div>
       <div class="admin-contenu">
@@ -145,15 +235,9 @@
           <button class="onglet actif" data-onglet="materiel">Materiel</button>
           <button class="onglet" data-onglet="compteur-admin">Compteur</button>
           <button class="onglet" data-onglet="destinations-admin">Destinations</button>
-          <button class="onglet" data-onglet="cadres-admin">Cadres</button>
-          <button class="onglet" data-onglet="fonds-admin">Fonds verts</button>
-          <button class="onglet" data-onglet="animations-admin">Animation 3-2-1</button>
+          <button class="onglet" data-onglet="personnalisation">Personnalisation</button>
           <button class="onglet" data-onglet="evenement">Evenement</button>
-          <button class="onglet" data-onglet="fonctionnalites">Fonctions</button>
-          <button class="onglet" data-onglet="email-admin">Email</button>
-          <button class="onglet" data-onglet="booth-admin">Galerie Live</button>
-          <button class="onglet" data-onglet="galerie-admin">Galerie</button>
-          <button class="onglet" data-onglet="systeme">Systeme</button>
+          <button class="onglet" data-onglet="fonctions">Fonctions</button>
         </div>
 
         <!-- Panneau Materiel (Camera + Imprimante) -->
@@ -254,50 +338,39 @@
           <button class="btn-action" onclick="sauvegarderDestinations()">Sauvegarder</button>
         </div>
 
-        <!-- Panneau Cadres -->
-        <div class="admin-panneau" id="panneau-cadres-admin">
-          <h3>Cadres disponibles</h3>
+        <!-- Panneau Personnalisation (Cadres + Fonds + Animations) -->
+        <div class="admin-panneau" id="panneau-personnalisation">
+          <h3>Cadres / Overlays</h3>
           <p class="aide">Cochez les cadres a proposer aux utilisateurs.</p>
           <div id="liste-cadres" class="liste-cadres">
             <p class="texte-secondaire">Aucun cadre importe</p>
           </div>
-          <h3>Importer un cadre</h3>
           <div class="champ">
             <input type="file" id="input-cadre" accept=".png" class="input-fichier">
-            <button class="btn-action" onclick="uploaderCadre()">Importer</button>
+            <button class="btn-action" onclick="uploaderCadre()">Importer un cadre</button>
           </div>
-        </div>
 
-        <!-- Panneau Fonds verts -->
-        <div class="admin-panneau" id="panneau-fonds-admin">
-          <h3>Fonds pour chroma key</h3>
-          <p class="aide">Importez des images de fond. Les utilisateurs choisiront leur fond apres la photo.</p>
+          <h3>Fonds (chroma key)</h3>
+          <p class="aide">Importez des images de fond pour le mode fond vert.</p>
           <div id="liste-fonds" class="liste-fonds">
             <p class="texte-secondaire">Aucun fond importe</p>
           </div>
-          <h3>Importer un fond</h3>
           <div class="champ">
             <input type="file" id="input-fond" accept=".jpg,.jpeg,.png" class="input-fichier">
-            <button class="btn-action" onclick="uploaderFond()">Importer</button>
+            <button class="btn-action" onclick="uploaderFond()">Importer un fond</button>
           </div>
-        </div>
 
-        <!-- Panneau Animations -->
-        <div class="admin-panneau" id="panneau-animations-admin">
-          <h3>Animations CSS</h3>
-          <p class="aide">Cochez les animations a utiliser. Si plusieurs sont cochees, une sera choisie au hasard a chaque photo.</p>
+          <h3>Animations 3-2-1</h3>
+          <p class="aide">Si plusieurs sont cochees, une sera choisie au hasard.</p>
           <div id="liste-animations" class="liste-animations">
           </div>
-
-          <h3>Animations personnalisees (video/GIF)</h3>
-          <p class="aide">Importez vos propres animations (GIF, MP4, WebM). Elles seront jouees en plein ecran avant la capture.</p>
+          <h4>Animations personnalisees (video/GIF)</h4>
           <div id="liste-animations-custom" class="liste-animations">
           </div>
           <div class="champ">
             <input type="file" id="input-animation" accept=".gif,.mp4,.webm" class="input-fichier">
             <button class="btn-action" onclick="uploaderAnimation()">Importer</button>
           </div>
-
           <div class="animation-preview">
             <h4>Apercu</h4>
             <div id="preview-animation" class="preview-animation-box">
@@ -343,56 +416,50 @@
           <button class="btn-action" onclick="sauvegarderEvenement()">Sauvegarder</button>
         </div>
 
-        <!-- Panneau Fonctionnalites -->
-        <div class="admin-panneau" id="panneau-fonctionnalites">
+        <!-- Panneau Fonctions (toggles + email + booth + galerie + systeme) -->
+        <div class="admin-panneau" id="panneau-fonctions">
+          <h3>Modes photo</h3>
           <div class="toggle-groupe">
             <label class="toggle"><input type="checkbox" id="tog-photo-simple" checked><span class="toggle-slider"></span> Photo simple</label>
-            <label class="toggle"><input type="checkbox" id="tog-multi-shot"><span class="toggle-slider"></span> Multi-shot</label>
+            <label class="toggle"><input type="checkbox" id="tog-multi-shot"><span class="toggle-slider"></span> Pellicule (multi-shot)</label>
             <label class="toggle"><input type="checkbox" id="tog-filtres"><span class="toggle-slider"></span> Filtres</label>
             <label class="toggle"><input type="checkbox" id="tog-overlays"><span class="toggle-slider"></span> Overlays / Cadres</label>
             <label class="toggle"><input type="checkbox" id="tog-chroma-key"><span class="toggle-slider"></span> Chroma key (fond vert)</label>
+          </div>
+
+          <h3>Partage</h3>
+          <div class="toggle-groupe">
             <label class="toggle"><input type="checkbox" id="tog-impression"><span class="toggle-slider"></span> Impression</label>
             <label class="toggle"><input type="checkbox" id="tog-email"><span class="toggle-slider"></span> Email</label>
             <label class="toggle"><input type="checkbox" id="tog-qr-code"><span class="toggle-slider"></span> QR Code</label>
-            <label class="toggle"><input type="checkbox" id="tog-galerie"><span class="toggle-slider"></span> Galerie</label>
+            <label class="toggle"><input type="checkbox" id="tog-galerie"><span class="toggle-slider"></span> Galerie locale</label>
           </div>
-        </div>
 
-        <!-- Panneau Email -->
-        <div class="admin-panneau" id="panneau-email-admin">
+          <h3>Email SMTP</h3>
           <div class="champ"><label>Serveur SMTP</label><input type="text" id="admin-smtp-host" placeholder="smtp.gmail.com"></div>
           <div class="champ"><label>Port</label><input type="number" id="admin-smtp-port" value="587"></div>
           <div class="champ"><label>Utilisateur</label><input type="text" id="admin-smtp-user" placeholder="user@gmail.com"></div>
           <div class="champ"><label>Mot de passe</label><input type="password" id="admin-smtp-pass"></div>
           <div class="champ"><label>Expediteur</label><input type="text" id="admin-expediteur" placeholder="photobooth@event.com"></div>
-          <button class="btn-action" onclick="sauvegarderEmail()">Sauvegarder</button>
-        </div>
+          <button class="btn-action" onclick="sauvegarderEmail()">Sauvegarder email</button>
 
-        <!-- Panneau Galerie Live (Booth) -->
-        <div class="admin-panneau" id="panneau-booth-admin">
           <h3>Galerie Live</h3>
-          <p class="aide">Les photos sont envoyees en temps reel sur un site web. Les invites scannent le QR code sur l'ecran d'accueil.</p>
+          <p class="aide">Photos envoyees en temps reel. QR code + code sur l'ecran d'accueil.</p>
           <div class="champ">
-            <label class="toggle-label">
-              <span>Activer la galerie live</span>
-              <label class="toggle"><input type="checkbox" id="admin-booth-actif" onchange="sauvegarderBooth()"><span class="toggle-slider"></span></label>
-            </label>
+            <label class="toggle"><input type="checkbox" id="admin-booth-actif" onchange="sauvegarderBooth()"><span class="toggle-slider"></span> Galerie live active</label>
           </div>
           <div class="champ"><label>URL du serveur</label><input type="text" id="admin-booth-url" placeholder="https://booth.copydev.fr" value="https://booth.copydev.fr"></div>
           <div class="champ"><label>Cle API</label><input type="text" id="admin-booth-apikey" placeholder="booth-photobooth-2026" value="booth-photobooth-2026"></div>
           <div class="champ"><label>ID evenement</label><input type="text" id="admin-booth-eventid" placeholder="default" value="default"></div>
-          <div id="booth-status" class="champ">
+          <div class="champ">
             <label>Code invites : <span id="admin-booth-password" style="font-size:1.5rem;font-weight:bold;letter-spacing:4px">--</span></label>
           </div>
-          <button class="btn-action" onclick="sauvegarderBooth()">Sauvegarder</button>
+          <button class="btn-action" onclick="sauvegarderBooth()">Sauvegarder booth</button>
           <button class="btn-secondaire" onclick="regenererBoothPassword()">Nouveau code</button>
-        </div>
 
-        <!-- Panneau Galerie -->
-        <div class="admin-panneau" id="panneau-galerie-admin">
+          <h3>Galerie locale</h3>
           <div class="champ">
-            <label>Photos prises : <span id="admin-nb-photos">0</span></label>
-            <label>Exports : <span id="admin-nb-exports">0</span></label>
+            <label>Photos prises : <span id="admin-nb-photos">0</span> | Exports : <span id="admin-nb-exports">0</span></label>
           </div>
           <div class="champ">
             <label>URL galerie en ligne</label>
@@ -400,10 +467,9 @@
           </div>
           <button class="btn-action" onclick="sauvegarderGalerie()">Sauvegarder URL</button>
           <button class="btn-danger" onclick="confirmerViderGalerie()">Vider toute la galerie</button>
-        </div>
 
-        <!-- Panneau Systeme -->
-        <div class="admin-panneau" id="panneau-systeme">
+          <h3>Systeme</h3>
+          <button class="btn-action" onclick="location.reload()">Mettre a jour l'affichage</button>
           <button class="btn-danger" onclick="confirmerRedemarrage()">Redemarrer le systeme</button>
           <button class="btn-danger" onclick="confirmerExtinction()">Eteindre le systeme</button>
         </div>