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

@@ -23,7 +23,7 @@
             }
         }
     </script>
-    <style>
+    <style type="text/tailwindcss">
         body { font-family: 'Inter', system-ui, sans-serif; }
         /* ── Threat badges ── */
         .threat-critical { color: #ef4444; font-weight: 700; }
@@ -56,21 +56,51 @@
         .section-title { @apply text-sm font-semibold text-gray-200 flex items-center gap-2; }
         .section-body { @apply p-5; }
         /* ── Sidebar ── */
+        .nav-item { @apply flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800/60 transition-colors text-sm cursor-pointer; }
+        .nav-item.active { @apply bg-brand-600/20 text-brand-400 border-l-2 border-brand-500; }
+        .nav-group-title { @apply text-[10px] uppercase tracking-widest text-gray-600 px-3 pt-4 pb-1; }
+    </style>
+    <style>
+        /* ── Raw CSS (no @apply) for reliable rendering ── */
         .sidebar { width: 220px; transition: width 0.2s ease; }
         .sidebar.collapsed { width: 56px; }
         .sidebar.collapsed .nav-text { display: none; }
         .sidebar.collapsed .nav-group-title { display: none; }
         .sidebar.collapsed .sidebar-logo-text { display: none; }
-        .nav-item { @apply flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800/60 transition-colors text-sm cursor-pointer; }
-        .nav-item.active { @apply bg-brand-600/20 text-brand-400 border-l-2 border-brand-500; }
-        .nav-group-title { @apply text-[10px] uppercase tracking-widest text-gray-600 px-3 pt-4 pb-1; }
-        /* ── Doc tooltips ── */
-        .doc-btn { @apply inline-flex items-center justify-center w-5 h-5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-gray-700 transition-colors cursor-help text-xs; }
-        .doc-panel { @apply hidden absolute z-50 w-80 p-4 bg-gray-800 border border-gray-700 rounded-xl shadow-2xl text-xs text-gray-300 leading-relaxed; }
-        .doc-panel.show { @apply block; }
-        .doc-panel h4 { @apply text-white font-semibold text-sm mb-2; }
-        .doc-panel p { @apply mb-2; }
-        .doc-panel .doc-source { @apply text-gray-500 italic mt-2 pt-2 border-t border-gray-700; }
+
+        /* ── Infobulles (hover tooltips) ── */
+        .doc-btn {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 16px; height: 16px; border-radius: 50%; font-size: 10px;
+            color: #4b5563; cursor: help; transition: all 0.15s;
+            vertical-align: middle; margin-left: 4px; flex-shrink: 0;
+        }
+        .doc-btn:hover { color: #d1d5db; background: #374151; }
+        .doc-panel {
+            display: none; position: absolute; z-index: 60;
+            top: calc(100% + 10px); right: -8px; width: 300px;
+            padding: 12px 14px; background: #111827; border: 1px solid #374151;
+            border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,0.6);
+            font-size: 11px; line-height: 1.6; color: #d1d5db;
+            pointer-events: auto;
+        }
+        .doc-panel::before {
+            content: ''; position: absolute; top: -5px; right: 14px;
+            width: 10px; height: 10px; background: #111827;
+            border-left: 1px solid #374151; border-top: 1px solid #374151;
+            transform: rotate(45deg);
+        }
+        .doc-panel h4 { color: white; font-weight: 600; font-size: 12px; margin: 0 0 6px; }
+        .doc-panel p { margin: 0 0 5px; }
+        .doc-panel .doc-source { color: #6b7280; font-style: italic; margin-top: 6px; padding-top: 6px; border-top: 1px solid #1f2937; font-size: 10px; }
+        /* Hover: show on parent hover */
+        .relative:has(> .doc-btn):hover > .doc-panel,
+        .doc-panel.show {
+            display: block; animation: ttIn 0.12s ease-out;
+        }
+        /* Mobile: keep tap toggle via JS */
+        @keyframes ttIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
+
         /* ── Animations ── */
         @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
         .animate-in { animation: fadeUp 0.3s ease-out both; }
@@ -156,14 +186,14 @@
     <!-- ═══ Main Content ═══ -->
     <div id="main-wrap" class="flex-1 min-h-screen" style="margin-left:220px; transition: margin-left 0.2s ease;">
         <!-- Page header -->
-        <header class="sticky top-0 z-40 bg-gray-950/80 backdrop-blur border-b border-gray-800">
-            <div class="flex items-center h-12 px-6">
-                <h1 class="text-base font-semibold text-gray-100">{% block page_title %}{% endblock %}</h1>
+        <header class="sticky top-0 z-40 bg-gray-950/90 backdrop-blur-md border-b border-gray-800">
+            <div class="flex items-center h-12 px-4 lg:px-6">
+                <h1 class="text-sm lg:text-base font-semibold text-gray-100 truncate">{% block page_title %}{% endblock %}</h1>
                 <div class="flex-1"></div>
                 {% block header_actions %}{% endblock %}
             </div>
         </header>
-        <main class="px-6 py-5">
+        <main class="px-3 py-4 lg:px-5 lg:py-5 xl:px-6">
             {% block content %}{% endblock %}
         </main>
     </div>
@@ -176,6 +206,17 @@
             sb.classList.toggle('collapsed');
             mw.style.marginLeft = sb.classList.contains('collapsed') ? '56px' : '220px';
         }
+        // Auto-collapse on narrow screens
+        if (window.innerWidth < 1024) toggleSidebar();
+
+        // ── Keyboard shortcuts ──
+        document.addEventListener('keydown', e => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
+            const routes = {'1':'/',  '2':'/detections', '3':'/scores', '4':'/campaigns',
+                            '5':'/traffic', '6':'/network', '7':'/features', '8':'/models', '9':'/classify'};
+            if (e.altKey && routes[e.key]) { e.preventDefault(); window.location = routes[e.key]; }
+            if (e.key === 'b' && e.altKey) { e.preventDefault(); toggleSidebar(); }
+        });
 
         // ── Clock ──
         function updateClock() {
@@ -184,11 +225,16 @@
         }
         updateClock(); setInterval(updateClock, 1000);
 
-        // ── Doc tooltip system ──
+        // ── Doc tooltip (mobile tap fallback) ──
         function docToggle(btn) {
             const panel = btn.nextElementSibling;
             document.querySelectorAll('.doc-panel.show').forEach(p => { if (p !== panel) p.classList.remove('show'); });
             panel.classList.toggle('show');
+            // Auto-dismiss after 8s on mobile
+            if (panel.classList.contains('show')) {
+                clearTimeout(panel._timer);
+                panel._timer = setTimeout(() => panel.classList.remove('show'), 8000);
+            }
         }
         document.addEventListener('click', e => {
             if (!e.target.closest('.doc-btn') && !e.target.closest('.doc-panel'))
@@ -314,9 +360,9 @@
             ).join('');
         }
 
-        // ── Doc helper: generates a (?) button + panel ──
+        // ── Doc helper: generates an ⓘ tooltip button + panel ──
         function docHTML(title, body, source) {
-            return `<span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn" aria-label="Aide">?</button><div class="doc-panel"><h4>${escapeHtml(title)}</h4>${body}<p class="doc-source">Source : ${escapeHtml(source)}</p></div></span>`;
+            return `<span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn" aria-label="Aide">ⓘ</button><div class="doc-panel"><h4>${escapeHtml(title)}</h4>${body}<p class="doc-source">Source : ${escapeHtml(source)}</p></div></span>`;
         }
     </script>
     {% block scripts %}{% endblock %}

services/dashboard/backend/templates/campaigns.html

@@ -74,7 +74,7 @@
                 <span class="section-title">
                     <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="8" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="7" cy="18" r="2"/><circle cx="18" cy="16" r="2.5"/></svg>
                     Carte des clusters
-                    <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>Scatter — Score vs Vélocité</h4>
                         <p>Chaque bulle = une IP. Position : score d'anomalie (X) vs vitesse de requêtes (Y).
                         Taille = nombre de hits. Couleur = campagne.</p>
@@ -96,7 +96,7 @@
                 <span class="section-title">
                     <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                     Graphe de liens
-                    <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>Graphe réseau inter-campagnes</h4>
                         <p>Nœuds = IPs anomales, Arêtes = JA4 partagé au sein d'une campagne.
                         Couleur du nœud = campagne. Taille = nombre de hits.</p>

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>

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…"

services/dashboard/backend/templates/features.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Features ML{% endblock %}
 {% block page_title %}
     Features ML
-    <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>Exploration des features</h4>
         <p>Visualisez les 72 features ML extraites : comportementales (velocity, fuzzing), réseau (port_density, JA4), et thesis §5 (entropie, cadence, drift).</p>
         <p><strong>Radar :</strong> Compare les profils ISP (humain) vs datacenter (bot). <strong>Scatter :</strong> Identifiez visuellement les clusters anormaux.</p>
@@ -16,7 +16,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div class="section-card">
             <div class="section-header"><span class="section-title">Profil Humain vs Bot (Radar)
-                <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>Comparaison ISP vs Datacenter</h4>
                     <p>Profil moyen des sessions ISP (humaines) vs sessions datacenter (bots potentiels). Les axes sont les features ML normalisées.</p>
                     <p><strong>Interprétation :</strong> Plus la zone rouge dépasse la verte, plus la feature est discriminante. hit_velocity, fuzzing_index et post_ratio sont typiquement les plus discriminants.</p>
@@ -27,7 +27,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Importance des features (Variance)
-                <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>Feature importance</h4>
                     <p>Variance inter-classe (ISP vs datacenter) de chaque feature. Les features à haute variance discriminent le mieux bots et humains.</p>
                     <p><strong>Usage :</strong> Les features en tête sont les plus utiles pour le modèle EIF. Celles à variance nulle sont élaguées automatiquement.</p>
@@ -41,7 +41,7 @@
     <!-- Row 2: Scatter full-width -->
     <div class="section-card">
         <div class="section-header"><span class="section-title">Scatter — Hit Velocity vs Fuzzing Index
-            <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>Scatter bidimensionnel</h4>
                 <p>Chaque point = une session IP. X = cadence de requêtes, Y = diversité des paths. Les clusters séparés du groupe principal sont des anomalies.</p>
                 <p><strong>Action :</strong> Cliquez sur un point pour ouvrir la page IP détail.</p>

services/dashboard/backend/templates/ip_detail.html

@@ -31,7 +31,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div class="section-card">
             <div class="section-header"><span class="section-title">Profil comportemental
-                <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>Radar comportemental</h4>
                     <p>Compare cette IP aux profils moyens ISP (vert) et datacenter/bot (rouge). Les axes sont normalisés 0→1.</p>
                     <p><strong>Interprétation :</strong> Un profil proche du rouge indique un comportement bot. hit_velocity élevé + fuzzing élevé = scraping agressif.</p>
@@ -42,7 +42,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Scores ML dans le temps
-                <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>Historique des scores</h4>
                     <p>Évolution du score ML normalisé sur les derniers cycles. Un score stable élevé = bot persistant. Un pic soudain = changement de comportement.</p>
                     <p class="doc-source">Source : ml_all_scores</p>
@@ -55,7 +55,7 @@
     <!-- Detections -->
     <div class="section-card overflow-hidden">
         <div class="section-header"><span class="section-title">Détections
-            <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>Historique des détections</h4>
                 <p>Chaque ligne = une session classée comme anormale. Le score combiné utilise l'ensemble triple-voix (EIF + AE + XGBoost).</p>
                 <p class="doc-source">Source : ml_detected_anomalies</p>
@@ -71,7 +71,7 @@
     <!-- AI Features grid -->
     <div class="section-card overflow-hidden" id="features-section" style="display:none">
         <div class="section-header"><span class="section-title">Features AI (dernière fenêtre)
-            <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>Features ML détaillées</h4>
                 <p>72 features extraites : velocity, fuzzing, entropie, ratios, métriques TLS, etc. Valeurs élevées en rouge indiquent un comportement suspect.</p>
                 <p class="doc-source">Source : view_ai_features_1h</p>
@@ -83,7 +83,7 @@
     <!-- HTTP Logs -->
     <div class="section-card overflow-hidden">
         <div class="section-header"><span class="section-title">Requêtes HTTP récentes (100 max)
-            <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>Logs HTTP bruts</h4>
                 <p>Dernières requêtes de cette IP. Cherchez des patterns : scraping séquentiel, POST répétés, paths suspects, absence de referer.</p>
                 <p class="doc-source">Source : http_logs</p>
@@ -99,7 +99,7 @@
     <!-- Resource cascade -->
     <div class="section-card overflow-hidden" id="cascade-section" style="display:none">
         <div class="section-header"><span class="section-title">Cascade de ressources
-            <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>Analyse de cascade</h4>
                 <p>Détection de navigateurs headless : un vrai navigateur charge une page HTML puis ses sous-ressources (CSS, JS, images) avec un délai croissant. Un bot ne charge souvent que la page principale.</p>
                 <p><strong>Indicateurs :</strong> page_count=1 + max_sub=0 = bot probable. avg_sub_delay très bas = headless rapide.</p>

services/dashboard/backend/templates/models.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Modèles{% endblock %}
 {% block page_title %}
     Modèles ML
-    <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>Monitoring des modèles ML</h4>
         <p>Ensemble triple-voix : Extended Isolation Forest (EIF) + Autoencoder (AE) + XGBoost supervisé.</p>
         <p><strong>Cycle :</strong> Toutes les 30 min, le bot-detector ré-entraîne si une dérive est détectée (≥95% features). Les anciens modèles restent en cache.</p>
@@ -26,7 +26,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
         <div class="section-card lg:col-span-2">
             <div class="section-header"><span class="section-title">Volume de scoring
-                <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>Timeline de scoring</h4>
                     <p>Nombre de sessions scorées par heure et par modèle. La courbe orange montre le score moyen d'anomalie.</p>
                     <p><strong>Interprétation :</strong> Un creux soudain indique un problème de pipeline. Un pic de score moyen = vague d'attaque.</p>
@@ -37,7 +37,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Répartition menaces
-                <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>Menaces par modèle</h4>
                     <p>Répartition des niveaux de menace (NORMAL, HIGH, CRITICAL, KNOWN_BOT, LEGITIMATE_BROWSER) par modèle.</p>
                     <p class="doc-source">Source : ml_all_scores GROUP BY model_name, threat_level</p>
@@ -50,7 +50,7 @@
     <!-- Score avg timeline (anomaly rate) -->
     <div class="section-card">
         <div class="section-header"><span class="section-title">Taux d'anomalie horaire
-            <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>Anomaly rate over time</h4>
                 <p>Pourcentage de sessions classées HIGH/CRITICAL par heure. Les barres montrent le volume, la ligne le taux.</p>
                 <p><strong>Seuil d'alerte :</strong> Un taux > 10% prolongé mérite investigation.</p>
@@ -63,7 +63,7 @@
     <!-- Scoring stats table -->
     <div class="section-card overflow-hidden">
         <div class="section-header"><span class="section-title">Statistiques de scoring (7 jours)
-            <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ésumé par modèle</h4>
                 <p>Sessions scorées, période active et dernière activité pour chaque modèle. Complet = L3→L7 corrélé, Applicatif = L7 seul.</p>
                 <p class="doc-source">Source : ml_all_scores GROUP BY model_name</p>
@@ -79,7 +79,7 @@
     <!-- Model metadata cards -->
     <div class="section-card overflow-hidden">
         <div class="section-header"><span class="section-title">Versions des modèles
-            <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>Métadonnées des modèles</h4>
                 <p>Chaque fichier .json dans /data/models/ décrit un modèle entraîné : version, algorithme, paramètres, métriques de validation.</p>
                 <p><strong>Gate de validation :</strong> Un modèle n'est utilisé que si val_anomaly_rate &lt; 5% et val_mean_score est raisonnable.</p>

services/dashboard/backend/templates/network.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Analyse Réseau{% endblock %}
 {% block page_title %}
     Analyse Réseau
-    <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>Analyse réseau</h4>
         <p>Vue complète de l'infrastructure réseau : ASN, pays, fingerprints JA4, rotation de fingerprints, brute-force et menaces persistantes.</p>
         <p><strong>Workflow :</strong> Identifiez les ASN suspects → vérifiez la rotation JA4 → contrôlez le brute-force → investiguez les IPs récurrentes.</p>
@@ -25,7 +25,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div class="section-card">
             <div class="section-header"><span class="section-title">Treemap ASN
-                <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>Treemap ASN</h4>
                     <p>Taille = nombre de sessions. Regroupé par type : <span class="text-green-400">ISP</span> (résidentiel), <span class="text-red-400">Datacenter</span>, <span class="text-orange-400">Hosting</span>, <span class="text-cyan-400">CDN</span>.</p>
                     <p><strong>Action :</strong> Un ASN datacenter avec beaucoup de sessions mérite investigation.</p>
@@ -36,7 +36,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Pays → Type ASN
-                <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>Sunburst géographique</h4>
                     <p>Niveau 1 : pays. Niveau 2 : type d'ASN. Identifiez les pays avec forte proportion datacenter.</p>
                     <p class="doc-source">Source : view_ai_features_1h</p>
@@ -53,7 +53,7 @@
             <div class="section-header"><span class="section-title">
                 <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                 Rotation JA4 (évasion TLS)
-                <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>Rotation de fingerprints JA4</h4>
                     <p>IPs utilisant plusieurs fingerprints TLS distinctes sur une fenêtre horaire. Indique une tentative d'évasion de détection (rotation de client TLS).</p>
                     <p><strong>Seuil critique :</strong> ≥ 3 JA4 distincts par IP/host/heure.</p>
@@ -73,7 +73,7 @@
             <div class="section-header"><span class="section-title">
                 <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                 Brute-force / Credential stuffing
-                <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>Détection brute-force</h4>
                     <p>IPs envoyant ≥10 requêtes POST par host sur 24h. Indique du credential stuffing ou du brute-force de formulaires.</p>
                     <p class="doc-source">Source : view_form_bruteforce_detected</p>
@@ -96,7 +96,7 @@
             <div class="section-header"><span class="section-title">
                 <svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                 Menaces persistantes
-                <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>IPs récurrentes</h4>
                     <p>IPs détectées sur plusieurs fenêtres horaires. Récurrence élevée = acteur persistant. Le score indique le pire score observé.</p>
                     <p class="doc-source">Source : view_ip_recurrence</p>
@@ -113,7 +113,7 @@
         <!-- JA4 Fingerprints -->
         <div class="lg:col-span-2 section-card">
             <div class="section-header"><span class="section-title">Empreintes JA4
-                <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>Fingerprints TLS (JA4)</h4>
                     <p>Chaque combinaison unique de paramètres TLS génère un hash JA4. Les navigateurs courants partagent des fingerprints connues.</p>
                     <p><strong>Indicateurs :</strong> Velocity élevée + browser score bas = bot probable.</p>

services/dashboard/backend/templates/overview.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Overview{% endblock %}
 {% block page_title %}
     Centre de commande
-    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn" aria-label="Aide">?</button><div class="doc-panel">
+    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn" aria-label="Aide">ⓘ</button><div class="doc-panel">
         <h4>Centre de commande SOC</h4>
         <p>Vue d'ensemble temps réel de la posture de sécurité. Les KPI montrent les dernières 24h. La timeline et les alertes se rafraîchissent toutes les 60s.</p>
         <p><strong>Workflow :</strong> Identifiez les pics → cliquez sur une alerte → investiguez l'IP → classifiez.</p>
@@ -48,7 +48,7 @@
                 <span class="section-title">
                     <svg class="w-4 h-4 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                     Timeline détections (24h)
-                    <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>Timeline des détections</h4>
                         <p>Courbes empilées par niveau de menace. Un pic soudain indique une attaque en cours ou un nouveau pattern détecté.</p>
                         <p><strong>Action :</strong> Cliquez sur un pic pour filtrer les détections de cette heure.</p>
@@ -64,7 +64,7 @@
                 <span class="section-title">
                     <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                     Alertes récentes
-                    <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>Flux d'alertes temps réel</h4>
                         <p>Dernières détections HIGH/CRITICAL/KNOWN_BOT. Cliquez sur une IP pour démarrer l'investigation.</p>
                         <p class="doc-source">Source : ml_detected_anomalies ORDER BY detected_at DESC</p>
@@ -82,7 +82,7 @@
         <div class="section-card">
             <div class="section-header">
                 <span class="section-title">Threat Levels
-                    <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 menaces</h4>
                         <p>Répartition des sessions par niveau : CRITICAL (score &gt;0.70), HIGH (&gt;0.40), MEDIUM (&gt;0.10), NORMAL, LEGITIMATE_BROWSER, KNOWN_BOT.</p>
                         <p><strong>Action :</strong> Cliquez sur un segment pour filtrer les détections.</p>
@@ -95,7 +95,7 @@
         <div class="section-card">
             <div class="section-header">
                 <span class="section-title">Navigateurs
-                    <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>Familles de navigateurs</h4>
                         <p>Identification via dictionnaire JA4 → browser_family. Les navigateurs légitimes sont exemptés du scoring ML.</p>
                         <p class="doc-source">Source : ml_all_scores.browser_family</p>
@@ -107,7 +107,7 @@
         <div class="lg:col-span-2 section-card">
             <div class="section-header">
                 <span class="section-title">Top 10 IPs suspectes
-                    <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>IPs les plus détectées</h4>
                         <p>IPs avec le plus grand nombre de détections sur 24h. Le score indique le pire score observé.</p>
                         <p><strong>Action :</strong> Cliquez sur une IP pour l'investiguer en profondeur.</p>
@@ -131,7 +131,7 @@
         <div class="section-card">
             <div class="section-header">
                 <span class="section-title">Top ASN
-                    <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>Systèmes autonomes</h4>
                         <p>ASN les plus représentés. Couleur : <span class="text-green-400">ISP</span> (résidentiel), <span class="text-red-400">Datacenter</span>, <span class="text-orange-400">Hosting</span>.</p>
                         <p><strong>Action :</strong> Cliquez pour voir les détails réseau.</p>
@@ -144,7 +144,7 @@
         <div class="section-card">
             <div class="section-header">
                 <span class="section-title">Géographie
-                    <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 géographique</h4>
                         <p>Treemap par pays et type d'ASN. La taille indique le nombre de sessions.</p>
                         <p class="doc-source">Source : view_ai_features_1h.country_code</p>
@@ -158,7 +158,7 @@
                 <span class="section-title">
                     <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                     Campagnes bots
-                    <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>Campagnes détectées (HDBSCAN)</h4>
                         <p>Groupes d'IPs présentant des patterns comportementaux similaires, identifiés par clustering HDBSCAN sur les features ML.</p>
                         <p><strong>Action :</strong> Une campagne multi-IP indique une attaque coordonnée (botnet, scraping distribué).</p>

services/dashboard/backend/templates/scores.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Scores ML{% endblock %}
 {% block page_title %}
     Scores ML
-    <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>Toutes les classifications ML</h4>
         <p>Chaque session analysée reçoit un score composite (EIF + AE + XGBoost). Cette vue montre TOUTES les sessions, pas seulement les anomalies.</p>
         <p><strong>AE Error :</strong> Erreur de reconstruction autoencoder (élevé = inhabituel).</p>
@@ -16,7 +16,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div class="section-card">
             <div class="section-header"><span class="section-title">Distribution des scores
-                <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>Histogramme des scores d'anomalie</h4>
                     <p>Score normalisé [0,1] combinant EIF + AE + XGBoost. La majorité des sessions devraient être proches de 0 (normal). Un pic à droite = vague d'attaque.</p>
                     <p><strong>Seuil :</strong> Les sessions au-dessus du seuil (typiquement 0.5–0.7) sont classées HIGH/CRITICAL.</p>
@@ -27,7 +27,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">AE Error vs XGB Probability
-                <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>Scatter bi-modèle</h4>
                     <p>X = erreur de reconstruction autoencoder (comportement inhabituel). Y = probabilité XGBoost (supervisé sur labels SOC).</p>
                     <p><strong>Interprétation :</strong> Quadrant haut-droit = consensus des deux modèles. Haut-gauche = XGB dit bot mais AE dit normal → possible label biaisé.</p>

services/dashboard/backend/templates/traffic.html

@@ -2,7 +2,7 @@
 {% block title %}JA4 SOC — Trafic HTTP{% endblock %}
 {% block page_title %}
     Trafic HTTP
-    <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>Logs HTTP bruts</h4>
         <p>Toutes les requêtes HTTP capturées (24h). Filtrez par méthode, host ou status pour identifier les patterns suspects.</p>
         <p><strong>Workflow :</strong> Filtrez POST → cherchez du brute-force → cliquez sur l'IP → investiguez.</p>
@@ -16,7 +16,7 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div class="section-card">
             <div class="section-header"><span class="section-title">Méthodes HTTP
-                <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 méthodes</h4>
                     <p>Ratio des méthodes HTTP. Un ratio POST anormalement élevé peut indiquer du brute-force ou du credential stuffing.</p>
                     <p class="doc-source">Source : http_logs (24h)</p>
@@ -26,7 +26,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Top User-Agents
-                <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>User-Agents les plus fréquents</h4>
                     <p>Les bots utilisent souvent des UAs génériques (python-requests, curl) ou vides. Un UA massivement représenté = potentiel botnet.</p>
                     <p class="doc-source">Source : http_logs (24h)</p>
@@ -36,7 +36,7 @@
         </div>
         <div class="section-card">
             <div class="section-header"><span class="section-title">Top Paths
-                <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>Chemins les plus accédés</h4>
                     <p>Les paths comme /wp-admin, /xmlrpc.php, /.env indiquent du scanning. Un path API martelé = possible DDoS L7.</p>
                     <p class="doc-source">Source : http_logs (24h)</p>