{"id":331,"date":"2026-10-08T22:57:07","date_gmt":"2026-10-08T21:57:07","guid":{"rendered":"https:\/\/www.mac123.net\/natureauxpattes\/?page_id=331"},"modified":"2026-10-08T22:57:07","modified_gmt":"2026-10-08T21:57:07","slug":"demander-le-secret","status":"publish","type":"page","link":"https:\/\/www.mac123.net\/natureauxpattes\/?page_id=331","title":{"rendered":"Demander le secret"},"content":{"rendered":"\n    <div class=\"dsw\" id=\"dsw-1\">\n        <form class=\"dsw-form\" novalidate>\n            <h2>Faire une demande de soin<\/h2>\n\n            <label>\n                La demande concerne\n                <select class=\"dsw-target\" required>\n                    <option value=\"\">Choisir\u2026<\/option>\n                    <option value=\"animal\">Un animal<\/option>\n                    <option value=\"humain\">Un humain<\/option>\n                <\/select>\n            <\/label>\n\n            <!-- Demande pour un animal -->\n            <section class=\"dsw-panel dsw-animal\" hidden>\n                <h3>Demande pour un animal<\/h3>\n\n                <label>\n                    Animal\n                    <select data-label=\"Animal\" data-required>\n                        <option value=\"\">Choisir\u2026<\/option>\n                        <option value=\"Chat\">Chat<\/option>\n                        <option value=\"Chien\">Chien<\/option>\n                    <\/select>\n                <\/label>\n\n                <p>Cliquez sur la zone concern\u00e9e :<\/p>\n\n                <div class=\"dsw-map-wrap\">\n                    <svg class=\"dsw-map dsw-animal-art\"\n                         viewBox=\"0 0 620 250\"\n                         role=\"group\"\n                         aria-label=\"Sch\u00e9ma indicatif des zones du corps de l\u2019animal\">\n\n                        <defs>\n                            <linearGradient id=\"dsw-1-fur\"\n                                            x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                                <stop offset=\"0%\" stop-color=\"#f2c28e\"\/>\n                                <stop offset=\"100%\" stop-color=\"#d99559\"\/>\n                            <\/linearGradient>\n                        <\/defs>\n\n                        <text x=\"310\" y=\"25\" text-anchor=\"middle\" class=\"dsw-map-title\">\n                            Cliquez sur la zone concern\u00e9e\n                        <\/text>\n\n                        <!-- Queue et pattes -->\n                        <path d=\"M164 115 C127 103 115 77 127 59\"\n                              class=\"dsw-animal-outline dsw-animal-limb\"\/>\n\n                        <path d=\"M205 153 L192 207 M253 164 L249 207\n                                 M371 163 L375 207 M419 151 L433 207\"\n                              class=\"dsw-animal-outline dsw-animal-limb\"\/>\n\n                        <!-- Corps -->\n                        <ellipse cx=\"307\" cy=\"124\" rx=\"151\" ry=\"58\"\n                                 fill=\"url(#dsw-1-fur)\"\n                                 class=\"dsw-animal-outline\"\/>\n\n                        <!-- Cou et t\u00eate -->\n                        <path d=\"M411 91 C431 73 460 74 479 91\n                                 L493 110 L522 117 C536 121 536 132 521 137\n                                 L486 145 C469 165 438 165 420 147 Z\"\n                              fill=\"url(#dsw-1-fur)\"\n                              class=\"dsw-animal-outline\"\/>\n\n                        <!-- Oreilles -->\n                        <path d=\"M444 84 L437 52 Q459 58 466 82 Z\"\n                              fill=\"#bd7445\" class=\"dsw-animal-outline\"\/>\n                        <path d=\"M465 83 L477 57 Q492 72 485 94 Z\"\n                              fill=\"#bd7445\" class=\"dsw-animal-outline\"\/>\n\n                        <!-- D\u00e9tails du visage -->\n                        <circle cx=\"485\" cy=\"105\" r=\"3.5\" fill=\"#49352b\"\/>\n                        <ellipse cx=\"527\" cy=\"123\" rx=\"5\" ry=\"4\" fill=\"#49352b\"\/>\n                        <path d=\"M488 141 Q500 151 512 141\"\n                              fill=\"none\" stroke=\"#754c30\" stroke-width=\"2\"\n                              stroke-linecap=\"round\"\/>\n\n                        <!-- Zones cliquables -->\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"T\u00eate\" aria-label=\"T\u00eate\">\n                            <circle cx=\"477\" cy=\"111\" r=\"20\"\/>\n                            <text x=\"477\" y=\"115\">T\u00eate<\/text>\n                        <\/g>\n\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"Cou\" aria-label=\"Cou\">\n                            <circle cx=\"426\" cy=\"119\" r=\"20\"\/>\n                            <text x=\"426\" y=\"123\">Cou<\/text>\n                        <\/g>\n\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"Dos\" aria-label=\"Dos\">\n                            <circle cx=\"305\" cy=\"91\" r=\"20\"\/>\n                            <text x=\"305\" y=\"95\">Dos<\/text>\n                        <\/g>\n\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"Ventre\" aria-label=\"Ventre\">\n                            <circle cx=\"305\" cy=\"148\" r=\"20\"\/>\n                            <text x=\"305\" y=\"152\">Ventre<\/text>\n                        <\/g>\n\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"Pattes avant\" aria-label=\"Pattes avant\">\n                            <circle cx=\"402\" cy=\"190\" r=\"20\"\/>\n                            <text x=\"402\" y=\"194\">Avant<\/text>\n                        <\/g>\n\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"Pattes arri\u00e8re\" aria-label=\"Pattes arri\u00e8re\">\n                            <circle cx=\"218\" cy=\"190\" r=\"20\"\/>\n                            <text x=\"218\" y=\"194\">Arri\u00e8re<\/text>\n                        <\/g>\n\n                        <g class=\"dsw-hotspot\" role=\"button\" tabindex=\"0\"\n                           data-zone=\"Queue\" aria-label=\"Queue\">\n                            <circle cx=\"130\" cy=\"75\" r=\"20\"\/>\n                            <text x=\"130\" y=\"79\">Queue<\/text>\n                        <\/g>\n                    <\/svg>\n                <\/div>\n\n                <p class=\"dsw-zone-result\">\n                    Zone s\u00e9lectionn\u00e9e : <strong>Aucune<\/strong>\n                <\/p>\n                <input type=\"hidden\" class=\"dsw-zone\" value=\"\">\n\n                <label>\n                    Nom\n                    <input type=\"text\" data-label=\"Nom du demandeur\" data-required>\n                <\/label>\n\n                <label>\n                    Pr\u00e9nom\n                    <input type=\"text\" data-label=\"Pr\u00e9nom du demandeur\" data-required>\n                <\/label>\n\n                <label>\n                    Pr\u00e9nom de l\u2019animal\n                    <input type=\"text\" data-label=\"Pr\u00e9nom de l\u2019animal\" data-required>\n                <\/label>\n\n                <label>\n                    Num\u00e9ro de t\u00e9l\u00e9phone\n                    <input type=\"tel\" data-label=\"T\u00e9l\u00e9phone\" data-required>\n                <\/label>\n            <\/section>\n\n            <!-- Demande pour un humain -->\n            <section class=\"dsw-panel dsw-human\" hidden>\n                <h3>Demande pour un humain<\/h3>\n\n                <label>\n                    Personne concern\u00e9e\n                    <select class=\"dsw-human-kind\"\n                            data-label=\"Personne concern\u00e9e\"\n                            data-required>\n                        <option value=\"\">Choisir\u2026<\/option>\n                        <option value=\"Adulte\">Adulte<\/option>\n                        <option value=\"Enfant\">Enfant<\/option>\n                    <\/select>\n                <\/label>\n\n                <label>\n                    Motif du soin\n                    <select class=\"dsw-reason\" data-label=\"Motif\" data-required>\n                        <option value=\"\">Choisir\u2026<\/option>\n                        <option value=\"Br\u00fblure\">Br\u00fblure<\/option>\n                        <option value=\"Migraine\">Migraine<\/option>\n                        <option value=\"Autre\">Autre<\/option>\n                    <\/select>\n                <\/label>\n\n                <!-- Br\u00fblure -->\n                <section class=\"dsw-panel dsw-reason-panel dsw-burn\" hidden>\n                    <h4>Br\u00fblure<\/h4>\n\n                    <label>\n                        Nom de la personne qui fait la demande\n                        <input type=\"text\" data-label=\"Nom du demandeur\" data-required>\n                    <\/label>\n\n                    <label>\n                        Pr\u00e9nom de la personne qui fait la demande\n                        <input type=\"text\" data-label=\"Pr\u00e9nom du demandeur\" data-required>\n                    <\/label>\n\n                    <label>\n                        Num\u00e9ro de t\u00e9l\u00e9phone\n                        <input type=\"tel\" data-label=\"T\u00e9l\u00e9phone\" data-required>\n                    <\/label>\n\n                    <label>\n                        La demande est-elle pour vous ?\n                        <select class=\"dsw-for-self\"\n                                data-label=\"Demande pour soi-m\u00eame\"\n                                data-required>\n                            <option value=\"\">Choisir\u2026<\/option>\n                            <option value=\"Oui\">Oui<\/option>\n                            <option value=\"Non\">Non, pour quelqu\u2019un d\u2019autre<\/option>\n                        <\/select>\n                    <\/label>\n\n                    <div class=\"dsw-panel dsw-other-person\" hidden>\n                        <label>\n                            Lien avec la personne\n                            <select data-label=\"Lien avec la personne\" data-required>\n                                <option value=\"\">Choisir\u2026<\/option>\n                                <option value=\"Conjoint(e)\">Conjoint(e)<\/option>\n                                <option value=\"P\u00e8re\">P\u00e8re<\/option>\n                                <option value=\"M\u00e8re\">M\u00e8re<\/option>\n                                <option value=\"Ami(e)\">Ami(e)<\/option>\n                                <option value=\"Enfant\">Enfant<\/option>\n                                <option value=\"Animal\">Animal<\/option>\n                                <option value=\"Autre\">Autre<\/option>\n                            <\/select>\n                        <\/label>\n\n                        <label>\n                            Nom de la personne br\u00fbl\u00e9e\n                            <input type=\"text\"\n                                   data-label=\"Nom de la personne br\u00fbl\u00e9e\"\n                                   data-required>\n                        <\/label>\n\n                        <label>\n                            Pr\u00e9nom de la personne br\u00fbl\u00e9e\n                            <input type=\"text\"\n                                   data-label=\"Pr\u00e9nom de la personne br\u00fbl\u00e9e\"\n                                   data-required>\n                        <\/label>\n                    <\/div>\n                <\/section>\n\n                <!-- Migraine -->\n                <section class=\"dsw-panel dsw-reason-panel dsw-migraine\" hidden>\n                    <h4>Migraine<\/h4>\n\n                    <label>\n                        Nom de la personne concern\u00e9e\n                        <input type=\"text\"\n                               data-label=\"Nom de la personne concern\u00e9e\"\n                               data-required>\n                    <\/label>\n\n                    <label>\n                        Pr\u00e9nom de la personne concern\u00e9e\n                        <input type=\"text\"\n                               data-label=\"Pr\u00e9nom de la personne concern\u00e9e\"\n                               data-required>\n                    <\/label>\n\n                    <label>\n                        Num\u00e9ro de t\u00e9l\u00e9phone\n                        <input type=\"tel\" data-label=\"T\u00e9l\u00e9phone\" data-required>\n                    <\/label>\n                <\/section>\n\n                <!-- Autre motif -->\n                <section class=\"dsw-panel dsw-reason-panel dsw-other-reason\" hidden>\n                    <h4>Autre motif<\/h4>\n\n                    <label>\n                        Pr\u00e9cisez le motif\n                        <textarea data-label=\"Motif pr\u00e9cis\u00e9\" data-required><\/textarea>\n                    <\/label>\n\n                    <label>\n                        Nom\n                        <input type=\"text\" data-label=\"Nom\" data-required>\n                    <\/label>\n\n                    <label>\n                        Pr\u00e9nom\n                        <input type=\"text\" data-label=\"Pr\u00e9nom\" data-required>\n                    <\/label>\n\n                    <label>\n                        Num\u00e9ro de t\u00e9l\u00e9phone\n                        <input type=\"tel\" data-label=\"T\u00e9l\u00e9phone\" data-required>\n                    <\/label>\n                <\/section>\n            <\/section>\n\n            <div class=\"dsw-send-area\">\n                <p>Envoyer la demande \u00e0 :<\/p>\n\n                <button type=\"button\"\n                        class=\"dsw-send\"\n                        data-recipient=\"Virginie\"\n                        data-phone=\"41774878665\">\n                    WhatsApp \u2014 Virginie\n                <\/button>\n\n                <button type=\"button\"\n                        class=\"dsw-send\"\n                        data-recipient=\"Patrick\"\n                        data-phone=\"41766722121\">\n                    WhatsApp \u2014 Patrick\n                <\/button>\n\n                <p class=\"dsw-confirmation\" aria-live=\"polite\"><\/p>\n            <\/div>\n        <\/form>\n    <\/div>\n\n    <style>\n        .dsw {\n            max-width: 680px;\n            padding: 20px;\n            border: 1px solid #ddd;\n            border-radius: 10px;\n        }\n\n        .dsw label {\n            display: block;\n            margin: 14px 0;\n        }\n\n        .dsw input:not([type=\"checkbox\"]),\n        .dsw select,\n        .dsw textarea {\n            display: block;\n            box-sizing: border-box;\n            width: 100%;\n            margin-top: 5px;\n            padding: 10px;\n        }\n\n        .dsw textarea {\n            min-height: 80px;\n        }\n\n        .dsw button {\n            margin: 5px 5px 5px 0;\n            padding: 10px 15px;\n            cursor: pointer;\n        }\n\n        .dsw [hidden] {\n            display: none !important;\n        }\n\n        .dsw-map-wrap {\n            overflow-x: auto;\n        }\n\n        .dsw-map {\n            display: block;\n            width: 100%;\n            min-width: 440px;\n            border-radius: 14px;\n            background: linear-gradient(180deg, #fffaf3, #f3f7fb);\n        }\n\n        .dsw-map-title {\n            fill: #333;\n            font-size: 14px;\n        }\n\n        .dsw-animal-outline {\n            stroke: #754c30;\n            stroke-width: 4;\n            stroke-linejoin: round;\n        }\n\n        .dsw-animal-limb {\n            fill: none;\n            stroke-width: 18;\n            stroke-linecap: round;\n        }\n\n        .dsw-hotspot {\n            cursor: pointer;\n        }\n\n        .dsw-hotspot circle {\n            fill: rgba(255, 255, 255, 0.9);\n            stroke: #55758d;\n            stroke-width: 2;\n        }\n\n        .dsw-hotspot text {\n            fill: #273b4a;\n            font-size: 9px;\n            font-weight: 700;\n            text-anchor: middle;\n            pointer-events: none;\n        }\n\n        .dsw-hotspot:hover circle,\n        .dsw-hotspot:focus circle,\n        .dsw-hotspot.selected circle {\n            fill: #ffd66b;\n            stroke: #a55b00;\n        }\n\n        .dsw-confirmation {\n            margin-top: 15px;\n            font-weight: 600;\n            white-space: pre-line;\n        }\n    <\/style>\n\n    <script>\n    (() => {\n        const root = document.getElementById(\"dsw-1\");\n        if (!root) return;\n\n        const form = root.querySelector('.dsw-form');\n\n        function showPanel(panel, show) {\n            if (!panel) return;\n\n            panel.hidden = !show;\n\n            panel.querySelectorAll('input, select, textarea').forEach(field => {\n                field.disabled = !show;\n                field.required = show && field.hasAttribute('data-required');\n            });\n        }\n\n        function updatePanels() {\n            const target = root.querySelector('.dsw-target').value;\n            const humanVisible = target === 'humain';\n            const animalVisible = target === 'animal';\n\n            showPanel(root.querySelector('.dsw-animal'), animalVisible);\n            showPanel(root.querySelector('.dsw-human'), humanVisible);\n\n            const reason = root.querySelector('.dsw-reason').value;\n\n            const burnVisible = humanVisible && reason === 'Br\u00fblure';\n            const migraineVisible = humanVisible && reason === 'Migraine';\n            const otherVisible = humanVisible && reason === 'Autre';\n\n            showPanel(root.querySelector('.dsw-burn'), burnVisible);\n            showPanel(root.querySelector('.dsw-migraine'), migraineVisible);\n            showPanel(root.querySelector('.dsw-other-reason'), otherVisible);\n\n            const forSomeoneElse =\n                burnVisible &&\n                root.querySelector('.dsw-for-self').value === 'Non';\n\n            showPanel(root.querySelector('.dsw-other-person'), forSomeoneElse);\n        }\n\n        root.querySelector('.dsw-target').addEventListener('change', updatePanels);\n        root.querySelector('.dsw-reason').addEventListener('change', updatePanels);\n        root.querySelector('.dsw-for-self').addEventListener('change', updatePanels);\n\n        root.querySelectorAll('.dsw-hotspot').forEach(hotspot => {\n            function selectZone() {\n                root.querySelectorAll('.dsw-hotspot').forEach(item => {\n                    item.classList.remove('selected');\n                });\n\n                hotspot.classList.add('selected');\n                root.querySelector('.dsw-zone').value = hotspot.dataset.zone;\n                root.querySelector('.dsw-zone-result strong').textContent =\n                    hotspot.dataset.zone;\n            }\n\n            hotspot.addEventListener('click', selectZone);\n\n            hotspot.addEventListener('keydown', event => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    selectZone();\n                }\n            });\n        });\n\n        root.querySelectorAll('.dsw-send').forEach(button => {\n            button.addEventListener('click', () => {\n                const confirmation = root.querySelector('.dsw-confirmation');\n                confirmation.textContent = '';\n\n                const target = root.querySelector('.dsw-target');\n\n                if (!target.value) {\n                    target.reportValidity();\n                    return;\n                }\n\n                updatePanels();\n\n                if (!form.reportValidity()) {\n                    return;\n                }\n\n                if (\n                    target.value === 'animal' &&\n                    !root.querySelector('.dsw-zone').value\n                ) {\n                    confirmation.textContent =\n                        'Veuillez s\u00e9lectionner une zone sur le sch\u00e9ma.';\n                    return;\n                }\n\n                const lines = [\n                    'Nouvelle demande de soin pour ' + button.dataset.recipient,\n                    'Type : ' + (target.value === 'animal' ? 'Animal' : 'Humain')\n                ];\n\n                if (target.value === 'animal') {\n                    const animal = root.querySelector('.dsw-animal select');\n                    lines.push('Animal : ' + animal.value);\n                    lines.push(\n                        'Zone concern\u00e9e : ' +\n                        root.querySelector('.dsw-zone').value\n                    );\n                } else {\n                    lines.push(\n                        'Personne concern\u00e9e : ' +\n                        root.querySelector('.dsw-human-kind').value\n                    );\n                    lines.push(\n                        'Motif : ' +\n                        root.querySelector('.dsw-reason').value\n                    );\n                }\n\n                root.querySelectorAll('[data-label]').forEach(field => {\n                    if (!field.disabled && field.value.trim()) {\n                        lines.push(\n                            field.dataset.label + ' : ' + field.value.trim()\n                        );\n                    }\n                });\n\n                const whatsappUrl =\n                    'https:\/\/wa.me\/' +\n                    button.dataset.phone +\n                    '?text=' +\n                    encodeURIComponent(lines.join('\\n'));\n\n                window.open(whatsappUrl, '_blank', 'noopener');\n\n                confirmation.textContent =\n                    'Nous avons bien re\u00e7u votre demande, sachez que nous travaillons gratuitement pour soigner.\\n' +\n                    'Nous ne rempla\u00e7ons pas un m\u00e9decin ou un v\u00e9t\u00e9rinaire.';\n            });\n        });\n\n        updatePanels();\n    })();\n    <\/script>\n\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":17,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-331","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/pages\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=331"}],"version-history":[{"count":2,"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/pages\/331\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/pages\/331\/revisions\/335"}],"up":[{"embeddable":true,"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=\/wp\/v2\/pages\/17"}],"wp:attachment":[{"href":"https:\/\/www.mac123.net\/natureauxpattes\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}