fix(dashboard): hover infobulles, full-width layout, UX polish

- Fix doc tooltips: split CSS into <style type='text/tailwindcss'> for
  @apply directives + raw CSS for reliable doc panel rendering
- Convert doc panels from click-toggle to hover-based infobulles with
  arrow pointer, fade-in animation, and auto-dismiss on mobile
- Replace '?' icons with 'ⓘ' across all 11 templates (51 tooltips)
- Full-width layout: reduce padding on mobile (px-3), scale up on
  desktop (lg:px-5, xl:px-6) for maximum screen utilization
- Auto-collapse sidebar on narrow screens (<1024px)
- Keyboard shortcuts: Alt+1–9 for page navigation, Alt+B toggle sidebar
- Add LEGITIMATE_BROWSER filter button to detections page
- Sticky header with stronger blur (backdrop-blur-md)
- All 46 routes pass tests

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

services/dashboard/backend/templates/classify.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Classifier{% endblock %}
 {% block page_title %}
     Classification SOC
-    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
         <h4>Feedback analyste SOC</h4>
         <p>Classifiez les IPs pour entraîner le modèle XGBoost supervisé. Les labels sont utilisés au prochain cycle ML.</p>
         <p><strong>Workflow :</strong> 1. Consultez les IPs suggérées (non classifiées). 2. Classifiez-les. 3. Les labels alimentent XGBoost au prochain cycle.</p>
@@ -24,7 +24,7 @@
         <!-- Classification form -->
         <div class="section-card">
             <div class="section-header"><span class="section-title">Nouvelle classification
-                <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
                     <h4>Classifier une IP</h4>
                     <p>Saisissez une IP ou cliquez sur une suggestion. La classification est immédiatement enregistrée et sera utilisée par XGBoost au prochain cycle.</p>
                     <p class="doc-source">Table : soc_feedback</p>
@@ -57,7 +57,7 @@
             <!-- Suggested IPs -->
             <div class="section-card overflow-hidden">
                 <div class="section-header"><span class="section-title">IPs suggérées (non classifiées)
-                    <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                    <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
                         <h4>Suggestions de classification</h4>
                         <p>IPs détectées comme anomalies dans les 3 derniers jours qui n'ont pas encore de label SOC. Triées par score descendant.</p>
                         <p><strong>Action :</strong> Cliquez sur une IP pour la pré-remplir dans le formulaire, ou utilisez les boutons rapides.</p>
@@ -74,7 +74,7 @@
             <!-- Distribution chart -->
             <div class="section-card">
                 <div class="section-header"><span class="section-title">Répartition des classifications
-                    <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                    <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
                         <h4>Distribution des labels</h4>
                         <p>Ratio bot/légitime/suspect dans les labels SOC. Un bon ratio aide XGBoost à apprendre. Visez ≥100 labels par catégorie.</p>
                         <p class="doc-source">Source : soc_feedback GROUP BY classification</p>
@@ -88,7 +88,7 @@
     <!-- Recent classifications -->
     <div class="section-card overflow-hidden">
         <div class="section-header"><span class="section-title">Historique des classifications
-            <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+            <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
                 <h4>Classifications récentes</h4>
                 <p>Les 50 dernières classifications effectuées par les analystes SOC. Chaque label sera utilisé par XGBoost au prochain cycle ML.</p>
                 <p class="doc-source">Source : soc_feedback ORDER BY created_at DESC</p>