feat: mobile UX overhaul + focus mode polish + visual hover hitbox

Mobile (<=768px):
- Sidebar becomes a sticky top bar with just search and filters
- ActiveFont becomes a slide-in drawer with chevron-back
- Tap shows the tooltip with an "Open" button instead of opening directly
- Hide focus hint and bottom controls

Focus mode:
- Esc to exit, no longer resets zoom on close
- Selected font zoom level bumped from 2.5x to 4x
- Bottom-left hint shows arrow keys + "use arrow keys to navigate"

Visual:
- Invisible circle hitbox under each glyph for easier targeting
- Hover state shows a subtle ring + tint, persists when font is active
- Outlined sun/moon dark-mode toggle with rotation on toggle
- Centroid labels follow dark mode (black halo in dark)

Tooltip:
- Dark mode driven by CSS class (no stale inline styles after toggle)
- Sentence preview inverts in dark via CSS
- Unselectable, z-indexed below sidebar

Map data:
- typography_data.json re-dilated (radius=13, ticks=140, origin=0.03)
- Sprite lookup falls back to imageName-derived key (fixes "just" font missing)

Tooling:
- npm run overlap script + updated defaults (10/140/0.03)
- useMediaQuery hook for mobile detection

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package.json

@@ -36,7 +36,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "overlap": "node scripts/apply-overlap-removal.mjs",
+    "overlap:dry": "node scripts/apply-overlap-removal.mjs --dry-run"
   },
   "eslintConfig": {
     "extends": [

scripts/apply-overlap-removal.mjs

@@ -0,0 +1,129 @@
+/**
+ * apply-overlap-removal.mjs
+ *
+ * Post-processes a font-map JSON file (font-map.json or typography_data.json)
+ * to remove glyph overlaps using a D3 force simulation, then writes the result
+ * back to the same file (or to --output).
+ *
+ * Usage:
+ *   node scripts/apply-overlap-removal.mjs [options]
+ *
+ * Options:
+ *   --input    <path>   Source JSON  (default: public/data/font-map.json)
+ *   --output   <path>   Output JSON  (default: same as --input, overwrites in place)
+ *   --radius   <px>     Collision radius in canonical pixels  (default: 10)
+ *   --ticks    <n>      Simulation steps                      (default: 140)
+ *   --origin   <0-1>    Pull-back strength toward UMAP origin (default: 0.03)
+ *   --width    <px>     Canonical canvas width                (default: 1920)
+ *   --height   <px>     Canonical canvas height               (default: 1080)
+ *   --padding  <px>     Padding inside canonical canvas       (default: 40)
+ *   --dry-run           Print stats but don't write the file
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+// ---------------------------------------------------------------------------
+// Parse CLI args
+// ---------------------------------------------------------------------------
+const args = process.argv.slice(2);
+const get = (flag, fallback) => {
+  const i = args.indexOf(flag);
+  return i !== -1 ? args[i + 1] : fallback;
+};
+const has = (flag) => args.includes(flag);
+
+const ROOT = resolve(fileURLToPath(import.meta.url), '..', '..');
+const inputPath  = resolve(ROOT, get('--input',  'public/data/font-map.json'));
+const outputPath = resolve(ROOT, get('--output', inputPath));
+const RADIUS          = parseFloat(get('--radius',  '10'));
+const TICKS           = parseInt(get('--ticks',   '140'), 10);
+const ORIGIN_STRENGTH = parseFloat(get('--origin',  '0.03'));
+const W               = parseFloat(get('--width',  '1920'));
+const H               = parseFloat(get('--height', '1080'));
+const PADDING         = parseFloat(get('--padding', '40'));
+const DRY_RUN         = has('--dry-run');
+
+// ---------------------------------------------------------------------------
+// Load D3 force (ESM)
+// ---------------------------------------------------------------------------
+const require = createRequire(import.meta.url);
+// d3-force is a CommonJS module in this version
+const { forceSimulation, forceCollide, forceX, forceY } = await import('d3-force');
+
+// ---------------------------------------------------------------------------
+// Load data
+// ---------------------------------------------------------------------------
+console.log(`📂  Input:  ${inputPath}`);
+let raw;
+try {
+  raw = JSON.parse(readFileSync(inputPath, 'utf8'));
+} catch (e) {
+  // Fallback to typography_data.json
+  const fallback = resolve(ROOT, 'public/data/typography_data.json');
+  console.warn(`⚠️  font-map.json not found, trying ${fallback}`);
+  raw = JSON.parse(readFileSync(fallback, 'utf8'));
+}
+
+const fonts = raw.fonts;
+console.log(`✅  Loaded ${fonts.length} fonts`);
+
+// ---------------------------------------------------------------------------
+// Map UMAP coords → canonical screen space
+// ---------------------------------------------------------------------------
+const xs = fonts.map(f => f.x);
+const ys = fonts.map(f => f.y);
+const xMin = Math.min(...xs), xMax = Math.max(...xs);
+const yMin = Math.min(...ys), yMax = Math.max(...ys);
+
+const toScreenX = x => ((x - xMin) / (xMax - xMin)) * (W - 2 * PADDING) + PADDING;
+const toScreenY = y => ((yMax - y) / (yMax - yMin)) * (H - 2 * PADDING) + PADDING;
+
+const nodes = fonts.map(f => ({
+  id: f.id,
+  x:  toScreenX(f.x),
+  y:  toScreenY(f.y),
+  ox: toScreenX(f.x),  // original position for pull-back
+  oy: toScreenY(f.y),
+}));
+
+// ---------------------------------------------------------------------------
+// Force simulation
+// ---------------------------------------------------------------------------
+console.log(`⚙️   Running simulation — radius: ${RADIUS}px  ticks: ${TICKS}  origin-strength: ${ORIGIN_STRENGTH}`);
+
+const sim = forceSimulation(nodes)
+  .force('collide', forceCollide(RADIUS).strength(1).iterations(3))
+  .force('x', forceX(n => n.ox).strength(ORIGIN_STRENGTH))
+  .force('y', forceY(n => n.oy).strength(ORIGIN_STRENGTH))
+  .stop();
+
+for (let i = 0; i < TICKS; i++) sim.tick();
+
+// ---------------------------------------------------------------------------
+// Measure displacement
+// ---------------------------------------------------------------------------
+const displacements = nodes.map(n => Math.hypot(n.x - n.ox, n.y - n.oy));
+const maxD  = Math.max(...displacements).toFixed(1);
+const avgD  = (displacements.reduce((a, b) => a + b, 0) / displacements.length).toFixed(1);
+console.log(`📏  Displacement — avg: ${avgD}px  max: ${maxD}px  (canonical ${W}×${H})`);
+
+// ---------------------------------------------------------------------------
+// Write positions back into font objects
+// The renderer normalises by min/max, so storing canonical pixel coords is fine —
+// relative positions are preserved after re-scaling to actual viewport.
+// ---------------------------------------------------------------------------
+const nodeMap = new Map(nodes.map(n => [n.id, n]));
+raw.fonts = fonts.map(f => {
+  const n = nodeMap.get(f.id);
+  return n ? { ...f, x: n.x, y: n.y } : f;
+});
+
+if (DRY_RUN) {
+  console.log('🔍  Dry run — file not written.');
+} else {
+  writeFileSync(outputPath, JSON.stringify(raw, null, 2));
+  console.log(`💾  Written to ${outputPath}`);
+}

src/components/DebugUMAP/components/LiveUMAPPanel.js

@@ -5,11 +5,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useControls, button, folder } from 'leva';
 import { useLiveUMAP } from '../hooks';
+import { useDebugUMAPStore } from '../store';
 
 const DEFAULTS = { nNeighbors: 12, minDist: 1.0, enableFontFusion: true };
 
 const LiveUMAPPanel = ({ onResult }) => {
   const { calculate, isCalculating, progress, error, result: lastResult } = useLiveUMAP();
+  const dilatedFonts = useDebugUMAPStore((state) => state.dilatedFonts);
   const timeoutRef = useRef(null);
   const userChangedRef = useRef(false);
 
@@ -28,6 +30,9 @@ const LiveUMAPPanel = ({ onResult }) => {
     });
   };
 
+  const dilatedFontsRef = useRef(dilatedFonts);
+  useEffect(() => { dilatedFontsRef.current = dilatedFonts; }, [dilatedFonts]);
+
   const handleExport = () => {
     const result = lastResultRef.current;
     if (!result) {
@@ -35,7 +40,11 @@ const LiveUMAPPanel = ({ onResult }) => {
       return;
     }
 
-    const jsonString = JSON.stringify(result, null, 2);
+    // If overlap removal was applied, export the dilated positions
+    const fonts = dilatedFontsRef.current?.length > 0 ? dilatedFontsRef.current : result.fonts;
+    const exportData = { ...result, fonts };
+
+    const jsonString = JSON.stringify(exportData, null, 2);
     const blob = new Blob([jsonString], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
 

src/components/DebugUMAP/hooks/useGlyphRenderer.js

@@ -4,6 +4,7 @@ import { calculateMappingDimensions, createGlyphTransform } from '../utils/mappi
 import { applyColorsToGlyphGroup } from '../utils/colorUtils.js';
 import { getConfig } from '../config/mapConfig.js';
 import { useDebugUMAPStore } from '../store';
+import { applyOverlapRemoval } from '../../FontMap/utils/voronoiDilation.js';
 
 /**
  * Hook pour gérer le rendu des glyphes avec Zustand
@@ -15,9 +16,13 @@ export function useGlyphRenderer({ svgRef, enabled = true }) {
   const useCategoryColors = useDebugUMAPStore((state) => state.useCategoryColors);
   const darkMode = useDebugUMAPStore((state) => state.darkMode);
   const showCentroids = useDebugUMAPStore((state) => state.showCentroids);
-  const setCurrentFonts = useDebugUMAPStore((state) => state.setCurrentFonts);
+  const overlapRadius        = useDebugUMAPStore((state) => state.overlapRadius);
+  const overlapTicks         = useDebugUMAPStore((state) => state.overlapTicks);
+  const overlapOriginStrength = useDebugUMAPStore((state) => state.overlapOriginStrength);
+  const setCurrentFonts     = useDebugUMAPStore((state) => state.setCurrentFonts);
+  const setDilatedFonts     = useDebugUMAPStore((state) => state.setDilatedFonts);
   const setMappingFunctions = useDebugUMAPStore((state) => state.setMappingFunctions);
-  const setGlyphsLoaded = useDebugUMAPStore((state) => state.setGlyphsLoaded);
+  const setGlyphsLoaded     = useDebugUMAPStore((state) => state.setGlyphsLoaded);
 
   // Références pour le cleanup
   const abortControllerRef = useRef(null);
@@ -80,9 +85,34 @@ export function useGlyphRenderer({ svgRef, enabled = true }) {
 
         // Calculer les dimensions de mapping
         const { mapX, mapY } = calculateMappingDimensions(data.fonts);
-        
+
+        // Positions écran initiales
+        const rawPositions = data.fonts.map(f => ({
+          id: f.id,
+          x: mapX(f.x),
+          y: mapY(f.y),
+        }));
+
+        // Appliquer l'overlap removal si activé
+        const resolvedPositions = overlapRadius > 0
+          ? applyOverlapRemoval(rawPositions, {
+              collideRadius: overlapRadius,
+              ticks: overlapTicks,
+              originStrength: overlapOriginStrength,
+            })
+          : rawPositions;
+
+        const positionMap = new Map(resolvedPositions.map(p => [p.id, p]));
+
+        // Stocker les fonts avec positions dilatées (pour l'export)
+        const dilated = data.fonts.map(f => {
+          const p = positionMap.get(f.id);
+          return p ? { ...f, x: p.x, y: p.y } : f;
+        });
+
         // Stocker les données pour les centroïdes
         setCurrentFonts(data.fonts);
+        setDilatedFonts(dilated);
         setMappingFunctions({ mapX, mapY });
         setGlyphsLoaded(false);
 
@@ -105,7 +135,10 @@ export function useGlyphRenderer({ svgRef, enabled = true }) {
                 if (!svgRef.current || abortControllerRef.current.signal.aborted) {
                   return;
                 }
-                renderGlyph(viewportGroup, svgContent, font, mapX, mapY, baseGlyphSize, useCategoryColors, darkMode);
+                const pos = positionMap.get(font.id);
+                const screenX = pos ? pos.x : mapX(font.x);
+                const screenY = pos ? pos.y : mapY(font.y);
+                renderGlyph(viewportGroup, svgContent, font, screenX, screenY, baseGlyphSize, useCategoryColors, darkMode);
               })
               .catch((err) => {
                 if (err.name !== 'AbortError') {
@@ -159,7 +192,7 @@ export function useGlyphRenderer({ svgRef, enabled = true }) {
       timeoutRefs.current.forEach(timeout => clearTimeout(timeout));
       timeoutRefs.current = [];
     };
-  }, [enabled, configs, currentConfigIndex]);
+  }, [enabled, configs, currentConfigIndex, overlapRadius, overlapTicks, overlapOriginStrength]);
 
   // Mettre à jour les couleurs des glyphes existants
   useEffect(() => {
@@ -244,14 +277,10 @@ export function useGlyphRenderer({ svgRef, enabled = true }) {
 /**
  * Rend un glyphe individuel
  */
-function renderGlyph(viewportGroup, svgContent, font, mapX, mapY, baseGlyphSize, useCategoryColors, darkMode) {
+function renderGlyph(viewportGroup, svgContent, font, screenX, screenY, baseGlyphSize, useCategoryColors, darkMode) {
   // Créer un groupe pour chaque glyphe
   const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-  const originalTransform = createGlyphTransform(
-    mapX(font.x), 
-    mapY(font.y), 
-    baseGlyphSize
-  );
+  const originalTransform = createGlyphTransform(screenX, screenY, baseGlyphSize);
   
   group.setAttribute('transform', originalTransform);
   group.setAttribute('data-original-transform', originalTransform);

src/components/DebugUMAP/hooks/useLeva.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useControls } from 'leva';
+import { useControls, folder } from 'leva';
 import { useDebugUMAPStore } from '../store';
 import { getConfig } from '../config/mapConfig.js';
 
@@ -48,6 +48,29 @@ export function useLeva({ onResetZoom }) {
       value: getStore().showCentroids,
       onChange: (v) => { getStore().setShowCentroids(v); },
     },
+    'Overlap Removal 🔧': folder({
+      'Radius (px)': {
+        value: getStore().overlapRadius,
+        min: 0,
+        max: 80,
+        step: 1,
+        onChange: (v) => { getStore().setOverlapRadius(v); },
+      },
+      Ticks: {
+        value: getStore().overlapTicks,
+        min: 0,
+        max: 300,
+        step: 10,
+        onChange: (v) => { getStore().setOverlapTicks(v); },
+      },
+      'Pull to origin': {
+        value: getStore().overlapOriginStrength,
+        min: 0,
+        max: 0.5,
+        step: 0.01,
+        onChange: (v) => { getStore().setOverlapOriginStrength(v); },
+      },
+    }, { collapsed: true }),
     'Reset Zoom': { button: true },
     'Reset Defaults': { button: true },
   }), [maxConfig]);

src/components/DebugUMAP/store/useDebugUMAPStore.js

@@ -20,8 +20,14 @@ export const useDebugUMAPStore = create(
       darkMode: false,
       showCentroids: true,
 
+      // === Overlap removal (forceCollide post-UMAP) ===
+      overlapRadius: 10,
+      overlapTicks: 140,
+      overlapOriginStrength: 0.03,
+
       // === État des glyphes ===
       currentFonts: [],
+      dilatedFonts: [],       // fonts with overlap-resolved screen positions
       mappingFunctions: { mapX: null, mapY: null },
       glyphsLoaded: false,
 
@@ -48,8 +54,14 @@ export const useDebugUMAPStore = create(
       setDarkMode: (darkMode) => set({ darkMode }),
       setShowCentroids: (showCentroids) => set({ showCentroids }),
 
+      // === Actions pour l'overlap removal ===
+      setOverlapRadius: (v) => set({ overlapRadius: v }),
+      setOverlapTicks: (v) => set({ overlapTicks: v }),
+      setOverlapOriginStrength: (v) => set({ overlapOriginStrength: v }),
+
       // === Actions pour les glyphes ===
       setCurrentFonts: (fonts) => set({ currentFonts: fonts }),
+      setDilatedFonts: (fonts) => set({ dilatedFonts: fonts }),
       setMappingFunctions: (functions) => set({ mappingFunctions: functions }),
       setGlyphsLoaded: (loaded) => set({ glyphsLoaded: loaded }),
 
@@ -60,7 +72,11 @@ export const useDebugUMAPStore = create(
         baseGlyphSize: 0.25,
         darkMode: false,
         showCentroids: true,
+        overlapRadius: 10,
+        overlapTicks: 140,
+        overlapOriginStrength: 0.03,
         currentFonts: [],
+        dilatedFonts: [],
         mappingFunctions: { mapX: null, mapY: null },
         glyphsLoaded: false,
         error: null

src/components/FontMap/FontMap.js

@@ -3,6 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import '../FontMap.css';
 
 import { useStaticFontData } from '../../hooks/useStaticFontData';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { useMapRenderer } from './hooks/useMapRenderer';
 import { useMapZoom } from './hooks/useMapZoom';
 import { useArrowNavigation } from './hooks/useArrowNavigation';
@@ -25,7 +26,7 @@ import './styles/about-modal.css';
  * Composant principal FontMap — Moteur de rendu DebugUMAP + UI prod complète.
  * Mode debug activable via ?debug=true dans l'URL.
  */
-const FontMap = ({ darkMode = false }) => {
+const FontMap = ({ darkMode: darkModeProp = false }) => {
   const svgRef = useRef(null);
   const [searchParams] = useSearchParams();
   const isDebugMode = searchParams.get('debug') === 'true';
@@ -34,6 +35,21 @@ const FontMap = ({ darkMode = false }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [appState, setAppState] = useState('loading');
   const [showAboutModal, setShowAboutModal] = useState(false);
+  const [darkMode, setDarkMode] = useState(() => {
+    const stored = localStorage.getItem('fontmap-dark-mode');
+    return stored !== null ? stored === 'true' : darkModeProp;
+  });
+  const [iconRotation, setIconRotation] = useState(0);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  useEffect(() => {
+    localStorage.setItem('fontmap-dark-mode', String(darkMode));
+  }, [darkMode]);
+
+  const toggleDarkMode = useCallback(() => {
+    setIconRotation(r => r + 360);
+    setDarkMode(d => !d);
+  }, []);
 
   const {
     selectedFont,
@@ -55,7 +71,8 @@ const FontMap = ({ darkMode = false }) => {
     searchTerm,
     darkMode,
     loading,
-    enabled: svgReady
+    enabled: svgReady,
+    isMobile,
   });
 
   // ── Zoom simplifié (DebugUMAP-style) ──
@@ -66,6 +83,7 @@ const FontMap = ({ darkMode = false }) => {
 
   // ── Callbacks ──
   function handleFontSelect(font) {
+    setHoveredFont(null);
     setSelectedFont(font);
   }
 
@@ -77,14 +95,13 @@ const FontMap = ({ darkMode = false }) => {
     setHoveredFont(null);
   }, [setHoveredFont]);
 
-  // ── Centrage sur la police sélectionnée / reset au désélect ──
+  // ── Centrage sur la police sélectionnée — on ne reset PAS le zoom au désélect
+  // pour laisser l'utilisateur continuer à explorer là où il était.
   useEffect(() => {
     if (selectedFont) {
       centerOnFont(selectedFont);
-    } else {
-      resetZoom();
     }
-  }, [selectedFont, centerOnFont, resetZoom]);
+  }, [selectedFont, centerOnFont]);
 
   // ── Callbacks globaux pour le TooltipManager ──
   useEffect(() => {
@@ -148,7 +165,7 @@ const FontMap = ({ darkMode = false }) => {
   }
 
   return (
-    <div className={`fontmap-container ${darkMode ? 'dark-mode' : ''}`}>
+    <div className={`fontmap-container ${darkMode ? 'dark-mode' : ''} ${selectedFont ? 'has-focus' : ''}`}>
       {/* Symboles SVG cachés pour la sidebar */}
       {symbolDefs}
 
@@ -206,6 +223,28 @@ const FontMap = ({ darkMode = false }) => {
         <h1 className="map-title" data-text="FontMap">FontMap</h1>
 
         <div className="bottom-controls">
+          <button
+            className="dark-mode-toggle"
+            onClick={toggleDarkMode}
+            title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+            aria-label="Toggle dark mode"
+          >
+            <span
+              className="dark-mode-toggle-icon"
+              style={{ transform: `rotate(${iconRotation}deg)` }}
+            >
+              {darkMode ? (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="4" />
+                  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+                </svg>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+              )}
+            </span>
+          </button>
           <CategoryLegend darkMode={darkMode} />
           <ZoomControls />
         </div>
@@ -214,6 +253,18 @@ const FontMap = ({ darkMode = false }) => {
           <svg ref={svgRef} className="fontmap-svg"></svg>
         </div>
 
+        {selectedFont && (
+          <div className="focus-hint">
+            <div className="focus-hint-keys">
+              <kbd>←</kbd>
+              <kbd>↑</kbd>
+              <kbd>↓</kbd>
+              <kbd>→</kbd>
+            </div>
+            <span className="focus-hint-label">use arrow keys to navigate</span>
+          </div>
+        )}
+
         {!loading && fonts.length > 0 && (
           <TooltipManager
             selectedFont={selectedFont}
@@ -221,6 +272,8 @@ const FontMap = ({ darkMode = false }) => {
             darkMode={darkMode}
             onFontHover={handleFontHover}
             onFontUnhover={handleFontUnhover}
+            isMobile={isMobile}
+            onOpenFont={handleFontSelect}
           />
         )}
       </div>

src/components/FontMap/components/AboutModal.js

@@ -142,7 +142,7 @@ const AboutModal = ({ onClose, darkMode }) => {
                   
                   <h3 className="about-section-title">About This Project</h3>
                   <p className="about-section-text">
-                    Inspired by the original <strong>IDEO Font Map</strong>, this version replaces pixel-based features with <strong>FontCLIP</strong> embeddings &mdash; a CLIP model fine-tuned specifically for typography &mdash; producing a more semantically meaningful layout where fonts group by visual style rather than raw pixel similarity.
+                    Inspired by the original <strong>IDEO Font Map</strong>, this version uses <strong>FontCLIP</strong> embeddings &mdash; a CLIP model fine-tuned specifically for typography &mdash; to lay out fonts by visual style.
                   </p>
                 </div>
               </div>

src/components/FontMap/components/ActiveFont.js

@@ -163,6 +163,17 @@ const ActiveFont = ({ selectedFont, fonts, darkMode, onClose, onFontSelect }) =>
 
   return (
     <div className="font-details">
+      <button
+        type="button"
+        className="font-details-back"
+        onClick={onClose}
+        aria-label="Back to map"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        <span>Back</span>
+      </button>
       <div className="font-details-content">
         {/* Label Active Font en dehors de la carte */}
         <div className="active-font-label">Active Font</div>

src/components/FontMap/components/TooltipManager.js

@@ -5,10 +5,12 @@ import { useTooltipOptimized } from '../hooks/useTooltipOptimized';
  * Composant simplifié pour gérer les tooltips
  * Utilise le hook useTooltip pour une gestion propre et centralisée
  */
-const TooltipManager = ({ 
-  selectedFont, 
-  hoveredFont, 
-  darkMode 
+const TooltipManager = ({
+  selectedFont,
+  hoveredFont,
+  darkMode,
+  isMobile,
+  onOpenFont,
 }) => {
   const {
     handleFontSelect,
@@ -16,7 +18,7 @@ const TooltipManager = ({
     handleFontUnhover,
     updateTransform,
     updatePositions
-  } = useTooltipOptimized(darkMode);
+  } = useTooltipOptimized(darkMode, isMobile, onOpenFont);
 
   // Gérer la police sélectionnée
   useEffect(() => {

src/components/FontMap/hooks/useArrowNavigation.js

@@ -106,12 +106,19 @@ export const useArrowNavigation = (
       return; // Ne pas intercepter les flèches dans les champs de saisie
     }
     
+    // Quitter le mode focus
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onFontSelect(null);
+      return;
+    }
+
     // Gérer les touches fléchées
     if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       event.preventDefault(); // Empêcher le scroll de la page
       findNearestFontInDirection(event.key);
     }
-  }, [selectedFont, findNearestFontInDirection]);
+  }, [selectedFont, findNearestFontInDirection, onFontSelect]);
 
   // Ajouter l'écouteur d'événements
   useEffect(() => {

src/components/FontMap/hooks/useFontMapTweakpane.js

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react';
+import { Pane } from 'tweakpane';
+import { useFontMapStore } from '../../../store/fontMapStore';
+
+/**
+ * Floating Tweakpane panel for FontMap — controls overlap removal parameters.
+ */
+export function useFontMapTweakpane() {
+  const overlapCollideRadius   = useFontMapStore(s => s.overlapCollideRadius);
+  const overlapTicks           = useFontMapStore(s => s.overlapTicks);
+  const overlapOriginStrength  = useFontMapStore(s => s.overlapOriginStrength);
+  const setOverlapCollideRadius  = useFontMapStore(s => s.setOverlapCollideRadius);
+  const setOverlapTicks          = useFontMapStore(s => s.setOverlapTicks);
+  const setOverlapOriginStrength = useFontMapStore(s => s.setOverlapOriginStrength);
+
+  const paneRef     = useRef(null);
+  const bindingsRef = useRef({});
+
+  useEffect(() => {
+    const pane = new Pane({ title: 'Layout', expanded: true });
+    paneRef.current = pane;
+
+    const params = {
+      overlapCollideRadius,
+      overlapTicks,
+      overlapOriginStrength,
+    };
+
+    const folder = pane.addFolder({ title: 'Overlap Removal' });
+
+    bindingsRef.current.radius = folder
+      .addBinding(params, 'overlapCollideRadius', {
+        label: 'Radius (px)',
+        min: 0,
+        max: 80,
+        step: 1,
+      })
+      .on('change', ev => setOverlapCollideRadius(ev.value));
+
+    bindingsRef.current.ticks = folder
+      .addBinding(params, 'overlapTicks', {
+        label: 'Ticks',
+        min: 0,
+        max: 300,
+        step: 10,
+      })
+      .on('change', ev => setOverlapTicks(ev.value));
+
+    bindingsRef.current.originStrength = folder
+      .addBinding(params, 'overlapOriginStrength', {
+        label: 'Pull to origin',
+        min: 0,
+        max: 0.5,
+        step: 0.01,
+      })
+      .on('change', ev => setOverlapOriginStrength(ev.value));
+
+    return () => {
+      pane.dispose();
+      paneRef.current = null;
+      bindingsRef.current = {};
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const b = bindingsRef.current.radius;
+    if (b && b.value !== overlapCollideRadius) {
+      try { b.value = overlapCollideRadius; } catch (_) {}
+    }
+  }, [overlapCollideRadius]);
+
+  useEffect(() => {
+    const b = bindingsRef.current.ticks;
+    if (b && b.value !== overlapTicks) {
+      try { b.value = overlapTicks; } catch (_) {}
+    }
+  }, [overlapTicks]);
+
+  useEffect(() => {
+    const b = bindingsRef.current.originStrength;
+    if (b && b.value !== overlapOriginStrength) {
+      try { b.value = overlapOriginStrength; } catch (_) {}
+    }
+  }, [overlapOriginStrength]);
+}

src/components/FontMap/hooks/useMapRenderer.js

@@ -45,7 +45,7 @@ function getOrCreateViewportGroup(svg) {
 /**
  * Hook de rendu — utilise le sprite SVG pré-chargé (0 requête réseau).
  */
-export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm, darkMode, loading, enabled = true }) {
+export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm, darkMode, loading, enabled = true, isMobile = false }) {
   const mappingRef = useRef({ mapX: null, mapY: null });
   const dimensionsRef = useRef({ width: 0, height: 0 });
   const hasRenderedRef = useRef(false);
@@ -55,7 +55,7 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
     selectedFont,
     setSelectedFont,
     setHoveredFont,
-    useCategoryColors
+    useCategoryColors,
   } = useFontMapStore();
 
   selectedFontRef.current = selectedFont;
@@ -88,7 +88,15 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
     const ns = 'http://www.w3.org/2000/svg';
 
     fonts.forEach(font => {
-      const pathD = hasSprite ? (glyphPaths[`${font.id}_a`] || glyphPaths[font.id]) : null;
+      // The sprite is keyed off the slugified font name (often imageName),
+      // not always the short id. Fall back to the imageName-derived key.
+      const imgKey = (font.imageName || font.name || '').toLowerCase();
+      const pathD = hasSprite
+        ? (glyphPaths[`${font.id}_a`]
+          || glyphPaths[font.id]
+          || glyphPaths[`${imgKey}_a`]
+          || glyphPaths[imgKey])
+        : null;
       if (!pathD) return;
 
       const x = mapX(font.x);
@@ -105,9 +113,19 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
       g.setAttribute('class', 'glyph-group');
       g.style.cursor = 'pointer';
 
+      const hitbox = document.createElementNS(ns, 'circle');
+      hitbox.setAttribute('class', 'glyph-hitbox');
+      hitbox.setAttribute('cx', '40');
+      hitbox.setAttribute('cy', '40');
+      hitbox.setAttribute('r', '44');
+      hitbox.setAttribute('fill', 'transparent');
+      hitbox.setAttribute('pointer-events', 'all');
+      g.appendChild(hitbox);
+
       const path = document.createElementNS(ns, 'path');
       path.setAttribute('d', pathD);
       path.setAttribute('fill', color);
+      path.setAttribute('pointer-events', 'none');
       g.appendChild(path);
 
       vgNode.appendChild(g);
@@ -117,18 +135,16 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
   }, [enabled, fonts, glyphPaths, darkMode, useCategoryColors, svgRef]);
 
   // ── Mise à jour des couleurs (dark mode / category colors toggle) ──
+  // On itère sur tous les g.glyph-group du SVG (viewport + highlight clone)
+  // pour que la lettre en focus suive aussi les toggles.
   useEffect(() => {
     if (!svgRef.current) return;
-    const viewportGroup = svgRef.current.querySelector('.viewport-group');
-    if (!viewportGroup) return;
 
-    viewportGroup.querySelectorAll('g.glyph-group').forEach(group => {
+    svgRef.current.querySelectorAll('g.glyph-group').forEach(group => {
       const category = group.getAttribute('data-category');
       const color = getGlyphColor(category, useCategoryColors, darkMode);
-      group.querySelectorAll('*').forEach(el => {
-        if (el.nodeType === Node.ELEMENT_NODE) {
-          el.setAttribute('fill', color);
-        }
+      group.querySelectorAll('path').forEach(el => {
+        el.setAttribute('fill', color);
       });
     });
   }, [darkMode, useCategoryColors, svgRef]);
@@ -166,6 +182,7 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
     const fillColor = useCategoryColors
       ? null
       : (darkMode ? '#ffffff' : '#000000');
+    const haloColor = darkMode ? '#000000' : '#ffffff';
 
     Object.entries(centroids).forEach(([cat, c]) => {
       const x = mapX(c.x / c.n);
@@ -179,7 +196,7 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
         .attr('font-size', '16px')
         .attr('font-weight', 'bold')
         .attr('fill', color)
-        .attr('stroke', '#ffffff')
+        .attr('stroke', haloColor)
         .attr('stroke-width', '8px')
         .attr('paint-order', 'stroke fill')
         .attr('class', 'centroid-label')
@@ -282,6 +299,9 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
     };
 
     const handleMouseOut = (e) => {
+      // Sur mobile, le tap synthétise des mouseover/mouseout — on ignore le
+      // out pour que le tooltip reste ouvert jusqu'au prochain tap.
+      if (isMobile) return;
       if (useFontMapStore.getState().isTransitioning) return;
       const group = findGlyphGroup(e.target);
       if (!group) return;
@@ -291,15 +311,25 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
     const handleClick = (e) => {
       const group = findGlyphGroup(e.target);
       if (!group) {
-        if (selectedFontRef.current) setSelectedFont(null);
+        // Tap on empty space — clear hover (mobile) or selection (desktop)
+        if (isMobile) {
+          setHoveredFont(null);
+        } else if (selectedFontRef.current) {
+          setSelectedFont(null);
+        }
         return;
       }
       const font = getFontFromGroup(group);
-      if (font) {
-        setHoveredFont(null);
-        const cur = selectedFontRef.current;
-        setSelectedFont(cur && cur.id === font.id ? null : font);
+      if (!font) return;
+      if (isMobile) {
+        // Mobile: tap shows the tooltip with an Open button — don't open the
+        // drawer directly. The button inside the tooltip selects the font.
+        setHoveredFont(font);
+        return;
       }
+      setHoveredFont(null);
+      const cur = selectedFontRef.current;
+      setSelectedFont(cur && cur.id === font.id ? null : font);
     };
 
     svg.addEventListener('mouseover', handleMouseOver);
@@ -311,7 +341,7 @@ export function useMapRenderer({ svgRef, fonts, glyphPaths, filter, searchTerm,
       svg.removeEventListener('mouseout', handleMouseOut);
       svg.removeEventListener('click', handleClick);
     };
-  }, [fonts, setSelectedFont, setHoveredFont, svgRef]);
+  }, [fonts, setSelectedFont, setHoveredFont, svgRef, isMobile]);
 
   return { mappingRef, dimensionsRef };
 }

src/components/FontMap/hooks/useMapZoom.js

@@ -99,7 +99,7 @@ export function useMapZoom(svgRef, enabled = true) {
     const width = svgNode.clientWidth || svgNode.getBoundingClientRect().width;
     const height = svgNode.clientHeight || svgNode.getBoundingClientRect().height;
 
-    const scale = 2.5;
+    const scale = 4.0;
     const translateX = width / 2 - fontX * scale;
     const translateY = height / 2 - fontY * scale;
 

src/components/FontMap/hooks/useTooltipOptimized.js

@@ -5,11 +5,14 @@ import * as d3 from 'd3';
  * Hook optimisé pour la gestion des tooltips
  * Séparation claire entre logique de positionnement et affichage
  */
-export const useTooltipOptimized = (darkMode) => {
+export const useTooltipOptimized = (darkMode, isMobile = false, onOpenFont = null) => {
   const selectedTooltipRef = useRef(null);
   const hoverTooltipRef = useRef(null);
   const currentTransformRef = useRef(d3.zoomIdentity);
   const imageLoadTimeoutsRef = useRef(new Map());
+  const currentFontRef = useRef(null);
+  const onOpenFontRef = useRef(onOpenFont);
+  useEffect(() => { onOpenFontRef.current = onOpenFont; }, [onOpenFont]);
 
   // Mémoriser les styles du tooltip selon le mode sombre
   const tooltipStyles = useMemo(() => ({
@@ -47,7 +50,20 @@ export const useTooltipOptimized = (darkMode) => {
       .style('z-index', 1000)
       .style('transition', 'opacity 0.2s ease');
 
+    // Délégation de clic pour le bouton "Open" (mobile uniquement) — reste
+    // armé en permanence, le bouton n'existe dans le HTML que sur mobile.
+    const onHoverClick = (e) => {
+      if (e.target.closest('.tooltip-open-btn')) {
+        const font = currentFontRef.current;
+        const cb = onOpenFontRef.current;
+        if (font && cb) cb(font);
+      }
+    };
+    const hoverNode = hoverTooltipRef.current.node();
+    if (hoverNode) hoverNode.addEventListener('click', onHoverClick);
+
     return () => {
+      if (hoverNode) hoverNode.removeEventListener('click', onHoverClick);
       d3.selectAll('.font-tooltip').remove();
       // Nettoyer les timeouts
       const currentTimeouts = imageLoadTimeoutsRef.current;
@@ -75,33 +91,37 @@ export const useTooltipOptimized = (darkMode) => {
   }, [darkMode, tooltipStyles]);
 
   // Fonction optimisée pour créer le contenu du tooltip
+  // Pas de couleurs inline — tout est piloté par CSS via .font-tooltip.dark-mode
+  // pour que le toggle dark/light reste cohérent même si le tooltip est ouvert.
   const createTooltipContent = useCallback((font) => {
     const imageName = font.imageName || font.name;
     const sentenceImagePath = `/data/sentences/${imageName.toLowerCase().replace(/\s+/g, '_')}_sentence.svg`;
-    const textColor = darkMode ? '#ffffff' : '#000000';
-    const imageFilter = darkMode ? 'invert(1)' : 'none';
-    
+    const openButton = isMobile
+      ? `<button type="button" class="tooltip-open-btn">Open</button>`
+      : '';
+
     return `
       <div class="simple-tooltip">
-        <div class="tooltip-font-name" style="color: ${textColor} !important;">${font.name}</div>
+        <div class="tooltip-font-name">${font.name}</div>
         <div class="tooltip-sentence-preview">
           <div class="tooltip-image-container" style="position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center;">
-            <img src="${sentenceImagePath}" 
-                 alt="${font.name} sentence preview" 
+            <img src="${sentenceImagePath}"
+                 alt=""
                  class="sentence-image"
-                 style="filter: ${imageFilter}; max-width: 200px; height: auto; opacity: 0; transition: opacity 0.2s ease;"
+                 style="max-width: 200px; height: auto; opacity: 0; transition: opacity 0.2s ease;"
                  onload="this.style.opacity='1'; this.parentElement.querySelector('.tooltip-spinner').style.display='none';"
                  onerror="this.style.display='none'; this.parentElement.querySelector('.tooltip-spinner').style.display='flex'; this.parentElement.querySelector('.tooltip-spinner').innerHTML='⚠️ Loading error';"
             />
-            <div class="tooltip-spinner" style="display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
+            <div class="tooltip-spinner" style="display: flex; align-items: center; justify-content: center; font-size: 12px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
               <div style="width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px;"></div>
               Loading...
             </div>
           </div>
         </div>
+        ${openButton}
       </div>
     `;
-  }, [darkMode]);
+  }, [isMobile]);
 
   // Fonction optimisée pour positionner un tooltip
   const positionTooltip = useCallback((tooltip, svgElement) => {
@@ -143,6 +163,8 @@ export const useTooltipOptimized = (darkMode) => {
   const showTooltip = useCallback((tooltip, font, svgElement) => {
     if (!tooltip || !font) return;
 
+    if (tooltip === hoverTooltipRef.current) currentFontRef.current = font;
+
     tooltip
       .html(createTooltipContent(font))
       .style('opacity', 1);

src/components/FontMap/styles/controls.css

@@ -385,6 +385,92 @@
   gap: 8px;
 }
 
+/* Focus mode hint (shown when a font is selected) */
+.focus-hint {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  z-index: 200;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: transparent;
+  pointer-events: none;
+  user-select: none;
+}
+
+.focus-hint-keys {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.focus-hint kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #ffffff;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #000000;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.dark-mode .focus-hint kbd {
+  background: #000000;
+  color: #ffffff;
+  border-color: #ffffff;
+}
+
+.focus-hint-label {
+  color: #000000;
+  font-size: 12px;
+  letter-spacing: 0.3px;
+  line-height: 36px;
+  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
+}
+
+.dark-mode .focus-hint-label {
+  color: #ffffff;
+  text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000;
+}
+
+/* Dark mode toggle button (lives inside .bottom-controls — styled like .category-legend) */
+.bottom-controls .dark-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-sm);
+  color: var(--color-text-primary);
+  line-height: 1;
+  cursor: pointer;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+
+.dark-mode .bottom-controls .dark-mode-toggle {
+  background: var(--color-bg-primary-dark);
+  border-color: var(--color-border-primary-dark);
+  color: var(--color-text-primary-dark);
+  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
+}
+
+.dark-mode-toggle-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /* Zoom Controls */
 .zoom-controls {
   display: flex;

src/components/FontMap/styles/layout.css

@@ -41,6 +41,7 @@
   flex-direction: column;
   overflow: hidden;
   position: relative;
+  z-index: 2000;
 }
 
 .dark-mode .sidebar {
@@ -228,6 +229,11 @@
   cursor: grabbing;
 }
 
+/* Mobile-only back chevron inside the ActiveFont drawer (hidden on desktop) */
+.font-details-back {
+  display: none;
+}
+
 /* Font glyphs with expanded hit area */
 .font-glyph-group,
 .glyph-group {
@@ -238,6 +244,26 @@
   cursor: pointer;
 }
 
+.glyph-hitbox {
+  fill: transparent;
+  stroke: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.glyph-hitbox:hover,
+.highlight-group .glyph-hitbox {
+  fill: rgba(0, 0, 0, 0.02);
+  stroke: rgba(0, 0, 0, 0.14);
+  stroke-width: 1;
+}
+
+.dark-mode .glyph-hitbox:hover,
+.dark-mode .highlight-group .glyph-hitbox {
+  fill: rgba(255, 255, 255, 0.03);
+  stroke: rgba(255, 255, 255, 0.18);
+  stroke-width: 1;
+}
+
 .font-glyph {
   pointer-events: none;
   shape-rendering: geometricPrecision;

src/components/FontMap/styles/responsive.css

@@ -11,24 +11,94 @@
   .fontmap-container {
     flex-direction: column;
   }
-  
+
+  /* Sidebar becomes a sticky top strip with just search + filters */
   .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     width: 100%;
-    min-width: 100%;
-    height: 40vh;
-    max-height: 40vh;
+    min-width: 0;
+    height: auto;
+    max-height: none;
     border-right: none;
     border-bottom: 1px solid var(--color-border-primary);
+    overflow: visible;
+    z-index: 2000;
   }
-  
+
   .dark-mode .sidebar {
     border-bottom-color: var(--color-border-primary-dark);
   }
-  
+
+  .sidebar-content {
+    overflow: visible;
+    padding: 0;
+  }
+
+  .sidebar-footer {
+    display: none;
+  }
+
+  /* Hide focus hint and bottom controls on mobile */
+  .focus-hint,
+  .bottom-controls {
+    display: none !important;
+  }
+
+  /* ActiveFont becomes a slide-in drawer when a font is selected */
+  .font-details {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100vh;
+    background: var(--color-bg-primary);
+    z-index: 3000;
+    overflow-y: auto;
+    transform: translateX(100%);
+    transition: transform 0.28s ease;
+    padding-top: 48px;
+  }
+
+  .dark-mode .font-details {
+    background: var(--color-bg-primary-dark);
+  }
+
+  .fontmap-container.has-focus .font-details {
+    transform: translateX(0);
+  }
+
+  /* Mobile back chevron — visible only on mobile inside the drawer */
+  .font-details-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    padding: 6px 10px 6px 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-text-primary);
+    font-family: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .dark-mode .font-details-back {
+    color: var(--color-text-primary-dark);
+  }
+
+  /* Map fills full viewport beneath the sticky sidebar */
   .main-area {
-    height: 60vh;
+    height: 100vh;
+    width: 100%;
   }
-  
+
   .sidebar-header {
     padding: var(--spacing-md);
     flex-direction: row;
@@ -120,15 +190,6 @@
 }
 
 @media (max-width: 480px) {
-  .sidebar {
-    height: 35vh;
-    max-height: 35vh;
-  }
-  
-  .main-area {
-    height: 65vh;
-  }
-  
   .sidebar-header {
     padding: var(--spacing-sm);
     flex-direction: column;

src/components/FontMap/styles/tooltip.css

@@ -50,6 +50,34 @@
   max-width: 280px;
   overflow: hidden;
   transform: translateY(0);
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+}
+
+/* Mobile-only "Open" button inside the hover tooltip */
+.tooltip-open-btn {
+  display: block;
+  width: calc(100% - 16px);
+  margin: 0 8px 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.font-tooltip.dark-mode .tooltip-open-btn {
+  background: var(--color-bg-primary-dark);
+  color: var(--color-text-primary-dark);
+  border-color: var(--color-border-primary-dark);
 }
 
 /* Tooltip sélectionné (priorité normale) */
@@ -272,10 +300,20 @@
 
 
 /* Dark mode overrides for tooltip images */
-.dark-mode .tooltip-sentence img {
+.dark-mode .tooltip-sentence img,
+.font-tooltip.dark-mode .sentence-image {
   filter: invert(1) !important;
 }
 
+/* Spinner inherits tooltip color so it adapts to dark mode */
+.font-tooltip .tooltip-spinner {
+  color: var(--color-text-secondary) !important;
+}
+
+.font-tooltip.dark-mode .tooltip-spinner {
+  color: var(--color-text-secondary-dark) !important;
+}
+
 /* Dark mode overrides for tooltip SVG */
 .dark-mode .tooltip-fallback svg use {
   fill: #ffffff !important;

src/components/FontMap/utils/voronoiDilation.js

@@ -0,0 +1,33 @@
+import * as d3 from 'd3';
+
+/**
+ * Overlap removal via D3 force simulation — minimum displacement strategy.
+ *
+ * forceCollide only pushes pairs that actually overlap; points already well
+ * separated don't move at all. A weak forceX/forceY pulls every point back
+ * toward its original UMAP position, so the layout drifts as little as possible.
+ *
+ * @param {Array<{id: string, x: number, y: number}>} points  - initial screen-space positions
+ * @param {Object} opts
+ * @param {number} opts.collideRadius   - collision radius per glyph in pixels
+ * @param {number} opts.ticks           - number of simulation steps (more = fuller resolution)
+ * @param {number} opts.originStrength  - pull-back toward UMAP origin [0, 1] (keep small, e.g. 0.1)
+ * @returns {Array<{id: string, x: number, y: number}>}
+ */
+export function applyOverlapRemoval(points, { collideRadius = 10, ticks = 140, originStrength = 0.03 }) {
+  if (ticks === 0 || collideRadius === 0 || points.length < 2) return points;
+
+  // d3 forceSimulation mutates node objects in-place
+  const nodes = points.map(p => ({ id: p.id, x: p.x, y: p.y, ox: p.x, oy: p.y }));
+
+  const sim = d3.forceSimulation(nodes)
+    .force('collide', d3.forceCollide(collideRadius).strength(1).iterations(3))
+    .force('x', d3.forceX(n => n.ox).strength(originStrength))
+    .force('y', d3.forceY(n => n.oy).strength(originStrength))
+    .stop();
+
+  // Run synchronously (no animation loop needed)
+  for (let i = 0; i < ticks; i++) sim.tick();
+
+  return nodes.map(n => ({ id: n.id, x: n.x, y: n.y }));
+}

src/hooks/useMediaQuery.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Subscribe to a CSS media query and re-render when it flips.
+ * Cheap: one matchMedia listener for the lifetime of the consumer.
+ */
+export function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() =>
+    typeof window !== 'undefined' && window.matchMedia
+      ? window.matchMedia(query).matches
+      : false,
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = (e) => setMatches(e.matches);
+    setMatches(mql.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, [query]);
+
+  return matches;
+}

src/store/fontMapStore.js

@@ -43,7 +43,7 @@ export const useFontMapStore = create((set, get) => ({
   },
   
   setUseCategoryColors: (val) => set({ useCategoryColors: val }),
-  
+
   setIsTransitioning: (val) => set({ isTransitioning: val }),
   
   // Actions pour le debug