From 78c514c78b0e2d55b3d39add954986227ea5846e Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Wed, 28 Oct 2026 15:59:13 -0400
Subject: [PATCH] recherche: decliner la barre et les accents selon le theme
 (defaut 4)

---
 frontend/recherche.css | 37 +++++++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/recherche.css b/frontend/recherche.css
index 1168700..b7e8940 100644
--- a/frontend/recherche.css
+++ b/frontend/recherche.css
@@ -7,17 +7,17 @@
 .rp-form { display: flex; gap: 8px; margin-bottom: 24px; }
 .rp-input {
   flex: 1; font: inherit; font-size: 1.05rem; padding: 10px 12px;
-  border: 1px solid #888; border-radius: 8px; background: inherit; color: inherit;
+  border: 1px solid var(--border, #888); border-radius: 8px; background: inherit; color: inherit;
 }
-.rp-input:focus { outline: 2px solid #3b82f6; outline-offset: 1px; }
+.rp-input:focus { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; }
 .rp-section { margin-bottom: 28px; }
 .rp-head {
   display: flex; align-items: baseline; gap: 10px;
-  border-bottom: 1px solid #888; padding-bottom: 6px; margin-bottom: 8px;
+  border-bottom: 1px solid var(--border, #888); padding-bottom: 6px; margin-bottom: 8px;
 }
 .rp-head h2 { font-size: 1.05rem; margin: 0; }
 .rp-count {
-  font-size: .8rem; font-weight: 700; background: #3b82f6; color: #fff;
+  font-size: .8rem; font-weight: 700; background: var(--accent, #3b82f6); color: #fff;
   border-radius: 999px; padding: 1px 8px; min-width: 1.2em; text-align: center;
 }
 .rp-count:empty { display: none; }
@@ -29,7 +29,7 @@
   text-decoration: none; color: inherit;
 }
 .rp-item:hover, .rp-item:focus { background: rgba(127, 127, 127, .15); outline: none; }
-.rp-item:focus-visible { outline: 2px solid #3b82f6; }
+.rp-item:focus-visible { outline: 2px solid var(--accent, #3b82f6); }
 .rp-title { display: block; font-weight: 600; }
 .rp-context { display: block; font-size: .8rem; opacity: .65; }
 .rp-snippet { display: block; font-size: .88rem; opacity: .85; margin-top: 2px; }
@@ -37,7 +37,7 @@
 /* ---- Onglets (chantier 2+3) : mêmes onglets sur les 4 hôtes. ---- */
 .rp-tabs {
   display: flex; gap: 4px; flex-wrap: wrap;
-  border-bottom: 1px solid #888; margin-bottom: 20px;
+  border-bottom: 1px solid var(--border, #888); margin-bottom: 20px;
 }
 .rp-tab {
   background: none; border: none; border-bottom: 2px solid transparent;
@@ -45,8 +45,8 @@
   color: inherit; opacity: .7; white-space: nowrap;
 }
 .rp-tab:hover { opacity: 1; }
-.rp-tab.active { opacity: 1; border-bottom-color: #3b82f6; font-weight: 700; }
-.rp-tab:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.rp-tab.active { opacity: 1; border-bottom-color: var(--accent, #3b82f6); font-weight: 700; }
+.rp-tab:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
 .rp-tab-count {
   font-size: .8rem; font-weight: 700; background: rgba(127, 127, 127, .25);
   border-radius: 999px; padding: 1px 7px; margin-left: 2px;
@@ -88,3 +88,24 @@
   background: rgba(127, 127, 127, .18); font-weight: 700;
 }
 .rp-og-note { opacity: .65; font-size: .85rem; padding: 8px 10px; margin: 8px 0 0; }
+
+/* ---- Thème (défaut 4) : la page suit le réglage ObsiGate. ----
+ * L'étape 1 (script synchrone en tête de recherche.html) pose
+ * data-theme = mode persisté ; l'étape 2 (themes.js) pose la palette
+ * complète en variables inline sur :root. Les règles .rp-* ci-dessus
+ * utilisent donc var(--border) / var(--accent) avec les anciennes
+ * valeurs en repli, et le reste hérite déjà du corps (style.css).
+ * color-scheme : les contrôles natifs (barres de défilement, champ
+ * de recherche) suivent le mode au lieu de celui de l'OS.
+ * Barre : draco-barre.css (fichier commun vendangé, NON modifié ici)
+ * ne connaît que [data-theme="dark"] ; sans les règles ci-dessous,
+ * sa media query prefers-color-scheme:dark imposerait une barre
+ * sombre sur une page claire (OS sombre + mode ObsiGate clair), et
+ * les modes high-contrast/sepia n'auraient aucune déclinaison.
+ * Les valeurs reprennent les défauts clairs de draco-barre.css et
+ * les générateurs _genHighContrast/_genSepia de themes.js. */
+[data-theme="dark"], [data-theme="high-contrast"] { color-scheme: dark; }
+[data-theme="light"], [data-theme="sepia"] { color-scheme: light; }
+[data-theme="light"] .draco-bar { --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3; --ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9; }
+[data-theme="high-contrast"] .draco-bar { --bg: #000000; --surface: #0a0a0a; --surface-2: #141414; --surface-3: #000000; --ink: #ffffff; --ink-2: #cccccc; --ink-3: #888888; --line: #444444; }
+[data-theme="sepia"] .draco-bar { --bg: #f5ecd5; --surface: #eee3c8; --surface-2: #e8dcc0; --surface-3: #f5ecd5; --ink: #3d2e1a; --ink-2: #6b5a3e; --ink-3: #9a8a6a; --line: #c8b890; }