VAZAO – Signalement<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n teal: {\n 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf',\n 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a',\n }\n },\n animation: {\n fadeIn: 'fadeIn 0.4s ease-out forwards',\n blob: 'blob 7s infinite',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n blob: {\n '0%': { transform: 'translate(0px, 0px) scale(1)' },\n '33%': { transform: 'translate(30px, -50px) scale(1.1)' },\n '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },\n '100%': { transform: 'translate(0px, 0px) scale(1)' },\n }\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Custom styles for the WordPress container to ensure it looks good *\/\n #vazao-root {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n background-color: #f8fafc; \/* Tailwind slate-50 *\/\n min-height: 100vh;\n line-height: 1.5;\n }\n \/* Ensure input focus outlines aren't broken by WP styles *\/\n #vazao-root input:focus, #vazao-root select:focus, #vazao-root textarea:focus {\n outline: none;\n }\n .animation-delay-2000 {\n animation-delay: 2s;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"vazao-root\"><\/div>\n\n<script type=\"text\/babel\">\n const { useState, useEffect, useRef } = React;\n\n \/\/ --- CONFIGURATION ---\n const CONFIG = {\n WHATSAPP_NUMBER: \"2290191313291\",\n EMAIL_DESTINATAIRE: \"associationjaie@gmail.com\",\n ANNEE_COURANTE: 2026,\n };\n\n \/\/ --- DATA ---\n const AFRICAN_COUNTRIES = [\n \"Afrique du Sud\", \"Alg\u00e9rie\", \"Angola\", \"B\u00e9nin\", \"Botswana\", \"Burkina Faso\", \"Burundi\", \"Cameroun\", \"Cap-Vert\",\n \"R\u00e9publique centrafricaine\", \"Tchad\", \"Comores\", \"Congo\", \"R\u00e9publique d\u00e9mocratique du Congo\", \"Djibouti\",\n \"\u00c9gypte\", \"Guin\u00e9e \u00e9quatoriale\", \"\u00c9rythr\u00e9e\", \"Eswatini\", \"\u00c9thiopie\", \"Gabon\", \"Gambie\", \"Ghana\", \"Guin\u00e9e\",\n \"Guin\u00e9e-Bissau\", \"C\u00f4te d'Ivoire\", \"Kenya\", \"Lesotho\", \"Liberia\", \"Libye\", \"Madagascar\", \"Malawi\", \"Mali\",\n \"Mauritanie\", \"Maurice\", \"Maroc\", \"Mozambique\", \"Namibie\", \"Niger\", \"Nigeria\", \"Rwanda\", \"Sao Tom\u00e9-et-Principe\",\n \"S\u00e9n\u00e9gal\", \"Seychelles\", \"Sierra Leone\", \"Somalie\", \"Soudan\", \"Soudan du Sud\", \"Tanzanie\", \"Togo\", \"Tunisie\",\n \"Ouganda\", \"Zambie\", \"Zimbabwe\"\n ];\n\n const Icon = ({ name, size = 24, className = \"\" }) => {\n const iconRef = useRef(null);\n useEffect(() => {\n if (iconRef.current && window.lucide) {\n if (iconRef.current.firstChild) {\n iconRef.current.removeChild(iconRef.current.firstChild);\n }\n const iconElement = document.createElement('i');\n iconElement.setAttribute('data-lucide', name);\n iconRef.current.appendChild(iconElement);\n window.lucide.createIcons({\n attrs: { class: className, width: size, height: size },\n nameAttr: 'data-lucide',\n root: iconRef.current\n });\n }\n }, [name, size, className]);\n\n return <span ref={iconRef} className=\"inline-flex items-center justify-center\"><\/span>;\n };\n\n const VIOLENCE_TYPES = [\n { id: 'physique', label: 'Violence physique', icon: 'activity' },\n { id: 'sexuelle', label: 'Violence sexuelle', icon: 'hand' },\n { id: 'psychologique', label: 'Violence psychologique', icon: 'alert-circle' },\n { id: 'vbg', label: 'Violence bas\u00e9e sur le genre', icon: 'users' },\n { id: 'domestique', label: 'Violence domestique', icon: 'shield-alert' },\n { id: 'harcelement', label: 'Harc\u00e8lement', icon: 'eye' },\n { id: 'exploitation', label: 'Exploitation ou abus', icon: 'lock' },\n { id: 'droits_humains', label: 'Violation des droits humains', icon: 'file-text' },\n { id: 'discrimination', label: 'Discrimination', icon: 'users' },\n { id: 'autre', label: 'Autre', icon: 'info' },\n ];\n\n \/\/ --- MAIN APP COMPONENT ---\n function VazaoApp() {\n const [currentView, setCurrentView] = useState('home');\n const [currentStep, setCurrentStep] = useState(1);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [referenceId, setReferenceId] = useState('');\n\n const [formData, setFormData] = useState({\n reportTypes: [], role: '', country: '', region: '', commune: '', locality: '', unknownLocation: false, preciseLocation: '',\n description: '', incidentDate: '', ongoing: null, immediateDanger: null,\n isAnonymous: true, name: '', phone: '', email: '', preferredContact: '', consent: false\n });\n\n useEffect(() => {\n if (window.lucide) window.lucide.createIcons();\n }, []);\n \n useEffect(() => {\n setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 10);\n }, [currentView, currentStep, formData.isAnonymous, formData.immediateDanger]);\n\n\n const handleChange = (e) => {\n const { name, value, type, checked } = e.target;\n setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));\n };\n\n const toggleReportType = (id) => {\n setFormData(prev => {\n const current = prev.reportTypes;\n if (current.includes(id)) {\n return { ...prev, reportTypes: current.filter(t => t !== id) };\n } else {\n return { ...prev, reportTypes: [...current, id] };\n }\n });\n };\n\n const nextStep = () => { window.scrollTo({top: 0, behavior: 'smooth'}); setCurrentStep(prev => prev + 1); };\n const prevStep = () => { window.scrollTo({top: 0, behavior: 'smooth'}); setCurrentStep(prev => prev - 1); };\n \n const startForm = (preselect = null) => {\n if (preselect && !formData.reportTypes.includes(preselect)) {\n setFormData(prev => ({ ...prev, reportTypes: [...prev.reportTypes, preselect] }));\n }\n setCurrentView('form');\n setCurrentStep(1);\n window.scrollTo({top: 0, behavior: 'smooth'});\n };\n\n \/\/ --- LOGIQUE DE G\u00c9N\u00c9RATION DE PDF ---\n const generatePDF = (data, refId, shouldDownload = false) => {\n if (!window.jspdf) {\n console.error(\"jsPDF n'est pas charg\u00e9.\");\n return null;\n }\n \n const { jsPDF } = window.jspdf;\n const doc = new jsPDF();\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(18);\n doc.setTextColor(13, 148, 136); \/\/ Teal 600\n doc.text(\"VAZAO - RECAPITULATIF DE SIGNALEMENT\", 20, 20);\n \n doc.setFontSize(11);\n doc.setTextColor(71, 85, 105); \/\/ Slate 600\n doc.setFont(\"helvetica\", \"normal\");\n doc.text(`Date d'\u00e9mission : ${new Date().toLocaleDateString('fr-FR')} \u00e0 ${new Date().toLocaleTimeString('fr-FR')}`, 20, 30);\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setTextColor(15, 23, 42); \/\/ Slate 900\n doc.text(`R\u00c9F\u00c9RENCE : ${refId}`, 20, 40);\n\n doc.line(20, 45, 190, 45); \/\/ Ligne s\u00e9paratrice\n \n let y = 55;\n const addSection = (title, contentLines) => {\n if (y > 260) { doc.addPage(); y = 20; }\n doc.setFont(\"helvetica\", \"bold\");\n doc.setTextColor(15, 23, 42);\n doc.text(title, 20, y);\n y += 7;\n \n doc.setFont(\"helvetica\", \"normal\");\n doc.setTextColor(51, 65, 85);\n contentLines.forEach(line => {\n if (y > 275) { doc.addPage(); y = 20; }\n \/\/ D\u00e9coupe le texte long pour qu'il tienne dans la largeur de la page\n const splitLines = doc.splitTextToSize(line, 170);\n doc.text(splitLines, 20, y);\n y += (splitLines.length * 6) + 2;\n });\n y += 6; \/\/ Espacement apr\u00e8s la section\n };\n\n const types = data.reportTypes.map(id => VIOLENCE_TYPES.find(t => t.id === id)?.label).filter(Boolean).join(', ') || 'Non pr\u00e9cis\u00e9';\n addSection(\"1. SITUATION\", [\n `Type(s) de violence : ${types}`,\n `R\u00f4le de la personne : ${data.role || 'Non pr\u00e9cis\u00e9'}`\n ]);\n\n const loc = data.unknownLocation \n ? \"Non pr\u00e9cis\u00e9e par l'utilisateur\" \n : [data.country, data.region, data.commune, data.locality].filter(Boolean).join(' > ');\n addSection(\"2. LOCALISATION\", [\n `Lieu principal : ${loc}`,\n `Pr\u00e9cisions exactes : ${data.preciseLocation || 'Aucune'}`\n ]);\n\n const translateOngoingDanger = (val) => val === 'yes' ? 'Oui' : val === 'no' ? 'Non' : 'Ne sait pas';\n addSection(\"3. DESCRIPTION DE L'INCIDENT\", [\n `Date ou p\u00e9riode des faits : ${data.incidentDate || 'Non pr\u00e9cis\u00e9e'}`,\n `La situation est-elle toujours en cours ? ${translateOngoingDanger(data.ongoing)}`,\n `Y a-t-il un danger imm\u00e9diat ? ${translateOngoingDanger(data.immediateDanger)}`,\n `D\u00e9tails de la situation :`,\n `${data.description || 'Aucune description fournie.'}`\n ]);\n\n if (data.isAnonymous) {\n addSection(\"4. CONTACT\", [\"Le signalement a \u00e9t\u00e9 effectu\u00e9 de mani\u00e8re strictement ANONYME.\"]);\n } else {\n addSection(\"4. CONTACT\", [\n `Nom et pr\u00e9nom : ${data.name || 'Non renseign\u00e9'}`,\n `Num\u00e9ro de t\u00e9l\u00e9phone \/ WhatsApp : ${data.phone || 'Non renseign\u00e9'}`,\n `Adresse e-mail : ${data.email || 'Non renseign\u00e9'}`,\n `Moyen de contact pr\u00e9f\u00e9r\u00e9 : ${data.preferredContact || 'Non renseign\u00e9'}`\n ]);\n }\n\n if (shouldDownload) {\n doc.save(`Signalement_VAZAO_${refId}.pdf`);\n }\n\n return doc;\n };\n\n \/\/ --- BACKEND INTEGRATION SIMULATION ---\n const submitDataToServer = async (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const randomStr = Math.random().toString(36).substring(2, 8).toUpperCase();\n const generatedRef = `VAZ-${CONFIG.ANNEE_COURANTE}-${randomStr}`;\n \n \/\/ Simulation PDF pour log\n const fakePdf = generatePDF(data, generatedRef, false);\n\n console.log(\"=== EMAIL \u00c0 ENVOYER (SIMULATION) ===\");\n console.log(`Objet : SIGNALEMENT VAZAO`); \/\/ OBJET EXACT DEMAND\u00c9\n console.log(`Corps : Un nouveau signalement a \u00e9t\u00e9 soumis. Veuillez trouver les d\u00e9tails dans le PDF en pi\u00e8ce jointe.\\nR\u00e9f\u00e9rence : ${generatedRef}`);\n console.log(`[PI\u00c8CE JOINTE] : Un fichier PDF \"Signalement_VAZAO_${generatedRef}.pdf\" a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 et joint \u00e0 cet e-mail.`);\n \n resolve(generatedRef);\n }, 2000);\n });\n };\n\n const handleSubmit = async () => {\n setIsSubmitting(true);\n try {\n const ref = await submitDataToServer(formData);\n setReferenceId(ref);\n setCurrentView('success');\n \n \/\/ T\u00e9l\u00e9chargement automatique du PDF pour l'utilisateur\n generatePDF(formData, ref, true);\n\n } catch (error) {\n alert(\"Une erreur est survenue lors de l'envoi. Veuillez r\u00e9essayer.\");\n } finally {\n setIsSubmitting(false);\n window.scrollTo({top: 0, behavior: 'smooth'});\n }\n };\n\n const resetForm = () => {\n setFormData({\n reportTypes: [], role: '', country: '', region: '', commune: '', locality: '', unknownLocation: false, preciseLocation: '',\n description: '', incidentDate: '', ongoing: null, immediateDanger: null,\n isAnonymous: true, name: '', phone: '', email: '', preferredContact: '', consent: false\n });\n setCurrentView('home');\n setCurrentStep(1);\n };\n\n const renderHome = () => (\n <div className=\"min-h-[80vh] flex flex-col items-center justify-center p-6 sm:p-12 relative overflow-hidden\">\n <div className=\"absolute top-[-10%] left-[-10%] w-96 h-96 bg-teal-100 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob\"><\/div>\n <div className=\"absolute top-[20%] right-[-10%] w-96 h-96 bg-amber-100 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob animation-delay-2000\"><\/div>\n\n <div className=\"max-w-3xl w-full text-center z-10 relative\">\n <div className=\"flex justify-center mb-6\">\n <div className=\"bg-teal-900 text-white p-4 rounded-2xl shadow-lg\">\n <Icon name=\"shield\" size={48} \/>\n <\/div>\n <\/div>\n \n <h1 className=\"text-5xl sm:text-6xl font-bold text-slate-900 tracking-tight mb-4\">VAZAO<\/h1>\n <h2 className=\"text-2xl sm:text-3xl text-teal-800 font-medium mb-8\">Canal confidentiel de signalement<\/h2>\n \n <div className=\"bg-white p-8 rounded-3xl shadow-xl shadow-slate-200\/50 mb-12 border border-slate-100\">\n <p className=\"text-lg text-slate-600 leading-relaxed mb-8\">\n \u00ab VAZAO est un canal confidentiel permettant aux victimes ou t\u00e9moins de violences et de violations des droits de signaler une situation et, si elles le souhaitent, d'\u00eatre orient\u00e9es vers les services ou structures adapt\u00e9s. \u00bb\n <\/p>\n \n <div className=\"bg-slate-50 border-l-4 border-amber-500 p-4 rounded-r-xl text-left mb-8\">\n <p className=\"text-slate-700 font-medium\">\n Vous \u00eates victime ou t\u00e9moin d'une violence ou d'une violation de vos droits ? Vous pouvez effectuer un signalement de mani\u00e8re confidentielle.\n <\/p>\n <\/div>\n\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <button \n onClick={() => startForm()}\n className=\"flex-1 bg-teal-900 hover:bg-teal-800 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg flex items-center justify-center gap-2 group\"\n >\n Je veux faire un signalement\n <span className=\"group-hover:translate-x-1 transition-transform inline-flex\"><Icon name=\"arrow-right\" size={20} \/><\/span>\n <\/button>\n <button \n onClick={() => startForm('droits_humains')}\n className=\"flex-1 bg-white hover:bg-slate-50 text-teal-900 border-2 border-teal-900 font-semibold py-4 px-6 rounded-xl transition-all duration-200 flex items-center justify-center gap-2\"\n >\n Signaler une violation de droits\n <\/button>\n <\/div>\n \n <div className=\"mt-6 flex items-center justify-center gap-2 text-slate-500 text-sm\">\n <Icon name=\"lock\" size={16} className=\"text-slate-400\" \/>\n <p>Votre signalement peut \u00eatre effectu\u00e9 de mani\u00e8re anonyme.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n\n const renderProgressBar = () => {\n const steps = [{ num: 1, label: \"Situation\" }, { num: 2, label: \"Localisation\" }, { num: 3, label: \"Description\" }, { num: 4, label: \"Contact\" }, { num: 5, label: \"Envoi\" }];\n return (\n <div className=\"mb-8 hidden sm:block\">\n <div className=\"flex justify-between relative\">\n <div className=\"absolute left-0 top-1\/2 transform -translate-y-1\/2 w-full h-1 bg-slate-200 z-0 rounded-full\"><\/div>\n <div className=\"absolute left-0 top-1\/2 transform -translate-y-1\/2 h-1 bg-teal-600 z-0 rounded-full transition-all duration-300\" style={{ width: `${((currentStep - 1) \/ 4) * 100}%` }}><\/div>\n {steps.map((step) => (\n <div key={step.num} className=\"relative z-10 flex flex-col items-center\">\n <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors duration-300 ${currentStep >= step.num ? 'bg-teal-600 text-white shadow-md' : 'bg-white text-slate-400 border-2 border-slate-200'}`}>\n {currentStep > step.num ? <Icon name=\"check-circle-2\" size={16} \/> : step.num}\n <\/div>\n <span className={`text-xs mt-2 font-medium ${currentStep >= step.num ? 'text-teal-800' : 'text-slate-400'}`}>{step.label}<\/span>\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n };\n\n const renderStep1 = () => (\n <div className=\"space-y-8 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">Que souhaitez-vous signaler ?<\/h3><p className=\"text-slate-600\">S\u00e9lectionnez une ou plusieurs cat\u00e9gories correspondantes \u00e0 la situation.<\/p><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n {VIOLENCE_TYPES.map((type) => {\n const isSelected = formData.reportTypes.includes(type.id);\n return (\n <button key={type.id} onClick={() => toggleReportType(type.id)} className={`p-4 rounded-xl border-2 text-left transition-all duration-200 flex items-start gap-4 ${isSelected ? 'border-teal-600 bg-teal-50 shadow-md' : 'border-slate-200 bg-white hover:border-teal-300 hover:bg-slate-50'}`}>\n <div className={`p-2 rounded-lg ${isSelected ? 'bg-teal-600 text-white' : 'bg-slate-100 text-slate-500'}`}><Icon name={type.icon} size={24} \/><\/div>\n <div><h4 className={`font-semibold ${isSelected ? 'text-teal-900' : 'text-slate-700'}`}>{type.label}<\/h4><\/div>\n <\/button>\n );\n })}\n <\/div>\n <div className=\"pt-6 border-t border-slate-200\">\n <h4 className=\"text-lg font-bold text-slate-900 mb-4\">\u00cates-vous :<\/h4>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n {['Victime', 'T\u00e9moin', 'Proche', 'Autre'].map((role) => (\n <label key={role} className={`flex items-center justify-center p-3 rounded-xl border cursor-pointer transition-all ${formData.role === role ? 'border-amber-500 bg-amber-50 text-amber-900 font-semibold' : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50'}`}>\n <input type=\"radio\" name=\"role\" value={role} checked={formData.role === role} onChange={handleChange} className=\"hidden\" \/>\n {role}\n <\/label>\n ))}\n <\/div>\n <\/div>\n <\/div>\n );\n\n const renderStep2 = () => (\n <div className=\"space-y-6 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">O\u00f9 la situation s'est-elle produite ?<\/h3><p className=\"text-slate-600\">Le canal VAZAO couvre actuellement les pays africains.<\/p><\/div>\n <div className=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Pays <span className=\"text-red-500\">*<\/span><\/label>\n <select name=\"country\" value={formData.country} onChange={handleChange} disabled={formData.unknownLocation} className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors disabled:opacity-50\">\n <option value=\"\">S\u00e9lectionner un pays<\/option>\n {AFRICAN_COUNTRIES.map(country => (<option key={country} value={country}>{country}<\/option>))}\n <\/select>\n <\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">D\u00e9partement \/ R\u00e9gion<\/label>\n <input type=\"text\" name=\"region\" value={formData.region} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Ex: Littoral, Dakar...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Commune \/ Ville<\/label>\n <input type=\"text\" name=\"commune\" value={formData.commune} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Ex: Cotonou, Abidjan...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Localit\u00e9 \/ Quartier \/ Village<\/label>\n <input type=\"text\" name=\"locality\" value={formData.locality} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Rechercher ou saisir...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <div className=\"pt-4 border-t border-slate-100\">\n <label className=\"flex items-center gap-3 cursor-pointer\">\n <input type=\"checkbox\" name=\"unknownLocation\" checked={formData.unknownLocation} onChange={handleChange} className=\"w-5 h-5 text-teal-600 border-slate-300 rounded focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 font-medium\">Je ne connais pas pr\u00e9cis\u00e9ment la localisation<\/span>\n <\/label>\n <\/div>\n <\/div>\n <div className=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Localisation pr\u00e9cise <span className=\"text-slate-400 font-normal\">(Facultatif)<\/span><\/label>\n <p className=\"text-xs text-slate-500 mb-3\">Si vous le souhaitez, vous pouvez indiquer une adresse exacte ou un point de rep\u00e8re.<\/p>\n <input type=\"text\" name=\"preciseLocation\" value={formData.preciseLocation} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Adresse, b\u00e2timent, lieu connu...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-white focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <\/div>\n );\n\n const renderStep3 = () => (\n <div className=\"space-y-6 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">Que s'est-il pass\u00e9 ?<\/h3><p className=\"text-slate-600\">D\u00e9crivez la situation avec le plus de d\u00e9tails possible.<\/p><\/div>\n <div>\n <textarea name=\"description\" value={formData.description} onChange={handleChange} rows=\"6\" placeholder=\"Expliquez ce qui s'est pass\u00e9, quand cela s'est produit, qui est concern\u00e9 et tout \u00e9l\u00e9ment que vous estimez utile.\" className=\"w-full p-4 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 resize-y\"><\/textarea>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-2\">Date ou p\u00e9riode des faits<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"calendar\" size={18} \/><\/div>\n <input type=\"text\" name=\"incidentDate\" value={formData.incidentDate} onChange={handleChange} placeholder=\"JJ\/MM\/AAAA ou p\u00e9riode approximative\" className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500\" \/>\n <\/div>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-2\">La situation est-elle toujours en cours ?<\/label>\n <div className=\"flex gap-4\">\n {['yes', 'no', 'unknown'].map((val) => (\n <label key={`ongoing-${val}`} className=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"radio\" name=\"ongoing\" value={val} checked={formData.ongoing === val} onChange={handleChange} className=\"w-4 h-4 text-teal-600 border-slate-300 focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 capitalize\">{val === 'yes' ? 'Oui' : val === 'no' ? 'Non' : 'Je ne sais pas'}<\/span>\n <\/label>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <div className=\"bg-white p-6 rounded-2xl border border-slate-200\">\n <label className=\"block text-sm font-medium text-slate-900 mb-4\">La situation pr\u00e9sente-t-elle un danger imm\u00e9diat ?<\/label>\n <div className=\"flex gap-6 mb-4\">\n {['yes', 'no', 'unknown'].map((val) => (\n <label key={`danger-${val}`} className=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"radio\" name=\"immediateDanger\" value={val} checked={formData.immediateDanger === val} onChange={handleChange} className=\"w-4 h-4 text-teal-600 border-slate-300 focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 font-medium capitalize\">{val === 'yes' ? 'Oui' : val === 'no' ? 'Non' : 'Je ne sais pas'}<\/span>\n <\/label>\n ))}\n <\/div>\n {formData.immediateDanger === 'yes' && (\n <div className=\"bg-red-50 border-l-4 border-red-500 p-4 rounded-r-xl flex gap-3 animate-fadeIn\">\n <div className=\"text-red-500 mt-0.5\"><Icon name=\"alert-triangle\" size={20} \/><\/div>\n <p className=\"text-red-800 text-sm font-medium\">En cas de danger imm\u00e9diat, contactez \u00e9galement les services d'urgence comp\u00e9tents de votre pays (Police, Pompiers, Urgences m\u00e9dicales).<\/p>\n <\/div>\n )}\n <\/div>\n <\/div>\n );\n\n const renderStep4 = () => (\n <div className=\"space-y-6 animate-fadeIn\">\n <div>\n <h3 className=\"text-2xl font-bold text-slate-900 mb-2\">Souhaitez-vous \u00eatre recontact\u00e9(e) ?<\/h3>\n <div className=\"flex items-center gap-2 text-teal-700 bg-teal-50 p-3 rounded-lg w-fit mb-6\">\n <Icon name=\"lock\" size={18} \/><span className=\"font-medium\">Vous pouvez rester anonyme.<\/span>\n <\/div>\n <\/div>\n <div className=\"space-y-4\">\n <label className={`block p-5 rounded-xl border-2 cursor-pointer transition-all ${formData.isAnonymous ? 'border-teal-600 bg-teal-50 shadow-sm' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>\n <div className=\"flex items-center gap-3\">\n <input type=\"radio\" name=\"anonymityChoice\" checked={formData.isAnonymous === true} onChange={() => setFormData(prev => ({ ...prev, isAnonymous: true }))} className=\"w-5 h-5 text-teal-600 focus:ring-teal-500\" \/>\n <span className=\"font-semibold text-slate-900 text-lg\">Je souhaite rester anonyme<\/span>\n <\/div>\n <p className=\"ml-8 mt-1 text-slate-500 text-sm\">Aucune information personnelle ne vous sera demand\u00e9e.<\/p>\n <\/label>\n <label className={`block p-5 rounded-xl border-2 cursor-pointer transition-all ${!formData.isAnonymous ? 'border-teal-600 bg-white shadow-sm' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>\n <div className=\"flex items-center gap-3\">\n <input type=\"radio\" name=\"anonymityChoice\" checked={formData.isAnonymous === false} onChange={() => setFormData(prev => ({ ...prev, isAnonymous: false }))} className=\"w-5 h-5 text-teal-600 focus:ring-teal-500\" \/>\n <span className=\"font-semibold text-slate-900 text-lg\">Je souhaite \u00eatre recontact\u00e9(e)<\/span>\n <\/div>\n <p className=\"ml-8 mt-1 text-slate-500 text-sm\">Fournissez un ou plusieurs moyens de contact pour que nous puissions vous orienter.<\/p>\n <\/label>\n <\/div>\n {!formData.isAnonymous && (\n <div className=\"mt-8 p-6 bg-white border border-slate-200 rounded-2xl shadow-sm space-y-5 animate-fadeIn\">\n <h4 className=\"font-semibold text-slate-800 border-b border-slate-100 pb-2\">Vos coordonn\u00e9es (Facultatives)<\/h4>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Nom et pr\u00e9nom<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"user\" size={18} \/><\/div>\n <input type=\"text\" name=\"name\" value={formData.name} onChange={handleChange} className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500\" \/>\n <\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Num\u00e9ro de t\u00e9l\u00e9phone \/ WhatsApp<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"phone\" size={18} \/><\/div>\n <input type=\"tel\" name=\"phone\" value={formData.phone} onChange={handleChange} className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500\" \/>\n <\/div>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Adresse e-mail<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"mail\" size={18} \/><\/div>\n <input type=\"email\" name=\"email\" value={formData.email} onChange={handleChange} className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"pt-4\">\n <label className=\"block text-sm font-medium text-slate-800 mb-3\">Quel est votre moyen de contact pr\u00e9f\u00e9r\u00e9 ?<\/label>\n <div className=\"flex flex-wrap gap-4\">\n {[\n { id: 'whatsapp', label: 'WhatsApp', icon: 'message-circle' },\n { id: 'phone', label: 'T\u00e9l\u00e9phone', icon: 'phone' },\n { id: 'email', label: 'E-mail', icon: 'mail' }\n ].map(method => (\n <label key={method.id} className={`flex items-center gap-2 p-3 rounded-xl border cursor-pointer transition-all ${formData.preferredContact === method.id ? 'border-teal-600 bg-teal-50 text-teal-900 font-medium' : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-white'}`}>\n <input type=\"radio\" name=\"preferredContact\" value={method.id} checked={formData.preferredContact === method.id} onChange={handleChange} className=\"hidden\" \/>\n <Icon name={method.icon} size={18} className={formData.preferredContact === method.id ? 'text-teal-600' : 'text-slate-400'} \/>\n {method.label}\n <\/label>\n ))}\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n\n const renderStep5 = () => {\n const getReportTypeLabels = () => {\n if (formData.reportTypes.length === 0) return \"Non pr\u00e9cis\u00e9\";\n return formData.reportTypes.map(id => VIOLENCE_TYPES.find(t => t.id === id)?.label).filter(Boolean).join(', ');\n };\n\n return (\n <div className=\"space-y-8 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">V\u00e9rifiez votre signalement<\/h3><p className=\"text-slate-600\">Prenez un moment pour relire les informations avant l'envoi.<\/p><\/div>\n <div className=\"bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden\">\n <div className=\"p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center\">\n <h4 className=\"font-semibold text-slate-800 flex items-center gap-2\"><Icon name=\"file-text\" size={18} className=\"text-teal-600\"\/> R\u00e9capitulatif<\/h4>\n <\/div>\n <div className=\"p-6 space-y-4 text-sm\">\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Type de signalement :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{getReportTypeLabels()}<\/span><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Votre r\u00f4le :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{formData.role || \"Non pr\u00e9cis\u00e9\"}<\/span><\/div>\n <div className=\"w-full h-px bg-slate-100 my-2\"><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Localisation :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{formData.unknownLocation ? \"Non pr\u00e9cis\u00e9e\" : [formData.country, formData.region, formData.commune, formData.locality].filter(Boolean).join(' \u2192 ') || \"Non pr\u00e9cis\u00e9e\"}<\/span><\/div>\n <div className=\"w-full h-px bg-slate-100 my-2\"><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Date\/P\u00e9riode :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{formData.incidentDate || \"Non pr\u00e9cis\u00e9e\"}<\/span><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Situation :<\/span><span className=\"sm:col-span-2 text-slate-800 whitespace-pre-wrap\">{formData.description || \"Aucune description\"}<\/span><\/div>\n <div className=\"w-full h-px bg-slate-100 my-2\"><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\">\n <span className=\"text-slate-500\">Contact :<\/span>\n <span className=\"sm:col-span-2 font-medium\">\n {formData.isAnonymous ? (<span className=\"text-teal-600 flex items-center gap-1\"><Icon name=\"lock\" size={14}\/> Anonyme<\/span>) : (<span className=\"text-slate-900\">Coordonn\u00e9es fournies {formData.preferredContact && ` (Pr\u00e9f\u00e9rence: ${formData.preferredContact})`}<\/span>)}\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div className=\"bg-teal-50 border border-teal-100 p-6 rounded-2xl\">\n <h4 className=\"font-bold text-teal-900 mb-2 flex items-center gap-2\"><Icon name=\"shield\" size={20} \/> Confidentialit\u00e9 & R\u00e9capitulatif PDF<\/h4>\n <p className=\"text-teal-800 text-sm mb-4\">Un r\u00e9capitulatif PDF sera g\u00e9n\u00e9r\u00e9 automatiquement lors de la validation. Les informations transmises via VAZAO sont destin\u00e9es au traitement de votre signalement.<\/p>\n <label className=\"flex items-start gap-3 cursor-pointer mt-4\">\n <input type=\"checkbox\" name=\"consent\" checked={formData.consent} onChange={handleChange} className=\"mt-1 w-5 h-5 text-teal-600 border-teal-300 rounded focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 font-medium text-sm\">J'ai compris les informations relatives \u00e0 la confidentialit\u00e9 et je valide l'envoi. <span className=\"text-red-500\">*<\/span><\/span>\n <\/label>\n <\/div>\n <\/div>\n );\n };\n\n const renderSuccess = () => {\n \/\/ Le message pr\u00e9-rempli inclut d\u00e9sormais une mention de la pi\u00e8ce jointe\n const message = encodeURIComponent(`Bonjour, je souhaite suivre mon signalement VAZAO. Ma r\u00e9f\u00e9rence est : ${referenceId}. Veuillez trouver mon r\u00e9capitulatif PDF en pi\u00e8ce jointe.`);\n const whatsappLink = `https:\/\/wa.me\/${CONFIG.WHATSAPP_NUMBER}?text=${message}`;\n\n return (\n <div className=\"min-h-[80vh] flex items-center justify-center p-6 sm:p-12\">\n <div className=\"max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden text-center animate-fadeIn\">\n <div className=\"bg-teal-600 p-8 sm:p-12 text-white flex flex-col items-center\">\n <div className=\"w-20 h-20 bg-white rounded-full flex items-center justify-center mb-6 shadow-lg\"><Icon name=\"check-circle-2\" size={40} className=\"text-teal-600\" \/><\/div>\n <h2 className=\"text-3xl font-bold mb-2\">Votre signalement a bien \u00e9t\u00e9 envoy\u00e9.<\/h2>\n <p className=\"text-teal-100 text-lg max-w-lg\">Nous avons bien re\u00e7u votre signalement. Un fichier PDF r\u00e9capitulatif a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 sur votre appareil.<\/p>\n <\/div>\n <div className=\"p-8 sm:p-12 space-y-8\">\n \n <div className=\"bg-slate-50 border-2 border-slate-200 rounded-2xl p-6\">\n <p className=\"text-sm text-slate-500 uppercase tracking-wider font-semibold mb-2\">Votre r\u00e9f\u00e9rence unique<\/p>\n <div className=\"text-3xl sm:text-4xl font-mono font-bold text-slate-900 mb-3 tracking-widest\">{referenceId}<\/div>\n <button \n onClick={() => generatePDF(formData, referenceId, true)} \n className=\"inline-flex items-center gap-2 mt-2 text-sm text-teal-700 hover:text-teal-900 font-medium transition-colors\"\n >\n <Icon name=\"download\" size={16} \/> Ret\u00e9l\u00e9charger mon r\u00e9capitulatif PDF\n <\/button>\n <\/div>\n \n <div className=\"bg-amber-50 border border-amber-100 rounded-2xl p-8 relative overflow-hidden\">\n <div className=\"absolute -right-4 -bottom-4 opacity-10\"><Icon name=\"message-circle\" size={120} className=\"text-amber-500\" \/><\/div>\n <h3 className=\"text-xl font-bold text-amber-900 mb-3 relative z-10\">Suivi sur WhatsApp<\/h3>\n <div className=\"text-amber-800 text-sm mb-6 relative z-10 space-y-2 text-left\">\n <p>Pour poursuivre l'\u00e9change avec notre \u00e9quipe via WhatsApp :<\/p>\n <ol className=\"list-decimal pl-5 font-medium space-y-1\">\n <li>Cliquez sur le bouton ci-dessous.<\/li>\n <li>Joignez le <strong>fichier PDF<\/strong> qui vient d'\u00eatre t\u00e9l\u00e9charg\u00e9 \u00e0 votre message.<\/li>\n <li>Envoyez le message.<\/li>\n <\/ol>\n <\/div>\n \n <a href={whatsappLink} target=\"_blank\" rel=\"noopener noreferrer\" className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-[#25D366] hover:bg-[#20bd5a] text-white font-bold py-4 px-8 rounded-xl transition-colors shadow-md hover:shadow-lg relative z-10\">\n <Icon name=\"message-circle\" size={24} \/> Ouvrir WhatsApp\n <\/a>\n <\/div>\n \n <button onClick={resetForm} className=\"text-teal-700 font-medium hover:text-teal-900 transition-colors\">Faire un nouveau signalement<\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n if (currentView === 'home') return renderHome();\n if (currentView === 'success') return renderSuccess();\n\n const isNextDisabled = currentStep === 5 && !formData.consent;\n\n return (\n <div className=\"py-8 px-4 sm:px-6 lg:px-8\">\n <div className=\"max-w-3xl mx-auto\">\n <div className=\"flex items-center gap-4 mb-8\">\n <button onClick={resetForm} className=\"p-2 hover:bg-slate-200 rounded-full transition-colors text-slate-500\" aria-label=\"Retour \u00e0 l'accueil\">\n <Icon name=\"chevron-left\" size={24} \/>\n <\/button>\n <div>\n <h1 className=\"text-2xl font-bold text-slate-900 flex items-center gap-2\"><Icon name=\"shield-alert\" size={24} className=\"text-teal-600\" \/> VAZAO<\/h1>\n <p className=\"text-sm text-slate-500\">Faire un signalement confidentiel<\/p>\n <\/div>\n <\/div>\n\n <div className=\"bg-white rounded-3xl shadow-xl shadow-slate-200\/50 p-6 sm:p-10 mb-24\">\n {renderProgressBar()}\n <div className=\"min-h-[400px]\">\n {currentStep === 1 && renderStep1()}\n {currentStep === 2 && renderStep2()}\n {currentStep === 3 && renderStep3()}\n {currentStep === 4 && renderStep4()}\n {currentStep === 5 && renderStep5()}\n <\/div>\n <\/div>\n\n <div className=\"fixed bottom-0 left-0 right-0 bg-white\/90 backdrop-blur-sm border-t border-slate-200 p-4 z-50 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.05)]\">\n <div className=\"max-w-3xl mx-auto flex justify-between items-center w-full px-4 sm:px-0\">\n {currentStep > 1 ? (\n <button onClick={prevStep} disabled={isSubmitting} className=\"px-4 sm:px-6 py-3 text-slate-600 font-medium hover:bg-slate-100 rounded-xl transition-colors disabled:opacity-50\">Retour<\/button>\n ) : (<div><\/div>)}\n\n {currentStep < 5 ? (\n <button onClick={nextStep} className=\"px-6 sm:px-8 py-3 bg-teal-900 hover:bg-teal-800 text-white font-semibold rounded-xl transition-colors shadow-md flex items-center gap-2\">\n Suivant <Icon name=\"chevron-right\" size={18} \/>\n <\/button>\n ) : (\n <button onClick={handleSubmit} disabled={isNextDisabled || isSubmitting} className={`px-6 sm:px-8 py-3 font-semibold rounded-xl transition-all flex items-center gap-2 shadow-md ${isNextDisabled || isSubmitting ? 'bg-slate-300 text-slate-500 cursor-not-allowed' : 'bg-amber-500 hover:bg-amber-600 text-amber-950 hover:shadow-lg'}`}>\n {isSubmitting ? (\n <>Transmission en cours...<\/>\n ) : (\n <>Valider & G\u00e9n\u00e9rer le PDF <Icon name=\"shield\" size={18} className=\"hidden sm:inline\" \/><\/>\n )}\n <\/button>\n )}\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById('vazao-root'));\n root.render(<VazaoApp \/>);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>VAZAO – Signalement<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_uag_custom_page_level_css":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-33909","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"associationjaie@gmail.com","author_link":"https:\/\/jaie-assoc.com\/en\/author\/associationjaiegmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"VAZAO – Signalement","_links":{"self":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages\/33909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/comments?post=33909"}],"version-history":[{"count":3,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages\/33909\/revisions"}],"predecessor-version":[{"id":33915,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages\/33909\/revisions\/33915"}],"wp:attachment":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/media?parent=33909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":33909,"date":"2026-10-05T09:58:27","date_gmt":"2026-10-05T09:58:27","guid":{"rendered":"https:\/\/jaie-assoc.com\/?page_id=33909"},"modified":"2026-10-05T11:04:54","modified_gmt":"2026-10-05T11:04:54","slug":"vazao","status":"publish","type":"page","link":"https:\/\/jaie-assoc.com\/en\/vazao\/","title":{"rendered":"VAZAO"},"content":{"rendered":"\n\n\n\n \n \n VAZAO – Signalement<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n teal: {\n 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf',\n 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a',\n }\n },\n animation: {\n fadeIn: 'fadeIn 0.4s ease-out forwards',\n blob: 'blob 7s infinite',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n blob: {\n '0%': { transform: 'translate(0px, 0px) scale(1)' },\n '33%': { transform: 'translate(30px, -50px) scale(1.1)' },\n '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },\n '100%': { transform: 'translate(0px, 0px) scale(1)' },\n }\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Custom styles for the WordPress container to ensure it looks good *\/\n #vazao-root {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n background-color: #f8fafc; \/* Tailwind slate-50 *\/\n min-height: 100vh;\n line-height: 1.5;\n }\n \/* Ensure input focus outlines aren't broken by WP styles *\/\n #vazao-root input:focus, #vazao-root select:focus, #vazao-root textarea:focus {\n outline: none;\n }\n .animation-delay-2000 {\n animation-delay: 2s;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"vazao-root\"><\/div>\n\n<script type=\"text\/babel\">\n const { useState, useEffect, useRef } = React;\n\n \/\/ --- CONFIGURATION ---\n const CONFIG = {\n WHATSAPP_NUMBER: \"2290191313291\",\n EMAIL_DESTINATAIRE: \"associationjaie@gmail.com\",\n ANNEE_COURANTE: 2026,\n };\n\n \/\/ --- DATA ---\n const AFRICAN_COUNTRIES = [\n \"Afrique du Sud\", \"Alg\u00e9rie\", \"Angola\", \"B\u00e9nin\", \"Botswana\", \"Burkina Faso\", \"Burundi\", \"Cameroun\", \"Cap-Vert\",\n \"R\u00e9publique centrafricaine\", \"Tchad\", \"Comores\", \"Congo\", \"R\u00e9publique d\u00e9mocratique du Congo\", \"Djibouti\",\n \"\u00c9gypte\", \"Guin\u00e9e \u00e9quatoriale\", \"\u00c9rythr\u00e9e\", \"Eswatini\", \"\u00c9thiopie\", \"Gabon\", \"Gambie\", \"Ghana\", \"Guin\u00e9e\",\n \"Guin\u00e9e-Bissau\", \"C\u00f4te d'Ivoire\", \"Kenya\", \"Lesotho\", \"Liberia\", \"Libye\", \"Madagascar\", \"Malawi\", \"Mali\",\n \"Mauritanie\", \"Maurice\", \"Maroc\", \"Mozambique\", \"Namibie\", \"Niger\", \"Nigeria\", \"Rwanda\", \"Sao Tom\u00e9-et-Principe\",\n \"S\u00e9n\u00e9gal\", \"Seychelles\", \"Sierra Leone\", \"Somalie\", \"Soudan\", \"Soudan du Sud\", \"Tanzanie\", \"Togo\", \"Tunisie\",\n \"Ouganda\", \"Zambie\", \"Zimbabwe\"\n ];\n\n const Icon = ({ name, size = 24, className = \"\" }) => {\n const iconRef = useRef(null);\n useEffect(() => {\n if (iconRef.current && window.lucide) {\n if (iconRef.current.firstChild) {\n iconRef.current.removeChild(iconRef.current.firstChild);\n }\n const iconElement = document.createElement('i');\n iconElement.setAttribute('data-lucide', name);\n iconRef.current.appendChild(iconElement);\n window.lucide.createIcons({\n attrs: { class: className, width: size, height: size },\n nameAttr: 'data-lucide',\n root: iconRef.current\n });\n }\n }, [name, size, className]);\n\n return <span ref={iconRef} className=\"inline-flex items-center justify-center\"><\/span>;\n };\n\n const VIOLENCE_TYPES = [\n { id: 'physique', label: 'Violence physique', icon: 'activity' },\n { id: 'sexuelle', label: 'Violence sexuelle', icon: 'hand' },\n { id: 'psychologique', label: 'Violence psychologique', icon: 'alert-circle' },\n { id: 'vbg', label: 'Violence bas\u00e9e sur le genre', icon: 'users' },\n { id: 'domestique', label: 'Violence domestique', icon: 'shield-alert' },\n { id: 'harcelement', label: 'Harc\u00e8lement', icon: 'eye' },\n { id: 'exploitation', label: 'Exploitation ou abus', icon: 'lock' },\n { id: 'droits_humains', label: 'Violation des droits humains', icon: 'file-text' },\n { id: 'discrimination', label: 'Discrimination', icon: 'users' },\n { id: 'autre', label: 'Autre', icon: 'info' },\n ];\n\n \/\/ --- MAIN APP COMPONENT ---\n function VazaoApp() {\n const [currentView, setCurrentView] = useState('home');\n const [currentStep, setCurrentStep] = useState(1);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [referenceId, setReferenceId] = useState('');\n\n const [formData, setFormData] = useState({\n reportTypes: [], role: '', country: '', region: '', commune: '', locality: '', unknownLocation: false, preciseLocation: '',\n description: '', incidentDate: '', ongoing: null, immediateDanger: null,\n isAnonymous: true, name: '', phone: '', email: '', preferredContact: '', consent: false\n });\n\n useEffect(() => {\n if (window.lucide) window.lucide.createIcons();\n }, []);\n \n useEffect(() => {\n setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 10);\n }, [currentView, currentStep, formData.isAnonymous, formData.immediateDanger]);\n\n\n const handleChange = (e) => {\n const { name, value, type, checked } = e.target;\n setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));\n };\n\n const toggleReportType = (id) => {\n setFormData(prev => {\n const current = prev.reportTypes;\n if (current.includes(id)) {\n return { ...prev, reportTypes: current.filter(t => t !== id) };\n } else {\n return { ...prev, reportTypes: [...current, id] };\n }\n });\n };\n\n const nextStep = () => { window.scrollTo({top: 0, behavior: 'smooth'}); setCurrentStep(prev => prev + 1); };\n const prevStep = () => { window.scrollTo({top: 0, behavior: 'smooth'}); setCurrentStep(prev => prev - 1); };\n \n const startForm = (preselect = null) => {\n if (preselect && !formData.reportTypes.includes(preselect)) {\n setFormData(prev => ({ ...prev, reportTypes: [...prev.reportTypes, preselect] }));\n }\n setCurrentView('form');\n setCurrentStep(1);\n window.scrollTo({top: 0, behavior: 'smooth'});\n };\n\n \/\/ --- LOGIQUE DE G\u00c9N\u00c9RATION DE PDF ---\n const generatePDF = (data, refId, shouldDownload = false) => {\n if (!window.jspdf) {\n console.error(\"jsPDF n'est pas charg\u00e9.\");\n return null;\n }\n \n const { jsPDF } = window.jspdf;\n const doc = new jsPDF();\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(18);\n doc.setTextColor(13, 148, 136); \/\/ Teal 600\n doc.text(\"VAZAO - RECAPITULATIF DE SIGNALEMENT\", 20, 20);\n \n doc.setFontSize(11);\n doc.setTextColor(71, 85, 105); \/\/ Slate 600\n doc.setFont(\"helvetica\", \"normal\");\n doc.text(`Date d'\u00e9mission : ${new Date().toLocaleDateString('fr-FR')} \u00e0 ${new Date().toLocaleTimeString('fr-FR')}`, 20, 30);\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setTextColor(15, 23, 42); \/\/ Slate 900\n doc.text(`R\u00c9F\u00c9RENCE : ${refId}`, 20, 40);\n\n doc.line(20, 45, 190, 45); \/\/ Ligne s\u00e9paratrice\n \n let y = 55;\n const addSection = (title, contentLines) => {\n if (y > 260) { doc.addPage(); y = 20; }\n doc.setFont(\"helvetica\", \"bold\");\n doc.setTextColor(15, 23, 42);\n doc.text(title, 20, y);\n y += 7;\n \n doc.setFont(\"helvetica\", \"normal\");\n doc.setTextColor(51, 65, 85);\n contentLines.forEach(line => {\n if (y > 275) { doc.addPage(); y = 20; }\n \/\/ D\u00e9coupe le texte long pour qu'il tienne dans la largeur de la page\n const splitLines = doc.splitTextToSize(line, 170);\n doc.text(splitLines, 20, y);\n y += (splitLines.length * 6) + 2;\n });\n y += 6; \/\/ Espacement apr\u00e8s la section\n };\n\n const types = data.reportTypes.map(id => VIOLENCE_TYPES.find(t => t.id === id)?.label).filter(Boolean).join(', ') || 'Non pr\u00e9cis\u00e9';\n addSection(\"1. SITUATION\", [\n `Type(s) de violence : ${types}`,\n `R\u00f4le de la personne : ${data.role || 'Non pr\u00e9cis\u00e9'}`\n ]);\n\n const loc = data.unknownLocation \n ? \"Non pr\u00e9cis\u00e9e par l'utilisateur\" \n : [data.country, data.region, data.commune, data.locality].filter(Boolean).join(' > ');\n addSection(\"2. LOCALISATION\", [\n `Lieu principal : ${loc}`,\n `Pr\u00e9cisions exactes : ${data.preciseLocation || 'Aucune'}`\n ]);\n\n const translateOngoingDanger = (val) => val === 'yes' ? 'Oui' : val === 'no' ? 'Non' : 'Ne sait pas';\n addSection(\"3. DESCRIPTION DE L'INCIDENT\", [\n `Date ou p\u00e9riode des faits : ${data.incidentDate || 'Non pr\u00e9cis\u00e9e'}`,\n `La situation est-elle toujours en cours ? ${translateOngoingDanger(data.ongoing)}`,\n `Y a-t-il un danger imm\u00e9diat ? ${translateOngoingDanger(data.immediateDanger)}`,\n `D\u00e9tails de la situation :`,\n `${data.description || 'Aucune description fournie.'}`\n ]);\n\n if (data.isAnonymous) {\n addSection(\"4. CONTACT\", [\"Le signalement a \u00e9t\u00e9 effectu\u00e9 de mani\u00e8re strictement ANONYME.\"]);\n } else {\n addSection(\"4. CONTACT\", [\n `Nom et pr\u00e9nom : ${data.name || 'Non renseign\u00e9'}`,\n `Num\u00e9ro de t\u00e9l\u00e9phone \/ WhatsApp : ${data.phone || 'Non renseign\u00e9'}`,\n `Adresse e-mail : ${data.email || 'Non renseign\u00e9'}`,\n `Moyen de contact pr\u00e9f\u00e9r\u00e9 : ${data.preferredContact || 'Non renseign\u00e9'}`\n ]);\n }\n\n if (shouldDownload) {\n doc.save(`Signalement_VAZAO_${refId}.pdf`);\n }\n\n return doc;\n };\n\n \/\/ --- BACKEND INTEGRATION SIMULATION ---\n const submitDataToServer = async (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const randomStr = Math.random().toString(36).substring(2, 8).toUpperCase();\n const generatedRef = `VAZ-${CONFIG.ANNEE_COURANTE}-${randomStr}`;\n \n \/\/ Simulation PDF pour log\n const fakePdf = generatePDF(data, generatedRef, false);\n\n console.log(\"=== EMAIL \u00c0 ENVOYER (SIMULATION) ===\");\n console.log(`Objet : SIGNALEMENT VAZAO`); \/\/ OBJET EXACT DEMAND\u00c9\n console.log(`Corps : Un nouveau signalement a \u00e9t\u00e9 soumis. Veuillez trouver les d\u00e9tails dans le PDF en pi\u00e8ce jointe.\\nR\u00e9f\u00e9rence : ${generatedRef}`);\n console.log(`[PI\u00c8CE JOINTE] : Un fichier PDF \"Signalement_VAZAO_${generatedRef}.pdf\" a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 et joint \u00e0 cet e-mail.`);\n \n resolve(generatedRef);\n }, 2000);\n });\n };\n\n const handleSubmit = async () => {\n setIsSubmitting(true);\n try {\n const ref = await submitDataToServer(formData);\n setReferenceId(ref);\n setCurrentView('success');\n \n \/\/ T\u00e9l\u00e9chargement automatique du PDF pour l'utilisateur\n generatePDF(formData, ref, true);\n\n } catch (error) {\n alert(\"Une erreur est survenue lors de l'envoi. Veuillez r\u00e9essayer.\");\n } finally {\n setIsSubmitting(false);\n window.scrollTo({top: 0, behavior: 'smooth'});\n }\n };\n\n const resetForm = () => {\n setFormData({\n reportTypes: [], role: '', country: '', region: '', commune: '', locality: '', unknownLocation: false, preciseLocation: '',\n description: '', incidentDate: '', ongoing: null, immediateDanger: null,\n isAnonymous: true, name: '', phone: '', email: '', preferredContact: '', consent: false\n });\n setCurrentView('home');\n setCurrentStep(1);\n };\n\n const renderHome = () => (\n <div className=\"min-h-[80vh] flex flex-col items-center justify-center p-6 sm:p-12 relative overflow-hidden\">\n <div className=\"absolute top-[-10%] left-[-10%] w-96 h-96 bg-teal-100 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob\"><\/div>\n <div className=\"absolute top-[20%] right-[-10%] w-96 h-96 bg-amber-100 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob animation-delay-2000\"><\/div>\n\n <div className=\"max-w-3xl w-full text-center z-10 relative\">\n <div className=\"flex justify-center mb-6\">\n <div className=\"bg-teal-900 text-white p-4 rounded-2xl shadow-lg\">\n <Icon name=\"shield\" size={48} \/>\n <\/div>\n <\/div>\n \n <h1 className=\"text-5xl sm:text-6xl font-bold text-slate-900 tracking-tight mb-4\">VAZAO<\/h1>\n <h2 className=\"text-2xl sm:text-3xl text-teal-800 font-medium mb-8\">Canal confidentiel de signalement<\/h2>\n \n <div className=\"bg-white p-8 rounded-3xl shadow-xl shadow-slate-200\/50 mb-12 border border-slate-100\">\n <p className=\"text-lg text-slate-600 leading-relaxed mb-8\">\n \u00ab VAZAO est un canal confidentiel permettant aux victimes ou t\u00e9moins de violences et de violations des droits de signaler une situation et, si elles le souhaitent, d'\u00eatre orient\u00e9es vers les services ou structures adapt\u00e9s. \u00bb\n <\/p>\n \n <div className=\"bg-slate-50 border-l-4 border-amber-500 p-4 rounded-r-xl text-left mb-8\">\n <p className=\"text-slate-700 font-medium\">\n Vous \u00eates victime ou t\u00e9moin d'une violence ou d'une violation de vos droits ? Vous pouvez effectuer un signalement de mani\u00e8re confidentielle.\n <\/p>\n <\/div>\n\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <button \n onClick={() => startForm()}\n className=\"flex-1 bg-teal-900 hover:bg-teal-800 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg flex items-center justify-center gap-2 group\"\n >\n Je veux faire un signalement\n <span className=\"group-hover:translate-x-1 transition-transform inline-flex\"><Icon name=\"arrow-right\" size={20} \/><\/span>\n <\/button>\n <button \n onClick={() => startForm('droits_humains')}\n className=\"flex-1 bg-white hover:bg-slate-50 text-teal-900 border-2 border-teal-900 font-semibold py-4 px-6 rounded-xl transition-all duration-200 flex items-center justify-center gap-2\"\n >\n Signaler une violation de droits\n <\/button>\n <\/div>\n \n <div className=\"mt-6 flex items-center justify-center gap-2 text-slate-500 text-sm\">\n <Icon name=\"lock\" size={16} className=\"text-slate-400\" \/>\n <p>Votre signalement peut \u00eatre effectu\u00e9 de mani\u00e8re anonyme.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n\n const renderProgressBar = () => {\n const steps = [{ num: 1, label: \"Situation\" }, { num: 2, label: \"Localisation\" }, { num: 3, label: \"Description\" }, { num: 4, label: \"Contact\" }, { num: 5, label: \"Envoi\" }];\n return (\n <div className=\"mb-8 hidden sm:block\">\n <div className=\"flex justify-between relative\">\n <div className=\"absolute left-0 top-1\/2 transform -translate-y-1\/2 w-full h-1 bg-slate-200 z-0 rounded-full\"><\/div>\n <div className=\"absolute left-0 top-1\/2 transform -translate-y-1\/2 h-1 bg-teal-600 z-0 rounded-full transition-all duration-300\" style={{ width: `${((currentStep - 1) \/ 4) * 100}%` }}><\/div>\n {steps.map((step) => (\n <div key={step.num} className=\"relative z-10 flex flex-col items-center\">\n <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors duration-300 ${currentStep >= step.num ? 'bg-teal-600 text-white shadow-md' : 'bg-white text-slate-400 border-2 border-slate-200'}`}>\n {currentStep > step.num ? <Icon name=\"check-circle-2\" size={16} \/> : step.num}\n <\/div>\n <span className={`text-xs mt-2 font-medium ${currentStep >= step.num ? 'text-teal-800' : 'text-slate-400'}`}>{step.label}<\/span>\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n };\n\n const renderStep1 = () => (\n <div className=\"space-y-8 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">Que souhaitez-vous signaler ?<\/h3><p className=\"text-slate-600\">S\u00e9lectionnez une ou plusieurs cat\u00e9gories correspondantes \u00e0 la situation.<\/p><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n {VIOLENCE_TYPES.map((type) => {\n const isSelected = formData.reportTypes.includes(type.id);\n return (\n <button key={type.id} onClick={() => toggleReportType(type.id)} className={`p-4 rounded-xl border-2 text-left transition-all duration-200 flex items-start gap-4 ${isSelected ? 'border-teal-600 bg-teal-50 shadow-md' : 'border-slate-200 bg-white hover:border-teal-300 hover:bg-slate-50'}`}>\n <div className={`p-2 rounded-lg ${isSelected ? 'bg-teal-600 text-white' : 'bg-slate-100 text-slate-500'}`}><Icon name={type.icon} size={24} \/><\/div>\n <div><h4 className={`font-semibold ${isSelected ? 'text-teal-900' : 'text-slate-700'}`}>{type.label}<\/h4><\/div>\n <\/button>\n );\n })}\n <\/div>\n <div className=\"pt-6 border-t border-slate-200\">\n <h4 className=\"text-lg font-bold text-slate-900 mb-4\">\u00cates-vous :<\/h4>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n {['Victime', 'T\u00e9moin', 'Proche', 'Autre'].map((role) => (\n <label key={role} className={`flex items-center justify-center p-3 rounded-xl border cursor-pointer transition-all ${formData.role === role ? 'border-amber-500 bg-amber-50 text-amber-900 font-semibold' : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50'}`}>\n <input type=\"radio\" name=\"role\" value={role} checked={formData.role === role} onChange={handleChange} className=\"hidden\" \/>\n {role}\n <\/label>\n ))}\n <\/div>\n <\/div>\n <\/div>\n );\n\n const renderStep2 = () => (\n <div className=\"space-y-6 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">O\u00f9 la situation s'est-elle produite ?<\/h3><p className=\"text-slate-600\">Le canal VAZAO couvre actuellement les pays africains.<\/p><\/div>\n <div className=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Pays <span className=\"text-red-500\">*<\/span><\/label>\n <select name=\"country\" value={formData.country} onChange={handleChange} disabled={formData.unknownLocation} className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors disabled:opacity-50\">\n <option value=\"\">S\u00e9lectionner un pays<\/option>\n {AFRICAN_COUNTRIES.map(country => (<option key={country} value={country}>{country}<\/option>))}\n <\/select>\n <\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">D\u00e9partement \/ R\u00e9gion<\/label>\n <input type=\"text\" name=\"region\" value={formData.region} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Ex: Littoral, Dakar...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Commune \/ Ville<\/label>\n <input type=\"text\" name=\"commune\" value={formData.commune} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Ex: Cotonou, Abidjan...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Localit\u00e9 \/ Quartier \/ Village<\/label>\n <input type=\"text\" name=\"locality\" value={formData.locality} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Rechercher ou saisir...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <div className=\"pt-4 border-t border-slate-100\">\n <label className=\"flex items-center gap-3 cursor-pointer\">\n <input type=\"checkbox\" name=\"unknownLocation\" checked={formData.unknownLocation} onChange={handleChange} className=\"w-5 h-5 text-teal-600 border-slate-300 rounded focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 font-medium\">Je ne connais pas pr\u00e9cis\u00e9ment la localisation<\/span>\n <\/label>\n <\/div>\n <\/div>\n <div className=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Localisation pr\u00e9cise <span className=\"text-slate-400 font-normal\">(Facultatif)<\/span><\/label>\n <p className=\"text-xs text-slate-500 mb-3\">Si vous le souhaitez, vous pouvez indiquer une adresse exacte ou un point de rep\u00e8re.<\/p>\n <input type=\"text\" name=\"preciseLocation\" value={formData.preciseLocation} onChange={handleChange} disabled={formData.unknownLocation} placeholder=\"Adresse, b\u00e2timent, lieu connu...\" className=\"w-full p-3 rounded-xl border border-slate-300 bg-white focus:ring-2 focus:ring-teal-500 focus:border-teal-500 disabled:opacity-50\" \/>\n <\/div>\n <\/div>\n );\n\n const renderStep3 = () => (\n <div className=\"space-y-6 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">Que s'est-il pass\u00e9 ?<\/h3><p className=\"text-slate-600\">D\u00e9crivez la situation avec le plus de d\u00e9tails possible.<\/p><\/div>\n <div>\n <textarea name=\"description\" value={formData.description} onChange={handleChange} rows=\"6\" placeholder=\"Expliquez ce qui s'est pass\u00e9, quand cela s'est produit, qui est concern\u00e9 et tout \u00e9l\u00e9ment que vous estimez utile.\" className=\"w-full p-4 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 resize-y\"><\/textarea>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-2\">Date ou p\u00e9riode des faits<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"calendar\" size={18} \/><\/div>\n <input type=\"text\" name=\"incidentDate\" value={formData.incidentDate} onChange={handleChange} placeholder=\"JJ\/MM\/AAAA ou p\u00e9riode approximative\" className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:border-teal-500\" \/>\n <\/div>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-2\">La situation est-elle toujours en cours ?<\/label>\n <div className=\"flex gap-4\">\n {['yes', 'no', 'unknown'].map((val) => (\n <label key={`ongoing-${val}`} className=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"radio\" name=\"ongoing\" value={val} checked={formData.ongoing === val} onChange={handleChange} className=\"w-4 h-4 text-teal-600 border-slate-300 focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 capitalize\">{val === 'yes' ? 'Oui' : val === 'no' ? 'Non' : 'Je ne sais pas'}<\/span>\n <\/label>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <div className=\"bg-white p-6 rounded-2xl border border-slate-200\">\n <label className=\"block text-sm font-medium text-slate-900 mb-4\">La situation pr\u00e9sente-t-elle un danger imm\u00e9diat ?<\/label>\n <div className=\"flex gap-6 mb-4\">\n {['yes', 'no', 'unknown'].map((val) => (\n <label key={`danger-${val}`} className=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"radio\" name=\"immediateDanger\" value={val} checked={formData.immediateDanger === val} onChange={handleChange} className=\"w-4 h-4 text-teal-600 border-slate-300 focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 font-medium capitalize\">{val === 'yes' ? 'Oui' : val === 'no' ? 'Non' : 'Je ne sais pas'}<\/span>\n <\/label>\n ))}\n <\/div>\n {formData.immediateDanger === 'yes' && (\n <div className=\"bg-red-50 border-l-4 border-red-500 p-4 rounded-r-xl flex gap-3 animate-fadeIn\">\n <div className=\"text-red-500 mt-0.5\"><Icon name=\"alert-triangle\" size={20} \/><\/div>\n <p className=\"text-red-800 text-sm font-medium\">En cas de danger imm\u00e9diat, contactez \u00e9galement les services d'urgence comp\u00e9tents de votre pays (Police, Pompiers, Urgences m\u00e9dicales).<\/p>\n <\/div>\n )}\n <\/div>\n <\/div>\n );\n\n const renderStep4 = () => (\n <div className=\"space-y-6 animate-fadeIn\">\n <div>\n <h3 className=\"text-2xl font-bold text-slate-900 mb-2\">Souhaitez-vous \u00eatre recontact\u00e9(e) ?<\/h3>\n <div className=\"flex items-center gap-2 text-teal-700 bg-teal-50 p-3 rounded-lg w-fit mb-6\">\n <Icon name=\"lock\" size={18} \/><span className=\"font-medium\">Vous pouvez rester anonyme.<\/span>\n <\/div>\n <\/div>\n <div className=\"space-y-4\">\n <label className={`block p-5 rounded-xl border-2 cursor-pointer transition-all ${formData.isAnonymous ? 'border-teal-600 bg-teal-50 shadow-sm' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>\n <div className=\"flex items-center gap-3\">\n <input type=\"radio\" name=\"anonymityChoice\" checked={formData.isAnonymous === true} onChange={() => setFormData(prev => ({ ...prev, isAnonymous: true }))} className=\"w-5 h-5 text-teal-600 focus:ring-teal-500\" \/>\n <span className=\"font-semibold text-slate-900 text-lg\">Je souhaite rester anonyme<\/span>\n <\/div>\n <p className=\"ml-8 mt-1 text-slate-500 text-sm\">Aucune information personnelle ne vous sera demand\u00e9e.<\/p>\n <\/label>\n <label className={`block p-5 rounded-xl border-2 cursor-pointer transition-all ${!formData.isAnonymous ? 'border-teal-600 bg-white shadow-sm' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>\n <div className=\"flex items-center gap-3\">\n <input type=\"radio\" name=\"anonymityChoice\" checked={formData.isAnonymous === false} onChange={() => setFormData(prev => ({ ...prev, isAnonymous: false }))} className=\"w-5 h-5 text-teal-600 focus:ring-teal-500\" \/>\n <span className=\"font-semibold text-slate-900 text-lg\">Je souhaite \u00eatre recontact\u00e9(e)<\/span>\n <\/div>\n <p className=\"ml-8 mt-1 text-slate-500 text-sm\">Fournissez un ou plusieurs moyens de contact pour que nous puissions vous orienter.<\/p>\n <\/label>\n <\/div>\n {!formData.isAnonymous && (\n <div className=\"mt-8 p-6 bg-white border border-slate-200 rounded-2xl shadow-sm space-y-5 animate-fadeIn\">\n <h4 className=\"font-semibold text-slate-800 border-b border-slate-100 pb-2\">Vos coordonn\u00e9es (Facultatives)<\/h4>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Nom et pr\u00e9nom<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"user\" size={18} \/><\/div>\n <input type=\"text\" name=\"name\" value={formData.name} onChange={handleChange} className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500\" \/>\n <\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Num\u00e9ro de t\u00e9l\u00e9phone \/ WhatsApp<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"phone\" size={18} \/><\/div>\n <input type=\"tel\" name=\"phone\" value={formData.phone} onChange={handleChange} className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500\" \/>\n <\/div>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-slate-700 mb-1\">Adresse e-mail<\/label>\n <div className=\"relative\">\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\"><Icon name=\"mail\" size={18} \/><\/div>\n <input type=\"email\" name=\"email\" value={formData.email} onChange={handleChange} className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 bg-slate-50 focus:ring-2 focus:ring-teal-500\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"pt-4\">\n <label className=\"block text-sm font-medium text-slate-800 mb-3\">Quel est votre moyen de contact pr\u00e9f\u00e9r\u00e9 ?<\/label>\n <div className=\"flex flex-wrap gap-4\">\n {[\n { id: 'whatsapp', label: 'WhatsApp', icon: 'message-circle' },\n { id: 'phone', label: 'T\u00e9l\u00e9phone', icon: 'phone' },\n { id: 'email', label: 'E-mail', icon: 'mail' }\n ].map(method => (\n <label key={method.id} className={`flex items-center gap-2 p-3 rounded-xl border cursor-pointer transition-all ${formData.preferredContact === method.id ? 'border-teal-600 bg-teal-50 text-teal-900 font-medium' : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-white'}`}>\n <input type=\"radio\" name=\"preferredContact\" value={method.id} checked={formData.preferredContact === method.id} onChange={handleChange} className=\"hidden\" \/>\n <Icon name={method.icon} size={18} className={formData.preferredContact === method.id ? 'text-teal-600' : 'text-slate-400'} \/>\n {method.label}\n <\/label>\n ))}\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n\n const renderStep5 = () => {\n const getReportTypeLabels = () => {\n if (formData.reportTypes.length === 0) return \"Non pr\u00e9cis\u00e9\";\n return formData.reportTypes.map(id => VIOLENCE_TYPES.find(t => t.id === id)?.label).filter(Boolean).join(', ');\n };\n\n return (\n <div className=\"space-y-8 animate-fadeIn\">\n <div><h3 className=\"text-2xl font-bold text-slate-900 mb-2\">V\u00e9rifiez votre signalement<\/h3><p className=\"text-slate-600\">Prenez un moment pour relire les informations avant l'envoi.<\/p><\/div>\n <div className=\"bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden\">\n <div className=\"p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center\">\n <h4 className=\"font-semibold text-slate-800 flex items-center gap-2\"><Icon name=\"file-text\" size={18} className=\"text-teal-600\"\/> R\u00e9capitulatif<\/h4>\n <\/div>\n <div className=\"p-6 space-y-4 text-sm\">\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Type de signalement :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{getReportTypeLabels()}<\/span><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Votre r\u00f4le :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{formData.role || \"Non pr\u00e9cis\u00e9\"}<\/span><\/div>\n <div className=\"w-full h-px bg-slate-100 my-2\"><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Localisation :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{formData.unknownLocation ? \"Non pr\u00e9cis\u00e9e\" : [formData.country, formData.region, formData.commune, formData.locality].filter(Boolean).join(' \u2192 ') || \"Non pr\u00e9cis\u00e9e\"}<\/span><\/div>\n <div className=\"w-full h-px bg-slate-100 my-2\"><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Date\/P\u00e9riode :<\/span><span className=\"sm:col-span-2 font-medium text-slate-900\">{formData.incidentDate || \"Non pr\u00e9cis\u00e9e\"}<\/span><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"><span className=\"text-slate-500\">Situation :<\/span><span className=\"sm:col-span-2 text-slate-800 whitespace-pre-wrap\">{formData.description || \"Aucune description\"}<\/span><\/div>\n <div className=\"w-full h-px bg-slate-100 my-2\"><\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\">\n <span className=\"text-slate-500\">Contact :<\/span>\n <span className=\"sm:col-span-2 font-medium\">\n {formData.isAnonymous ? (<span className=\"text-teal-600 flex items-center gap-1\"><Icon name=\"lock\" size={14}\/> Anonyme<\/span>) : (<span className=\"text-slate-900\">Coordonn\u00e9es fournies {formData.preferredContact && ` (Pr\u00e9f\u00e9rence: ${formData.preferredContact})`}<\/span>)}\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div className=\"bg-teal-50 border border-teal-100 p-6 rounded-2xl\">\n <h4 className=\"font-bold text-teal-900 mb-2 flex items-center gap-2\"><Icon name=\"shield\" size={20} \/> Confidentialit\u00e9 & R\u00e9capitulatif PDF<\/h4>\n <p className=\"text-teal-800 text-sm mb-4\">Un r\u00e9capitulatif PDF sera g\u00e9n\u00e9r\u00e9 automatiquement lors de la validation. Les informations transmises via VAZAO sont destin\u00e9es au traitement de votre signalement.<\/p>\n <label className=\"flex items-start gap-3 cursor-pointer mt-4\">\n <input type=\"checkbox\" name=\"consent\" checked={formData.consent} onChange={handleChange} className=\"mt-1 w-5 h-5 text-teal-600 border-teal-300 rounded focus:ring-teal-500\" \/>\n <span className=\"text-slate-700 font-medium text-sm\">J'ai compris les informations relatives \u00e0 la confidentialit\u00e9 et je valide l'envoi. <span className=\"text-red-500\">*<\/span><\/span>\n <\/label>\n <\/div>\n <\/div>\n );\n };\n\n const renderSuccess = () => {\n \/\/ Le message pr\u00e9-rempli inclut d\u00e9sormais une mention de la pi\u00e8ce jointe\n const message = encodeURIComponent(`Bonjour, je souhaite suivre mon signalement VAZAO. Ma r\u00e9f\u00e9rence est : ${referenceId}. Veuillez trouver mon r\u00e9capitulatif PDF en pi\u00e8ce jointe.`);\n const whatsappLink = `https:\/\/wa.me\/${CONFIG.WHATSAPP_NUMBER}?text=${message}`;\n\n return (\n <div className=\"min-h-[80vh] flex items-center justify-center p-6 sm:p-12\">\n <div className=\"max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden text-center animate-fadeIn\">\n <div className=\"bg-teal-600 p-8 sm:p-12 text-white flex flex-col items-center\">\n <div className=\"w-20 h-20 bg-white rounded-full flex items-center justify-center mb-6 shadow-lg\"><Icon name=\"check-circle-2\" size={40} className=\"text-teal-600\" \/><\/div>\n <h2 className=\"text-3xl font-bold mb-2\">Votre signalement a bien \u00e9t\u00e9 envoy\u00e9.<\/h2>\n <p className=\"text-teal-100 text-lg max-w-lg\">Nous avons bien re\u00e7u votre signalement. Un fichier PDF r\u00e9capitulatif a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 sur votre appareil.<\/p>\n <\/div>\n <div className=\"p-8 sm:p-12 space-y-8\">\n \n <div className=\"bg-slate-50 border-2 border-slate-200 rounded-2xl p-6\">\n <p className=\"text-sm text-slate-500 uppercase tracking-wider font-semibold mb-2\">Votre r\u00e9f\u00e9rence unique<\/p>\n <div className=\"text-3xl sm:text-4xl font-mono font-bold text-slate-900 mb-3 tracking-widest\">{referenceId}<\/div>\n <button \n onClick={() => generatePDF(formData, referenceId, true)} \n className=\"inline-flex items-center gap-2 mt-2 text-sm text-teal-700 hover:text-teal-900 font-medium transition-colors\"\n >\n <Icon name=\"download\" size={16} \/> Ret\u00e9l\u00e9charger mon r\u00e9capitulatif PDF\n <\/button>\n <\/div>\n \n <div className=\"bg-amber-50 border border-amber-100 rounded-2xl p-8 relative overflow-hidden\">\n <div className=\"absolute -right-4 -bottom-4 opacity-10\"><Icon name=\"message-circle\" size={120} className=\"text-amber-500\" \/><\/div>\n <h3 className=\"text-xl font-bold text-amber-900 mb-3 relative z-10\">Suivi sur WhatsApp<\/h3>\n <div className=\"text-amber-800 text-sm mb-6 relative z-10 space-y-2 text-left\">\n <p>Pour poursuivre l'\u00e9change avec notre \u00e9quipe via WhatsApp :<\/p>\n <ol className=\"list-decimal pl-5 font-medium space-y-1\">\n <li>Cliquez sur le bouton ci-dessous.<\/li>\n <li>Joignez le <strong>fichier PDF<\/strong> qui vient d'\u00eatre t\u00e9l\u00e9charg\u00e9 \u00e0 votre message.<\/li>\n <li>Envoyez le message.<\/li>\n <\/ol>\n <\/div>\n \n <a href={whatsappLink} target=\"_blank\" rel=\"noopener noreferrer\" className=\"inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-[#25D366] hover:bg-[#20bd5a] text-white font-bold py-4 px-8 rounded-xl transition-colors shadow-md hover:shadow-lg relative z-10\">\n <Icon name=\"message-circle\" size={24} \/> Ouvrir WhatsApp\n <\/a>\n <\/div>\n \n <button onClick={resetForm} className=\"text-teal-700 font-medium hover:text-teal-900 transition-colors\">Faire un nouveau signalement<\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n if (currentView === 'home') return renderHome();\n if (currentView === 'success') return renderSuccess();\n\n const isNextDisabled = currentStep === 5 && !formData.consent;\n\n return (\n <div className=\"py-8 px-4 sm:px-6 lg:px-8\">\n <div className=\"max-w-3xl mx-auto\">\n <div className=\"flex items-center gap-4 mb-8\">\n <button onClick={resetForm} className=\"p-2 hover:bg-slate-200 rounded-full transition-colors text-slate-500\" aria-label=\"Retour \u00e0 l'accueil\">\n <Icon name=\"chevron-left\" size={24} \/>\n <\/button>\n <div>\n <h1 className=\"text-2xl font-bold text-slate-900 flex items-center gap-2\"><Icon name=\"shield-alert\" size={24} className=\"text-teal-600\" \/> VAZAO<\/h1>\n <p className=\"text-sm text-slate-500\">Faire un signalement confidentiel<\/p>\n <\/div>\n <\/div>\n\n <div className=\"bg-white rounded-3xl shadow-xl shadow-slate-200\/50 p-6 sm:p-10 mb-24\">\n {renderProgressBar()}\n <div className=\"min-h-[400px]\">\n {currentStep === 1 && renderStep1()}\n {currentStep === 2 && renderStep2()}\n {currentStep === 3 && renderStep3()}\n {currentStep === 4 && renderStep4()}\n {currentStep === 5 && renderStep5()}\n <\/div>\n <\/div>\n\n <div className=\"fixed bottom-0 left-0 right-0 bg-white\/90 backdrop-blur-sm border-t border-slate-200 p-4 z-50 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.05)]\">\n <div className=\"max-w-3xl mx-auto flex justify-between items-center w-full px-4 sm:px-0\">\n {currentStep > 1 ? (\n <button onClick={prevStep} disabled={isSubmitting} className=\"px-4 sm:px-6 py-3 text-slate-600 font-medium hover:bg-slate-100 rounded-xl transition-colors disabled:opacity-50\">Retour<\/button>\n ) : (<div><\/div>)}\n\n {currentStep < 5 ? (\n <button onClick={nextStep} className=\"px-6 sm:px-8 py-3 bg-teal-900 hover:bg-teal-800 text-white font-semibold rounded-xl transition-colors shadow-md flex items-center gap-2\">\n Suivant <Icon name=\"chevron-right\" size={18} \/>\n <\/button>\n ) : (\n <button onClick={handleSubmit} disabled={isNextDisabled || isSubmitting} className={`px-6 sm:px-8 py-3 font-semibold rounded-xl transition-all flex items-center gap-2 shadow-md ${isNextDisabled || isSubmitting ? 'bg-slate-300 text-slate-500 cursor-not-allowed' : 'bg-amber-500 hover:bg-amber-600 text-amber-950 hover:shadow-lg'}`}>\n {isSubmitting ? (\n <>Transmission en cours...<\/>\n ) : (\n <>Valider & G\u00e9n\u00e9rer le PDF <Icon name=\"shield\" size={18} className=\"hidden sm:inline\" \/><\/>\n )}\n <\/button>\n )}\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById('vazao-root'));\n root.render(<VazaoApp \/>);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>VAZAO – Signalement<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_uag_custom_page_level_css":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-33909","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"associationjaie@gmail.com","author_link":"https:\/\/jaie-assoc.com\/en\/author\/associationjaiegmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"VAZAO – Signalement","_links":{"self":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages\/33909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/comments?post=33909"}],"version-history":[{"count":3,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages\/33909\/revisions"}],"predecessor-version":[{"id":33915,"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/pages\/33909\/revisions\/33915"}],"wp:attachment":[{"href":"https:\/\/jaie-assoc.com\/en\/wp-json\/wp\/v2\/media?parent=33909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}