feat: Modifier les styles de la carte et ajuster les couleurs des hexagones pour une meilleure visibilité

app/Views/home.php

@@ -66,7 +66,7 @@ include __DIR__ . '/partials/header.php';
                                 </div>
 
                                 <!-- Zone de la carte interactive -->
-                                <div class="map-canvas-container border" style="position: relative; overflow: hidden; height: 600px; background-color: grey;">
+                                <div class="map-canvas-container border" style="position: relative; overflow: hidden; height: 600px; background-color: white;">
                                     <div id="mapCanvas" style="position: absolute; top: 0; left: 0; cursor: grab; z-index: 1;">
                                         <!-- La carte sera rendue ici via JavaScript -->
                                     </div>
@@ -333,7 +333,7 @@ class MapEditor {
 
     // Positionnement et dimensions : x,y sont les coordonnées du centre
     // Ajouter un très léger chevauchement pour compenser l'anti-aliasing et éviter les petits interstices
-    const expansion = 0.6; // pixels
+    const expansion = 0.8; // pixels (combler de très fins espaces sans créer de chevauchement visible)
     const adjWidth = hexWidth + expansion;
     const adjHeight = hexHeight + expansion;
     const halfW = adjWidth / 2;
@@ -363,14 +363,12 @@ class MapEditor {
         hex.addEventListener('mouseenter', () => {
             if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
                 hex.style.backgroundColor = '#e3f2fd';
-                hex.style.transform = 'scale(1.02)';
             }
         });
         
         hex.addEventListener('mouseleave', () => {
             if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
                 hex.style.backgroundColor = '#ffffff';
-                hex.style.transform = 'scale(1)';
             }
         });
         
@@ -384,7 +382,6 @@ class MapEditor {
             if (prevHex) {
                 prevHex.style.backgroundColor = '#ffffff';
                 prevHex.style.borderColor = '#666';
-                prevHex.style.transform = 'scale(1)';
             }
         }
         
@@ -394,7 +391,6 @@ class MapEditor {
         if (hex) {
             hex.style.backgroundColor = '#2196f3';
             hex.style.borderColor = '#1976d2';
-            hex.style.transform = 'scale(1.05)';
         }
         
         // Afficher les informations de la tuile

public/assets/styles.css

@@ -116,7 +116,7 @@ body {
 .map-canvas-container {
     position: relative;
     overflow: hidden;
-    background-color: #f0f0f0;
+    background-color: #f2f3f5; /* gris clair */
 }
 
 #mapCanvas {
@@ -127,11 +127,11 @@ body {
 .hexagon {
     transition: all 0.2s ease;
     user-select: none;
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: rgba(96, 96, 96, 0.9);
 }
 
 .hexagon:hover {
-    transform: scale(1.05);
+    /* Pas de scale pour éviter les décalages visuels entre hexagones */
     border-color: #007bff !important;
     background-color: rgba(0, 123, 255, 0.1);
     z-index: 10;