1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/jsvectormap.min.css">
2
3<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/jsvectormap.min.js"></script>
4<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/maps/world-merc.js"></script>

1<div id="alacartaMapWrap">
2  <div id="alacartaMap"></div>
3</div>
4
5<style>
6  #alacartaMapWrap{
7    width:80%;
8    height:520px;
9    margin:0 auto;
10    border:2px solid #F68B1E;
11    border-radius:20px;
12    overflow:hidden;
13    background:#fff;
14  }
15  #alacartaMap{ width:100%; height:100%; }
16
17  .jvm-tooltip{
18    z-index:2147483647 !important;
19    background:#fff !important;
20    color:#0f3b35 !important;
21    border-radius:12px !important;
22    padding:10px 12px !important;
23    font-size:12px !important;
24    font-weight:800 !important;
25    box-shadow:0 14px 34px rgba(0,0,0,.14) !important;
26    pointer-events:none !important;
27    border: 1px solid rgba(246,139,30,.22) !important;
28  }
29
30  #alacartaMap .jvm-marker{ cursor:pointer; }
31  #alacartaMap text.jvm-marker-label{
32    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
33    font-size: 16px;
34    font-weight: 700;
35    fill: #2b2f36;
36    paint-order: stroke fill;
37    stroke: rgba(255,255,255,.90);
38    stroke-width: 4px;
39    stroke-linejoin: round;
40    pointer-events: none;
41    user-select: none;
42  }
43</style>
44
45<script>
46(() => {
47  const COUNTRIES = {
48    PE:{ name:"PÉROU", url:"/destination/perou", coords:[-9.19,-75.02]},
49    EC:{ name:"ÉQUATEUR", url:"/destination/equateur", coords:[-1.83,-78.18]},
50    CO:{ name:"COLOMBIE", url:"/destination/colombie", coords:[4.57,-74.30]},
51    CL:{ name:"CHILI", url:"/destination/chili", coords:[-35.68,-71.54]},
52    BR:{ name:"BRÉSIL", url:"/destination/bresil", coords:[-14.23,-51.93]},
53    BO:{ name:"BOLIVIE", url:"/destination/bolivie", coords:[-16.29,-63.59]},
54    AR:{ name:"ARGENTINE", url:"/destination/argentine", coords:[-38.42,-63.62]},
55    PA:{ name:"PANAMA", url:"/destination/panama", coords:[8.54,-80.78]},
56    MX:{ name:"MEXIQUE", url:"/destination/mexique", coords:[23.63,-102.55]},
57    GT:{ name:"GUATEMALA", url:"/destination/guatemala", coords:[15.78,-90.23]},
58    CR:{ name:"COSTA RICA", url:"/destination/costa-rica", coords:[9.75,-83.75]},
59    DO:{ name:"RÉPUBLIQUE DOMINICAINE", url:"/destination/republique-dominicaine", coords:[18.74,-70.16]},
60    PR:{ name:"PORTO RICO", url:"/destination/porto-rico", coords:[18.22,-66.59]},
61    CU:{ name:"CUBA", url:"/destination/cuba", coords:[21.52,-77.78]}
62  };
63  const ACTIVE = Object.keys(COUNTRIES);
64
65  // ✅ TA PALETTE EXACTE (par code ISO)
66  const COUNTRY_COLORS = {
67    BR:"#F8C07A", // Brésil = orange pâle
68    AR:"#F4A7C3", // Argentine = rose
69    CL:"#BFE7C0", // Chili = vert pâle
70    BO:"#D9D9D9", // Bolivie = gris pâle
71    PE:"#D8C6F2", // Pérou = violet pâle
72    EC:"#F4B0A8", // Equateur = rouge pâle
73    CO:"#0B3D91", // Colombie = bleu foncé
74    PA:"#9AA3AF", // Panama = gris
75    CR:"#F4B0A8", // Costa Rica = rouge pâle
76    GT:"#1E7A4B", // Guatemala = vert foncé
77    MX:"#F6E7A5", // Mexique = jaune pâle
78    CU:"#9DD7F5", // Cuba = bleu clair
79    DO:"#FFD200", // Rép Dom = jaune brillant
80    PR:"#8B1E2D"  // Porto Rico = rouge foncé
81  };
82
83  const ORANGE = "#F68B1E";
84  const WORLD_GRAY = "#D6DBE0";
85
86  const hexToRgb = (h) => {
87    h = h.replace("#","").trim();
88    if (h.length === 3) h = h.split("").map(c=>c+c).join("");
89    const n = parseInt(h,16);
90    return { r:(n>>16)&255, g:(n>>8)&255, b:n&255 };
91  };
92  const rgbToHex = ({r,g,b}) =>
93    "#" + [r,g,b].map(v => v.toString(16).padStart(2,"0")).join("");
94  const lighten = (hex, amt=0.22) => {
95    const {r,g,b} = hexToRgb(hex);
96    return rgbToHex({
97      r: Math.round(r + (255-r)*amt),
98      g: Math.round(g + (255-g)*amt),
99      b: Math.round(b + (255-b)*amt)
100    });
101  };
102
103  function focusToHome(map){
104    if (typeof map.setFocus === "function") map.setFocus({ regions: ACTIVE, animate:true });
105    else map.reset();
106  }
107
108  function waitForMapReady(tries=120){
109    if (window.jsVectorMap) return init();
110    if (tries <= 0) return console.error("jsVectorMap / world_merc pas chargé. Vérifie le Footer Webflow (Before </body>)");
111    setTimeout(() => waitForMapReady(tries-1), 50);
112  }
113
114  function init(){
115    const MARKERS = ACTIVE.map(code => ({
116      name: COUNTRIES[code].name,
117      coords: COUNTRIES[code].coords,
118      code
119    }));
120
121    const map = new jsVectorMap({
122      selector:"#alacartaMap",
123      map:"world_merc",
124      backgroundColor:"transparent",
125
126      zoomButtons:false,
127      zoomOnScroll:true,
128      zoomOnScrollSpeed:0.22,
129      zoomMin:1,
130      zoomMax:7,
131      zoomAnimate:true,
132      draggable:true,
133
134      focusOn:{ regions: ACTIVE, animate:true },
135
136      regionStyle:{
137        initial:{ fill: WORLD_GRAY, stroke:"#fff", strokeWidth:0.0 },
138        hover:{ stroke: ORANGE, strokeWidth:1.1 },
139        // ✅ IMPORTANT : on neutralise “selected” pour ne pas écraser la palette
140        selected:{ fill: null },
141        selectedHover:{ fill: null }
142      },
143
144      // ✅ Couleur par pays (c’est ça qui doit gagner)
145      series:{
146        regions:[{ attribute:"fill", values: COUNTRY_COLORS }]
147      },
148
149      // ❌ on retire selectedRegions (ça cassait tes couleurs)
150      // selectedRegions: ACTIVE,
151
152      labels: { markers: { render: (marker) => marker.name } },
153      markers: MARKERS,
154
155      markerStyle:{
156        initial:{ r:9, fill:"#2b2f36", stroke:"rgba(255,255,255,.90)", strokeWidth:6 },
157        hover:{ fill:"#2b2f36", stroke:"rgba(246,139,30,.90)", strokeWidth:7 }
158      },
159
160      onRegionTooltipShow(e, tooltip, code){
161        if(!COUNTRIES[code]){ e.preventDefault(); return; }
162        tooltip.text(COUNTRIES[code].name);
163      },
164
165      onRegionClick(e, code){
166        if(COUNTRIES[code]?.url) window.location.href = COUNTRIES[code].url;
167      },
168
169      onMarkerTooltipShow(e, tooltip, index){
170        const m = MARKERS[index];
171        if (m) tooltip.text(m.name);
172      },
173
174      onMarkerClick(e, index){
175        const m = MARKERS[index];
176        if (m?.code && COUNTRIES[m.code]?.url) window.location.href = COUNTRIES[m.code].url;
177      },
178
179      onRegionOver(e, code){
180        if(!COUNTRIES[code]) return;
181        const base = COUNTRY_COLORS[code] || WORLD_GRAY;
182        const el = map.regions[code]?.element;
183        if (el) el.setStyle({ fill: lighten(base, 0.22), filter:"drop-shadow(0 10px 14px rgba(0,0,0,.10))" });
184      },
185      onRegionOut(e, code){
186        if(!COUNTRIES[code]) return;
187        const base = COUNTRY_COLORS[code] || WORLD_GRAY;
188        const el = map.regions[code]?.element;
189        if (el) el.setStyle({ fill: base, filter:"none" });
190      },
191
192      onLoaded(m){
193        document.querySelectorAll("#alacartaMap [data-code]").forEach(el=>{
194          const code = el.getAttribute("data-code");
195          el.style.cursor = COUNTRIES[code] ? "pointer" : "default";
196          if (!COUNTRIES[code]) el.style.opacity = "0.70";
197        });
198
199        document.querySelectorAll('#alacartaMap text').forEach(t=>{
200          if (t.textContent && t.textContent.length) t.classList.add('jvm-marker-label');
201        });
202
203        setTimeout(() => focusToHome(m), 140);
204        window.addEventListener("resize", () => m.updateSize());
205      }
206    });
207
208    const mapEl = document.getElementById("alacartaMap");
209    let resetTimer = null;
210
211    mapEl.addEventListener("mouseleave", () => {
212      resetTimer = setTimeout(() => focusToHome(map), 550);
213    });
214    mapEl.addEventListener("mouseenter", () => {
215      if (resetTimer) clearTimeout(resetTimer);
216    });
217  }
218
219  waitForMapReady();
220})();
221</script>