recherche: appliquer le theme ObsiGate (defaut 4)

frontend/recherche.html

@@ -25,6 +25,46 @@
        comportements de la SPA et ne sont pas rejoués ici.
        Sidebar statique (navigation de l'app) : les vaults, tags et
        récents dynamiques vivent dans la SPA, pas sur cette page. -->
+       Thème (défaut 4) : le thème ObsiGate n'est PAS une préférence
+       serveur — il vit dans localStorage, lu par la SPA au démarrage
+       (frontend/js/ui.js initTheme : mode ; frontend/js/sync.js
+       init() -> themes.js initThemes : clé + mode). Étape 1 ci-dessous
+       (script synchrone en tête, avant les feuilles) : pose
+       data-theme = mode persisté (obsigate-theme-mode, repli
+       obsigate-theme historique quand il valait déjà un mode, sinon
+       'dark', le défaut SPA) pour que la première peinture soit déjà
+       dans le bon mode clair/sombre. Étape 2 en fin de page (module
+       différé) : initThemes() de themes.js applique la palette
+       complète — 16 thèmes intégrés, modes high-contrast/sepia
+       générés, thèmes personnalisés — via variables inline sur :root,
+       exactement comme la SPA. data-theme="dark" sur <html> n'est
+       plus que le repli sans JS. Aucun endpoint serveur, aucune
+       police externe ajoutée (la CSP stricte de /recherche et le
+       repli typographique système sont inchangés).
+  <script>
+    /* Thème ObsiGate, étape 1 (synchrone, avant les feuilles) : poser
+       data-theme = mode persisté AVANT la première peinture, sinon la
+       page flasherait en sombre puis basculerait. Sources lues :
+       'obsigate-theme-mode' (SPA modulaire, js/ui.js initTheme) puis,
+       à défaut, 'obsigate-theme' quand il vaut déjà un mode (valeur
+       historique de l'app monolithique) ; toute autre valeur — clé de
+       thème comme 'dracula', mode inconnu, stockage indisponible —
+       retombe sur 'dark', le défaut SPA. La palette complète (clé)
+       est appliquée à l'étape 2 en fin de page. */
+    (function () {
+      var MODES = ['dark', 'light', 'high-contrast', 'sepia'];
+      var mode = null;
+      try { mode = window.localStorage.getItem('obsigate-theme-mode'); } catch (e) { mode = null; }
+      if (MODES.indexOf(mode) === -1) {
+        try {
+          var legacy = window.localStorage.getItem('obsigate-theme');
+          if (MODES.indexOf(legacy) !== -1) { mode = legacy; }
+        } catch (e) { /* stockage indisponible : repli sombre */ }
+      }
+      if (MODES.indexOf(mode) === -1) { mode = 'dark'; }
+      document.documentElement.setAttribute('data-theme', mode);
+    })();
+  </script>
   <link rel="stylesheet" href="/static/style.css">
   <link rel="stylesheet" href="/static/draco-barre.css">
   <link rel="stylesheet" href="/static/recherche.css">
@@ -149,5 +189,31 @@
     </div>
   </div>
   <script src="/static/js/recherche.js"></script>
+  <script type="module">
+    /* Thème ObsiGate, étape 2 (différée) : appliquer la palette
+       complète via le moteur de thèmes de la SPA (themes.js), seule
+       source de vérité des 16 thèmes, des modes high-contrast/sepia
+       et des thèmes personnalisés — aucune table recopiée ici.
+       initThemes() relit localStorage et pose les variables inline
+       sur :root + data-theme = mode, comme au démarrage de la SPA
+       (js/sync.js init). Garde historique : si 'obsigate-theme'
+       vaut encore un mode ('dark'/'light', app monolithique) sans
+       'obsigate-theme-mode', on garde le mode de l'étape 1 —
+       initThemes() y verrait une clé inconnue et retomberait sur
+       'spark'/'dark'. Échec de chargement silencieux : la page
+       garde alors le mode de l'étape 1, recherche.js n'est pas
+       touché (fichier partagé avec les 3 autres hôtes). */
+    (function () {
+      var saved = null;
+      var savedMode = null;
+      try { saved = window.localStorage.getItem('obsigate-theme'); } catch (e) {}
+      try { savedMode = window.localStorage.getItem('obsigate-theme-mode'); } catch (e) {}
+      if (savedMode === null && (saved === 'dark' || saved === 'light')) { return; }
+      import('/static/js/themes.js').then(function (mod) {
+        if (mod && typeof mod.initThemes === 'function') { mod.initThemes(); }
+      }).catch(function () {});
+    })();
+  </script>
+
 </body>
 </html>