{"id":964,"date":"2026-09-24T09:10:08","date_gmt":"2026-09-24T09:10:08","guid":{"rendered":"https:\/\/dimezi-events.com\/?page_id=964"},"modified":"2026-09-24T11:06:52","modified_gmt":"2026-09-24T11:06:52","slug":"test-carte-interactive","status":"publish","type":"page","link":"https:\/\/dimezi-events.com\/index.php\/test-carte-interactive\/","title":{"rendered":"test carte interactive"},"content":{"rendered":"<p><img decoding=\"async\" \n      src=\"https:\/\/dimezi-events.com\/wp-content\/uploads\/2026\/09\/planVAP-1.jpg\"\n      alt=\"Plan interactif du Domaine de la Vall\u00e9e aux Pages\"\n    ><br \/>\n    <!-- HOTSPOTS --><br \/>\n    <button style=\"left:79.6%;top:50.8%\" data-place=\"1\">1<\/button><br \/>\n    <button style=\"left:70.6%;top:40.6%\" data-place=\"2\">2<\/button><br \/>\n    <button style=\"left:53.1%;top:53.3%\" data-place=\"3\">3<\/button><br \/>\n    <button style=\"left:55.1%;top:30.7%\" data-place=\"4\">4<\/button><br \/>\n    <button style=\"left:63.9%;top:25.8%\" data-place=\"5\">5<\/button><br \/>\n    <button style=\"left:58.6%;top:23.8%\" data-place=\"6\">6<\/button><br \/>\n    <button style=\"left:46.9%;top:62.5%\" data-place=\"7\">7<\/button><br \/>\n    <button style=\"left:44%;top:43.5%\" data-place=\"8\">8<\/button><br \/>\n    <button style=\"left:34%;top:51.5%\" data-place=\"9\">9<\/button><br \/>\n    <button style=\"left:40.5%;top:36.4%\" data-place=\"10\">10<\/button><br \/>\n    <button style=\"left:42.2%;top:9.3%\" data-place=\"11\">11<\/button><br \/>\n    <button style=\"left:46.7%;top:26.6%\" data-place=\"12\">12<\/button><br \/>\n    <button style=\"left:50.3%;top:36.7%\" data-place=\"13\">13<\/button><br \/>\n    <button style=\"left:39.5%;top:28.7%\" data-place=\"14\">14<\/button><br \/>\n    <button style=\"left:24%;top:64.2%\" data-place=\"15\">15<\/button><br \/>\n    <button style=\"left:41.2%;top:48.5%\" data-place=\"16\">16<\/button><br \/>\n    <button style=\"left:59.6%;top:36.6%\" data-place=\"17\">17<\/button><br \/>\n  <!-- FICHE --><br \/>\n  <button type=\"button\" id=\"map-close\">\u00d7<\/button><br \/>\n  <img decoding=\"async\" id=\"info-photo\" src=\"\" alt=\"\"><br \/>\n    1<\/p>\n<h3 id=\"info-title\">S\u00e9lectionnez un lieu<\/h3>\n<p id=\"info-text\">\n      Cliquez sur un num\u00e9ro de la carte pour d\u00e9couvrir le lieu.\n    <\/p>\n<style>\n.domaine-map {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\/* IMAGE *\/\n.map-image {\n  position: relative;\n  width: 100%;\n  line-height: 0;\n}\n.map-image img {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\/* BOUTONS *\/\n.map-hotspot {\n  position: absolute;\n  transform: translate(-50%, -50%);\n  width: 38px;\n  height: 38px;\n  border: 2px solid white;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.90);\n  color: #333;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  line-height: 34px;\n  padding: 0;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.25);\n  transition: \n    transform 0.2s ease,\n    background 0.2s ease;\n}\n.map-hotspot:hover,\n.map-hotspot:focus {\n  transform: translate(-50%, -50%) scale(1.15);\n  background: #ffffff;\n  outline: none;\n}\n\/* FICHE *\/\n.map-info {\n  display: flex;\n  align-items: center;\n  gap: 18px;\n  margin-top: 20px;\n  padding: 22px;\n  background: #f5f4ed;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.08);\n}\n.map-info-number {\n  flex: 0 0 auto;\n  width: 45px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: #263c2b;\n  color: white;\n  font-size: 18px;\n  font-weight: 600;\n}\n.map-info h3 {\n  margin: 0 0 5px;\n  font-size: 22px;\n}\n.map-info p {\n  margin: 0;\n  line-height: 1.5;\n}\n\/* MOBILE *\/\n@media (max-width: 767px) {\n  .map-hotspot {\n    width: 32px;\n    height: 32px;\n    font-size: 12px;\n    line-height: 28px;\n  }\n  .map-info {\n    padding: 16px;\n  }\n  .map-info h3 {\n    font-size: 18px;\n  }\n  .map-info p {\n    font-size: 14px;\n  }\n}\n.map-info {\n  display: none;\n  position: relative;\n  align-items: center;\n  gap: 20px;\n  margin-top: 20px;\n  padding: 20px;\n  background: #f5f4ed;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.08);\n}\n.map-info.active {\n  display: flex;\n}\n#info-photo {\n  width: 220px;\n  height: 160px;\n  object-fit: cover;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n.map-info-content {\n  flex: 1;\n}\n.map-info-number {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 10px;\n  border-radius: 50%;\n  background: #263c2b;\n  color: white;\n  font-weight: 600;\n}\n.map-info h3 {\n  margin: 0 0 8px;\n  font-size: 22px;\n}\n.map-info p {\n  margin: 0;\n  line-height: 1.5;\n}\n.map-close {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  width: 32px;\n  height: 32px;\n  border: 0;\n  border-radius: 50%;\n  background: white;\n  color: #333;\n  font-size: 22px;\n  cursor: pointer;\n}\n@media (max-width: 767px) {\n  .map-info {\n    align-items: flex-start;\n  }\n  #info-photo {\n    width: 120px;\n    height: 100px;\n  }\n  .map-info h3 {\n    font-size: 18px;\n  }\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 \u00d7 1 S\u00e9lectionnez un lieu Cliquez sur un num\u00e9ro de la carte pour d\u00e9couvrir le lieu.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-964","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/pages\/964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/comments?post=964"}],"version-history":[{"count":32,"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/pages\/964\/revisions"}],"predecessor-version":[{"id":1008,"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/pages\/964\/revisions\/1008"}],"wp:attachment":[{"href":"https:\/\/dimezi-events.com\/index.php\/wp-json\/wp\/v2\/media?parent=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}