Recherche partout (#68, chantier 2+3) : onglets, Tout voir sur place, focus, mise en page

frontend/recherche.css

@@ -33,3 +33,58 @@
 .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 #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: #3b82f6; font-weight: 700; }
+.rp-tab:focus-visible { outline: 2px solid #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; }