diff --git a/css/style.css b/css/style.css
index 7f6fd9c..4fad220 100644
--- a/css/style.css
+++ b/css/style.css
@@ -127,10 +127,14 @@ body > hr {
     width: min(50vw, 200px);
     transform: translateX(-50%) translateY(-50%);
     filter: drop-shadow(0 0 10px black);
-    opacity: clamp(0, calc( 1 - ( var(--zoom-level) - 18 ) ), 1) ;
+    opacity: clamp(0, calc( 1 - ( var(--zoom-level) - 12 ) ), 1) ;
     pointer-events: none;
 }
 
+#map .map-hilight-area:not(.active) {
+	opacity: 0;
+}
+
 /* SAERCH FORM */
 
 #search-section {
diff --git a/index.html b/index.html
index 7163235..6c88e83 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,8 @@
     
     <form id="search-section">
         <label for="search-area-query">Rechercher une zone</label><br/>
-        <input type="search" name="query" id="search-area-query" />
-        <button title="Rechercher" autocomplete="no">
+        <input type="search" name="query" id="search-area-query" autocomplete="off" />
+        <button title="Rechercher" >
             <img src="icons/search.svg" alt="Icone de loupe"/>
 	</button>
     </form>
diff --git a/js/components/feature-legend.js b/js/components/feature-legend.js
index 03ddb78..8967d62 100644
--- a/js/components/feature-legend.js
+++ b/js/components/feature-legend.js
@@ -17,6 +17,8 @@ TEMPLATE.innerHTML = `
 	justify-content: center;
 	align-items: center;
 
+	background-color: color-mix(in srgb, var(--background-color, transparent), transparent 50%);
+
 	box-sizing: border-box;
 	border: solid 1px transparent;
 }
@@ -56,7 +58,7 @@ export class FeatureLegendElement extends HTMLElement {
 		container.hidden = !this.feature
 		if(this.feature){
 			let symbol = this.feature.mapSymbol
-			container.style.backgroundColor = symbol.backgroundColor || "transparent"
+			container.style.setProperty("--background-color", symbol.backgroundColor || "transparent");
 			container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
 			container.style.borderColor = symbol.borderColor || "transparent"
 			if(symbol.markerUrl){
diff --git a/js/map.js b/js/map.js
index 439048d..57fd8e6 100644
--- a/js/map.js
+++ b/js/map.js
@@ -49,10 +49,10 @@ export async function init(){
         // Polygone définissant les limites de la carte
         fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
             let coordinate_list = geojson.features[0].geometry.coordinates[0]
-            let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
-            let bounds = L.bounds(first_point, first_point)
+            let first_point = L.latLng([...coordinate_list[0]].reverse())
+            let bounds = L.latLngBounds(first_point, first_point)
             for(let i = 1; i<coordinate_list.length; i++){
-                let point = map.project([...coordinate_list[i]].reverse())
+                let point = [...coordinate_list[i]].reverse()
                 bounds.extend(point)
             }
             map_bounds = bounds
@@ -60,6 +60,14 @@ export async function init(){
         }),
     ])
 
+    map.addEventListener("move", () => {
+        if(map_bounds.contains(map.getCenter())){
+            map.setMaxZoom(21)
+        } else {
+            map.setMaxZoom(18)
+        }
+    })
+
     // La couche Openstreetmap standard
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -79,12 +87,11 @@ export async function init(){
                 className: "center-marker"
             }),
             title: "Camp Interhack 2026",
-            minZoom: 18,
         }
     ).addTo(map)
 
     // Parametrage de la carte initiale
-    map.setMaxBounds(map_bounds)
+    //map.setMaxBounds(map_bounds)
     map.setView(map_center, 19, {
         animate: false,
     })