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/detections.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Détections{% endblock %}
 {% block page_title %}
     Détections d'anomalies
-    <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>Table des détections</h4>
         <p>Toutes les sessions classées comme anomaliques par l'ensemble ML triple-voix (EIF + Autoencoder + XGBoost). Inclut les bots connus identifiés par dictionnaire.</p>
         <p><strong>Workflow :</strong> Filtrez par threat level → triez par score → cliquez sur une IP pour l'investiguer → classifiez via le bouton rapide.</p>
@@ -15,7 +15,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
         <div class="section-card">
             <div class="section-header"><span class="section-title">Par threat level
-                <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>Répartition des menaces</h4>
                     <p>CRITICAL = score très élevé + multi-signal. HIGH = score au-dessus du seuil. KNOWN_BOT = identifié par dictionnaire. Cliquez sur un segment pour filtrer.</p>
                     <p class="doc-source">Source : ml_detected_anomalies</p>
@@ -25,7 +25,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Top raisons
-                <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>Raisons de détection</h4>
                     <p>Motifs de déclenchement : score IF élevé, bot connu, Anubis DENY, etc. Aide à comprendre pourquoi une IP est détectée.</p>
                     <p class="doc-source">Source : ml_detected_anomalies.reason</p>
@@ -35,7 +35,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Top ASN détectés
-                <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>ASN des détections</h4>
                     <p>Autonomous Systems d'où proviennent les menaces. Les hébergeurs (OVH, Hetzner, DigitalOcean) sont souvent en tête car utilisés par les botnets.</p>
                     <p class="doc-source">Source : ml_detected_anomalies.asn_org</p>
@@ -53,6 +53,7 @@
             <button class="filter-btn" data-filter="MEDIUM">Medium</button>
             <button class="filter-btn" data-filter="KNOWN_BOT">Known Bot</button>
             <button class="filter-btn" data-filter="ANUBIS_DENY">Anubis</button>
+            <button class="filter-btn" data-filter="LEGITIMATE_BROWSER">Browser</button>
         </div>
         <div class="flex-1"></div>
         <input type="text" id="search-input" placeholder="Rechercher IP, host…"