Galerie live booth.copydev.fr + icones agrandies + pellicule

- booth/: serveur Node.js galerie photo live avec auth par code 4 chiffres
- Backend: envoi auto des photos vers booth, endpoint QR dynamique
- Frontend: code + QR booth sur ecran accueil, icone pellicule pour multi-shot
- Icones mode agrandies (5rem)

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

frontend/css/style.css

@@ -249,6 +249,36 @@ html, body {
   font-size: 3rem;
 }
 
+.btn-mode .mode-icone-large {
+  font-size: 5rem;
+}
+
+/* === Booth info (code + QR sur accueil) === */
+.booth-info {
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  background: rgba(0,0,0,0.5);
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+}
+
+.booth-qr {
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+}
+
+.booth-code {
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: rgba(255,255,255,0.7);
+  letter-spacing: 4px;
+}
+
 /* === Capture / Preview live === */
 .preview-live {
   width: 100%;

frontend/index.html

@@ -24,6 +24,11 @@
       <div id="compteur-accueil" class="compteur-accueil cache">
         <span id="compteur-restant">400</span> / <span id="compteur-limite">400</span>
       </div>
+      <!-- Booth : code + QR en bas a gauche -->
+      <div id="booth-info" class="booth-info cache">
+        <img id="booth-qr" class="booth-qr" src="">
+        <span id="booth-code" class="booth-code"></span>
+      </div>
       <!-- Icone admin coin bas-droit -->
       <div id="btn-admin" class="btn-admin" onclick="ouvrirAdmin()">&#9881;</div>
     </section>
@@ -33,12 +38,12 @@
       <h2>Choisissez votre mode</h2>
       <div class="grille-modes">
         <button class="btn-mode" data-mode="simple">
-          <div class="mode-icone">&#128247;</div>
+          <div class="mode-icone mode-icone-large">&#128247;</div>
           <span>Photo</span>
         </button>
         <button class="btn-mode" data-mode="multi" id="btn-multi">
-          <div class="mode-icone">&#127924;</div>
-          <span>Multi-shot</span>
+          <div class="mode-icone mode-icone-large">&#127902;</div>
+          <span>Pellicule</span>
         </button>
       </div>
       <button class="btn-retour" onclick="allerA('accueil')">Retour</button>

frontend/js/app.js

@@ -14,6 +14,7 @@ async function init() {
   setupEcranAccueil();
   setupModes();
   setupOnglets();
+  chargerBoothInfo();
 }
 
 function appliquerConfig() {
@@ -209,6 +210,28 @@ function toggleVisible(id, visible) {
   }
 }
 
+async function chargerBoothInfo() {
+  const booth = config.booth || {};
+  const el = document.getElementById('booth-info');
+  if (!booth.actif || !booth.url) {
+    el.classList.add('cache');
+    return;
+  }
+  try {
+    const info = await apiGet('/api/booth/info');
+    if (info.password) {
+      document.getElementById('booth-code').textContent = info.password;
+      // QR code vers le site booth
+      const eventId = booth.event_id || 'default';
+      const qrUrl = `${booth.url}/${eventId}`;
+      document.getElementById('booth-qr').src = `/api/qr?url=${encodeURIComponent(qrUrl)}`;
+      el.classList.remove('cache');
+    }
+  } catch (e) {
+    el.classList.add('cache');
+  }
+}
+
 function afficherStatut(message, type = 'succes') {
   const el = document.getElementById('statut-partage');
   el.textContent = message;