Finance Plus - Formulaire de Partenariat<\/title>\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@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --color-primary: #002C5B;\n --color-secondary: #1496D2;\n --color-accent: #FDC900;\n --color-alt: #D3D339;\n --color-white: #FFFFFF;\n --color-light: #F8FAFC;\n --color-dark: #222222;\n --color-gray: #6E6E6E;\n --font-title: 'Montserrat', sans-serif;\n --font-body: 'Open Sans', sans-serif;\n --container-width: 1200px;\n --radius-base: 12px;\n --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n \n \n \n .form-container {\n max-width: 800px;\n width: 100%;\n background: var(--color-white);\n border-radius: var(--radius-base);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n \n .form-header {\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n color: var(--color-white);\n padding: clamp(2rem, 5vw, 3rem);\n text-align: center;\n }\n \n .form-header h1 {\n font-family: var(--font-title);\n font-size: clamp(1.8rem, 4vw, 2.5rem);\n font-weight: 700;\n margin-bottom: 1rem;\n }\n \n .form-header p {\n font-size: clamp(1rem, 2vw, 1.1rem);\n opacity: 0.9;\n line-height: 1.6;\n }\n \n .form-content {\n padding: clamp(2rem, 5vw, 3rem);\n }\n \n .form-section {\n margin-bottom: clamp(2rem, 4vw, 3rem);\n }\n \n .section-title {\n font-family: var(--font-title);\n font-size: clamp(1.3rem, 3vw, 1.6rem);\n font-weight: 600;\n color: var(--color-primary);\n margin-bottom: 1.5rem;\n padding-bottom: 0.5rem;\n border-bottom: 3px solid var(--color-accent);\n display: inline-block;\n }\n \n .form-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n \n @media (min-width: 768px) {\n .form-grid {\n grid-template-columns: 1fr 1fr;\n }\n }\n \n .form-group {\n display: flex;\n flex-direction: column;\n }\n \n .form-group.full-width {\n grid-column: 1 \/ -1;\n }\n \n label {\n font-family: var(--font-title);\n font-weight: 600;\n color: var(--color-primary);\n margin-bottom: 0.5rem;\n font-size: 0.95rem;\n }\n \n .required::after {\n content: \" *\";\n color: #e74c3c;\n }\n \n input, select, textarea {\n padding: 0.875rem 1rem;\n border: 2px solid #e1e8ed;\n border-radius: 8px;\n font-family: var(--font-body);\n font-size: 1rem;\n transition: var(--transition);\n background: var(--color-white);\n }\n \n input:focus, select:focus, textarea:focus {\n outline: none;\n border-color: var(--color-secondary);\n box-shadow: 0 0 0 3px rgba(20, 150, 210, 0.1);\n }\n \n select {\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 1rem center;\n background-size: 16px;\n }\n \n .plan-options {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1rem;\n margin-top: 0.5rem;\n }\n \n @media (min-width: 480px) {\n .plan-options {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n }\n \n .plan-option {\n position: relative;\n }\n \n .plan-option input {\n position: absolute;\n opacity: 0;\n }\n \n .plan-label {\n display: block;\n padding: 1rem;\n background: var(--color-light);\n border: 2px solid #e1e8ed;\n border-radius: 8px;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n font-weight: 600;\n }\n \n .plan-option input:checked + .plan-label {\n border-color: var(--color-secondary);\n background: rgba(20, 150, 210, 0.1);\n color: var(--color-primary);\n }\n \n .plan-label.platinum {\n background: linear-gradient(135deg, #E5E4E2, #C0C0C0);\n color: var(--color-dark);\n }\n \n .plan-label.gold {\n background: linear-gradient(135deg, #FFD700, #D4AF37);\n color: var(--color-dark);\n }\n \n .plan-label.silver {\n background: linear-gradient(135deg, #C0C0C0, #A8A8A8);\n color: var(--color-dark);\n }\n \n .plan-label.bronze {\n background: linear-gradient(135deg, #CD7F32, #8C6642);\n color: var(--color-white);\n }\n \n .submit-btn {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: var(--color-white);\n border: none;\n padding: 1rem 2rem;\n border-radius: 50px;\n font-family: var(--font-title);\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n display: block;\n width: 100%;\n max-width: 300px;\n margin: 2rem auto 0;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .submit-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(0, 44, 91, 0.3);\n }\n \n .submit-btn:active {\n transform: translateY(-1px);\n }\n \n .form-footer {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 1px solid #e1e8ed;\n color: var(--color-gray);\n font-size: 0.9rem;\n }\n \n .contact-info {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n flex-wrap: wrap;\n }\n \n .contact-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n }\n \n .contact-item i {\n color: var(--color-secondary);\n }\n \n \/* Styles pour la modal *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: var(--transition);\n padding: 1rem;\n }\n \n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n \n .modal {\n background: var(--color-white);\n border-radius: var(--radius-base);\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);\n max-width: 500px;\n width: 100%;\n overflow: hidden;\n transform: translateY(30px);\n transition: var(--transition);\n }\n \n .modal-overlay.active .modal {\n transform: translateY(0);\n }\n \n .modal-header {\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n color: var(--color-white);\n padding: 1.5rem 2rem;\n text-align: center;\n position: relative;\n }\n \n .modal-header.success {\n background: linear-gradient(135deg, #27ae60, #2ecc71);\n }\n \n .modal-header.error {\n background: linear-gradient(135deg, #c0392b, #e74c3c);\n }\n \n .modal-header i {\n font-size: 3rem;\n margin-bottom: 1rem;\n }\n \n .modal-header h2 {\n font-family: var(--font-title);\n font-size: 1.5rem;\n font-weight: 600;\n }\n \n .modal-content {\n padding: 2rem;\n text-align: center;\n }\n \n .modal-content p {\n margin-bottom: 1.5rem;\n font-size: 1.1rem;\n color: var(--color-dark);\n }\n \n .modal-actions {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 1.5rem;\n }\n \n .modal-btn {\n padding: 0.75rem 1.5rem;\n border-radius: 50px;\n font-family: var(--font-title);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n border: none;\n font-size: 1rem;\n }\n \n .modal-btn.primary {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: var(--color-white);\n }\n \n .modal-btn.secondary {\n background: var(--color-light);\n color: var(--color-dark);\n border: 2px solid #e1e8ed;\n }\n \n .modal-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .modal-btn:active {\n transform: translateY(0);\n }\n \n .loading-spinner {\n display: inline-block;\n width: 50px;\n height: 50px;\n border: 5px solid rgba(20, 150, 210, 0.3);\n border-radius: 50%;\n border-top-color: var(--color-secondary);\n animation: spin 1s ease-in-out infinite;\n margin-bottom: 1.5rem;\n }\n \n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <div class=\"form-header\">\n <h1>Devenez Partenaire<\/h1>\n <p>Nous sommes heureux de pouvoir compter sur votre engagement \u00e0 nos c\u00f4t\u00e9s.<\/p>\n <p>Veuillez remplir le formulaire ci-dessous afin de choisir le plan de partenariat qui correspond le mieux \u00e0 votre vision, vos valeurs et votre d'implication que vous souhaitez apporter \u00e0 cet \u00e9v\u00e9nement.<\/p>\n <\/div>\n \n <div class=\"form-content\">\n <form id=\"partnershipForm\" action=\"\">\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">INFORMATION<\/h2>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"lastname\" class=\"required\">Name<\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required placeholder=\"Your Name\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"firstname\" class=\"required\">First Name<\/label>\n <input type=\"text\" id=\"firstname\" name=\"firstname\" required placeholder=\"Your First Name\">\n <\/div>\n \n <div class=\"form-group full-width\">\n <label for=\"institution\" class=\"required\">Institution<\/label>\n <input type=\"text\" id=\"institution\" name=\"institution\" required placeholder=\"Nom de votre institution\/organisation\">\n <\/div>\n \n <div class=\"form-group full-width\">\n <label for=\"plan\" class=\"required\">Type de plan choisi<\/label>\n <div class=\"plan-options\">\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"platinum\" name=\"plan\" value=\"platinum\" required>\n <label for=\"platinum\" class=\"plan-label platinum\"> Platine<\/label>\n <\/div>\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"gold\" name=\"plan\" value=\"gold\">\n <label for=\"gold\" class=\"plan-label gold\"> Or<\/label>\n <\/div>\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"silver\" name=\"plan\" value=\"silver\">\n <label for=\"silver\" class=\"plan-label silver\"> Argent<\/label>\n <\/div>\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"bronze\" name=\"plan\" value=\"bronze\">\n <label for=\"bronze\" class=\"plan-label bronze\"> Bronze<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"form-section\">\n <h2 class=\"section-title\">CONTACT<\/h2>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"email\" class=\"required\">Email<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"your@email.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"phone\" class=\"required\">Phone<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" required placeholder=\"+509 4202-7007\">\n <\/div>\n <\/div>\n <\/div>\n \n <button type=\"submit\" class=\"submit-btn\">\n <i class=\"fas fa-paper-plane\"><\/i> SOUMETTRE\n <\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n \n <div class=\"form-footer\">\n <p>Vous avez des questions ? Contactez-nous :<\/p>\n <div class=\"contact-info\">\n <div class=\"contact-item\">\n <i class=\"fas fa-envelope\"><\/i>\n <span>board@financeplusht.org<\/span>\n <\/div>\n <div class=\"contact-item\">\n <i class=\"fas fa-phone\"><\/i>\n <span>+509 4202-7007<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"confirmationModal\">\n <div class=\"modal\">\n <div class=\"modal-header success\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h2>Formulaire envoy\u00e9 avec succ\u00e8s !<\/h2>\n <\/div>\n <div class=\"modal-content\">\n <p>Merci pour votre int\u00e9r\u00eat \u00e0 devenir partenaire de Finance Plus.<\/p>\n <p>Nous avons bien re\u00e7u votre demande et nous vous contacterons dans les plus brefs d\u00e9lais.<\/p>\n <div class=\"modal-actions\">\n <button class=\"modal-btn primary\" id=\"modalConfirmBtn\">Fermer<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"errorModal\">\n <div class=\"modal\">\n <div class=\"modal-header error\">\n <i class=\"fas fa-exclamation-circle\"><\/i>\n <h2>Erreur de soumission<\/h2>\n <\/div>\n <div class=\"modal-content\">\n <p id=\"errorMessage\">Une erreur s'est produite lors de l'envoi du formulaire.<\/p>\n <div class=\"modal-actions\">\n <button class=\"modal-btn secondary\" id=\"modalRetryBtn\">R\u00e9essayer<\/button>\n <button class=\"modal-btn primary\" id=\"modalCloseBtn\">Fermer<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"loadingModal\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <h2>Envoi en cours<\/h2>\n <\/div>\n <div class=\"modal-content\">\n <div class=\"loading-spinner\"><\/div>\n <p>Veuillez patienter pendant l'envoi de votre formulaire...<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ R\u00e9cup\u00e9ration des \u00e9l\u00e9ments modaux\n const confirmationModal = document.getElementById('confirmationModal');\n const errorModal = document.getElementById('errorModal');\n const loadingModal = document.getElementById('loadingModal');\n const modalConfirmBtn = document.getElementById('modalConfirmBtn');\n const modalRetryBtn = document.getElementById('modalRetryBtn');\n const modalCloseBtn = document.getElementById('modalCloseBtn');\n const errorMessage = document.getElementById('errorMessage');\n\n \/\/ Fonctions pour afficher\/masquer les modals\n function showModal(modal) {\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n function hideModal(modal) {\n modal.classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n\n \/\/ Gestion des \u00e9v\u00e9nements pour les boutons de modal\n modalConfirmBtn.addEventListener('click', () => {\n hideModal(confirmationModal);\n });\n\n modalRetryBtn.addEventListener('click', () => {\n hideModal(errorModal);\n });\n\n modalCloseBtn.addEventListener('click', () => {\n hideModal(errorModal);\n });\n\n \/\/ Fermer les modals en cliquant en dehors\n [confirmationModal, errorModal, loadingModal].forEach(modal => {\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n hideModal(modal);\n }\n });\n });\n\n \/\/ Gestion de la soumission du formulaire\n document.getElementById('partnershipForm').addEventListener('submit', function(e) {\n e.preventDefault();\n\n const selectedPlan = document.querySelector('input[name=\"plan\"]:checked');\n if (!selectedPlan) {\n errorMessage.textContent = \"vous devez choisir un plan de partenariat!\";\n showModal(errorModal);\n return;\n }\n\n \/\/ Afficher le modal de chargement\n showModal(loadingModal);\n\n \/\/ Cr\u00e9er un objet FormData \u00e0 partir du formulaire\n const form = e.target;\n const formData = new FormData(form);\n\n \/\/ Ajouter manuellement le champ 'plan'\n formData.append('plan', selectedPlan.value);\n \n \/\/ Convertir FormData en objet simple\n const object = {};\n formData.forEach((value, key) => {\n object[key] = value;\n });\n\n \/\/ URL de l'application Web\n const WEB_APP_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbw_L_Z9Y7ngSdlVyo4knteeVtstQytegsSqlV7ckUCu5ym9qkhFLQI1G-u7undW5h8\/exec\"; \n\n \/\/ Envoi des donn\u00e9es\n fetch(WEB_APP_URL, {\n method: \"POST\",\n body: JSON.stringify(object) \n })\n .then(r => {\n return r.json().catch(() => ({ status: \"success\" })); \n })\n .then(res => {\n \/\/ Masquer le modal de chargement\n hideModal(loadingModal);\n \n if (res.status === \"success\") {\n \/\/ Afficher le modal de confirmation\n showModal(confirmationModal);\n document.getElementById(\"partnershipForm\").reset();\n } else {\n errorMessage.textContent = \"erreur de traitement : \" + (res.error || \"Erreur inconnue\");\n showModal(errorModal);\n }\n })\n .catch(err => {\n \/\/ Masquer le modal de chargement\n hideModal(loadingModal);\n \n \/\/ Afficher le modal d'erreur\n errorMessage.textContent = \"erreur de soumission : \" + err.message;\n showModal(errorModal);\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Finance Plus – Formulaire de Partenariat Devenez Partenaire Nous sommes heureux de pouvoir compter sur votre engagement \u00e0 nos c\u00f4t\u00e9s. Veuillez remplir le formulaire ci-dessous afin de choisir le plan de partenariat qui correspond le mieux \u00e0 votre vision, vos valeurs et votre d’implication que vous souhaitez apporter \u00e0 cet \u00e9v\u00e9nement. INFORMATION Nom Pr\u00e9nom Institution … <a title=\"become-vip\" class=\"read-more\" href=\"https:\/\/financeplusht.org\/en\/become-vip\/\" aria-label=\"Read more about become-vip\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-623","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":62,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/623\/revisions"}],"predecessor-version":[{"id":1207,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/623\/revisions\/1207"}],"wp:attachment":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/media?parent=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Finance Plus - Formulaire de Partenariat<\/title>\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@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --color-primary: #002C5B;\n --color-secondary: #1496D2;\n --color-accent: #FDC900;\n --color-alt: #D3D339;\n --color-white: #FFFFFF;\n --color-light: #F8FAFC;\n --color-dark: #222222;\n --color-gray: #6E6E6E;\n --font-title: 'Montserrat', sans-serif;\n --font-body: 'Open Sans', sans-serif;\n --container-width: 1200px;\n --radius-base: 12px;\n --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n \n \n \n .form-container {\n max-width: 800px;\n width: 100%;\n background: var(--color-white);\n border-radius: var(--radius-base);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n \n .form-header {\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n color: var(--color-white);\n padding: clamp(2rem, 5vw, 3rem);\n text-align: center;\n }\n \n .form-header h1 {\n font-family: var(--font-title);\n font-size: clamp(1.8rem, 4vw, 2.5rem);\n font-weight: 700;\n margin-bottom: 1rem;\n }\n \n .form-header p {\n font-size: clamp(1rem, 2vw, 1.1rem);\n opacity: 0.9;\n line-height: 1.6;\n }\n \n .form-content {\n padding: clamp(2rem, 5vw, 3rem);\n }\n \n .form-section {\n margin-bottom: clamp(2rem, 4vw, 3rem);\n }\n \n .section-title {\n font-family: var(--font-title);\n font-size: clamp(1.3rem, 3vw, 1.6rem);\n font-weight: 600;\n color: var(--color-primary);\n margin-bottom: 1.5rem;\n padding-bottom: 0.5rem;\n border-bottom: 3px solid var(--color-accent);\n display: inline-block;\n }\n \n .form-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n \n @media (min-width: 768px) {\n .form-grid {\n grid-template-columns: 1fr 1fr;\n }\n }\n \n .form-group {\n display: flex;\n flex-direction: column;\n }\n \n .form-group.full-width {\n grid-column: 1 \/ -1;\n }\n \n label {\n font-family: var(--font-title);\n font-weight: 600;\n color: var(--color-primary);\n margin-bottom: 0.5rem;\n font-size: 0.95rem;\n }\n \n .required::after {\n content: \" *\";\n color: #e74c3c;\n }\n \n input, select, textarea {\n padding: 0.875rem 1rem;\n border: 2px solid #e1e8ed;\n border-radius: 8px;\n font-family: var(--font-body);\n font-size: 1rem;\n transition: var(--transition);\n background: var(--color-white);\n }\n \n input:focus, select:focus, textarea:focus {\n outline: none;\n border-color: var(--color-secondary);\n box-shadow: 0 0 0 3px rgba(20, 150, 210, 0.1);\n }\n \n select {\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 1rem center;\n background-size: 16px;\n }\n \n .plan-options {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1rem;\n margin-top: 0.5rem;\n }\n \n @media (min-width: 480px) {\n .plan-options {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n }\n }\n \n .plan-option {\n position: relative;\n }\n \n .plan-option input {\n position: absolute;\n opacity: 0;\n }\n \n .plan-label {\n display: block;\n padding: 1rem;\n background: var(--color-light);\n border: 2px solid #e1e8ed;\n border-radius: 8px;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n font-weight: 600;\n }\n \n .plan-option input:checked + .plan-label {\n border-color: var(--color-secondary);\n background: rgba(20, 150, 210, 0.1);\n color: var(--color-primary);\n }\n \n .plan-label.platinum {\n background: linear-gradient(135deg, #E5E4E2, #C0C0C0);\n color: var(--color-dark);\n }\n \n .plan-label.gold {\n background: linear-gradient(135deg, #FFD700, #D4AF37);\n color: var(--color-dark);\n }\n \n .plan-label.silver {\n background: linear-gradient(135deg, #C0C0C0, #A8A8A8);\n color: var(--color-dark);\n }\n \n .plan-label.bronze {\n background: linear-gradient(135deg, #CD7F32, #8C6642);\n color: var(--color-white);\n }\n \n .submit-btn {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: var(--color-white);\n border: none;\n padding: 1rem 2rem;\n border-radius: 50px;\n font-family: var(--font-title);\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n display: block;\n width: 100%;\n max-width: 300px;\n margin: 2rem auto 0;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .submit-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(0, 44, 91, 0.3);\n }\n \n .submit-btn:active {\n transform: translateY(-1px);\n }\n \n .form-footer {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 1px solid #e1e8ed;\n color: var(--color-gray);\n font-size: 0.9rem;\n }\n \n .contact-info {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n flex-wrap: wrap;\n }\n \n .contact-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n }\n \n .contact-item i {\n color: var(--color-secondary);\n }\n \n \/* Styles pour la modal *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: var(--transition);\n padding: 1rem;\n }\n \n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n \n .modal {\n background: var(--color-white);\n border-radius: var(--radius-base);\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);\n max-width: 500px;\n width: 100%;\n overflow: hidden;\n transform: translateY(30px);\n transition: var(--transition);\n }\n \n .modal-overlay.active .modal {\n transform: translateY(0);\n }\n \n .modal-header {\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n color: var(--color-white);\n padding: 1.5rem 2rem;\n text-align: center;\n position: relative;\n }\n \n .modal-header.success {\n background: linear-gradient(135deg, #27ae60, #2ecc71);\n }\n \n .modal-header.error {\n background: linear-gradient(135deg, #c0392b, #e74c3c);\n }\n \n .modal-header i {\n font-size: 3rem;\n margin-bottom: 1rem;\n }\n \n .modal-header h2 {\n font-family: var(--font-title);\n font-size: 1.5rem;\n font-weight: 600;\n }\n \n .modal-content {\n padding: 2rem;\n text-align: center;\n }\n \n .modal-content p {\n margin-bottom: 1.5rem;\n font-size: 1.1rem;\n color: var(--color-dark);\n }\n \n .modal-actions {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 1.5rem;\n }\n \n .modal-btn {\n padding: 0.75rem 1.5rem;\n border-radius: 50px;\n font-family: var(--font-title);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n border: none;\n font-size: 1rem;\n }\n \n .modal-btn.primary {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: var(--color-white);\n }\n \n .modal-btn.secondary {\n background: var(--color-light);\n color: var(--color-dark);\n border: 2px solid #e1e8ed;\n }\n \n .modal-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .modal-btn:active {\n transform: translateY(0);\n }\n \n .loading-spinner {\n display: inline-block;\n width: 50px;\n height: 50px;\n border: 5px solid rgba(20, 150, 210, 0.3);\n border-radius: 50%;\n border-top-color: var(--color-secondary);\n animation: spin 1s ease-in-out infinite;\n margin-bottom: 1.5rem;\n }\n \n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <div class=\"form-header\">\n <h1>Devenez Partenaire<\/h1>\n <p>Nous sommes heureux de pouvoir compter sur votre engagement \u00e0 nos c\u00f4t\u00e9s.<\/p>\n <p>Veuillez remplir le formulaire ci-dessous afin de choisir le plan de partenariat qui correspond le mieux \u00e0 votre vision, vos valeurs et votre d'implication que vous souhaitez apporter \u00e0 cet \u00e9v\u00e9nement.<\/p>\n <\/div>\n \n <div class=\"form-content\">\n <form id=\"partnershipForm\" action=\"\">\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">INFORMATION<\/h2>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"lastname\" class=\"required\">Name<\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required placeholder=\"Your Name\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"firstname\" class=\"required\">First Name<\/label>\n <input type=\"text\" id=\"firstname\" name=\"firstname\" required placeholder=\"Your First Name\">\n <\/div>\n \n <div class=\"form-group full-width\">\n <label for=\"institution\" class=\"required\">Institution<\/label>\n <input type=\"text\" id=\"institution\" name=\"institution\" required placeholder=\"Nom de votre institution\/organisation\">\n <\/div>\n \n <div class=\"form-group full-width\">\n <label for=\"plan\" class=\"required\">Type de plan choisi<\/label>\n <div class=\"plan-options\">\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"platinum\" name=\"plan\" value=\"platinum\" required>\n <label for=\"platinum\" class=\"plan-label platinum\"> Platine<\/label>\n <\/div>\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"gold\" name=\"plan\" value=\"gold\">\n <label for=\"gold\" class=\"plan-label gold\"> Or<\/label>\n <\/div>\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"silver\" name=\"plan\" value=\"silver\">\n <label for=\"silver\" class=\"plan-label silver\"> Argent<\/label>\n <\/div>\n <div class=\"plan-option\">\n <input type=\"radio\" id=\"bronze\" name=\"plan\" value=\"bronze\">\n <label for=\"bronze\" class=\"plan-label bronze\"> Bronze<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"form-section\">\n <h2 class=\"section-title\">CONTACT<\/h2>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"email\" class=\"required\">Email<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"your@email.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"phone\" class=\"required\">Phone<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" required placeholder=\"+509 4202-7007\">\n <\/div>\n <\/div>\n <\/div>\n \n <button type=\"submit\" class=\"submit-btn\">\n <i class=\"fas fa-paper-plane\"><\/i> SOUMETTRE\n <\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n \n <div class=\"form-footer\">\n <p>Vous avez des questions ? Contactez-nous :<\/p>\n <div class=\"contact-info\">\n <div class=\"contact-item\">\n <i class=\"fas fa-envelope\"><\/i>\n <span>board@financeplusht.org<\/span>\n <\/div>\n <div class=\"contact-item\">\n <i class=\"fas fa-phone\"><\/i>\n <span>+509 4202-7007<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"confirmationModal\">\n <div class=\"modal\">\n <div class=\"modal-header success\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h2>Formulaire envoy\u00e9 avec succ\u00e8s !<\/h2>\n <\/div>\n <div class=\"modal-content\">\n <p>Merci pour votre int\u00e9r\u00eat \u00e0 devenir partenaire de Finance Plus.<\/p>\n <p>Nous avons bien re\u00e7u votre demande et nous vous contacterons dans les plus brefs d\u00e9lais.<\/p>\n <div class=\"modal-actions\">\n <button class=\"modal-btn primary\" id=\"modalConfirmBtn\">Fermer<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"errorModal\">\n <div class=\"modal\">\n <div class=\"modal-header error\">\n <i class=\"fas fa-exclamation-circle\"><\/i>\n <h2>Erreur de soumission<\/h2>\n <\/div>\n <div class=\"modal-content\">\n <p id=\"errorMessage\">Une erreur s'est produite lors de l'envoi du formulaire.<\/p>\n <div class=\"modal-actions\">\n <button class=\"modal-btn secondary\" id=\"modalRetryBtn\">R\u00e9essayer<\/button>\n <button class=\"modal-btn primary\" id=\"modalCloseBtn\">Fermer<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"loadingModal\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <h2>Envoi en cours<\/h2>\n <\/div>\n <div class=\"modal-content\">\n <div class=\"loading-spinner\"><\/div>\n <p>Veuillez patienter pendant l'envoi de votre formulaire...<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ R\u00e9cup\u00e9ration des \u00e9l\u00e9ments modaux\n const confirmationModal = document.getElementById('confirmationModal');\n const errorModal = document.getElementById('errorModal');\n const loadingModal = document.getElementById('loadingModal');\n const modalConfirmBtn = document.getElementById('modalConfirmBtn');\n const modalRetryBtn = document.getElementById('modalRetryBtn');\n const modalCloseBtn = document.getElementById('modalCloseBtn');\n const errorMessage = document.getElementById('errorMessage');\n\n \/\/ Fonctions pour afficher\/masquer les modals\n function showModal(modal) {\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n function hideModal(modal) {\n modal.classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n\n \/\/ Gestion des \u00e9v\u00e9nements pour les boutons de modal\n modalConfirmBtn.addEventListener('click', () => {\n hideModal(confirmationModal);\n });\n\n modalRetryBtn.addEventListener('click', () => {\n hideModal(errorModal);\n });\n\n modalCloseBtn.addEventListener('click', () => {\n hideModal(errorModal);\n });\n\n \/\/ Fermer les modals en cliquant en dehors\n [confirmationModal, errorModal, loadingModal].forEach(modal => {\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n hideModal(modal);\n }\n });\n });\n\n \/\/ Gestion de la soumission du formulaire\n document.getElementById('partnershipForm').addEventListener('submit', function(e) {\n e.preventDefault();\n\n const selectedPlan = document.querySelector('input[name=\"plan\"]:checked');\n if (!selectedPlan) {\n errorMessage.textContent = \"vous devez choisir un plan de partenariat!\";\n showModal(errorModal);\n return;\n }\n\n \/\/ Afficher le modal de chargement\n showModal(loadingModal);\n\n \/\/ Cr\u00e9er un objet FormData \u00e0 partir du formulaire\n const form = e.target;\n const formData = new FormData(form);\n\n \/\/ Ajouter manuellement le champ 'plan'\n formData.append('plan', selectedPlan.value);\n \n \/\/ Convertir FormData en objet simple\n const object = {};\n formData.forEach((value, key) => {\n object[key] = value;\n });\n\n \/\/ URL de l'application Web\n const WEB_APP_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbw_L_Z9Y7ngSdlVyo4knteeVtstQytegsSqlV7ckUCu5ym9qkhFLQI1G-u7undW5h8\/exec\"; \n\n \/\/ Envoi des donn\u00e9es\n fetch(WEB_APP_URL, {\n method: \"POST\",\n body: JSON.stringify(object) \n })\n .then(r => {\n return r.json().catch(() => ({ status: \"success\" })); \n })\n .then(res => {\n \/\/ Masquer le modal de chargement\n hideModal(loadingModal);\n \n if (res.status === \"success\") {\n \/\/ Afficher le modal de confirmation\n showModal(confirmationModal);\n document.getElementById(\"partnershipForm\").reset();\n } else {\n errorMessage.textContent = \"erreur de traitement : \" + (res.error || \"Erreur inconnue\");\n showModal(errorModal);\n }\n })\n .catch(err => {\n \/\/ Masquer le modal de chargement\n hideModal(loadingModal);\n \n \/\/ Afficher le modal d'erreur\n errorMessage.textContent = \"erreur de soumission : \" + err.message;\n showModal(errorModal);\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Finance Plus – Formulaire de Partenariat Devenez Partenaire Nous sommes heureux de pouvoir compter sur votre engagement \u00e0 nos c\u00f4t\u00e9s. Veuillez remplir le formulaire ci-dessous afin de choisir le plan de partenariat qui correspond le mieux \u00e0 votre vision, vos valeurs et votre d’implication que vous souhaitez apporter \u00e0 cet \u00e9v\u00e9nement. INFORMATION Nom Pr\u00e9nom Institution … <a title=\"become-vip\" class=\"read-more\" href=\"https:\/\/financeplusht.org\/en\/become-vip\/\" aria-label=\"Read more about become-vip\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-623","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":62,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/623\/revisions"}],"predecessor-version":[{"id":1207,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/623\/revisions\/1207"}],"wp:attachment":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/media?parent=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}