{"id":362,"date":"2026-10-01T12:50:12","date_gmt":"2026-10-01T12:50:12","guid":{"rendered":"https:\/\/francois-roger.eu\/Home\/?page_id=362"},"modified":"2026-10-01T13:44:25","modified_gmt":"2026-10-01T13:44:25","slug":"ccodi","status":"publish","type":"page","link":"https:\/\/francois-roger.eu\/Home\/home\/ccodi\/","title":{"rendered":"Carte et video"},"content":{"rendered":"\n<!-- CARTE INTERACTIVE AALEN -->\n\n<link rel=\"stylesheet\"\n      href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\">\n\n<style>\n.aalen-carte {\n    width: 100%;\n    max-width: 1100px;\n    margin: 30px auto;\n    background: #fff;\n    border-radius: 22px;\n    overflow: hidden;\n    box-shadow: 0 18px 50px rgba(20,45,65,.22);\n    font-family: Arial, sans-serif;\n}\n\n.aalen-header {\n    padding: 26px 30px;\n    text-align: center;\n    background: linear-gradient(135deg,#17324d,#315f7d);\n    color: white;\n}\n\n.aalen-header h1 {\n    margin: 0;\n    font-size: 34px;\n    letter-spacing: 3px;\n}\n\n.aalen-header p {\n    margin: 8px 0 0;\n    font-size: 16px;\n}\n\n.aalen-map-container {\n    position: relative;\n}\n\n#aalen-map {\n    width: 100%;\n    height: 650px;\n}\n\n.aalen-badge {\n    position: absolute;\n    z-index: 1000;\n    top: 18px;\n    left: 18px;\n    background: rgba(255,255,255,.95);\n    padding: 10px 16px;\n    border-radius: 30px;\n    font-weight: bold;\n    box-shadow: 0 4px 14px rgba(0,0,0,.18);\n}\n\n.aalen-instruction {\n    position: absolute;\n    z-index: 1000;\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(23,50,77,.95);\n    color: white;\n    padding: 12px 20px;\n    border-radius: 30px;\n    white-space: nowrap;\n    box-shadow: 0 5px 16px rgba(0,0,0,.22);\n}\n\n.aalen-play-marker {\n    width: 58px;\n    height: 58px;\n    border-radius: 50%;\n    background: #e21d2d;\n    border: 5px solid white;\n    box-shadow: 0 4px 18px rgba(0,0,0,.35);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 25px;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n.aalen-footer {\n    padding: 15px;\n    text-align: center;\n    font-size: 13px;\n    color: #617180;\n}\n\n.aalen-video-button {\n    display: inline-block;\n    background: #e21d2d;\n    color: white !important;\n    text-decoration: none;\n    padding: 10px 16px;\n    border-radius: 8px;\n    font-weight: bold;\n}\n\n.aalen-video-button:hover {\n    background: #b91421;\n}\n<\/style>\n\n\n<div class=\"aalen-carte\">\n\n    <div class=\"aalen-header\">\n        <h1>AALEN<\/h1>\n        <p>Une ville allemande au c\u0153ur du jumelage Saint-L\u00f4 \u2013 Aalen<\/p>\n    <\/div>\n\n    <div class=\"aalen-map-container\">\n\n        <div class=\"aalen-badge\">\n            &#x1f4cd; Aalen \u00b7 Baden-W\u00fcrttemberg\n        <\/div>\n\n        <div id=\"aalen-map\"><\/div>\n\n        <div class=\"aalen-instruction\">\n            &#x25b6; Cliquez sur le point rouge pour d\u00e9couvrir la vid\u00e9o\n        <\/div>\n\n    <\/div>\n\n    <div class=\"aalen-footer\">\n        Jumelage Saint-L\u00f4 \u2013 Aalen \u00b7 Carte interactive\n    <\/div>\n\n<\/div>\n\n\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n    \/* Coordonn\u00e9es d'Aalen *\/\n    const aalen = [48.8376, 10.0930];\n\n    \/* Cr\u00e9ation de la carte *\/\n    const map = L.map('aalen-map').setView(aalen, 13);\n\n    \/* Fond OpenStreetMap *\/\n    L.tileLayer(\n        'https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',\n        {\n            maxZoom: 19,\n            attribution: '\u00a9 OpenStreetMap contributors'\n        }\n    ).addTo(map);\n\n    \/* Cr\u00e9ation du bouton rouge &#x25b6; *\/\n    const playIcon = L.divIcon({\n        className: '',\n        html: '<div class=\"aalen-play-marker\">&#x25b6;<\/div>',\n        iconSize: [58, 58],\n        iconAnchor: [29, 29],\n        popupAnchor: [0, -28]\n    });\n\n    \/* Point central d'Aalen *\/\n    const marker = L.marker(aalen, {\n        icon: playIcon\n    }).addTo(map);\n\n    \/* Fen\u00eatre au clic *\/\n    marker.bindPopup(`\n        <div style=\"text-align:center\">\n\n            <div style=\"\n                font-size:20px;\n                font-weight:bold;\n                color:#17324d;\n                margin-bottom:8px;\n            \">\n                Aalen\n            <\/div>\n\n            <div style=\"font-size:13px;margin-bottom:12px;\">\n                D\u00e9couvrez la vid\u00e9o consacr\u00e9e \u00e0 Aalen.\n            <\/div>\n\n            <a\n                class=\"aalen-video-button\"\n                href=\"https:\/\/www.youtube.com\/watch?v=vqMe6rp1yQw&#038;t=18s\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                &#x25b6; Ouvrir la vid\u00e9o\n            <\/a>\n\n        <\/div>\n    `);\n\n});\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>AALEN Une ville allemande au c\u0153ur du jumelage Saint-L\u00f4 \u2013 Aalen &#x1f4cd; Aalen \u00b7 Baden-W\u00fcrttemberg &#x25b6; Cliquez sur le point rouge pour d\u00e9couvrir la vid\u00e9o Jumelage Saint-L\u00f4 \u2013 Aalen \u00b7 Carte interactive<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":235,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-362","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/pages\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":2,"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/pages\/362\/revisions"}],"predecessor-version":[{"id":364,"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/pages\/362\/revisions\/364"}],"up":[{"embeddable":true,"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/pages\/235"}],"wp:attachment":[{"href":"https:\/\/francois-roger.eu\/Home\/wp-json\/wp\/v2\/media?parent=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}