ObsiGate/frontend/recherche.css

/* Recherche partout (fusion #68) — classes préfixées .rp- pour éviter
 * toute collision avec les styles de l'hôte. Couleurs neutres héritées
 * autant que possible : la page reste lisible en thème clair et sombre. */
.rp-page { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
.rp-page h1 { font-size: 1.4rem; margin: 0 0 4px; }
.rp-hint { opacity: .7; margin: 0 0 16px; font-size: .9rem; }
.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 var(--border, #888); border-radius: 8px; background: inherit; color: inherit;
}
.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 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: var(--accent, #3b82f6); color: #fff;
  border-radius: 999px; padding: 1px 8px; min-width: 1.2em; text-align: center;
}
.rp-count:empty { display: none; }
.rp-all { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.rp-state { opacity: .75; margin: 8px 0; }
.rp-error { opacity: 1; }
.rp-item {
  display: block; padding: 8px 10px; border-radius: 8px;
  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 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; }

/* ---- 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 var(--border, #888); margin-bottom: 20px;
}
.rp-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 10px; margin-bottom: -1px; font: inherit; cursor: pointer;
  color: inherit; opacity: .7; white-space: nowrap;
}
.rp-tab:hover { opacity: 1; }
.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;
}
.rp-tab-count:empty { display: none; }
.rp-section[hidden] { display: none; }
.rp-all[hidden] { display: none; }

/* ---- TikTak : la page sort de la colonne sidebar (chantier 2+3).
 * Cause : recherche.html étend base.html sans layout_class, donc
 * .rp-page (enfant direct de .layout) tombait en auto-placement dans
 * la 2e colonne de la grille (largeur sidebar). La règle ci-dessous,
 * gardée par l'ancêtre .layout (TikTak seul), l'étend de la colonne 2
 * à la fin de la grille — juste à droite du rail d'icônes — sur toute
 * la largeur disponible, sans toucher aux autres pages (elles ne
 * portent pas .rp-page). En mobile (≤760 px, point de bascule TikTak),
 * la grille n'a qu'une colonne : la page la prend entièrement. */
.layout > .rp-page {
  grid-column: 2 / -1; max-width: none; min-width: 0; overflow-y: auto;
}
@media (max-width: 760px) {
  .layout > .rp-page { grid-column: 1 / -1; }
}

/* ---- ObsiGate : navigation statique de la page autonome (chantier
 * 2+3). La page /recherche est servie hors SPA (route avant le
 * catch-all) : elle reprend les classes de l'app (style.css :
 * .app-container, .header, .main-body, .sidebar, .content-wrapper,
 * .content-area) et cette navigation, calée sur les variables de
 * l'app, en guise de sidebar. Les vaults dynamiques restent dans
 * la SPA (voir le commentaire dans recherche.html). */
.rp-og-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.rp-og-nav a {
  display: block; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: inherit;
}
.rp-og-nav a:hover { background: rgba(127, 127, 127, .15); }
.rp-og-nav a[aria-current="page"] {
  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; }