{"id":26,"date":"2025-08-15T01:53:41","date_gmt":"2025-08-14T23:53:41","guid":{"rendered":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/?page_id=26"},"modified":"2025-08-15T10:56:54","modified_gmt":"2025-08-15T08:56:54","slug":"generateur-diframe","status":"publish","type":"page","link":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/","title":{"rendered":"G\u00e9n\u00e9rateur d&rsquo;iframe"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26\" class=\"elementor elementor-26\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e788fb e-flex e-con-boxed e-con e-parent\" data-id=\"1e788fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4bbc673 elementor-widget elementor-widget-shortcode\" data-id=\"4bbc673\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"rdv-generator-wrapper\">\n            <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n            <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n            <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n            \n            <h1>G\u00e9n\u00e9rez votre widget de prise de rendez-vous<\/h1>\n\n            <div class=\"generator-container\">\n                <div class=\"form-group praticien-search-group\">\n                    <label for=\"praticien-search\">Recherchez votre nom<\/label>\n                    <input type=\"text\" id=\"praticien-search\" placeholder=\"Entrez votre pr\u00e9nom ou nom (3 lettres min.)...\">\n                    <div id=\"praticien-suggestions\" class=\"suggestions-list\"><\/div>\n                    <input type=\"hidden\" id=\"praticien-slug-hidden\">\n\n                    <p class=\"refresh-notice\">\n                        Vous ne trouvez pas votre nom dans la liste ? \n                        <a href=\"#\" id=\"refresh-list-link\">Cliquez ici pour l'actualiser !<\/a>\n                        <span id=\"refresh-status\"><\/span>\n                    <\/p>\n                <\/div>\n\n                <div class=\"generator-grid\">\n                    <div class=\"generator-controls\">\n                        <div class=\"form-group\">\n                            <label for=\"version-select\">Choisissez la version du widget<\/label>\n                            <select id=\"version-select\">\n                                <option value=\"v1\">V1 - Compacte (340x250)<\/option>\n                                <option value=\"v2\" selected>V2 - Carte (320x370)<\/option>\n                                <option value=\"v3\">V3 - Banni\u00e8re (540x160)<\/option>\n                                <option value=\"v4\">V4 - Bouton (260x120)<\/option>\n                            <\/select>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"couleur-select\">Choisissez la couleur<\/label>\n                            <select id=\"couleur-select\">\n                                <option value=\"bleu\" selected>Bleu<\/option>\n                                <option value=\"jaune\">Jaune<\/option>\n                                <option value=\"blanc\">Blanc<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    <div class=\"generator-preview\">\n                         <div class=\"preview-sticky-wrapper\">\n                            <label>Aper\u00e7u de votre widget<\/label>\n                            <div class=\"preview-box\">\n                                <iframe id=\"preview-iframe\" frameborder=\"0\"><\/iframe>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"generator-code\">\n                        <div class=\"form-group generated-code-group\">\n                            <label for=\"generated-code\">Code g\u00e9n\u00e9r\u00e9<\/label>\n                            <textarea id=\"generated-code\" readonly><\/textarea>\n                            <button id=\"copy-code-btn\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 448 512\" fill=\"currentColor\" style=\"margin-right: 8px;\"><path d=\"M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z\"\/><\/svg>\n                                <span>Copier le code<\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <style>\n            #rdv-generator-wrapper * {\n                box-sizing: border-box;\n                font-family: 'Montserrat', sans-serif;\n            }\n            #rdv-generator-wrapper .generator-container {\n                max-width: 1050px;\n                margin: auto;\n                padding: 40px;\n                background-color: #FFFFFF;\n                border-radius: 10px;\n                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07);\n            }\n            #rdv-generator-wrapper h1 {\n                font-size: 24px;\n                font-weight: 700;\n                margin-top: 0;\n                \/* MODIFICATION: Marge sous le titre ajust\u00e9e *\/\n                margin-bottom: 55px;\n                color: #2c3e50;\n                text-align: center;\n            }\n            #rdv-generator-wrapper .form-group {\n                margin-bottom: 35px;\n            }\n            #rdv-generator-wrapper .generator-grid {\n                display: grid;\n                grid-template-columns: minmax(350px, 1fr) 2fr;\n                gap: 45px;\n                margin-top: 80px;\n                align-items: flex-start;\n                grid-template-areas: \n                    \"controls preview\"\n                    \"code     preview\";\n            }\n            .generator-controls { grid-area: controls; }\n            .generator-preview { grid-area: preview; }\n            .generator-code { grid-area: code; }\n            \n            @media (max-width: 950px) {\n                #rdv-generator-wrapper .generator-grid {\n                    grid-template-columns: 1fr;\n                    grid-template-areas: \n                        \"controls\"\n                        \"preview\"\n                        \"code\";\n                }\n                #rdv-generator-wrapper .preview-sticky-wrapper {\n                   position: static;\n                }\n            }\n            #rdv-generator-wrapper .preview-sticky-wrapper {\n                position: sticky;\n                top: 50px;\n            }\n            #rdv-generator-wrapper .preview-box {\n                border: 2px solid #ddd;\n                background-color: #fff;\n                border-radius: 10px;\n                width: 100%;\n                height: 370px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                overflow: hidden;\n            }\n            #rdv-generator-wrapper label {\n                display: block;\n                font-weight: 600;\n                margin-bottom: 8px;\n                color: #34495e;\n            }\n            #rdv-generator-wrapper input[type=\"text\"],\n            #rdv-generator-wrapper select {\n                width: 100%;\n                padding: 10px;\n                border: 1px solid #ccc;\n                border-radius: 6px;\n                font-size: 15px;\n            }\n            #rdv-generator-wrapper .praticien-search-group {\n                position: relative;\n            }\n            #rdv-generator-wrapper .suggestions-list {\n                display: none;\n                position: absolute;\n                top: 100%;\n                left: 0;\n                right: 0;\n                background-color: white;\n                border: 1px solid #ccc;\n                border-top: none;\n                border-radius: 0 0 6px 6px;\n                z-index: 1000;\n                max-height: 250px;\n                overflow-y: auto;\n            }\n            #rdv-generator-wrapper .suggestion-item {\n                padding: 12px 15px;\n                cursor: pointer;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n            }\n            #rdv-generator-wrapper .suggestion-item:hover {\n                background-color: #f5f5f5;\n            }\n            #rdv-generator-wrapper .suggestion-item .praticien-info {\n                display: flex;\n                flex-direction: column;\n            }\n            #rdv-generator-wrapper .suggestion-item .praticien-info .nom {\n                font-weight: 600;\n            }\n            #rdv-generator-wrapper .suggestion-item .praticien-info .spec {\n                font-size: 0.9em;\n                color: #777;\n            }\n            #rdv-generator-wrapper .suggestion-item:hover::after {\n                content: 'S\u00e9lectionner';\n                font-weight: 600;\n                color: #090c51;\n                margin-left: 15px;\n            }\n            #rdv-generator-wrapper .refresh-notice {\n                font-size: 13px;\n                margin-top: 10px;\n                color: #555;\n            }\n            #rdv-generator-wrapper .refresh-notice a {\n                color: #090c51;\n                text-decoration: underline;\n                font-weight: bold;\n            }\n            #rdv-generator-wrapper textarea {\n                width: 100%;\n                height: 120px;\n                font-family: monospace;\n                font-size: 13px;\n                padding: 10px;\n                background-color: #f9f9f9;\n                border: 1px solid #ccc;\n                border-radius: 6px;\n                resize: vertical;\n            }\n            #rdv-generator-wrapper #copy-code-btn {\n                background-color: #090c51;\n                color: white;\n                border: none;\n                border-radius: 6px;\n                padding: 12px 20px;\n                font-weight: 600;\n                font-size: 0.85em;\n                cursor: pointer;\n                transition: background-color 0.3s ease;\n                margin-top: 10px;\n                display: inline-flex;\n                align-items: center;\n            }\n            #rdv-generator-wrapper #copy-code-btn:hover {\n                background-color: #3a3c73;\n            }\n        <\/style>\n\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const praticiensData = [{\"nom\":\"Pierre Picoche\",\"specialite\":\"Coach professionnel & Coach mental\",\"ville\":\"Brest\",\"lieu\":\"Brest\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/62c60e93-1839-4855-a2a4-803045d27764?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"PP\",\"slug\":\"pierre-picoche\"},{\"nom\":\"Alexandra LE BRICQUIR\",\"specialite\":\"Kin\\u00e9siologie\",\"ville\":\"Landivisiau\",\"lieu\":\"Landivisiau\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/cd4058ac-7044-4de4-ad58-d94dc620950e?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"AL\",\"slug\":\"alexandra-le-bricquir\"},{\"nom\":\"Gwenn LE DOARE\",\"specialite\":\"Consultant en bilan de comp\\u00e9tences\",\"ville\":\"Daoulas, Guipavas\",\"lieu\":\"Daoulas, Guipavas\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/78089a75-624e-4622-b847-bc1c876fa2d7?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"GL\",\"slug\":\"gwenn-le-doare\"},{\"nom\":\"Fr\\u00e9d\\u00e9rique RAMEZANIZADEH\",\"specialite\":\"Psychopraticien\",\"ville\":\"Brest\",\"lieu\":\"Brest\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/209e3efb-4e09-4afb-b10d-ea80bd5f8eb3?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"FR\",\"slug\":\"frederique-ramezanizadeh\"},{\"nom\":\"Laetitia Innocente\",\"specialite\":\"Gestalt Th\\u00e9rapeute & Sexologue\",\"ville\":\"Landerneau\",\"lieu\":\"Landerneau\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/2a528dd2-3e0b-4c90-bd58-780daaadbea5?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"LI\",\"slug\":\"laetitia-innocente\"},{\"nom\":\"Alice LE BRETON PONSAR\",\"specialite\":\"Consultant en bilan de comp\\u00e9tences & Coach professionnel\",\"ville\":\"Guipavas\",\"lieu\":\"Guipavas\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/92256ddb-c9d4-4595-99e7-653b6a2b56b9?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"AL\",\"slug\":\"alice-le-breton-ponsar\"},{\"nom\":\"Vincent FAROUEL\",\"specialite\":\"Hypnoth\\u00e9rapeute\",\"ville\":\"Le Relecq-Kerhuon, Brest\",\"lieu\":\"Le Relecq-Kerhuon, Brest\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/7f814fd9-bf50-4c22-bd4c-0dceec59d427?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"VF\",\"slug\":\"vincent-farouel\"},{\"nom\":\"Anne Denis\",\"specialite\":\"Naturopathe & Masseur bien-\\u00eatre & Professeur de Biodanza\",\"ville\":\"Concarneau\",\"lieu\":\"Concarneau\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/86af9fea-c0fc-4e54-9ac6-696b31f3698c?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"AD\",\"slug\":\"anne-denis\"},{\"nom\":\"Gaidic OLLIVIER\",\"specialite\":\"Fasciath\\u00e9rapeute\",\"ville\":\"Le Relecq-Kerhuon\",\"lieu\":\"Le Relecq-Kerhuon\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/5817242a-b64e-442e-9c7c-70f58874938e?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"GO\",\"slug\":\"gaidic-ollivier\"},{\"nom\":\"Marion Le Metayer\",\"specialite\":\"Hypnoth\\u00e9rapeute\",\"ville\":\"Phoenix Hypnoth\\u00e9rapie\",\"lieu\":\"Phoenix Hypnoth\\u00e9rapie\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/c628cee0-b22e-4a8e-973f-7365fabaf9f5?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"ML\",\"slug\":\"marion-le-metayer-9f361\"},{\"nom\":\"Chantal QUEOURON\",\"specialite\":\"Praticien psycho-corporelle & Kin\\u00e9siologie & Praticien r\\u00e9flexes archa\\u00efques\",\"ville\":\"Plougastel-Daoulas, Le Faou, Rosno\\u00ebn\",\"lieu\":\"Plougastel-Daoulas, Le Faou, Rosno\\u00ebn\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/824e221a-9b9e-476e-ac41-a30cdee14160?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"CQ\",\"slug\":\"chantal-queouron\"},{\"nom\":\"Emmanuel Charmetant\",\"specialite\":\"Psychopraticien & Coach mental & Hypnoth\\u00e9rapeute\",\"ville\":\"Guidel\",\"lieu\":\"Guidel\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/b3866e1b-75a9-4227-a0e6-7fa5f0b16cca?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"EC\",\"slug\":\"emmanuel-charmetant\"},{\"nom\":\"Gwen QUEMENER\",\"specialite\":\"Hypnoth\\u00e9rapeute & Coach mental & Coach professionnel & Consultant en bilan de comp\\u00e9tences\",\"ville\":\"Carhaix-Plouguer\",\"lieu\":\"Carhaix-Plouguer\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/823809c4-cb5b-4be3-9f97-aa53f06dc64f?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"GQ\",\"slug\":\"gwen-quemener\"},{\"nom\":\"Am\\u00e9lie TINET-BOUSSION\",\"specialite\":\"Consultant en bilan de comp\\u00e9tences\",\"ville\":\"Guipavas\",\"lieu\":\"Guipavas\",\"photo\":\"https:\\\/\\\/rendezvous-equilibre.bzh\\\/_next\\\/image?url=https:\\\/\\\/api.rendezvous-equilibre.bzh\\\/assets\\\/c7080b7a-52eb-48ef-8d0b-cc2f68fa8524?width=500&height=500&quality=75&fit=outside&format=auto&w=256&q=75\",\"initiales\":\"AT\",\"slug\":\"amelie-tinet-boussion-equilibre\"}];\n            \n            const searchInput = document.getElementById('praticien-search');\n            const suggestionsList = document.getElementById('praticien-suggestions');\n            const praticienSlugHidden = document.getElementById('praticien-slug-hidden');\n            const versionSelect = document.getElementById('version-select');\n            const couleurSelect = document.getElementById('couleur-select');\n            const generatedCode = document.getElementById('generated-code');\n            const previewIframe = document.getElementById('preview-iframe');\n            const copyBtn = document.getElementById('copy-code-btn');\n            const refreshLink = document.getElementById('refresh-list-link');\n            const refreshStatus = document.getElementById('refresh-status');\n            const previewBox = document.querySelector('.preview-box');\n\n            function populateSuggestions(filter = '') {\n                suggestionsList.innerHTML = '';\n                const lowerCaseFilter = filter.toLowerCase().normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\");\n\n                const filteredData = praticiensData.filter(p => {\n                    const praticienName = p.nom.toLowerCase().normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\");\n                    return praticienName.includes(lowerCaseFilter);\n                });\n\n                if (filteredData.length > 0) {\n                    filteredData.forEach(p => {\n                        const item = document.createElement('div');\n                        item.className = 'suggestion-item';\n                        item.dataset.slug = p.slug;\n                        item.dataset.nom = p.nom;\n                        item.innerHTML = `<div class=\"praticien-info\"><span class=\"nom\">${p.nom}<\/span><span class=\"spec\">${p.specialite}<\/span><\/div>`;\n                        \n                        item.addEventListener('click', () => {\n                            praticienSlugHidden.value = p.slug;\n                            searchInput.value = p.nom;\n                            suggestionsList.style.display = 'none';\n                            updatePreview();\n                        });\n                        suggestionsList.appendChild(item);\n                    });\n\n                    if (!praticienSlugHidden.value || !praticiensData.find(p => p.slug === praticienSlugHidden.value)) {\n                         praticienSlugHidden.value = filteredData[0].slug;\n                    }\n                } else {\n                    suggestionsList.innerHTML = '<div class=\"suggestion-item\"><span>Aucun praticien trouv\u00e9.<\/span><\/div>';\n                }\n                updatePreview();\n            }\n\n            function updatePreview() {\n                const praticien = praticienSlugHidden.value;\n                if (!praticien) {\n                    previewBox.innerHTML = '<p style=\"color: #777; padding: 20px; text-align: center;\">Commencez par rechercher et s\u00e9lectionner votre nom dans la liste pour voir un aper\u00e7u.<\/p>';\n                    return;\n                };\n\n                const version = versionSelect.value;\n                const couleur = couleurSelect.value;\n                const baseUrl = 'https:\/\/mes-outils.rendezvous-equilibre.bzh\/rdv-widget\/';\n                const url = `${baseUrl}${praticien}?version=${version}&couleur=${couleur}`;\n                \n                let width, height;\n\n                switch(version) {\n                    case 'v1': width = 340; height = 250; break; \n                    case 'v2': width = 320; height = 370; break; \n                    case 'v3': width = 540; height = 160; break;\n                    case 'v4': width = 260; height = 120; break;\n                }\n\n                generatedCode.value = `<iframe src=\"${url}\" width=\"${width}\" height=\"${height}\" frameborder=\"0\" title=\"Prendre rendez-vous\"><\/iframe>`;\n                \n                if (previewIframe.src !== url) {\n                    previewBox.innerHTML = '';\n                    previewBox.appendChild(previewIframe);\n                    previewIframe.src = url;\n                }\n\n                previewIframe.width = width;\n                previewIframe.height = height; \n                previewBox.style.height = `${height}px`;\n            }\n\n            function copyCode() {\n                generatedCode.select();\n                document.execCommand('copy');\n                copyBtn.querySelector('span').textContent = 'Copi\u00e9 !';\n                setTimeout(() => {\n                    copyBtn.querySelector('span').textContent = 'Copier le code';\n                }, 2000);\n            }\n\n            function refreshList(e) {\n                e.preventDefault();\n                refreshStatus.innerHTML = ' \u23f3 Mise \u00e0 jour en cours...';\n                refreshLink.style.pointerEvents = 'none';\n\n                const formData = new FormData();\n                formData.append('action', 'rdv_refresh_list_front');\n                formData.append('nonce', '7e7758c287');\n\n                fetch('https:\/\/mes-outils.rendezvous-equilibre.bzh\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    body: formData\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        refreshStatus.innerHTML = ` \u2705 ${data.data.message}`;\n                        setTimeout(() => location.reload(), 1500);\n                    } else {\n                        refreshStatus.innerHTML = ' \u274c Erreur.';\n                        refreshLink.style.pointerEvents = 'auto';\n                    }\n                })\n                .catch(error => {\n                    refreshStatus.innerHTML = ' \u274c Erreur r\u00e9seau.';\n                    refreshLink.style.pointerEvents = 'auto';\n                });\n            }\n            \n            searchInput.addEventListener('input', () => {\n                const searchTerm = searchInput.value.trim();\n                if (searchTerm.length >= 3) {\n                    suggestionsList.style.display = 'block';\n                    populateSuggestions(searchTerm);\n                } else {\n                    suggestionsList.style.display = 'none';\n                    praticienSlugHidden.value = ''; \n                    updatePreview();\n                }\n            });\n\n            document.addEventListener('click', function(event) {\n                if (!event.target.closest('.praticien-search-group')) {\n                    suggestionsList.style.display = 'none';\n                }\n            });\n            \n            versionSelect.addEventListener('change', updatePreview);\n            couleurSelect.addEventListener('change', updatePreview);\n            copyBtn.addEventListener('click', copyCode);\n            refreshLink.addEventListener('click', refreshList);\n\n            updatePreview();\n        });\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1db49e3 elementor-widget elementor-widget-shortcode\" data-id=\"1db49e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"rdv-faq-wrapper\">\n            <h2 class=\"rdv-faq-main-title\">Comment utiliser votre widget de prise de rendez-vous ?<\/h2>\n            <div class=\"rdv-faq-container\">\n                                    <details class=\"faq-item\" open>\n                        <summary class=\"faq-question\">\n                            Comment int\u00e9grer le widget sur mon site ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p>L'int\u00e9gration est tr\u00e8s simple et se fait en 3 \u00e9tapes :<\/p>\n<ol start=\"1\">\n<li><b>G\u00e9n\u00e9rez votre widget :<\/b> Utilisez l'outil sur cette page pour trouver votre nom, choisir le style et la couleur du widget.<\/li>\n<li><b>Copiez le code :<\/b> Une fois l'aper\u00e7u satisfaisant, cliquez sur le bouton \"Copier le code\". Le code <code>&lt;iframe&gt;<\/code> est maintenant dans votre presse-papiers.<\/li>\n<li><b>Collez le code sur votre site :<\/b> Modifiez la page sur laquelle vous souhaitez afficher le widget. Ajoutez un bloc de type <b>\"HTML personnalis\u00e9\"<\/b>, <b>\"Code\"<\/b> ou <b>\"Int\u00e9gration\"<\/b> (le nom varie selon les \u00e9diteurs) et collez simplement le code que vous venez de copier. Enregistrez, et c'est tout !<br \/>\nLe widget apparaitra d\u00e9sormais sur votre page et sera op\u00e9rationnel !<\/li>\n<\/ol>\n                        <\/div>\n                    <\/details>\n                                    <details class=\"faq-item\" >\n                        <summary class=\"faq-question\">\n                            Mon widget a une ombre ou une bordure non d\u00e9sir\u00e9e, comment la retirer ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p>C'est un effet de style qui vient probablement du th\u00e8me de votre site, qui applique par d\u00e9faut une bordure ou une ombre \u00e0 toutes les \"fen\u00eatres\" de contenu externe comme ce widget.<\/p>\n<p>Pour corriger cela, vous pouvez ajouter le code CSS suivant sur votre site :<\/p>\n<ol start=\"1\">\n<li>Allez dans l'outil de personnalisation de votre th\u00e8me (souvent dans <b>Apparence &gt; Personnaliser<\/b>), ou directement sur votre page si vous pouvez y ajouter du CSS.<\/li>\n<li>Cherchez une section nomm\u00e9e <b>\"CSS additionnel\"<\/b>.<\/li>\n<li>Copiez et collez le code ci-dessous dans le champ de texte :<br \/>\n<code>iframe[src*=\"rdv-widget\"] {<br \/>\n    border: none !important;<br \/>\n    box-shadow: none !important;<br \/>\n    border-radius: 0 !important;<br \/>\n}<\/code><\/li>\n<li>Cliquez sur <b>\"Publier\"<\/b> pour sauvegarder. Cela rendra le cadre de l'iframe totalement invisible, ne laissant que le design du widget.<\/li>\n<\/ol>\n                        <\/div>\n                    <\/details>\n                                    <details class=\"faq-item\" >\n                        <summary class=\"faq-question\">\n                            Puis-je int\u00e9grer le widget sur un site qui n&#039;est pas WordPress (Wix, Squarespace, etc.) ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p><b>Oui, absolument.<\/b> Le code g\u00e9n\u00e9r\u00e9 est un <code>&lt;iframe&gt;<\/code>, qui est un standard du web compatible avec la quasi-totalit\u00e9 des plateformes. Tant que votre \u00e9diteur de site (Wix, Squarespace, Jimdo, etc.) vous permet d'ajouter un bloc <b>\"HTML\"<\/b>, <b>\"Code personnalis\u00e9\"<\/b> ou <b>\"Int\u00e9grer un site\"<\/b>, vous pourrez y coller le code et le widget s'affichera.<\/p>\n                        <\/div>\n                    <\/details>\n                                    <details class=\"faq-item\" >\n                        <summary class=\"faq-question\">\n                            Que se passe-t-il lorsque mes visiteurs cliquent sur le widget ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p>Lorsque qu'un visiteur clique sur le widget, votre page de profil du site Rendez-vous \u00c9quilibre s'ouvrira dans un nouvel onglet de son navigateur. C'est un avantage important : le visiteur peut prendre rendez-vous avec vous sans jamais quitter votre site personnel.<\/p>\n                        <\/div>\n                    <\/details>\n                                    <details class=\"faq-item\" >\n                        <summary class=\"faq-question\">\n                            Je n&#039;apparais pas dans la liste, que faire ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p>Si vous ne trouvez pas votre nom en tapant au moins 3 lettres, il peut y avoir deux raisons :<\/p>\n<ol start=\"1\">\n<li><b>La liste n'est pas \u00e0 jour :<\/b> Notre site garde en m\u00e9moire la liste des praticiens pour des raisons de performance. Cliquez simplement sur le lien <b>\"Cliquez ici pour l'actualiser !\"<\/b> juste en dessous du champ de recherche. Cela forcera une nouvelle recherche sur le site Rendez-vous \u00c9quilibre.<\/li>\n<li><b>Votre profil est r\u00e9cent ou inactif :<\/b> Assurez-vous que votre fiche est bien active et publi\u00e9e sur le site rendezvous-equilibre.bzh. Si vous venez d'\u00eatre ajout\u00e9(e), il se peut qu'il y ait un petit d\u00e9lai.<\/li>\n<\/ol>\n                        <\/div>\n                    <\/details>\n                                    <details class=\"faq-item\" >\n                        <summary class=\"faq-question\">\n                            Mon widget semble coup\u00e9 ou ne s&#039;affiche pas enti\u00e8rement. Pourquoi ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p>Le code que vous copiez contient une largeur (<code>width<\/code>) et une hauteur (<code>height<\/code>) pr\u00e9cises. Ces dimensions sont calcul\u00e9es pour inclure non seulement le widget, mais aussi un espace invisible autour pour que son ombre et ses animations s'affichent correctement.<\/p>\n<p>Si le widget est coup\u00e9, c'est probablement que ces dimensions ont \u00e9t\u00e9 modifi\u00e9es ou que le conteneur dans lequel vous l'avez plac\u00e9 sur votre page est trop \u00e9troit. <b>Assurez-vous de bien utiliser le code tel qu'il est g\u00e9n\u00e9r\u00e9, sans modifier sa largeur ou sa hauteur.<\/b><\/p>\n                        <\/div>\n                    <\/details>\n                                    <details class=\"faq-item\" >\n                        <summary class=\"faq-question\">\n                            Est-il possible de personnaliser davantage le widget (autres couleurs, polices, textes) ?                        <\/summary>\n                        <div class=\"faq-answer\">\n                            <p><b>Non<\/b>, le g\u00e9n\u00e9rateur vous propose les options de personnalisation standardis\u00e9es (4 mod\u00e8les, 3 th\u00e8mes de couleur) pour garantir une coh\u00e9rence visuelle et une simplicit\u00e9 d'utilisation. Il n'est pas possible de choisir d'autres couleurs, polices ou de modifier les textes directement via cet outil.<\/p>\n                        <\/div>\n                    <\/details>\n                            <\/div>\n        <\/div>\n\n        <style>\n            .rdv-faq-wrapper {\n                font-family: 'Montserrat', sans-serif;\n            }\n            .rdv-faq-wrapper .rdv-faq-main-title {\n                text-align: center;\n                font-size: 24px;\n                font-weight: 700;\n                color: #2c3e50;\n                margin-top: 50px;\n                margin-bottom: 40px;\n            }\n            .rdv-faq-container {\n                max-width: 800px;\n                margin: 40px auto;\n            }\n            .rdv-faq-container .faq-item {\n                border-bottom: 1px solid #e0e0e0;\n                margin-bottom: 15px;\n            }\n            .rdv-faq-container .faq-question {\n                font-size: 17px;\n                font-weight: 600;\n                padding: 15px 0;\n                cursor: pointer;\n                position: relative;\n                list-style: none;\n                color: #34495e;\n            }\n            .rdv-faq-container .faq-question::-webkit-details-marker {\n                display: none;\n            }\n            .rdv-faq-container .faq-question::after {\n                content: '+';\n                position: absolute;\n                right: 10px;\n                top: 50%;\n                transform: translateY(-50%);\n                font-size: 24px;\n                font-weight: 400;\n                color: #090c51;\n            }\n            .rdv-faq-container .faq-item[open] .faq-question::after {\n                content: '\u2212';\n            }\n            .rdv-faq-container .faq-answer {\n                padding: 0 10px 20px 10px;\n                line-height: 1.6;\n                font-size: 15px;\n                color: #34495e;\n            }\n             .rdv-faq-container .faq-answer code {\n                background-color: #f0f0f1;\n                padding: 2px 6px;\n                border-radius: 4px;\n                font-family: monospace;\n                color: #c7254e;\n            }\n        <\/style>\n\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const faqItems = document.querySelectorAll('.rdv-faq-container .faq-item');\n            \n            faqItems.forEach(item => {\n                item.addEventListener('toggle', (event) => {\n                    if (item.open) {\n                        faqItems.forEach(otherItem => {\n                            if (otherItem !== item && otherItem.open) {\n                                otherItem.open = false;\n                            }\n                        });\n                    }\n                });\n            });\n        });\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":28,"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/mes-outils.rendezvous-equilibre.bzh\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}