{"id":9492,"date":"2025-12-30T13:37:55","date_gmt":"2025-12-30T12:37:55","guid":{"rendered":"https:\/\/saintremaclestavelot.be\/secondaire\/?page_id=9492"},"modified":"2025-12-30T13:54:10","modified_gmt":"2025-12-30T12:54:10","slug":"visite-aerienne","status":"publish","type":"page","link":"https:\/\/saintremaclestavelot.be\/secondaire\/notre-ecole\/visite-aerienne\/","title":{"rendered":"Visite A\u00e9rienne"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9492\" class=\"elementor elementor-9492\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f656f3 e-con-full e-flex e-con e-parent\" data-id=\"2f656f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11852d9 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"11852d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"interactive-hint\">\r\n  \ud83d\uddb1\ufe0f Passez votre souris sur les zones de l\u2019image pour afficher des informations.\r\n<\/div>\r\n\r\n<style>\r\n  .interactive-hint {\r\n    font-family: 'Segoe UI', sans-serif;\r\n    border: 1px solid #00AEEF;\r\n    color: #007EA5;\r\n    padding: 12px 18px;\r\n    margin-bottom: 16px;\r\n    font-size: 16px;\r\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e35f47b elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"e35f47b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"image-interactive\" data-zones='[\r\n  {\r\n    \"id\":\"crespin_admin\",\r\n    \"label\":\"Crespin - Batiment administratif\",\r\n    \"title\":\"B\u00e2timent administratif\",\r\n    \"subtitle\":\"Crespin\",\r\n    \"kind\":\"administration\",\r\n    \"icon\":\"\ud83c\udfdb\ufe0f\",\r\n    \"parts\":[\"Crespin\",\"Batiment administratif\"],\r\n    \"tags\":[\"crespin\",\"administratif\",\"administration\"],\r\n    \"points\":[[1465,1295],[1558,1346],[1614,1546],[1725,1542],[1814,1374],[1749,1164],[1576,1146],[1446,1230]]\r\n  },\r\n  {\r\n    \"id\":\"restaurant_gym_nx\",\r\n    \"label\":\"Restaurant \/ Salle de Gym \/ Nx\",\r\n    \"title\":\"Restaurant \u2022 Gym \u2022 Nx\",\r\n    \"subtitle\":\"P\u00f4le vie scolaire\",\r\n    \"kind\":\"services\",\r\n    \"icon\":\"\ud83c\udf7d\ufe0f\",\r\n    \"parts\":[\"Restaurant\",\"Salle de Gym\",\"Nx\"],\r\n    \"tags\":[\"restaurant\",\"gym\",\"nx\",\"services\"],\r\n    \"points\":[[1604,1546],[1548,1355],[1330,1248],[1157,1290],[906,1639],[938,1793],[1050,1700],[1227,1672],[1376,1709],[1493,1793]]\r\n  },\r\n  {\r\n    \"id\":\"lycee_accueil_polyvalente\",\r\n    \"label\":\"Lyc\u00e9e \/ Accueil \/ Salle Polyvalente\",\r\n    \"title\":\"Lyc\u00e9e \u2022 Accueil \u2022 Polyvalente\",\r\n    \"subtitle\":\"Entr\u00e9e & espaces communs\",\r\n    \"kind\":\"enseignement\",\r\n    \"icon\":\"\ud83c\udf93\",\r\n    \"parts\":[\"Lyc\u00e9e\",\"Accueil\",\"Salle Polyvalente\"],\r\n    \"tags\":[\"lycee\",\"accueil\",\"polyvalente\",\"enseignement\"],\r\n    \"points\":[[1036,1886],[1073,1714],[1320,1709],[1427,1756],[1912,2124],[1954,2301],[1753,2515]]\r\n  },\r\n  {\r\n    \"id\":\"fondamental\",\r\n    \"label\":\"Fondamental\",\r\n    \"title\":\"Fondamental\",\r\n    \"subtitle\":\"B\u00e2timent\",\r\n    \"kind\":\"enseignement\",\r\n    \"icon\":\"\ud83e\uddd2\",\r\n    \"parts\":[\"Fondamental\"],\r\n    \"tags\":[\"fondamental\",\"enseignement\"],\r\n    \"points\":[[2187,1625],[2969,1705],[2992,1337],[2261,1183]]\r\n  },\r\n  {\r\n    \"id\":\"cour_recreation\",\r\n    \"label\":\"Cours de r\u00e9cr\u00e9ation\",\r\n    \"title\":\"Cour de r\u00e9cr\u00e9ation\",\r\n    \"subtitle\":\"Zone ext\u00e9rieure\",\r\n    \"kind\":\"exterieur\",\r\n    \"icon\":\"\ud83c\udfc3\",\r\n    \"parts\":[\"Cours de r\u00e9cr\u00e9ation\"],\r\n    \"tags\":[\"cour\",\"recreation\",\"exterieur\"],\r\n    \"points\":[[2168,1639],[1991,2208],[3104,2371],[3127,1751],[2755,1700]]\r\n  },\r\n  {\r\n    \"id\":\"cour_recreation_bas\",\r\n    \"label\":\"Cours de r\u00e9cr\u00e9ation (bas)\",\r\n    \"title\":\"Cour de r\u00e9cr\u00e9ation (bas)\",\r\n    \"subtitle\":\"Zone ext\u00e9rieure\",\r\n    \"kind\":\"exterieur\",\r\n    \"icon\":\"\ud83c\udfc3\",\r\n    \"parts\":[\"Cours de r\u00e9cr\u00e9ation\",\"bas\"],\r\n    \"tags\":[\"cour\",\"recreation\",\"bas\",\"exterieur\"],\r\n    \"points\":[[1991,2235],[1921,2599],[2857,2734],[2932,2366]]\r\n  },\r\n  {\r\n    \"id\":\"verger\",\r\n    \"label\":\"Verger\",\r\n    \"title\":\"Verger\",\r\n    \"subtitle\":\"Espace vert\",\r\n    \"kind\":\"exterieur\",\r\n    \"icon\":\"\ud83c\udf33\",\r\n    \"parts\":[\"Verger\"],\r\n    \"tags\":[\"verger\",\"exterieur\",\"vert\"],\r\n    \"points\":[[2964,2398],[2913,2734],[2997,2766],[2974,2869],[3709,2939],[3467,2738],[3570,2375],[3411,2329],[3141,2333],[3123,2398]]\r\n  },\r\n  {\r\n    \"id\":\"etude_sciences\",\r\n    \"label\":\"Salle d\u00e9tude \/ Sciences\",\r\n    \"title\":\"\u00c9tude \u2022 Sciences\",\r\n    \"subtitle\":\"Salles\",\r\n    \"kind\":\"enseignement\",\r\n    \"icon\":\"\ud83d\udd2c\",\r\n    \"parts\":[\"Salle d\u00e9tude\",\"Sciences\"],\r\n    \"tags\":[\"etude\",\"sciences\",\"enseignement\"],\r\n    \"points\":[[3015,1225],[2988,1700],[3234,1732],[3328,1271]]\r\n  },\r\n  {\r\n    \"id\":\"profs_locaux\",\r\n    \"label\":\"Salle des profs \/ Locaux\",\r\n    \"title\":\"Salle des profs \u2022 Locaux\",\r\n    \"subtitle\":\"Espaces staff\",\r\n    \"kind\":\"staff\",\r\n    \"icon\":\"\ud83d\udc69\u200d\ud83c\udfeb\",\r\n    \"parts\":[\"Salle des profs\",\"Locaux\"],\r\n    \"tags\":[\"profs\",\"locaux\",\"staff\"],\r\n    \"points\":[[3407,1337],[3137,2249],[3397,2310],[3453,1984],[3998,2082],[4063,1504]]\r\n  },\r\n  {\r\n    \"id\":\"chapelle\",\r\n    \"label\":\"Chapelle\",\r\n    \"title\":\"Chapelle\",\r\n    \"subtitle\":\"B\u00e2timent\",\r\n    \"kind\":\"lieu\",\r\n    \"icon\":\"\u26ea\",\r\n    \"parts\":[\"Chapelle\"],\r\n    \"tags\":[\"chapelle\",\"lieu\"],\r\n    \"points\":[[3463,2003],[3421,2282],[4063,2459],[4152,2147]]\r\n  }\r\n]'\r\n data-original-width=\"5260\" data-original-height=\"2950\">\r\n  <img decoding=\"async\" src=\"https:\/\/saintremaclestavelot.be\/secondaire\/wp-content\/uploads\/sites\/2\/2025\/12\/Cvisuels-251106-104600-COMP-scaled.webp\">\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ce0d6f elementor-widget elementor-widget-html\" data-id=\"8ce0d6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .image-interactive { position: relative; }\r\n\r\n  \/* Overlay SVG *\/\r\n  .ii-overlay { position:absolute; inset:0; z-index:1; }\r\n  .ii-overlay svg { width:100%; height:100%; display:block; }\r\n\r\n  \/* Zones *\/\r\n  .ii-zone { transition: opacity .15s ease, fill-opacity .15s ease, stroke-width .15s ease; }\r\n  .ii-zone { cursor:pointer; pointer-events:auto; }\r\n  .ii-zone.is-dim { opacity: .25; }\r\n  .ii-zone.is-active { opacity: 1; fill-opacity: .35; stroke-width: 3; }\r\n\r\n  \/* Desktop hover tooltip (optionnel, discret) *\/\r\n  .ii-tooltip {\r\n    position:absolute;\r\n    display:none;\r\n    max-width: 260px;\r\n    background:#fff;\r\n    color:#222;\r\n    border:1px solid rgba(0,0,0,.12);\r\n    border-radius:12px;\r\n    box-shadow:0 10px 25px rgba(0,0,0,.18);\r\n    padding:10px 12px;\r\n    font: 14px\/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n    z-index: 3;\r\n    pointer-events:none;\r\n  }\r\n  .ii-tooltip .t-title { font-weight: 700; margin:0 0 4px; }\r\n  .ii-tooltip .t-sub { opacity:.75; font-size: 12px; margin:0; }\r\n\r\n  \/* Bottom sheet (mobile-first) *\/\r\n  .ii-sheet {\r\n    position:absolute;\r\n    left: 10px;\r\n    right: 10px;\r\n    bottom: 10px;\r\n    z-index: 4;\r\n    background:#fff;\r\n    border: 1px solid rgba(0,0,0,.12);\r\n    border-radius: 16px;\r\n    box-shadow: 0 14px 40px rgba(0,0,0,.22);\r\n    overflow:hidden;\r\n    transform: translateY(110%);\r\n    transition: transform .18s ease;\r\n  }\r\n  .ii-sheet.is-open { transform: translateY(0); }\r\n\r\n  .ii-sheet__top {\r\n    display:flex;\r\n    gap:10px;\r\n    align-items:flex-start;\r\n    padding: 12px 12px 10px;\r\n  }\r\n  .ii-badge {\r\n    width: 40px; height: 40px;\r\n    border-radius: 12px;\r\n    display:flex; align-items:center; justify-content:center;\r\n    background: rgba(20,154,184,.10);\r\n    font-size: 20px;\r\n    flex: 0 0 auto;\r\n  }\r\n  .ii-sheet__title { margin:0; font-weight:800; font-size: 15px; }\r\n  .ii-sheet__sub { margin:2px 0 0; font-size: 12px; opacity: .75; }\r\n\r\n  .ii-sheet__actions {\r\n    margin-left:auto;\r\n    display:flex;\r\n    gap:8px;\r\n  }\r\n  .ii-btn {\r\n    border:1px solid rgba(0,0,0,.12);\r\n    background:#fff;\r\n    border-radius: 12px;\r\n    padding: 8px 10px;\r\n    font-size: 12px;\r\n    cursor:pointer;\r\n  }\r\n\r\n  .ii-sheet__body { padding: 0 12px 12px; }\r\n  .ii-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }\r\n  .ii-tag {\r\n    font-size: 12px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    background: rgba(0,0,0,.06);\r\n  }\r\n\r\n  \/* Search + list *\/\r\n  .ii-panel {\r\n    position:absolute;\r\n    top:10px; left:10px; right:10px;\r\n    z-index: 4;\r\n    display:flex;\r\n    gap:8px;\r\n    align-items:center;\r\n  }\r\n  .ii-search {\r\n    flex:1;\r\n    background:#fff;\r\n    border:1px solid rgba(0,0,0,.12);\r\n    border-radius: 14px;\r\n    padding: 10px 12px;\r\n    font-size: 14px;\r\n    outline: none;\r\n  }\r\n  .ii-list {\r\n    position:absolute;\r\n    top:54px; left:10px; right:10px;\r\n    z-index: 4;\r\n    background:#fff;\r\n    border:1px solid rgba(0,0,0,.12);\r\n    border-radius: 14px;\r\n    box-shadow: 0 14px 40px rgba(0,0,0,.18);\r\n    overflow:hidden;\r\n    display:none;\r\n    max-height: 45vh;\r\n    overflow:auto;\r\n  }\r\n  .ii-list.is-open { display:block; }\r\n  .ii-item {\r\n    padding: 10px 12px;\r\n    cursor:pointer;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:10px;\r\n  }\r\n  .ii-item:hover { background: rgba(0,0,0,.04); }\r\n  .ii-item small { opacity:.75; display:block; margin-top:2px; }\r\n  .ii-item + .ii-item { border-top:1px solid rgba(0,0,0,.06); }\r\n\r\n  @media (hover:hover) and (pointer:fine) {\r\n    \/* Sur desktop: on peut afficher tooltip et laisser la sheet moins intrusive *\/\r\n    .ii-sheet { left:auto; right:10px; width: 320px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  function initInteractiveImage(container) {\r\n    const img = container.querySelector('img');\r\n    const originalWidth = parseFloat(container.dataset.originalWidth);\r\n    const originalHeight = parseFloat(container.dataset.originalHeight);\r\n    const zones = JSON.parse(container.dataset.zones);\r\n\r\n    container.style.position = 'relative';\r\n\r\n    \/\/ Top search panel (B\/C)\r\n    const panel = document.createElement('div');\r\n    panel.className = 'ii-panel';\r\n    panel.innerHTML = `\r\n      <input class=\"ii-search\" type=\"search\" placeholder=\"Rechercher une zone\u2026\" aria-label=\"Rechercher une zone\">\r\n    `;\r\n    container.appendChild(panel);\r\n\r\n    const list = document.createElement('div');\r\n    list.className = 'ii-list';\r\n    container.appendChild(list);\r\n\r\n    \/\/ Overlay SVG\r\n    const overlay = document.createElement('div');\r\n    overlay.className = 'ii-overlay';\r\n    overlay.style.pointerEvents = 'none';\r\n    container.appendChild(overlay);\r\n\r\n    \/\/ Desktop tooltip (optionnel)\r\n    const tooltip = document.createElement('div');\r\n    tooltip.className = 'ii-tooltip';\r\n    container.appendChild(tooltip);\r\n\r\n    \/\/ Bottom sheet (A\/B\/D)\r\n    const sheet = document.createElement('div');\r\n    sheet.className = 'ii-sheet';\r\n    sheet.innerHTML = `\r\n      <div class=\"ii-sheet__top\">\r\n        <div class=\"ii-badge\" aria-hidden=\"true\">\ud83d\udccd<\/div>\r\n        <div>\r\n          <h3 class=\"ii-sheet__title\">S\u00e9lectionne une zone<\/h3>\r\n          <p class=\"ii-sheet__sub\">Appuie sur une zone de l\u2019image<\/p>\r\n        <\/div>\r\n        <div class=\"ii-sheet__actions\">\r\n          <button class=\"ii-btn ii-close\" type=\"button\">Fermer<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"ii-sheet__body\">\r\n        <div class=\"ii-tags\"><\/div>\r\n      <\/div>\r\n    `;\r\n    container.appendChild(sheet);\r\n\r\n    const closeBtn = sheet.querySelector('.ii-close');\r\n    closeBtn.addEventListener('click', () => {\r\n      sheet.classList.remove('is-open');\r\n      setActive(null);\r\n    });\r\n\r\n    let activeId = null;\r\n    let svg, polygonsById = new Map();\r\n\r\n    function isCoarsePointer() {\r\n      return window.matchMedia('(pointer: coarse)').matches;\r\n    }\r\n\r\n    function sanitize(text) {\r\n      const div = document.createElement('div');\r\n      div.textContent = text ?? '';\r\n      return div.innerHTML;\r\n    }\r\n\r\n    function openSheet(zone) {\r\n      const badge = sheet.querySelector('.ii-badge');\r\n      const title = sheet.querySelector('.ii-sheet__title');\r\n      const sub = sheet.querySelector('.ii-sheet__sub');\r\n      const tagsWrap = sheet.querySelector('.ii-tags');\r\n\r\n      badge.textContent = zone.icon || '\ud83d\udccd';\r\n      title.textContent = zone.title || zone.label;\r\n      sub.textContent = zone.subtitle || zone.label;\r\n\r\n      const tags = (zone.tags || []).slice(0, 8);\r\n      tagsWrap.innerHTML = tags.map(t => `<span class=\"ii-tag\">${sanitize(t)}<\/span>`).join('');\r\n\r\n      sheet.classList.add('is-open');\r\n    }\r\n\r\n    function setActive(zoneId) {\r\n      activeId = zoneId;\r\n\r\n      \/\/ Dim others + highlight active\r\n      polygonsById.forEach((poly, id) => {\r\n        poly.classList.toggle('is-active', id === zoneId);\r\n        poly.classList.toggle('is-dim', zoneId && id !== zoneId);\r\n      });\r\n\r\n      if (!zoneId) return;\r\n\r\n      const zone = zones.find(z => z.id === zoneId);\r\n      if (zone) openSheet(zone);\r\n    }\r\n\r\n    function buildList(filteredZones) {\r\n      list.innerHTML = filteredZones.map(z => `\r\n        <div class=\"ii-item\" data-id=\"${sanitize(z.id)}\">\r\n          <div class=\"ii-badge\" style=\"width:34px;height:34px;border-radius:12px;\">${sanitize(z.icon || \"\ud83d\udccd\")}<\/div>\r\n          <div style=\"min-width:0;\">\r\n            <div style=\"font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\">${sanitize(z.title || z.label)}<\/div>\r\n            <small>${sanitize(z.subtitle || \"\")}<\/small>\r\n          <\/div>\r\n        <\/div>\r\n      `).join('');\r\n\r\n      list.querySelectorAll('.ii-item').forEach(item => {\r\n        item.addEventListener('click', () => {\r\n          const id = item.getAttribute('data-id');\r\n          list.classList.remove('is-open');\r\n          setActive(id);\r\n        });\r\n      });\r\n    }\r\n\r\n    function renderPolygons() {\r\n      overlay.innerHTML = '';\r\n      polygonsById.clear();\r\n\r\n      const imgWidth = img.clientWidth;\r\n      const imgHeight = img.clientHeight;\r\n\r\n      const scaleX = imgWidth \/ originalWidth;\r\n      const scaleY = imgHeight \/ originalHeight;\r\n\r\n      svg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');\r\n      svg.setAttribute('width', imgWidth);\r\n      svg.setAttribute('height', imgHeight);\r\n      svg.style.position = 'absolute';\r\n      svg.style.top = '0';\r\n      svg.style.left = '0';\r\n      svg.style.pointerEvents = 'none';\r\n\r\n      zones.forEach(zone => {\r\n        const polygon = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'polygon');\r\n        const pts = zone.points.map(p => ({ x: p[0]*scaleX, y: p[1]*scaleY }));\r\n\r\n        polygon.setAttribute('points', pts.map(p => `${p.x},${p.y}`).join(' '));\r\n        polygon.setAttribute('fill', '#149AB8');\r\n        polygon.setAttribute('fill-opacity', '0.18');\r\n        polygon.setAttribute('stroke', '#149AB8');\r\n        polygon.setAttribute('stroke-width', '1.8');\r\n        polygon.classList.add('ii-zone');\r\n        polygon.style.pointerEvents = 'auto';\r\n\r\n        polygonsById.set(zone.id, polygon);\r\n\r\n        \/\/ Mobile: tap\/click => open bottom sheet\r\n        polygon.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          e.stopPropagation();\r\n          setActive(zone.id);\r\n        });\r\n\r\n        \/\/ Desktop: hover tooltip (l\u00e9ger)\r\n        polygon.addEventListener('mousemove', (e) => {\r\n          if (isCoarsePointer()) return; \/\/ sur mobile: pas de tooltip suiveur\r\n\r\n          const bounds = container.getBoundingClientRect();\r\n          const x = e.clientX - bounds.left;\r\n          const y = e.clientY - bounds.top;\r\n\r\n          tooltip.style.display = 'block';\r\n          tooltip.innerHTML = `\r\n            <div class=\"t-title\">${sanitize(zone.icon || \"\ud83d\udccd\")} ${sanitize(zone.title || zone.label)}<\/div>\r\n            <p class=\"t-sub\">${sanitize(zone.subtitle || \"\")}<\/p>\r\n          `;\r\n          tooltip.style.left = Math.min(x + 12, bounds.width - 260) + 'px';\r\n          tooltip.style.top = Math.max(y - 12, 10) + 'px';\r\n        });\r\n\r\n        polygon.addEventListener('mouseleave', () => {\r\n          tooltip.style.display = 'none';\r\n        });\r\n\r\n        svg.appendChild(polygon);\r\n      });\r\n\r\n      overlay.appendChild(svg);\r\n\r\n      \/\/ Re-apply active after resize\r\n      if (activeId) setActive(activeId);\r\n    }\r\n\r\n    \/\/ Search behavior\r\n    const searchInput = panel.querySelector('.ii-search');\r\n    buildList(zones);\r\n\r\n    searchInput.addEventListener('focus', () => {\r\n      list.classList.add('is-open');\r\n    });\r\n\r\n    searchInput.addEventListener('input', () => {\r\n      const q = searchInput.value.trim().toLowerCase();\r\n      const filtered = zones.filter(z => {\r\n        const hay = [\r\n          z.label, z.title, z.subtitle,\r\n          ...(z.tags || []),\r\n          ...(z.parts || [])\r\n        ].join(' ').toLowerCase();\r\n        return hay.includes(q);\r\n      });\r\n      buildList(filtered);\r\n      list.classList.add('is-open');\r\n    });\r\n\r\n    \/\/ Click outside to close list (nice UX)\r\n    document.addEventListener('click', (e) => {\r\n      if (!container.contains(e.target)) return;\r\n      const inPanel = panel.contains(e.target) || list.contains(e.target);\r\n      if (!inPanel) list.classList.remove('is-open');\r\n    });\r\n\r\n    \/\/ Close sheet if user taps empty area on image\r\n    container.addEventListener('click', (e) => {\r\n      const clickedPolygon = e.target && e.target.classList && e.target.classList.contains('ii-zone');\r\n      if (!clickedPolygon) {\r\n        \/\/ do not force close on desktop; on mobile it's useful\r\n        if (isCoarsePointer()) {\r\n          sheet.classList.remove('is-open');\r\n          setActive(null);\r\n        }\r\n      }\r\n    });\r\n\r\n    \/\/ Resize observer (better than window resize only)\r\n    const ro = new ResizeObserver(() => renderPolygons());\r\n    ro.observe(container);\r\n\r\n    img.addEventListener('load', renderPolygons);\r\n    if (img.complete) renderPolygons();\r\n  }\r\n\r\n  document.querySelectorAll('.image-interactive').forEach(initInteractiveImage);\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\uddb1\ufe0f Passez votre souris sur les zones de l\u2019image pour afficher des informations.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":218,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"iawp_total_views":124,"footnotes":""},"class_list":["post-9492","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/pages\/9492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/comments?post=9492"}],"version-history":[{"count":7,"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/pages\/9492\/revisions"}],"predecessor-version":[{"id":9502,"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/pages\/9492\/revisions\/9502"}],"up":[{"embeddable":true,"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/pages\/218"}],"wp:attachment":[{"href":"https:\/\/saintremaclestavelot.be\/secondaire\/wp-json\/wp\/v2\/media?parent=9492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}