Logo SikaPics local + QR 180px + clavier virtuel email + QR conditionnel booth

- Logo SikaPics servi localement (/assets/logos/sikapics.png)
- QR code accueil agrandi a 180px
- Clavier AZERTY virtuel integre pour saisie email (tactile)
- Raccourcis @gmail, @hotmail, .com, .fr
- QR partage: affiche seulement si booth actif, lien vers galerie live
- Bouton QR visible si booth OU qr_code active

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

frontend/css/style.css

@@ -270,9 +270,9 @@ html, body {
 }
 
 .booth-qr {
-  width: 120px;
+  width: 180px;
-  height: 120px;
+  height: 180px;
-  border-radius: 8px;
+  border-radius: 10px;
 }
 
 .booth-code {
@@ -1206,6 +1206,48 @@ h3 {
   border-radius: 3px;
 }
 
+/* === Clavier virtuel email === */
+.clavier-virtuel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 0.5rem;
+  max-width: 600px;
+}
+
+.clavier-ligne {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+}
+
+.clavier-ligne button {
+  min-width: 40px;
+  height: 44px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(255,255,255,0.12);
+  color: var(--texte);
+  font-size: 1.1rem;
+  cursor: pointer;
+  flex: 1;
+  max-width: 52px;
+}
+
+.clavier-ligne button:active {
+  background: var(--primaire);
+}
+
+.clavier-wide {
+  min-width: 70px !important;
+  max-width: 120px !important;
+  font-size: 0.9rem !important;
+}
+
+.clavier-speciales {
+  gap: 8px;
+}
+
 /* === Wizard === */
 .wizard-header {
   position: absolute;

frontend/css/themes.css

@@ -57,10 +57,10 @@
 [data-theme="sikapics"] #nom-evenement::before {
   content: '';
   display: block;
-  width: 180px;
+  width: 250px;
-  height: 60px;
+  height: 80px;
-  margin: 0 auto 1rem;
+  margin: 0 auto 1.5rem;
-  background-image: url('https://sikapics.com/wp-content/uploads/2024/03/sikapics-logo-sans-fond.png');
+  background-image: url('/assets/logos/sikapics.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;

frontend/index.html

@@ -113,10 +113,69 @@
         <button class="btn-secondaire" onclick="fermerImpression()">Annuler</button>
       </div>
       <div id="form-email" class="form-email cache">
-        <input type="email" id="input-email" placeholder="votre@email.com" autocomplete="off">
+        <input type="email" id="input-email" placeholder="votre@email.com" autocomplete="off" readonly>
+        <div class="clavier-virtuel" id="clavier-email">
+          <div class="clavier-ligne">
+            <button onclick="clavierTape('1')">1</button>
+            <button onclick="clavierTape('2')">2</button>
+            <button onclick="clavierTape('3')">3</button>
+            <button onclick="clavierTape('4')">4</button>
+            <button onclick="clavierTape('5')">5</button>
+            <button onclick="clavierTape('6')">6</button>
+            <button onclick="clavierTape('7')">7</button>
+            <button onclick="clavierTape('8')">8</button>
+            <button onclick="clavierTape('9')">9</button>
+            <button onclick="clavierTape('0')">0</button>
+          </div>
+          <div class="clavier-ligne">
+            <button onclick="clavierTape('a')">a</button>
+            <button onclick="clavierTape('z')">z</button>
+            <button onclick="clavierTape('e')">e</button>
+            <button onclick="clavierTape('r')">r</button>
+            <button onclick="clavierTape('t')">t</button>
+            <button onclick="clavierTape('y')">y</button>
+            <button onclick="clavierTape('u')">u</button>
+            <button onclick="clavierTape('i')">i</button>
+            <button onclick="clavierTape('o')">o</button>
+            <button onclick="clavierTape('p')">p</button>
+          </div>
+          <div class="clavier-ligne">
+            <button onclick="clavierTape('q')">q</button>
+            <button onclick="clavierTape('s')">s</button>
+            <button onclick="clavierTape('d')">d</button>
+            <button onclick="clavierTape('f')">f</button>
+            <button onclick="clavierTape('g')">g</button>
+            <button onclick="clavierTape('h')">h</button>
+            <button onclick="clavierTape('j')">j</button>
+            <button onclick="clavierTape('k')">k</button>
+            <button onclick="clavierTape('l')">l</button>
+            <button onclick="clavierTape('m')">m</button>
+          </div>
+          <div class="clavier-ligne">
+            <button onclick="clavierTape('w')">w</button>
+            <button onclick="clavierTape('x')">x</button>
+            <button onclick="clavierTape('c')">c</button>
+            <button onclick="clavierTape('v')">v</button>
+            <button onclick="clavierTape('b')">b</button>
+            <button onclick="clavierTape('n')">n</button>
+            <button onclick="clavierTape('@')">@</button>
+            <button onclick="clavierTape('.')">.</button>
+            <button onclick="clavierTape('-')">-</button>
+            <button onclick="clavierTape('_')">_</button>
+          </div>
+          <div class="clavier-ligne clavier-speciales">
+            <button class="clavier-wide" onclick="clavierEffacer()">&#9003;</button>
+            <button class="clavier-wide" onclick="clavierTape('@gmail.com')">@gmail</button>
+            <button class="clavier-wide" onclick="clavierTape('@hotmail.com')">@hotmail</button>
+            <button class="clavier-wide" onclick="clavierTape('.com')">.com</button>
+            <button class="clavier-wide" onclick="clavierTape('.fr')">.fr</button>
+          </div>
+        </div>
+        <div style="display:flex;gap:1rem;margin-top:0.5rem">
           <button class="btn-action" onclick="envoyerEmail()">Envoyer</button>
           <button class="btn-secondaire" onclick="fermerEmail()">Annuler</button>
         </div>
+      </div>
       <div id="zone-qr" class="zone-qr cache">
         <img id="img-qr" src="" alt="QR Code">
       </div>

frontend/js/app.js

@@ -39,7 +39,8 @@ function appliquerConfig() {
   toggleVisible('btn-multi', fonc.multi_shot);
   toggleVisible('btn-imprimer', fonc.impression);
   toggleVisible('btn-email', fonc.email);
-  toggleVisible('btn-qr', fonc.qr_code);
+  const boothActif = config.booth?.actif;
+  toggleVisible('btn-qr', fonc.qr_code || boothActif);
 
   // Media d'accueil (video/gif en boucle)
   appliquerMediaAccueil(event.media_accueil);

frontend/js/share.js

@@ -35,7 +35,7 @@ async function lancerImpression() {
 
 function ouvrirEmail() {
   document.getElementById('form-email').classList.remove('cache');
-  document.getElementById('input-email').focus();
+  document.getElementById('input-email').value = '';
 }
 
 function fermerEmail() {
@@ -43,6 +43,16 @@ function fermerEmail() {
   document.getElementById('input-email').value = '';
 }
 
+function clavierTape(car) {
+  const input = document.getElementById('input-email');
+  input.value += car;
+}
+
+function clavierEffacer() {
+  const input = document.getElementById('input-email');
+  input.value = input.value.slice(0, -1);
+}
+
 async function envoyerEmail() {
   const email = document.getElementById('input-email').value.trim();
   if (!email || !photoFinale) return;
@@ -62,6 +72,13 @@ async function afficherQR() {
   zone.classList.toggle('cache');
 
   if (!zone.classList.contains('cache')) {
+    const booth = config.booth || {};
+    if (booth.actif && booth.url) {
+      // QR vers la galerie live
+      const eventId = booth.event_id || 'default';
+      const qrUrl = `${booth.url}/${eventId}`;
+      document.getElementById('img-qr').src = `/api/qr?url=${encodeURIComponent(qrUrl)}`;
+    } else {
       const resultat = await apiGet('/api/qr/galerie');
       if (resultat.chemin) {
         document.getElementById('img-qr').src = resultat.chemin;
@@ -70,4 +87,5 @@ async function afficherQR() {
         zone.classList.add('cache');
       }
     }
+  }
 }