update

src/components/FontMap/FontMap.js

@@ -30,7 +30,7 @@ const FontMap = ({ darkMode = false }) => {
   const [filter, setFilter] = useState('all');
   const [searchTerm, setSearchTerm] = useState('');
   const [dilationFactor, setDilationFactor] = useState(0.055);
-  const [characterSize, setCharacterSize] = useState(1); // 1.5 / 5 = 0.3
+  const [characterSize, setCharacterSize] = useState(1.5); // 1.5 / 5 = 0.3
   const [variantSizeImpact, setVariantSizeImpact] = useState(false);
   const [selectedFont, setSelectedFont] = useState(null);
   const [hoveredFont, setHoveredFont] = useState(null);

src/components/FontMap/components/AboutModal.js

@@ -125,7 +125,7 @@ const AboutModal = ({ onClose, darkMode }) => {
                     This project is <strong>completely open source</strong> - you can explore the code, modify the parameters, or run it on your own font collection.
                   </p>
                   <p className="about-section-text">
-                    The <strong>complete dataset</strong> is also open source, including all font metadata and positioning data.
+                    The <strong>complete dataset</strong> is also open source, including all font metadata and positioning data from <a href="https://fonts.google.com" target="_blank" rel="noopener noreferrer" className="google-fonts-link">Google Fonts</a>.
                   </p>
                   <a href="https://huggingface.co/spaces/huggingface/fontmap" target="_blank" rel="noopener noreferrer" className="code-link">
                     View Source on Hugging Face →
@@ -135,9 +135,6 @@ const AboutModal = ({ onClose, darkMode }) => {
                   <p className="about-section-text">
                     This is a recreation of the original <strong>IDEO Font Map</strong> using modern machine learning techniques.
                   </p>
-                  <p className="about-section-text">
-                    All fonts are sourced from <a href="https://fonts.google.com" target="_blank" rel="noopener noreferrer" className="google-fonts-link">Google Fonts</a> and are also <strong>open source</strong>.
-                  </p>
                 </div>
               </div>
             </div>

src/components/FontMap/components/ActiveFont.js

@@ -327,7 +327,6 @@ const ActiveFont = ({ selectedFont, fonts, darkMode, onClose, onFontSelect }) =>
                         height="32" 
                         viewBox="0 0 24 24"
                         className="font-glyph-small"
-                        style={{ transform: 'scale(1.5)' }}
                       >
                         <use 
                           href={`#${getFontSymbolId(font.imageName || font.name)}`} 

src/components/FontMap/hooks/useTooltipOptimized.js

@@ -115,9 +115,14 @@ export const useTooltipOptimized = (darkMode) => {
     const centerX = elementRect.left + (elementRect.width / 2);
     const centerY = elementRect.top + (elementRect.height / 2);
     
+    // Calculer la distance proportionnelle au zoom
+    const currentScale = currentTransformRef.current.k || 1;
+    const baseDistance = 20;
+    const zoomAdjustedDistance = baseDistance * currentScale;
+    
     // Positionner le tooltip
     let x = centerX - (tooltipRect.width / 2);
-    let y = centerY - tooltipRect.height - 20;
+    let y = centerY - tooltipRect.height - zoomAdjustedDistance;
     
     // Ajuster si le tooltip sort de l'écran
     const margin = 10;

src/components/FontMap/hooks/useZoom.js

@@ -133,7 +133,7 @@ export const useZoom = (svgRef, darkMode, useCSSTransform = false) => {
     setIsTransitioning(true);
     visualStateRef.current.isTransitioning = true;
 
-    const scale = 1.5;
+    const scale = 2.5;
     const centerX = width / 2;
     const centerY = height / 2;
     

src/components/FontMap/styles/font-details.css

@@ -521,10 +521,12 @@
   align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-md);
+  background: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border-primary);
 }
 
 .dark-mode .active-font-content {
+  background: var(--color-bg-secondary-dark);
   border-bottom-color: var(--color-border-primary-dark);
 }
 
@@ -536,12 +538,14 @@
   justify-content: center;
   width: 120px;
   height: 120px;
-  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
   border-radius: var(--border-radius-sm);
+  background: var(--color-bg-primary);
 }
 
 .dark-mode .font-letter-preview {
-  background: var(--color-bg-secondary-dark);
+  background: var(--color-bg-primary-dark);
+  border: 1px solid var(--color-border-primary-dark);
 }
 
 .font-letter-preview svg {
@@ -616,7 +620,7 @@
   justify-content: center;
   background: var(--color-bg-primary);
   position: relative;
-  height: 70px; /* Hauteur fixe des images SVG de sentence (165x49) */
+  height: 100px; /* Hauteur fixe des images SVG de sentence (165x49) */
 }
 
 .dark-mode .font-sentence-compact {