{"id":3826,"date":"2025-07-18T13:22:09","date_gmt":"2025-07-18T13:22:09","guid":{"rendered":"https:\/\/dev.apindustrie.co\/?page_id=3826"},"modified":"2025-08-14T11:33:42","modified_gmt":"2025-08-14T11:33:42","slug":"enquiry","status":"publish","type":"page","link":"https:\/\/dev.apindustrie.co\/en\/enquiry\/","title":{"rendered":"Enquiry"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Multi-Step CF7 Form (Customize Variations + Default)<\/title>\r\n\r\n<style>\r\n \/* ========== BASE STYLES ========== *\/\r\n .cf7-bg {\r\n transition: background-image 0.4s cubic-bezier(.4,0,.2,1);\r\n min-height: 600px;\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n padding: 40px 20px;\r\n }\r\n\r\n \/* 13-inch laptop size adjustment *\/\r\n@media (max-width: 1280px) {\r\n .cf7-bg {\r\n min-height: 380px;\r\n }\r\n}\r\n .cf7-multistep-wrapper {\r\n max-width: 620px;\r\n margin: 0 auto;\r\n padding: 22px;\r\n background: rgba(255,255,255,0.92);\r\n border-radius: 30px;\r\n box-shadow: 0 6px 36px rgba(0,0,0,0.08);\r\n position: relative;\r\n z-index: 1;\r\n }\r\n .cf7-step { margin-bottom: 20px; text-align: center; }\r\n\r\n .cf7-country-group, .cf7-brand-group {\r\n display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;\r\n }\r\n\r\n \/* Same look for country + brand buttons *\/\r\n .cf7-country-label, .cf7-brand-label {\r\n display: flex; align-items: center; cursor: pointer;\r\n border: 2px solid #eee; border-radius: 50px; padding: 12px 30px;\r\n font-weight: 500; background: #fff; transition: border .18s, background .18s;\r\n user-select: none; font-size: 16px;\r\n }\r\n .cf7-country-label.selected, .cf7-brand-label.selected {\r\n border-color: #e9041e; background: #fff0f3;\r\n }\r\n .cf7-country-label input, .cf7-brand-label input { display: none; }\r\n .cf7-brand-label.disabled {\r\n opacity:.45; pointer-events:none; filter: blur(0.3px); background:#f5f5f5;\r\n }\r\n\r\n \/* Keep element in DOM & layout but hide visually (unused now, kept for compatibility) *\/\r\n .cf7-hide-keep-space {\r\n visibility: hidden;\r\n }\r\n\r\n .cf7-products-grid {\r\n display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; justify-content:center;\r\n }\r\n .cf7-product-item {\r\n border:2px solid #eee; border-radius:30px; background:#fff; cursor:pointer;\r\n transition:border .18s, box-shadow .18s; min-width:90px; max-width:120px; padding:15px 10px;\r\n display:flex; align-items:center; justify-content:center; text-align:center;\r\n box-shadow:0 1px 8px rgba(0,0,0,0.06); position:relative; font-size:15px; font-weight:500;\r\n }\r\n .cf7-product-item.selected { border-color:#e9041e; box-shadow:0 4px 20px rgba(233,4,30,0.08); background:#fff0f3; }\r\n .cf7-product-title { font-weight:500; font-size:14px; color:#1a1a1a; }\r\n .cf7-product-item.disabled, .cf7-product-item.blurred {\r\n pointer-events:none; opacity:.45; filter: blur(0.5px); background:#f5f5f5!important;\r\n }\r\n\r\n \/* Personaliser variations fully rounded *\/\r\n .cf7-product-item.is-customize {\r\n border-radius: 30px;\r\n }\r\n\r\n .cf7-enquiry-btn {\r\n width:auto; padding:12px 30px; border:none; border-radius:50px; background:#eee; color:#888;\r\n font-size:15px; font-weight:700; margin-top:6px; cursor:pointer; transition:background .18s, color .18s;\r\n box-shadow:0 2px 12px rgba(0,0,0,0.06); pointer-events:none;\r\n }\r\n .cf7-enquiry-btn.active { background:#e9041e; color:#fff; pointer-events:auto; }\r\n\r\n .cf7-popup { display:none; position:fixed; z-index:9999; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.38); }\r\n .cf7-popup-content { background:#fff; padding:22px 12px 20px; max-width:600px; margin:70px auto; border-radius:30px; position:relative; }\r\n .cf7-popup-close { position:absolute; right:15px; top:10px; background:none; border:none; font-size:16px; color:#888; cursor:pointer; }\r\n\r\n \/* ========== RESPONSIVE ========== *\/\r\n @media (max-width: 767px) {\r\n .cf7-bg { min-height:auto; padding:24px 14px; background-size:cover; }\r\n .cf7-multistep-wrapper { max-width:94%; padding:16px; }\r\n .cf7-country-group, .cf7-brand-group { flex-direction:column; align-items:center; gap:10px; }\r\n .cf7-products-grid { gap:8px; }\r\n .cf7-product-item { min-width:80px; max-width:100px; padding:12px 6px; font-size:13px; }\r\n .cf7-enquiry-btn { width:100%; font-size:14px; padding:12px; }\r\n .cf7-popup-content { max-width:94vw; padding:14px 8px; }\r\n }\r\n @media (max-width: 350px) {\r\n .cf7-country-label, .cf7-brand-label { padding:8px 16px; font-size:14px; }\r\n .cf7-product-item { padding:10px 4px; font-size:12px; }\r\n .cf7-product-title { font-size:12px; }\r\n .cf7-enquiry-btn { font-size:13px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"cf7-bg\" id=\"cf7-bg\">\r\n <div class=\"cf7-multistep-wrapper\">\r\n\r\n <!-- 1) Country (UNCHANGED, exclusive) -->\r\n <div class=\"cf7-step\">\r\n <div style=\"margin-bottom:10px;font-weight:700;font-size:17px;\">Veuillez s\u00e9lectionner votre pays.<\/div>\r\n <div class=\"cf7-country-group\">\r\n <label class=\"cf7-country-label\">\r\n <input type=\"checkbox\" name=\"country\" value=\"Niger\" autocomplete=\"off\"> Niger\r\n <\/label>\r\n <label class=\"cf7-country-label\">\r\n <input type=\"checkbox\" name=\"country\" value=\"Togo\" autocomplete=\"off\"> Togo\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2) Brand step (exclusive) -->\r\n <div class=\"cf7-step\" id=\"cf7-step-brands\" style=\"display:none;\">\r\n <div style=\"margin-bottom:10px;font-weight:700;font-size:17px;\">Veuillez s\u00e9lectionner une marque<\/div>\r\n <div class=\"cf7-brand-group\" id=\"cf7-brand-group\"><\/div>\r\n <\/div>\r\n\r\n <!-- 3) Product variations -->\r\n <div class=\"cf7-step\" id=\"cf7-step-products\" style=\"display:none;\">\r\n <div id=\"cf7-products-heading\" style=\"margin-bottom:10px;font-weight:700;font-size:17px;\">Choisir la variante du produit<\/div>\r\n <div class=\"cf7-products-grid\"><\/div>\r\n <\/div>\r\n\r\n <!-- 4) Enquiry -->\r\n <div class=\"cf7-step\">\r\n <button class=\"cf7-enquiry-btn\" type=\"button\" disabled>Demande<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Single popup with one CF7 form for all -->\r\n<div class=\"cf7-popup\" id=\"cf7-popup\">\r\n <div class=\"cf7-popup-content\" id=\"popup-default\">\r\n <button class=\"cf7-popup-close\" type=\"button\" aria-label=\"Close\">×<\/button>\r\n \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f4489-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"4489\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/3826#wpcf7-f4489-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"4489\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f4489-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"custom-country\" value=\"\" type=\"hidden\" name=\"custom-country\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"custom-brand\" value=\"\" type=\"hidden\" name=\"custom-brand\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"custom-product\" value=\"\" type=\"hidden\" name=\"custom-product\" \/>\n\n<div class=\"cf7-water-popup-form\">\n <div class=\"cf7wpf-row\">\n <div class=\"cf7wpf-col\">\n <label for=\"cf7wpf-name\">Nom complet<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"cf7wpf-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required cf7wpf-input\" id=\"cf7wpf-name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Entrez votre nom complet\" value=\"\" type=\"text\" name=\"cf7wpf-name\" \/><\/span>\n <\/div>\n <div class=\"cf7wpf-col\">\n <label for=\"cf7wpf-email\">Adresse e-mail<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"cf7wpf-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email cf7wpf-input\" id=\"cf7wpf-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Entrez votre e-mail\" value=\"\" type=\"email\" name=\"cf7wpf-email\" \/><\/span>\n <\/div>\n <\/div>\n\n <div class=\"cf7wpf-row\">\n <div class=\"cf7wpf-col\">\n <label for=\"cf7wpf-phone\">Num\u00e9ro de t\u00e9l\u00e9phone<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"cf7wpf-phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel cf7wpf-input\" id=\"cf7wpf-phone\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Entrez votre num\u00e9ro de t\u00e9l\u00e9phone\" value=\"\" type=\"tel\" name=\"cf7wpf-phone\" \/><\/span>\n <\/div>\n <div class=\"cf7wpf-col\">\n <label for=\"cf7wpf-company\">Nom de l\u2019entreprise<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"cf7wpf-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text cf7wpf-input\" id=\"cf7wpf-company\" aria-invalid=\"false\" placeholder=\"Entrez le nom de votre entreprise (optionnel)\" value=\"\" type=\"text\" name=\"cf7wpf-company\" \/><\/span>\n <\/div>\n <\/div>\n\n <div class=\"cf7wpf-row\">\n <div class=\"cf7wpf-col\">\n <label for=\"cf7wpf-quantity\">Quantit\u00e9 requise<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"cf7wpf-quantity\"><input class=\"wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number cf7wpf-input\" id=\"cf7wpf-quantity\" min=\"1\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Entrez la quantit\u00e9\" value=\"\" type=\"number\" name=\"cf7wpf-quantity\" \/><\/span>\n <\/div>\n <div class=\"cf7wpf-col\">\n <label for=\"cf7wpf-date\">Date de livraison souhait\u00e9e<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"cf7wpf-date\"><input class=\"wpcf7-form-control wpcf7-date wpcf7-validates-as-date cf7wpf-input\" id=\"cf7wpf-date\" aria-invalid=\"false\" placeholder=\"S\u00e9lectionnez la date de livraison\" value=\"\" type=\"date\" name=\"cf7wpf-date\" \/><\/span>\n <\/div>\n <\/div>\n\n <div class=\"cf7wpf-col-full\">\n <label for=\"message\">Message<\/label>\n <span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required message\" id=\"message\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Entrez Your Message\" name=\"message\"><\/textarea><\/span>\n <\/div>\n\n <div class=\"cf7wpf-submit\">\n <input class=\"wpcf7-form-control wpcf7-submit has-spinner cf7wpf-button\" type=\"submit\" value=\"Envoyer la demande\" \/>\n <\/div>\n<\/div>\n\n<style>\n\/* Compact, Minimal, Responsive Contact Form 7 Styling *\/\n.cf7-water-popup-form {\n font-size: 14px; \/* Decreased font size globally *\/\n max-width: 600px;\n margin: 0 auto;\n}\n\n.cf7-water-popup-form label {\n display: block;\n font-weight: 500;\n margin-bottom: 4px;\n margin-top: 8px;\n font-size: 13px;\n color: #222;\n}\n\n.cf7-water-popup-form .cf7wpf-input,\n.cf7-water-popup-form .cf7wpf-select,\n.cf7-water-popup-form .cf7wpf-textarea,\n.cf7-water-popup-form .message {\n width: 100%;\n padding: 7px 8px;\n border: 1px solid #bbb;\n border-radius: 4px;\n box-sizing: border-box;\n font-size: 13px;\n background: #fff;\n margin-bottom: 0;\n min-height: 36px;\n}\n\n.cf7-water-popup-form .cf7wpf-textarea,\n.cf7-water-popup-form .message {\n max-height: 80px;\n resize: vertical;\n}\n\n.cf7-water-popup-form .cf7wpf-button {\n margin-top: 14px;\n padding: 10px 16px;\n background-color: #e90015;\n color: #fff;\n border: none;\n border-radius: 30px;\n cursor: pointer;\n font-size: 15px;\n font-weight: 600;\n transition: background 0.2s;\n}\n\n.cf7-water-popup-form .cf7wpf-button:hover {\n background-color: #000;\n}\n\n.cf7-water-popup-form .cf7wpf-row {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 6px;\n margin-bottom: 0;\n}\n\n.cf7-water-popup-form .cf7wpf-col {\n flex: 1 1 150px;\n min-width: 150px;\n}\n\n.cf7-water-popup-form .cf7wpf-col-full {\n flex: 1 1 100%;\n width: 100%;\n margin-top: 8px;\n}\n\n#cf7wpf-location {\n height: 70px;\n margin-top: 7px;\n}\n\n\/* Responsive for tablet and below *\/\n@media (max-width: 1024px) {\n .cf7-water-popup-form {\n max-width: 96vw;\n font-size: 13px;\n }\n .cf7-water-popup-form .cf7wpf-row {\n gap: 8px;\n }\n}\n\n\/* Responsive for mobile *\/\n@media (max-width: 600px) {\n .cf7-water-popup-form {\n font-size: 12px;\n padding: 0 2vw;\n }\n .cf7-water-popup-form .cf7wpf-row {\n flex-direction: column;\n gap: 0;\n }\n .cf7-water-popup-form .cf7wpf-col,\n .cf7-water-popup-form .cf7wpf-col-full {\n min-width: 100%;\n width: 100%;\n }\n .cf7-water-popup-form label {\n font-size: 12px;\n margin-top: 6px;\n margin-bottom: 3px;\n }\n .cf7-water-popup-form .cf7wpf-input,\n .cf7-water-popup-form .cf7wpf-select,\n .cf7-water-popup-form .cf7wpf-textarea,\n .cf7-water-popup-form .message {\n min-height: 32px;\n font-size: 12px;\n padding: 6px 6px;\n }\n .cf7-water-popup-form .cf7wpf-button {\n width: 100%;\n padding: 10px 0;\n font-size: 14px;\n }\n}\n<\/style><p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"_wpcf7_ak_\"><label>Δ<textarea name=\"_wpcf7_ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"_wpcf7_ak_js\" value=\"20\"\/><script>document.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );<\/script><\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/* ------------------ CONFIG ------------------ *\/\r\n var bgImages = {\r\n 'Niger': '',\r\n 'Togo': ''\r\n };\r\n\r\n \/\/ Products by Country -> Brand (unchanged structure)\r\n var productsByCountryBrand = {\r\n 'Niger': {\r\n 'Ginny': [\r\n { title: '350ml', value: '350ml', brand: 'Ginny' },\r\n { title: '600ml', value: '600ml', brand: 'Ginny' },\r\n { title: '1.6L', value: '1.6L', brand: 'Ginny' },\r\n { title: '18.9L', value: '18.9L', brand: 'Ginny' }\r\n ],\r\n 'Personnaliser': [\r\n { title: '350ml', value: '350ml', brand: 'Personnaliser' },\r\n { title: '600ml', value: '600ml', brand: 'Personnaliser' },\r\n { title: '1.6L', value: '1.5L', brand: 'Personnaliser' },\r\n { title: '18.9L', value: '18.9L', brand: 'Personnaliser' }\r\n ]\r\n },\r\n 'Togo': {\r\n 'Vitale': [\r\n { title: '350ml', value: '350ml', brand: 'Vitale' },\r\n { title: '0.5L', value: '0.5L', brand: 'Vitale' },\r\n { title: '1.5L', value: '1.5L', brand: 'Vitale' },\r\n { title: '18.9L', value: '18.9L', brand: 'Vitale' }\r\n ],\r\n 'Personnaliser': [\r\n { title: '350ml', value: '350ml', brand: 'Personnaliser' },\r\n { title: '0.5L', value: '0.5L', brand: 'Personnaliser' },\r\n { title: '1.6L', value: '1.6L', brand: 'Personnaliser' },\r\n { title: '18.9L', value: '18.9L', brand: 'Personnaliser' }\r\n ]\r\n }\r\n };\r\n\r\n \/* ------------------ STATE ------------------ *\/\r\n let selectedCountry = null;\r\n let selectedProducts = [];\r\n let selectedBrand = null;\r\n\r\n \/* ------------------ DOM ------------------ *\/\r\n const cf7bg = document.getElementById('cf7-bg');\r\n const countryLbls = document.querySelectorAll('.cf7-country-label');\r\n const stepBrands = document.getElementById('cf7-step-brands');\r\n const brandGroup = document.getElementById('cf7-brand-group');\r\n const productsGrid = document.querySelector('.cf7-products-grid');\r\n const stepProducts = document.getElementById('cf7-step-products');\r\n const enquiryBtn = document.querySelector('.cf7-enquiry-btn');\r\n const popup = document.getElementById('cf7-popup');\r\n const popupContent = document.getElementById('popup-default');\r\n\r\n \/* ------------------ HELPERS ------------------ *\/\r\n function waitForCF7Form(container, callback) {\r\n let tries = 0;\r\n let interval = setInterval(function() {\r\n const form = container.querySelector('form.wpcf7-form');\r\n if (form || tries > 300) { clearInterval(interval); if (form) callback(form); }\r\n tries++;\r\n }, 60);\r\n }\r\n function fillHiddenFields(container) {\r\n waitForCF7Form(container, function(form){\r\n let ctry = form.querySelector('input[name=\"custom-country\"]');\r\n let prod = form.querySelector('input[name=\"custom-product\"]');\r\n let brand = form.querySelector('input[name=\"custom-brand\"]');\r\n if (ctry && prod && brand) {\r\n ctry.value = selectedCountry || \"\";\r\n prod.value = selectedProducts.join(', ');\r\n brand.value = selectedBrand || \"\";\r\n }\r\n });\r\n }\r\n\r\n function hideBrandStep() {\r\n stepBrands.style.display = 'none';\r\n brandGroup.innerHTML = '';\r\n selectedBrand = null;\r\n }\r\n function showBrandStep() {\r\n if (!selectedCountry) { hideBrandStep(); return; }\r\n stepBrands.style.display = '';\r\n }\r\n\r\n function hideStepProducts() {\r\n stepProducts.style.display = 'none';\r\n productsGrid.innerHTML = '';\r\n selectedProducts = [];\r\n }\r\n\r\n function updateEnquiryBtn() {\r\n let valid = selectedCountry && selectedBrand && selectedProducts.length > 0;\r\n if (valid) {\r\n enquiryBtn.classList.add('active');\r\n enquiryBtn.disabled = false;\r\n enquiryBtn.removeAttribute('disabled');\r\n } else {\r\n enquiryBtn.classList.remove('active');\r\n enquiryBtn.disabled = true;\r\n enquiryBtn.setAttribute('disabled', 'disabled');\r\n }\r\n }\r\n\r\n \/* ------------------ COUNTRY (exclusive) ------------------ *\/\r\n countryLbls.forEach(function(label){\r\n label.addEventListener('click', function(e){\r\n const input = this.querySelector('input');\r\n if (input.checked) {\r\n input.checked = false;\r\n this.classList.remove('selected');\r\n selectedCountry = null;\r\n cf7bg.style.backgroundImage = '';\r\n hideBrandStep();\r\n hideStepProducts();\r\n updateEnquiryBtn();\r\n e.preventDefault(); return false;\r\n }\r\n \/\/ exclusive across countries\r\n countryLbls.forEach(function(lab){ lab.classList.remove('selected'); lab.querySelector('input').checked = false; });\r\n input.checked = true;\r\n this.classList.add('selected');\r\n selectedCountry = input.value;\r\n cf7bg.style.backgroundImage = bgImages[selectedCountry] ? `url('${bgImages[selectedCountry]}')` : '';\r\n buildBrandButtons();\r\n showBrandStep();\r\n hideStepProducts();\r\n updateEnquiryBtn();\r\n e.preventDefault();\r\n });\r\n });\r\n\r\n \/* ------------------ BRANDS (exclusive) ------------------ *\/\r\n function buildBrandButtons() {\r\n brandGroup.innerHTML = '';\r\n selectedBrand = null;\r\n\r\n \/\/ Keep order: Ginny, Vitale, Personnaliser\r\n const brands = ['Ginny', 'Vitale', 'Personnaliser'];\r\n brands.forEach(function(brandName){\r\n const label = document.createElement('label');\r\n label.className = 'cf7-brand-label';\r\n label.innerHTML = `<input type=\"radio\" name=\"brand\" value=\"${brandName}\" autocomplete=\"off\"> ${brandName}`;\r\n brandGroup.appendChild(label);\r\n });\r\n\r\n const brandLabels = brandGroup.querySelectorAll('.cf7-brand-label');\r\n brandLabels.forEach(function(lbl){\r\n const input = lbl.querySelector('input');\r\n const val = input.value;\r\n\r\n \/\/ Disable per country (UNCHANGED)\r\n if (selectedCountry === 'Niger' && val === 'Vitale') { lbl.classList.add('disabled'); input.disabled = true; }\r\n if (selectedCountry === 'Togo' && val === 'Ginny') { lbl.classList.add('disabled'); input.disabled = true; }\r\n\r\n lbl.addEventListener('click', function(e){\r\n const thisInput = this.querySelector('input');\r\n if (this.classList.contains('disabled')) { e.preventDefault(); return false; }\r\n\r\n \/\/ toggle off if already selected\r\n if (this.classList.contains('selected')) {\r\n this.classList.remove('selected'); thisInput.checked = false;\r\n selectedBrand = null;\r\n \/\/ IMPORTANT: Do NOT hide any other brand buttons (Personaliser\/Ginny stay visible).\r\n hideStepProducts();\r\n updateEnquiryBtn();\r\n e.preventDefault(); return false;\r\n }\r\n\r\n \/\/ exclusive across brands (single selection rule)\r\n brandLabels.forEach(function(b){ b.classList.remove('selected'); b.querySelector('input').checked = false; });\r\n this.classList.add('selected');\r\n thisInput.checked = true;\r\n selectedBrand = thisInput.value;\r\n\r\n \/\/ KEY FIX: No hiding of Personnaliser or Ginny based on selection.\r\n \/\/ (Removed previous setCustomizeHidden(...) calls.)\r\n\r\n showProductsStep(); \/\/ builds the grid for the chosen brand\r\n updateEnquiryBtn();\r\n e.preventDefault();\r\n });\r\n });\r\n }\r\n\r\n \/* ------------------ PRODUCTS ------------------ *\/\r\n function showProductsStep() {\r\n productsGrid.innerHTML = '';\r\n selectedProducts = [];\r\n if (!selectedCountry || !selectedBrand) { stepProducts.style.display = 'none'; return; }\r\n stepProducts.style.display = '';\r\n\r\n const brandData = (productsByCountryBrand[selectedCountry] || {})[selectedBrand] || [];\r\n brandData.forEach(function(prod) {\r\n let item = document.createElement('div');\r\n \/\/ Mark Personaliser variations for rounded style\r\n item.className = 'cf7-product-item' + (prod.brand === 'Personnaliser' ? ' is-customize' : '');\r\n item.setAttribute('data-value', prod.value);\r\n item.setAttribute('data-brand', prod.brand);\r\n item.innerHTML = `<span class=\"cf7-product-title\">${prod.title}<\/span>`;\r\n productsGrid.appendChild(item);\r\n });\r\n\r\n let allItems = productsGrid.querySelectorAll('.cf7-product-item');\r\n allItems.forEach(function(item){\r\n item.addEventListener('click', function(){\r\n let value = item.getAttribute('data-value');\r\n if (item.classList.contains('disabled') || item.classList.contains('blurred')) return;\r\n\r\n if (item.classList.contains('selected')) {\r\n item.classList.remove('selected');\r\n selectedProducts = selectedProducts.filter(v => v !== value);\r\n } else {\r\n item.classList.add('selected');\r\n selectedProducts.push(value);\r\n }\r\n updateEnquiryBtn();\r\n });\r\n });\r\n }\r\n\r\n \/* ------------------ ENQUIRY BUTTON & POPUP ------------------ *\/\r\n enquiryBtn.addEventListener('click', function() {\r\n if (!enquiryBtn.classList.contains('active')) return;\r\n popup.style.display = 'block';\r\n fillHiddenFields(popupContent);\r\n });\r\n document.querySelector('.cf7-popup-close').addEventListener('click', function(){ popup.style.display = 'none'; });\r\n popup.addEventListener('click', function(e){ if (e.target === popup) popup.style.display = 'none'; });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Multi-Step CF7 Form (Customize Variations + Default) Veuillez s\u00e9lectionner votre pays. Niger Togo Veuillez s\u00e9lectionner une marque Choisir la variante du produit Demande ×<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3826","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/pages\/3826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/comments?post=3826"}],"version-history":[{"count":420,"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/pages\/3826\/revisions"}],"predecessor-version":[{"id":5101,"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/pages\/3826\/revisions\/5101"}],"wp:attachment":[{"href":"https:\/\/dev.apindustrie.co\/en\/wp-json\/wp\/v2\/media?parent=3826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}