Resilience : ecran pause, reconnexion WS auto, watchdog systemd, WiFi monitor

- WebSocket : reconnexion avec backoff exponentiel au lieu de reload page
- Ecran pause avec tasse de cafe quand le backend est injoignable
- Endpoint /api/health pour monitoring externe
- Watchdog systemd (sd_notify READY=1 + WATCHDOG=1 toutes les 10s)
- Service systemd durci (Type=notify, WatchdogSec=30, KillMode, limites)
- WiFi watchdog : script + timer systemd, verifie la gateway toutes les 60s
- Destinations : fallback url_tunnel (WireGuard) en priorite

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/index.html

@@ -373,6 +373,7 @@
           <button class="onglet" data-onglet="personnalisation">Personnalisation</button>
           <button class="onglet" data-onglet="evenement">Evenement</button>
           <button class="onglet" data-onglet="fonctions">Fonctions</button>
+          <button class="onglet" data-onglet="eclairage" onclick="demarrerEclairageLive()">Eclairage</button>
           <button class="onglet" data-onglet="infos" onclick="chargerInfosSysteme()">Infos</button>
         </div>
 
@@ -691,6 +692,19 @@
         </div>
 
         <!-- Panneau Infos systeme -->
+        <div class="admin-panneau" id="panneau-eclairage">
+          <div style="display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap">
+            <div style="flex:1;min-width:280px">
+              <img id="eclairage-preview" style="width:100%;border-radius:8px;background:#111" alt="Preview">
+            </div>
+            <div style="flex:0 0 200px;text-align:center">
+              <div id="eclairage-score-box" style="font-size:3rem;font-weight:800;padding:1.5rem;border-radius:16px;background:#222;margin-bottom:1rem">--</div>
+              <div id="eclairage-action" style="font-size:1.2rem;font-weight:600;margin-bottom:.5rem">--</div>
+              <div id="eclairage-visages" style="font-size:.9rem;color:#aaa">--</div>
+            </div>
+          </div>
+        </div>
+
         <div class="admin-panneau" id="panneau-infos">
           <div class="infos-systeme-header">
             <h3>Informations systeme</h3>
@@ -772,9 +786,26 @@
 
   </div>
 
-  <script src="/js/websocket.js?v=3"></script>
-  <script src="/js/app.js?v=6"></script>
-  <script src="/js/camera.js?v=13"></script>
+  <!-- Ecran de pause (deconnexion backend) -->
+  <div id="ecran-pause" style="display:none;position:fixed;inset:0;z-index:9999;background:#0a0a0f;flex-direction:column;align-items:center;justify-content:center;text-align:center">
+    <div style="font-size:6rem;animation:pause-bob 2s ease-in-out infinite">&#9749;</div>
+    <h1 style="color:#fff;font-size:2.2rem;margin:1rem 0 .5rem;font-weight:700">Petite pause...</h1>
+    <p style="color:#888;font-size:1.2rem;max-width:400px;line-height:1.5">Le photobooth revient dans un instant.<br>Pas de panique, on s'occupe de tout !</p>
+    <div style="margin-top:2rem;display:flex;gap:8px">
+      <span class="pause-dot" style="width:12px;height:12px;border-radius:50%;background:#e91e63;animation:pause-dot .6s ease-in-out infinite"></span>
+      <span class="pause-dot" style="width:12px;height:12px;border-radius:50%;background:#e91e63;animation:pause-dot .6s ease-in-out .2s infinite"></span>
+      <span class="pause-dot" style="width:12px;height:12px;border-radius:50%;background:#e91e63;animation:pause-dot .6s ease-in-out .4s infinite"></span>
+    </div>
+    <p id="pause-status" style="color:#555;font-size:.85rem;margin-top:2rem">Reconnexion en cours...</p>
+  </div>
+  <style>
+    @keyframes pause-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    @keyframes pause-dot { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
+  </style>
+
+  <script src="/js/websocket.js?v=16"></script>
+  <script src="/js/app.js?v=15"></script>
+  <script src="/js/camera.js?v=15"></script>
   <script src="/js/effects.js?v=4"></script>
   <script src="/js/gallery.js?v=3"></script>
   <script src="/js/share.js?v=7"></script>