Demander un Devis \u2014 3IA Distribution<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --blue-900: #1E3A8A;\n --blue-700: #1D4ED8;\n --blue-600: #2563EB;\n --blue-100: #DBEAFE;\n --gray-900: #111827;\n --gray-700: #374151;\n --gray-500: #6B7280;\n --gray-200: #E5E7EB;\n --gray-100: #F3F4F6;\n --gray-50: #F9FAFB;\n --green-600: #16A34A;\n --red-500: #EF4444;\n --white: #FFFFFF;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n color: var(--gray-900);\n background: var(--gray-50);\n }\n\n \/* \u2500\u2500 NAVIGATION \u2500\u2500 *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid #E5E7EB;\n padding: 0 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .nav-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 800;\n font-size: 18px;\n color: var(--blue-900);\n text-decoration: none;\n letter-spacing: -0.01em;\n }\n\n\n\n\/* \u2500\u2500 Desktop nav \u2500\u2500 *\/\n.nav-3ia {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 1000;\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--gray-200);\n padding: 0 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n \n.nav-logo {\n display: flex; align-items: center; gap: 10px;\n font-weight: 800; font-size: 18px;\n color: var(--blue-900); text-decoration: none;\n letter-spacing: -0.01em; flex-shrink: 0;\n}\n.nav-logo-placeholder {\n width: 38px; height: 38px;\n background: var(--blue-900); border-radius: 7px;\n display: flex; align-items: center; justify-content: center;\n}\n.nav-logo-placeholder svg {\n width: 20px; height: 20px;\n stroke: white; fill: none; stroke-width: 2;\n stroke-linecap: round; stroke-linejoin: round;\n}\n \n\/* Desktop links *\/\n.nav-desktop-links {\n display: flex; align-items: center;\n gap: 36px; list-style: none;\n}\n.nav-desktop-links li a {\n text-decoration: none; color: var(--gray-700);\n font-size: 14px; font-weight: 500; transition: color 0.15s;\n}\n.nav-desktop-links li a:hover,\n.nav-desktop-links li a.active { color: var(--blue-600); }\n \n.nav-cta-btn {\n background: var(--blue-600) !important;\n color: white !important;\n padding: 9px 20px !important;\n border-radius: 7px !important;\n font-weight: 600 !important;\n font-size: 14px !important;\n transition: background 0.15s !important;\n}\n.nav-cta-btn:hover { background: var(--blue-700) !important; }\n \n\/* \u2500\u2500 Hamburger button (hidden on desktop) \u2500\u2500 *\/\n.nav-hamburger {\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 40px; height: 40px;\n background: transparent;\n border: 1.5px solid var(--gray-200);\n border-radius: 8px;\n cursor: pointer;\n gap: 5px;\n padding: 8px;\n transition: border-color 0.2s;\n flex-shrink: 0;\n}\n.nav-hamburger:hover { border-color: var(--blue-600); }\n \n.ham-line {\n width: 100%; height: 2px;\n background: var(--gray-700); border-radius: 2px;\n transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;\n transform-origin: center;\n}\n \n\/* Hamburger \u2192 X animation *\/\n.nav-hamburger.open .ham-line:nth-child(1) {\n transform: translateY(7px) rotate(45deg);\n}\n.nav-hamburger.open .ham-line:nth-child(2) {\n opacity: 0; transform: scaleX(0);\n}\n.nav-hamburger.open .ham-line:nth-child(3) {\n transform: translateY(-7px) rotate(-45deg);\n}\n \n\/* \u2500\u2500 Mobile menu overlay \u2500\u2500 *\/\n.nav-mobile-menu {\n position: fixed;\n top: 64px; left: 0; right: 0; bottom: 0;\n z-index: 999;\n background: white;\n padding: 32px 24px;\n display: flex;\n flex-direction: column;\n gap: 0;\n transform: translateX(100%);\n transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow-y: auto;\n border-top: 1px solid var(--gray-200);\n}\n.nav-mobile-menu.open {\n transform: translateX(0);\n}\n \n\/* Mobile nav links *\/\n.nav-mobile-menu ul {\n list-style: none;\n display: flex; flex-direction: column; gap: 0;\n}\n.nav-mobile-menu ul li a {\n display: flex; align-items: center;\n justify-content: space-between;\n padding: 18px 0;\n font-size: 18px; font-weight: 600;\n color: var(--gray-900); text-decoration: none;\n border-bottom: 1px solid var(--gray-200);\n transition: color 0.15s;\n}\n.nav-mobile-menu ul li a:hover { color: var(--blue-600); }\n.nav-mobile-menu ul li a svg {\n width: 18px; height: 18px;\n stroke: var(--gray-200); fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n}\n \n\/* Mobile CTA button *\/\n.nav-mobile-cta {\n margin-top: 32px;\n display: block;\n background: var(--blue-600);\n color: white !important;\n text-align: center;\n padding: 16px;\n border-radius: 10px;\n font-size: 16px; font-weight: 700;\n text-decoration: none;\n transition: background 0.15s;\n}\n.nav-mobile-cta:hover { background: var(--blue-700); }\n \n\/* Mobile contact info *\/\n.nav-mobile-contact {\n margin-top: 32px;\n padding: 20px;\n background: var(--gray-50, #F9FAFB);\n border-radius: 10px;\n}\n.nav-mobile-contact p {\n font-size: 12px; font-weight: 600;\n letter-spacing: 0.08em; text-transform: uppercase;\n color: var(--gray-400, #9CA3AF);\n margin-bottom: 12px;\n}\n.nav-mobile-contact a {\n display: flex; align-items: center; gap: 10px;\n color: var(--gray-700); font-size: 14px; font-weight: 500;\n text-decoration: none; margin-bottom: 8px;\n}\n.nav-mobile-contact a svg {\n width: 16px; height: 16px;\n stroke: var(--blue-600); fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n}\n \n\/* \u2500\u2500 Responsive breakpoint \u2500\u2500 *\/\n@media (max-width: 768px) {\n .nav-3ia { padding: 0 20px; }\n .nav-desktop-links { display: none; }\n .nav-hamburger { display: flex; }\n}\n \n\/* Prevent body scroll when menu is open *\/\nbody.nav-open { overflow: hidden; }\n \/* \u2500\u2500 Replace .nav-logo-placeholder with your real <img> tag \u2500\u2500 *\/\n .nav-logo-placeholder {\n width: 38px;\n height: 38px;\n background: var(--blue-900);\n border-radius: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .nav-logo-placeholder svg {\n width: 20px; height: 20px;\n stroke: white; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n .nav-links {\n display: flex;\n align-items: center;\n gap: 36px;\n list-style: none;\n }\n .nav-links li a {\n text-decoration: none;\n color: var(--gray-700);\n font-size: 14px;\n font-weight: 500;\n transition: color 0.15s;\n }\n .nav-links li a:hover { color: var(--blue-600); }\n\n .nav-btn {\n background: var(--blue-600) !important;\n color: white !important;\n padding: 9px 20px;\n border-radius: 7px;\n font-weight: 600 !important;\n font-size: 14px !important;\n transition: background 0.15s !important;\n }\n .nav-btn:hover { background: var(--blue-700) !important; }\n\n }\n\n \/* \u2500\u2500 PAGE LAYOUT \u2500\u2500 *\/\n .page-wrapper {\n margin-top: 64px;\n padding: 60px 64px;\n display: grid;\n grid-template-columns: 1fr 360px;\n gap: 32px;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* \u2500\u2500 FORM CARD \u2500\u2500 *\/\n .form-card {\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: 16px;\n padding: 48px;\n }\n\n .form-title {\n font-size: 28px;\n font-weight: 800;\n color: var(--gray-900);\n margin-bottom: 8px;\n letter-spacing: -0.02em;\n }\n .form-subtitle {\n font-size: 14px;\n color: var(--gray-500);\n line-height: 1.7;\n margin-bottom: 36px;\n padding-bottom: 36px;\n border-bottom: 1px solid var(--gray-200);\n }\n\n .form-section-label {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--gray-500);\n margin-bottom: 20px;\n margin-top: 32px;\n }\n .form-section-label:first-of-type { margin-top: 0; }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 16px;\n }\n .form-row.full { grid-template-columns: 1fr; }\n\n .form-group { display: flex; flex-direction: column; gap: 6px; }\n\n label {\n font-size: 13px;\n font-weight: 600;\n color: var(--gray-700);\n }\n label .req { color: var(--blue-600); margin-left: 2px; }\n\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n input[type=\"number\"],\n select,\n textarea {\n width: 100%;\n padding: 10px 14px;\n border: 1.5px solid var(--gray-200);\n border-radius: 8px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n color: var(--gray-900);\n background: var(--white);\n transition: border-color 0.15s, box-shadow 0.15s;\n outline: none;\n }\n input::placeholder, textarea::placeholder { color: #9CA3AF; }\n input:focus, select:focus, textarea:focus {\n border-color: var(--blue-600);\n box-shadow: 0 0 0 3px rgba(37,99,235,0.1);\n }\n textarea { resize: vertical; min-height: 120px; line-height: 1.6; }\n\n \/* \u2500\u2500 SPEC ROWS (repeatable) \u2500\u2500 *\/\n .spec-header {\n display: grid;\n grid-template-columns: 1fr 100px 160px;\n gap: 12px;\n margin-bottom: 8px;\n }\n .spec-header span {\n font-size: 12px;\n font-weight: 600;\n color: var(--gray-500);\n letter-spacing: 0.04em;\n }\n .spec-header span em { color: var(--blue-600); font-style: normal; }\n\n .spec-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }\n\n .spec-row {\n display: grid;\n grid-template-columns: 1fr 100px 160px 36px;\n gap: 12px;\n align-items: center;\n }\n\n select { appearance: none; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }\n\n .btn-remove {\n width: 32px; height: 32px;\n border: 1.5px solid var(--gray-200);\n border-radius: 7px;\n background: transparent;\n color: var(--gray-500);\n font-size: 18px;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: border-color 0.15s, color 0.15s;\n flex-shrink: 0;\n }\n .btn-remove:hover { border-color: var(--red-500); color: var(--red-500); }\n\n .btn-add-line {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: transparent;\n border: 1.5px dashed var(--gray-200);\n border-radius: 8px;\n color: var(--blue-600);\n font-family: 'Inter', sans-serif;\n font-size: 13px;\n font-weight: 600;\n padding: 9px 18px;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n margin-bottom: 28px;\n }\n .btn-add-line:hover { border-color: var(--blue-600); background: var(--blue-100); }\n\n \/* \u2500\u2500 GDPR + SUBMIT \u2500\u2500 *\/\n .form-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n margin-top: 28px;\n padding-top: 24px;\n border-top: 1px solid var(--gray-200);\n }\n .gdpr-notice {\n font-size: 11px;\n color: var(--gray-500);\n line-height: 1.6;\n max-width: 360px;\n }\n\n .btn-submit {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--blue-600);\n color: white;\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 600;\n padding: 14px 28px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background 0.2s, transform 0.15s;\n white-space: nowrap;\n box-shadow: 0 4px 16px rgba(37,99,235,0.3);\n }\n .btn-submit:hover { background: var(--blue-700); transform: translateY(-1px); }\n .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }\n .btn-submit svg {\n width: 16px; height: 16px;\n stroke: white; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n \/* \u2500\u2500 SUCCESS \/ ERROR BANNER \u2500\u2500 *\/\n .form-banner {\n display: none;\n align-items: flex-start;\n gap: 12px;\n padding: 16px 20px;\n border-radius: 10px;\n margin-bottom: 24px;\n font-size: 14px;\n line-height: 1.6;\n }\n .form-banner.success {\n background: #F0FDF4;\n border: 1px solid #BBF7D0;\n color: #15803D;\n }\n .form-banner.error {\n background: #FEF2F2;\n border: 1px solid #FECACA;\n color: #B91C1C;\n }\n .form-banner svg {\n width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;\n stroke: currentColor; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n \/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\n .sidebar { display: flex; flex-direction: column; gap: 20px; }\n\n .sidebar-card {\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: 14px;\n padding: 28px;\n }\n\n .sidebar-card-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 700;\n color: var(--gray-900);\n margin-bottom: 20px;\n }\n .sidebar-card-title svg {\n width: 18px; height: 18px;\n stroke: var(--blue-600); fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n .process-steps { display: flex; flex-direction: column; gap: 0; }\n .process-step {\n display: grid;\n grid-template-columns: 32px 1fr;\n gap: 14px;\n padding: 16px 0;\n border-bottom: 1px solid var(--gray-100);\n }\n .process-step:last-child { border-bottom: none; padding-bottom: 0; }\n\n .step-num {\n width: 28px; height: 28px;\n background: var(--blue-900);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 12px; font-weight: 700; color: white;\n flex-shrink: 0;\n }\n .step-body {}\n .step-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }\n .step-desc { font-size: 12px; color: var(--gray-500); line-height: 1.6; }\n\n \/* Urgent card *\/\n .sidebar-card.urgent {\n background: var(--blue-900);\n border-color: transparent;\n }\n .sidebar-card.urgent .sidebar-card-title { color: white; }\n .sidebar-card.urgent .sidebar-card-title svg { stroke: #93C5FD; }\n\n .contact-item {\n display: flex;\n align-items: center;\n gap: 10px;\n color: rgba(255,255,255,0.8);\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 10px;\n }\n .contact-item:last-child { margin-bottom: 0; }\n .contact-item svg {\n width: 16px; height: 16px;\n stroke: #93C5FD; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n flex-shrink: 0;\n }\n\n \/* Badge row *\/\n \/*.badge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .badge-item {\n border: 1.5px solid var(--gray-200);\n border-radius: 10px;\n padding: 16px 12px;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--gray-700);\n letter-spacing: 0.04em;\n }*\/\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n background: var(--gray-900);\n padding: 40px 64px 28px;\n margin-top: 60px;\n }\n .footer-top {\n display: flex; justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 32px;\n border-bottom: 1px solid rgba(255,255,255,0.07);\n margin-bottom: 24px; gap: 40px;\n }\n .footer-logo-name { font-size: 18px; font-weight: 800; color: white; margin-bottom: 8px; }\n .footer-tagline { font-size: 13px; color: #4B5563; line-height: 1.6; max-width: 260px; }\n .footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }\n .footer-links a { color: #6B7280; text-decoration: none; font-size: 13px; font-weight: 500; }\n .footer-links a:hover { color: white; }\n .footer-copy { font-size: 12px; color: #374151; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 960px) {\n .page-wrapper { grid-template-columns: 1fr; padding: 40px 24px; }\n nav { padding: 0 24px; }\n footer { padding: 40px 24px 24px; }\n .form-footer { flex-direction: column; align-items: flex-start; }\n }\n @media (max-width: 640px) {\n .form-card { padding: 28px 20px; }\n .form-row { grid-template-columns: 1fr; }\n .spec-row { grid-template-columns: 1fr; }\n .spec-header { display: none; }\n }\n <\/style>\n<\/head>\n<body>\n\n\n\n<nav class=\"nav-3ia\" id=\"nav-3ia\">\n <a href=\"\/\" class=\"nav-logo\">\n \n \n <img decoding=\"async\" src=\"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png\" alt=\"3IA Distribution\" height=\"36\">\n \n \n \n \n <ul class=\"nav-desktop-links\">\n <li><a href=\"https:\/\/3ia-distribution.com\/index.php\/nos-partenaires-industriels\/\">Nos Partenaires<\/a><\/li>\n <li><a href=\"https:\/\/3ia-distribution.com\/index.php\/contact\">Contact<\/a><\/li>\n <li><a href=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" class=\"nav-cta-btn\">Demander un devis<\/a><\/li>\n <\/ul>\n \n \n <button class=\"nav-hamburger\"\n id=\"nav-hamburger\"\n aria-label=\"Ouvrir le menu\"\n aria-expanded=\"false\"\n aria-controls=\"nav-mobile-menu\">\n <span class=\"ham-line\"><\/span>\n <span class=\"ham-line\"><\/span>\n <span class=\"ham-line\"><\/span>\n <\/button>\n<\/nav>\n \n\n<div class=\"nav-mobile-menu\" id=\"nav-mobile-menu\" role=\"dialog\" aria-label=\"Menu de navigation\">\n \n <ul>\n <li>\n <a href=\"\/\">\n Accueil\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/3ia-distribution.com\/index.php\/nos-partenaires-industriels\/\">\n Nos Fournisseurs\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/a>\n <\/li>\n <li>\n <a href=\"\/contact\">\n Contact\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/a>\n <\/li>\n <\/ul>\n \n <a href=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" class=\"nav-mobile-cta\">\n Demander un devis imm\u00e9diat\n <\/a>\n \n <div class=\"nav-mobile-contact\">\n <p>Nous contacter directement<\/p>\n <a href=\"tel:+21629406790\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.37A16 16 0 0 0 16 16.46l1.06-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n +216 21629406790\n <\/a>\n <a href=\"mailto:sales@3ia-distribution.com\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n sales@3ia-distribution.com\n <\/a>\n <\/div>\n \n<\/div>\n \n<script>\n(function () {\n const hamburger = document.getElementById('nav-hamburger');\n const mobileMenu = document.getElementById('nav-mobile-menu');\n if (!hamburger || !mobileMenu) return;\n \n let isOpen = false;\n \n function openMenu() {\n isOpen = true;\n hamburger.classList.add('open');\n mobileMenu.classList.add('open');\n hamburger.setAttribute('aria-expanded', 'true');\n document.body.classList.add('nav-open');\n }\n \n function closeMenu() {\n isOpen = false;\n hamburger.classList.remove('open');\n mobileMenu.classList.remove('open');\n hamburger.setAttribute('aria-expanded', 'false');\n document.body.classList.remove('nav-open');\n }\n \n hamburger.addEventListener('click', () => {\n isOpen ? closeMenu() : openMenu();\n });\n \n \/* Close when a link inside the menu is clicked *\/\n mobileMenu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', closeMenu);\n });\n \n \/* Close on Escape key *\/\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && isOpen) closeMenu();\n });\n \n \/* Close when clicking outside (on the page content behind) *\/\n document.addEventListener('click', (e) => {\n if (isOpen &&\n !mobileMenu.contains(e.target) &&\n !hamburger.contains(e.target)) {\n closeMenu();\n }\n });\n})();\n<\/script>\n\n\n<div class=\"page-wrapper\" style=\"margin-top: 124px;\">\n\n \n <div class=\"form-card\">\n\n \n <div id=\"banner-success\" class=\"form-banner success\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\n <div>\n <strong>Demande envoy\u00e9e avec succ\u00e8s !<\/strong><br>\n Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible.\n <\/div>\n <\/div>\n <div id=\"banner-error\" class=\"form-banner error\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n <div>\n <strong>Erreur lors de l'envoi.<\/strong><br>\n Veuillez r\u00e9essayer ou contactez-nous directement par email.\n <\/div>\n <\/div>\n\n <h1 class=\"form-title\">Demande de Devis Rapide<\/h1>\n <p class=\"form-subtitle\">\n Pr\u00e9cisez vos besoins en pi\u00e8ces d'automatisation.\n Notre \u00e9quipe technique validera la compatibilit\u00e9 et vous r\u00e9pondra le plus t\u00f4t possible \n <\/p>\n\n <form id=\"devis-form\" novalidate>\n\n \n <div class=\"form-section-label\">Informations de contact<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"nom\">Nom du Contact <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"nom\" name=\"nom\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"entreprise\">Entreprise <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"entreprise\" name=\"entreprise\" required>\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"email\">Email Professionnel <span class=\"req\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"telephone\">T\u00e9l\u00e9phone Direct<\/label>\n <input type=\"tel\" id=\"telephone\" name=\"telephone\">\n <\/div>\n <\/div>\n\n \n <div class=\"form-section-label\">Sp\u00e9cifications Techniques<\/div>\n\n <div class=\"spec-header\">\n <span>R\u00e9f\u00e9rence Pi\u00e8ce \/ SKU <em>*<\/em><\/span>\n <span>Qt\u00e9 <em>*<\/em><\/span>\n \n <\/div>\n\n <div class=\"spec-rows\" id=\"spec-rows\">\n \n <div class=\"spec-row\">\n <input type=\"text\" name=\"sku[]\" placeholder=\"Ex: SIM-S7-1200\" required>\n <input type=\"number\" name=\"qty[]\" placeholder=\"1\" min=\"1\" value=\"1\" required>\n <select name=\"delai[]\">\n <option value=\"standard\">Standard (3\u20135j)<\/option>\n <option value=\"urgent\">Urgent (24\u201348h)<\/option>\n <option value=\"flexible\">Pas de contrainte<\/option>\n <\/select>\n <div style=\"width:36px\"><\/div>\n <\/div>\n <\/div>\n\n <button type=\"button\" class=\"btn-add-line\" id=\"btn-add-line\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n Ajouter une ligne\n <\/button>\n\n \n <div class=\"form-row full\" style=\"margin-bottom:0\">\n <div class=\"form-group\">\n <label for=\"notes\">Contexte du Projet \/ Notes Additionnelles<\/label>\n <textarea id=\"notes\" name=\"notes\" placeholder=\"Pr\u00e9cisez ici les contraintes sp\u00e9cifiques (certifications requises, environnement de d\u00e9ploiement, etc.)\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-footer\">\n <p class=\"gdpr-notice\">\n Vos donn\u00e9es sont trait\u00e9es conform\u00e9ment \u00e0 notre politique de confidentialit\u00e9\n pour la gestion de votre demande.\n <\/p>\n <button type=\"submit\" class=\"btn-submit\" id=\"btn-submit\">\n <span id=\"btn-text\">Soumettre la demande<\/span>\n <svg id=\"btn-arrow\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"\/><path d=\"M12 5l7 7-7 7\"\/><\/svg>\n \n <svg id=\"btn-spinner\" style=\"display:none;animation:spin 0.8s linear infinite\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"rgba(255,255,255,0.3)\" stroke-width=\"3\" fill=\"none\"\/><path d=\"M12 2a10 10 0 0 1 10 10\" stroke=\"white\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <\/form>\n <\/div>\n\n \n <div class=\"sidebar\">\n\n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-card-title\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\n Notre Processus\n <\/div>\n <div class=\"process-steps\">\n <div class=\"process-step\">\n <div class=\"step-num\">1<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">R\u00e9ception<\/div>\n <div class=\"step-desc\">Confirmation imm\u00e9diate de votre demande.<\/div>\n <\/div>\n <\/div>\n <div class=\"process-step\">\n <div class=\"step-num\">2<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Validation Technique<\/div>\n <div class=\"step-desc\">V\u00e9rification de la compatibilit\u00e9 et des alternatives si n\u00e9cessaire.<\/div>\n <\/div>\n <\/div>\n <div class=\"process-step\">\n <div class=\"step-num\">3<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Proposition chiffr\u00e9e<\/div>\n <div class=\"step-desc\">Devis d\u00e9taill\u00e9 envoy\u00e9 sous 24h avec d\u00e9lais d'approvisionnement r\u00e9els.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sidebar-card urgent\">\n <div class=\"sidebar-card-title\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.37A16 16 0 0 0 16 16.46l1.06-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n Besoin d'aide imm\u00e9diate ?\n <\/div>\n <p style=\"font-size:13px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.6\">\n Nos ing\u00e9nieurs technico-commerciaux sont disponibles pour vous assister.\n <\/p>\n <div class=\"contact-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.37A16 16 0 0 0 16 16.46l1.06-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n +216 29 406 790\n <\/div> \n \n <div class=\"contact-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n sales@3ia-distribution.com\n <\/div>\n <\/div>\n\n \n \n\n <\/div>\n<\/div>\n\n\n<footer>\n <div class=\"footer-top\">\n <div>\n <div class=\"footer-logo-name\">3IA Distribution<\/div>\n <p class=\"footer-tagline\">Sp\u00e9cialiste en automatisation industrielle. Votre partenaire de confiance.<\/p>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#\">Mentions L\u00e9gales<\/a>\n <a href=\"#\">Politique de Confidentialit\u00e9<\/a>\n <a href=\"#\">Conditions de Vente<\/a>\n <a href=\"#\">Support Technique<\/a>\n <\/div>\n <\/div>\n <p class=\"footer-copy\">\u00a9 2024 3IA Distribution. Tous droits r\u00e9serv\u00e9s.<\/p>\n<\/footer>\n\n\n<style>\n @keyframes spin { to { transform: rotate(360deg); } }\n<\/style>\n\n<script>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONFIGURATION \u2014 replace with your real Brevo values\n 1. Get your API key from: app.brevo.com \u2192 Settings \u2192 API Keys\n 2. Replace BUSINESS_EMAIL with the real 3IA Distribution address\n 3. Replace LIST_ID with the ID of your \"Devis\" list in Brevo\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n const BREVO_API_KEY = 'YOUR_BREVO_API_KEY'; \/\/ \u2190 paste here\n const BUSINESS_EMAIL = 'contact@3ia-distribution.com'; \/\/ \u2190 business email\n const BREVO_DEVIS_LIST = 3; \/\/ \u2190 your Brevo list ID (number)\n\n \/* \u2500\u2500\u2500 Dynamic spec rows \u2500\u2500\u2500 *\/\n let rowCount = 1;\n\n document.getElementById('btn-add-line').addEventListener('click', () => {\n rowCount++;\n const row = document.createElement('div');\n row.className = 'spec-row';\n row.innerHTML = `\n <input type=\"text\" name=\"sku[]\" placeholder=\"Ex: SIM-S7-1200\" required>\n <input type=\"number\" name=\"qty[]\" placeholder=\"1\" min=\"1\" value=\"1\" required>\n <select name=\"delai[]\">\n <option value=\"standard\">Standard (3\u20135j)<\/option>\n <option value=\"urgent\">Urgent (24\u201348h)<\/option>\n <option value=\"flexible\">Pas de contrainte<\/option>\n <\/select>\n <button type=\"button\" class=\"btn-remove\" onclick=\"this.closest('.spec-row').remove()\">\u00d7<\/button>\n `;\n document.getElementById('spec-rows').appendChild(row);\n });\n\n \/* \u2500\u2500\u2500 Form submission \u2500\u2500\u2500 *\/\n document.getElementById('devis-form').addEventListener('submit', async (e) => {\n e.preventDefault();\n\n const form = e.target;\n const btnSubmit = document.getElementById('btn-submit');\n const btnText = document.getElementById('btn-text');\n const btnArrow = document.getElementById('btn-arrow');\n const btnSpinner= document.getElementById('btn-spinner');\n\n \/\/ Collect spec rows\n const skus = [...form.querySelectorAll('input[name=\"sku[]\"]')].map(i => i.value).filter(Boolean);\n const qtys = [...form.querySelectorAll('input[name=\"qty[]\"]')].map(i => i.value);\n const delais = [...form.querySelectorAll('select[name=\"delai[]\"]')].map(s => s.options[s.selectedIndex].text);\n\n const specsFormatted = skus.map((sku, i) =>\n `\u2022 ${sku} \u2014 Qt\u00e9: ${qtys[i]} \u2014 ${delais[i]}`\n ).join('\\n');\n\n const payload = {\n nom: form.nom.value.trim(),\n entreprise: form.entreprise.value.trim(),\n email: form.email.value.trim(),\n telephone: form.telephone.value.trim(),\n specs: specsFormatted,\n notes: form.notes.value.trim(),\n };\n\n \/\/ Basic validation\n if (!payload.nom || !payload.entreprise || !payload.email || skus.length === 0) {\n showBanner('error'); return;\n }\n\n \/\/ Loading state\n btnSubmit.disabled = true;\n btnText.textContent = 'Envoi en cours...';\n btnArrow.style.display = 'none';\n btnSpinner.style.display = 'block';\n\n try {\n \/* 1\ufe0f\u20e3 Add\/update contact in Brevo CRM *\/\n await fetch('https:\/\/api.brevo.com\/v3\/contacts', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'api-key': BREVO_API_KEY,\n },\n body: JSON.stringify({\n email: payload.email,\n updateEnabled: true,\n listIds: [BREVO_DEVIS_LIST],\n attributes: {\n FIRSTNAME: payload.nom.split(' ')[0],\n LASTNAME: payload.nom.split(' ').slice(1).join(' '),\n COMPANY: payload.entreprise,\n SMS: payload.telephone,\n DEVIS_SPECS: payload.specs,\n DEVIS_NOTES: payload.notes,\n DEVIS_DATE: new Date().toLocaleDateString('fr-FR'),\n },\n }),\n });\n\n \/* 2\ufe0f\u20e3 Send confirmation email to the client *\/\n await fetch('https:\/\/api.brevo.com\/v3\/smtp\/email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'api-key': BREVO_API_KEY,\n },\n body: JSON.stringify({\n sender: { name: '3IA Distribution', email: BUSINESS_EMAIL },\n to: [{ email: payload.email, name: payload.nom }],\n subject: 'Confirmation de votre demande de devis \u2014 3IA Distribution',\n htmlContent: `\n <div style=\"font-family:Inter,sans-serif;max-width:560px;margin:auto;color:#111827\">\n <div style=\"background:#1E3A8A;padding:28px 32px;border-radius:12px 12px 0 0\">\n <h1 style=\"color:white;font-size:20px;margin:0\">3IA Distribution<\/h1>\n <\/div>\n <div style=\"background:#F9FAFB;padding:32px;border:1px solid #E5E7EB;border-top:none;border-radius:0 0 12px 12px\">\n <p style=\"font-size:16px;font-weight:700;margin-bottom:8px\">Bonjour ${payload.nom},<\/p>\n <p style=\"color:#6B7280;margin-bottom:24px;line-height:1.6\">\n Nous avons bien re\u00e7u votre demande de devis. Notre \u00e9quipe technique\n va l'analyser et vous r\u00e9pondra sous <strong>24h ouvr\u00e9es<\/strong>.\n <\/p>\n <div style=\"background:white;border:1px solid #E5E7EB;border-radius:10px;padding:20px;margin-bottom:24px\">\n <p style=\"font-size:13px;font-weight:700;color:#6B7280;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:12px\">R\u00e9capitulatif de votre demande<\/p>\n <p style=\"font-size:14px;margin-bottom:8px\"><strong>Entreprise:<\/strong> ${payload.entreprise}<\/p>\n <p style=\"font-size:14px;margin-bottom:8px\"><strong>Pi\u00e8ces demand\u00e9es:<\/strong><\/p>\n <pre style=\"font-size:13px;color:#374151;white-space:pre-wrap;margin:0\">${payload.specs}<\/pre>\n ${payload.notes ? `<p style=\"font-size:14px;margin-top:12px\"><strong>Notes:<\/strong> ${payload.notes}<\/p>` : ''}\n <\/div>\n <p style=\"font-size:13px;color:#6B7280;line-height:1.6\">\n Pour toute question urgente, contactez-nous directement :<br>\n \ud83d\udce7 ${BUSINESS_EMAIL}<br>\ud83d\udcde +33 (0)1 00 00 00 00\n <\/p>\n <\/div>\n <\/div>\n `,\n }),\n });\n\n \/* 3\ufe0f\u20e3 Send notification email to the business *\/\n await fetch('https:\/\/api.brevo.com\/v3\/smtp\/email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'api-key': BREVO_API_KEY,\n },\n body: JSON.stringify({\n sender: { name: '3IA Distribution Site', email: BUSINESS_EMAIL },\n to: [{ email: BUSINESS_EMAIL, name: '3IA Distribution' }],\n subject: `\ud83d\udd14 Nouvelle demande de devis \u2014 ${payload.nom} (${payload.entreprise})`,\n htmlContent: `\n <div style=\"font-family:Inter,sans-serif;max-width:560px;margin:auto;color:#111827\">\n <div style=\"background:#1E3A8A;padding:24px 32px;border-radius:12px 12px 0 0\">\n <h2 style=\"color:white;font-size:16px;margin:0\">Nouvelle demande de devis re\u00e7ue<\/h2>\n <\/div>\n <div style=\"background:#F9FAFB;padding:28px 32px;border:1px solid #E5E7EB;border-top:none;border-radius:0 0 12px 12px\">\n <table style=\"width:100%;border-collapse:collapse;font-size:14px\">\n <tr><td style=\"padding:8px 0;color:#6B7280;width:140px\">Nom<\/td><td style=\"font-weight:600\">${payload.nom}<\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280\">Entreprise<\/td><td style=\"font-weight:600\">${payload.entreprise}<\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280\">Email<\/td><td><a href=\"mailto:${payload.email}\" style=\"color:#2563EB\">${payload.email}<\/a><\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280\">T\u00e9l\u00e9phone<\/td><td>${payload.telephone || '\u2014'}<\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280;vertical-align:top\">Pi\u00e8ces<\/td><td><pre style=\"margin:0;white-space:pre-wrap;font-size:13px\">${payload.specs}<\/pre><\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280;vertical-align:top\">Notes<\/td><td style=\"font-size:13px\">${payload.notes || '\u2014'}<\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n `,\n }),\n });\n\n showBanner('success');\n form.reset();\n \/\/ Reset spec rows to just one\n const rows = document.getElementById('spec-rows');\n rows.innerHTML = `\n <div class=\"spec-row\">\n <input type=\"text\" name=\"sku[]\" placeholder=\"Ex: SIM-S7-1200\" required>\n <input type=\"number\" name=\"qty[]\" placeholder=\"1\" min=\"1\" value=\"1\" required>\n <select name=\"delai[]\">\n <option value=\"standard\">Standard (3\u20135j)<\/option>\n <option value=\"urgent\">Urgent (24\u201348h)<\/option>\n <option value=\"flexible\">Pas de contrainte<\/option>\n <\/select>\n <div style=\"width:36px\"><\/div>\n <\/div>`;\n\n } catch (err) {\n console.error(err);\n showBanner('error');\n } finally {\n btnSubmit.disabled = false;\n btnText.textContent = 'Soumettre la demande';\n btnArrow.style.display = 'inline';\n btnSpinner.style.display = 'none';\n }\n });\n\n function showBanner(type) {\n const s = document.getElementById('banner-success');\n const e = document.getElementById('banner-error');\n s.style.display = type === 'success' ? 'flex' : 'none';\n e.style.display = type === 'error' ? 'flex' : 'none';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n<\/script>\n\n<\/body>\n<\/html>\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>Demander un Devis \u2014 3IA Distribution Nos Partenaires Contact Demander un devis Accueil Nos Fournisseurs Contact Demander un devis imm\u00e9diat Nous contacter directement +216 21629406790 sales@3ia-distribution.com Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>demander un devis - WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"demander un devis - WordPress\" \/>\n<meta property=\"og:description\" content=\"Demander un Devis \u2014 3IA Distribution Nos Partenaires Contact Demander un devis Accueil Nos Fournisseurs Contact Demander un devis imm\u00e9diat Nous contacter directement +216 21629406790 sales@3ia-distribution.com Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/3iadistribution\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-07T12:43:26+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/\",\"url\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/\",\"name\":\"demander un devis - WordPress\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"datePublished\":\"2026-06-18T10:22:35+00:00\",\"dateModified\":\"2026-08-07T12:43:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#primaryimage\",\"url\":\"http:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"contentUrl\":\"http:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/3ia-distribution.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"demander un devis\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#website\",\"url\":\"http:\\\/\\\/3ia-distribution.com\\\/\",\"name\":\"3ia-distribution.com\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/3ia-distribution.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#organization\",\"name\":\"3ia-distribution\",\"url\":\"http:\\\/\\\/3ia-distribution.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"contentUrl\":\"https:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"width\":148,\"height\":16,\"caption\":\"3ia-distribution\"},\"image\":{\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/3iadistribution\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/3ia-distribution\\\/posts\\\/?feedView=all\"]}]}<\/script>\n","yoast_head_json":{"title":"demander un devis - WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","og_locale":"en_US","og_type":"article","og_title":"demander un devis - WordPress","og_description":"Demander un Devis \u2014 3IA Distribution Nos Partenaires Contact Demander un devis Accueil Nos Fournisseurs Contact Demander un devis imm\u00e9diat Nous contacter directement +216 21629406790 sales@3ia-distribution.com Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide […]","og_url":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","og_site_name":"WordPress","article_publisher":"https:\/\/www.facebook.com\/3iadistribution\/","article_modified_time":"2026-08-07T12:43:26+00:00","og_image":[{"url":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","url":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","name":"demander un devis - WordPress","isPartOf":{"@id":"http:\/\/3ia-distribution.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#primaryimage"},"image":{"@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#primaryimage"},"thumbnailUrl":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","datePublished":"2026-06-18T10:22:35+00:00","dateModified":"2026-08-07T12:43:26+00:00","breadcrumb":{"@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#primaryimage","url":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","contentUrl":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png"},{"@type":"BreadcrumbList","@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/3ia-distribution.com\/"},{"@type":"ListItem","position":2,"name":"demander un devis"}]},{"@type":"WebSite","@id":"http:\/\/3ia-distribution.com\/#website","url":"http:\/\/3ia-distribution.com\/","name":"3ia-distribution.com","description":"","publisher":{"@id":"http:\/\/3ia-distribution.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/3ia-distribution.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/3ia-distribution.com\/#organization","name":"3ia-distribution","url":"http:\/\/3ia-distribution.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/3ia-distribution.com\/#\/schema\/logo\/image\/","url":"https:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","contentUrl":"https:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","width":148,"height":16,"caption":"3ia-distribution"},"image":{"@id":"http:\/\/3ia-distribution.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/3iadistribution\/","https:\/\/www.linkedin.com\/company\/3ia-distribution\/posts\/?feedView=all"]}]}},"_links":{"self":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":18,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":385,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions\/385"}],"wp:attachment":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Demander un Devis \u2014 3IA Distribution<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --blue-900: #1E3A8A;\n --blue-700: #1D4ED8;\n --blue-600: #2563EB;\n --blue-100: #DBEAFE;\n --gray-900: #111827;\n --gray-700: #374151;\n --gray-500: #6B7280;\n --gray-200: #E5E7EB;\n --gray-100: #F3F4F6;\n --gray-50: #F9FAFB;\n --green-600: #16A34A;\n --red-500: #EF4444;\n --white: #FFFFFF;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n color: var(--gray-900);\n background: var(--gray-50);\n }\n\n \/* \u2500\u2500 NAVIGATION \u2500\u2500 *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid #E5E7EB;\n padding: 0 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .nav-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 800;\n font-size: 18px;\n color: var(--blue-900);\n text-decoration: none;\n letter-spacing: -0.01em;\n }\n\n\n\n\/* \u2500\u2500 Desktop nav \u2500\u2500 *\/\n.nav-3ia {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 1000;\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--gray-200);\n padding: 0 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n \n.nav-logo {\n display: flex; align-items: center; gap: 10px;\n font-weight: 800; font-size: 18px;\n color: var(--blue-900); text-decoration: none;\n letter-spacing: -0.01em; flex-shrink: 0;\n}\n.nav-logo-placeholder {\n width: 38px; height: 38px;\n background: var(--blue-900); border-radius: 7px;\n display: flex; align-items: center; justify-content: center;\n}\n.nav-logo-placeholder svg {\n width: 20px; height: 20px;\n stroke: white; fill: none; stroke-width: 2;\n stroke-linecap: round; stroke-linejoin: round;\n}\n \n\/* Desktop links *\/\n.nav-desktop-links {\n display: flex; align-items: center;\n gap: 36px; list-style: none;\n}\n.nav-desktop-links li a {\n text-decoration: none; color: var(--gray-700);\n font-size: 14px; font-weight: 500; transition: color 0.15s;\n}\n.nav-desktop-links li a:hover,\n.nav-desktop-links li a.active { color: var(--blue-600); }\n \n.nav-cta-btn {\n background: var(--blue-600) !important;\n color: white !important;\n padding: 9px 20px !important;\n border-radius: 7px !important;\n font-weight: 600 !important;\n font-size: 14px !important;\n transition: background 0.15s !important;\n}\n.nav-cta-btn:hover { background: var(--blue-700) !important; }\n \n\/* \u2500\u2500 Hamburger button (hidden on desktop) \u2500\u2500 *\/\n.nav-hamburger {\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 40px; height: 40px;\n background: transparent;\n border: 1.5px solid var(--gray-200);\n border-radius: 8px;\n cursor: pointer;\n gap: 5px;\n padding: 8px;\n transition: border-color 0.2s;\n flex-shrink: 0;\n}\n.nav-hamburger:hover { border-color: var(--blue-600); }\n \n.ham-line {\n width: 100%; height: 2px;\n background: var(--gray-700); border-radius: 2px;\n transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;\n transform-origin: center;\n}\n \n\/* Hamburger \u2192 X animation *\/\n.nav-hamburger.open .ham-line:nth-child(1) {\n transform: translateY(7px) rotate(45deg);\n}\n.nav-hamburger.open .ham-line:nth-child(2) {\n opacity: 0; transform: scaleX(0);\n}\n.nav-hamburger.open .ham-line:nth-child(3) {\n transform: translateY(-7px) rotate(-45deg);\n}\n \n\/* \u2500\u2500 Mobile menu overlay \u2500\u2500 *\/\n.nav-mobile-menu {\n position: fixed;\n top: 64px; left: 0; right: 0; bottom: 0;\n z-index: 999;\n background: white;\n padding: 32px 24px;\n display: flex;\n flex-direction: column;\n gap: 0;\n transform: translateX(100%);\n transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow-y: auto;\n border-top: 1px solid var(--gray-200);\n}\n.nav-mobile-menu.open {\n transform: translateX(0);\n}\n \n\/* Mobile nav links *\/\n.nav-mobile-menu ul {\n list-style: none;\n display: flex; flex-direction: column; gap: 0;\n}\n.nav-mobile-menu ul li a {\n display: flex; align-items: center;\n justify-content: space-between;\n padding: 18px 0;\n font-size: 18px; font-weight: 600;\n color: var(--gray-900); text-decoration: none;\n border-bottom: 1px solid var(--gray-200);\n transition: color 0.15s;\n}\n.nav-mobile-menu ul li a:hover { color: var(--blue-600); }\n.nav-mobile-menu ul li a svg {\n width: 18px; height: 18px;\n stroke: var(--gray-200); fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n}\n \n\/* Mobile CTA button *\/\n.nav-mobile-cta {\n margin-top: 32px;\n display: block;\n background: var(--blue-600);\n color: white !important;\n text-align: center;\n padding: 16px;\n border-radius: 10px;\n font-size: 16px; font-weight: 700;\n text-decoration: none;\n transition: background 0.15s;\n}\n.nav-mobile-cta:hover { background: var(--blue-700); }\n \n\/* Mobile contact info *\/\n.nav-mobile-contact {\n margin-top: 32px;\n padding: 20px;\n background: var(--gray-50, #F9FAFB);\n border-radius: 10px;\n}\n.nav-mobile-contact p {\n font-size: 12px; font-weight: 600;\n letter-spacing: 0.08em; text-transform: uppercase;\n color: var(--gray-400, #9CA3AF);\n margin-bottom: 12px;\n}\n.nav-mobile-contact a {\n display: flex; align-items: center; gap: 10px;\n color: var(--gray-700); font-size: 14px; font-weight: 500;\n text-decoration: none; margin-bottom: 8px;\n}\n.nav-mobile-contact a svg {\n width: 16px; height: 16px;\n stroke: var(--blue-600); fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n}\n \n\/* \u2500\u2500 Responsive breakpoint \u2500\u2500 *\/\n@media (max-width: 768px) {\n .nav-3ia { padding: 0 20px; }\n .nav-desktop-links { display: none; }\n .nav-hamburger { display: flex; }\n}\n \n\/* Prevent body scroll when menu is open *\/\nbody.nav-open { overflow: hidden; }\n \/* \u2500\u2500 Replace .nav-logo-placeholder with your real <img> tag \u2500\u2500 *\/\n .nav-logo-placeholder {\n width: 38px;\n height: 38px;\n background: var(--blue-900);\n border-radius: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .nav-logo-placeholder svg {\n width: 20px; height: 20px;\n stroke: white; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n .nav-links {\n display: flex;\n align-items: center;\n gap: 36px;\n list-style: none;\n }\n .nav-links li a {\n text-decoration: none;\n color: var(--gray-700);\n font-size: 14px;\n font-weight: 500;\n transition: color 0.15s;\n }\n .nav-links li a:hover { color: var(--blue-600); }\n\n .nav-btn {\n background: var(--blue-600) !important;\n color: white !important;\n padding: 9px 20px;\n border-radius: 7px;\n font-weight: 600 !important;\n font-size: 14px !important;\n transition: background 0.15s !important;\n }\n .nav-btn:hover { background: var(--blue-700) !important; }\n\n }\n\n \/* \u2500\u2500 PAGE LAYOUT \u2500\u2500 *\/\n .page-wrapper {\n margin-top: 64px;\n padding: 60px 64px;\n display: grid;\n grid-template-columns: 1fr 360px;\n gap: 32px;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* \u2500\u2500 FORM CARD \u2500\u2500 *\/\n .form-card {\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: 16px;\n padding: 48px;\n }\n\n .form-title {\n font-size: 28px;\n font-weight: 800;\n color: var(--gray-900);\n margin-bottom: 8px;\n letter-spacing: -0.02em;\n }\n .form-subtitle {\n font-size: 14px;\n color: var(--gray-500);\n line-height: 1.7;\n margin-bottom: 36px;\n padding-bottom: 36px;\n border-bottom: 1px solid var(--gray-200);\n }\n\n .form-section-label {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--gray-500);\n margin-bottom: 20px;\n margin-top: 32px;\n }\n .form-section-label:first-of-type { margin-top: 0; }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 16px;\n }\n .form-row.full { grid-template-columns: 1fr; }\n\n .form-group { display: flex; flex-direction: column; gap: 6px; }\n\n label {\n font-size: 13px;\n font-weight: 600;\n color: var(--gray-700);\n }\n label .req { color: var(--blue-600); margin-left: 2px; }\n\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n input[type=\"number\"],\n select,\n textarea {\n width: 100%;\n padding: 10px 14px;\n border: 1.5px solid var(--gray-200);\n border-radius: 8px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n color: var(--gray-900);\n background: var(--white);\n transition: border-color 0.15s, box-shadow 0.15s;\n outline: none;\n }\n input::placeholder, textarea::placeholder { color: #9CA3AF; }\n input:focus, select:focus, textarea:focus {\n border-color: var(--blue-600);\n box-shadow: 0 0 0 3px rgba(37,99,235,0.1);\n }\n textarea { resize: vertical; min-height: 120px; line-height: 1.6; }\n\n \/* \u2500\u2500 SPEC ROWS (repeatable) \u2500\u2500 *\/\n .spec-header {\n display: grid;\n grid-template-columns: 1fr 100px 160px;\n gap: 12px;\n margin-bottom: 8px;\n }\n .spec-header span {\n font-size: 12px;\n font-weight: 600;\n color: var(--gray-500);\n letter-spacing: 0.04em;\n }\n .spec-header span em { color: var(--blue-600); font-style: normal; }\n\n .spec-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }\n\n .spec-row {\n display: grid;\n grid-template-columns: 1fr 100px 160px 36px;\n gap: 12px;\n align-items: center;\n }\n\n select { appearance: none; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }\n\n .btn-remove {\n width: 32px; height: 32px;\n border: 1.5px solid var(--gray-200);\n border-radius: 7px;\n background: transparent;\n color: var(--gray-500);\n font-size: 18px;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: border-color 0.15s, color 0.15s;\n flex-shrink: 0;\n }\n .btn-remove:hover { border-color: var(--red-500); color: var(--red-500); }\n\n .btn-add-line {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: transparent;\n border: 1.5px dashed var(--gray-200);\n border-radius: 8px;\n color: var(--blue-600);\n font-family: 'Inter', sans-serif;\n font-size: 13px;\n font-weight: 600;\n padding: 9px 18px;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n margin-bottom: 28px;\n }\n .btn-add-line:hover { border-color: var(--blue-600); background: var(--blue-100); }\n\n \/* \u2500\u2500 GDPR + SUBMIT \u2500\u2500 *\/\n .form-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n margin-top: 28px;\n padding-top: 24px;\n border-top: 1px solid var(--gray-200);\n }\n .gdpr-notice {\n font-size: 11px;\n color: var(--gray-500);\n line-height: 1.6;\n max-width: 360px;\n }\n\n .btn-submit {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--blue-600);\n color: white;\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 600;\n padding: 14px 28px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background 0.2s, transform 0.15s;\n white-space: nowrap;\n box-shadow: 0 4px 16px rgba(37,99,235,0.3);\n }\n .btn-submit:hover { background: var(--blue-700); transform: translateY(-1px); }\n .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }\n .btn-submit svg {\n width: 16px; height: 16px;\n stroke: white; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n \/* \u2500\u2500 SUCCESS \/ ERROR BANNER \u2500\u2500 *\/\n .form-banner {\n display: none;\n align-items: flex-start;\n gap: 12px;\n padding: 16px 20px;\n border-radius: 10px;\n margin-bottom: 24px;\n font-size: 14px;\n line-height: 1.6;\n }\n .form-banner.success {\n background: #F0FDF4;\n border: 1px solid #BBF7D0;\n color: #15803D;\n }\n .form-banner.error {\n background: #FEF2F2;\n border: 1px solid #FECACA;\n color: #B91C1C;\n }\n .form-banner svg {\n width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;\n stroke: currentColor; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n \/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\n .sidebar { display: flex; flex-direction: column; gap: 20px; }\n\n .sidebar-card {\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: 14px;\n padding: 28px;\n }\n\n .sidebar-card-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 700;\n color: var(--gray-900);\n margin-bottom: 20px;\n }\n .sidebar-card-title svg {\n width: 18px; height: 18px;\n stroke: var(--blue-600); fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n }\n\n .process-steps { display: flex; flex-direction: column; gap: 0; }\n .process-step {\n display: grid;\n grid-template-columns: 32px 1fr;\n gap: 14px;\n padding: 16px 0;\n border-bottom: 1px solid var(--gray-100);\n }\n .process-step:last-child { border-bottom: none; padding-bottom: 0; }\n\n .step-num {\n width: 28px; height: 28px;\n background: var(--blue-900);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 12px; font-weight: 700; color: white;\n flex-shrink: 0;\n }\n .step-body {}\n .step-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }\n .step-desc { font-size: 12px; color: var(--gray-500); line-height: 1.6; }\n\n \/* Urgent card *\/\n .sidebar-card.urgent {\n background: var(--blue-900);\n border-color: transparent;\n }\n .sidebar-card.urgent .sidebar-card-title { color: white; }\n .sidebar-card.urgent .sidebar-card-title svg { stroke: #93C5FD; }\n\n .contact-item {\n display: flex;\n align-items: center;\n gap: 10px;\n color: rgba(255,255,255,0.8);\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 10px;\n }\n .contact-item:last-child { margin-bottom: 0; }\n .contact-item svg {\n width: 16px; height: 16px;\n stroke: #93C5FD; fill: none;\n stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n flex-shrink: 0;\n }\n\n \/* Badge row *\/\n \/*.badge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .badge-item {\n border: 1.5px solid var(--gray-200);\n border-radius: 10px;\n padding: 16px 12px;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--gray-700);\n letter-spacing: 0.04em;\n }*\/\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n background: var(--gray-900);\n padding: 40px 64px 28px;\n margin-top: 60px;\n }\n .footer-top {\n display: flex; justify-content: space-between;\n align-items: flex-start;\n padding-bottom: 32px;\n border-bottom: 1px solid rgba(255,255,255,0.07);\n margin-bottom: 24px; gap: 40px;\n }\n .footer-logo-name { font-size: 18px; font-weight: 800; color: white; margin-bottom: 8px; }\n .footer-tagline { font-size: 13px; color: #4B5563; line-height: 1.6; max-width: 260px; }\n .footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }\n .footer-links a { color: #6B7280; text-decoration: none; font-size: 13px; font-weight: 500; }\n .footer-links a:hover { color: white; }\n .footer-copy { font-size: 12px; color: #374151; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 960px) {\n .page-wrapper { grid-template-columns: 1fr; padding: 40px 24px; }\n nav { padding: 0 24px; }\n footer { padding: 40px 24px 24px; }\n .form-footer { flex-direction: column; align-items: flex-start; }\n }\n @media (max-width: 640px) {\n .form-card { padding: 28px 20px; }\n .form-row { grid-template-columns: 1fr; }\n .spec-row { grid-template-columns: 1fr; }\n .spec-header { display: none; }\n }\n <\/style>\n<\/head>\n<body>\n\n\n\n<nav class=\"nav-3ia\" id=\"nav-3ia\">\n <a href=\"\/\" class=\"nav-logo\">\n \n \n <img decoding=\"async\" src=\"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png\" alt=\"3IA Distribution\" height=\"36\">\n \n \n \n \n <ul class=\"nav-desktop-links\">\n <li><a href=\"https:\/\/3ia-distribution.com\/index.php\/nos-partenaires-industriels\/\">Nos Partenaires<\/a><\/li>\n <li><a href=\"https:\/\/3ia-distribution.com\/index.php\/contact\">Contact<\/a><\/li>\n <li><a href=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" class=\"nav-cta-btn\">Demander un devis<\/a><\/li>\n <\/ul>\n \n \n <button class=\"nav-hamburger\"\n id=\"nav-hamburger\"\n aria-label=\"Ouvrir le menu\"\n aria-expanded=\"false\"\n aria-controls=\"nav-mobile-menu\">\n <span class=\"ham-line\"><\/span>\n <span class=\"ham-line\"><\/span>\n <span class=\"ham-line\"><\/span>\n <\/button>\n<\/nav>\n \n\n<div class=\"nav-mobile-menu\" id=\"nav-mobile-menu\" role=\"dialog\" aria-label=\"Menu de navigation\">\n \n <ul>\n <li>\n <a href=\"\/\">\n Accueil\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/3ia-distribution.com\/index.php\/nos-partenaires-industriels\/\">\n Nos Fournisseurs\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/a>\n <\/li>\n <li>\n <a href=\"\/contact\">\n Contact\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/a>\n <\/li>\n <\/ul>\n \n <a href=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" class=\"nav-mobile-cta\">\n Demander un devis imm\u00e9diat\n <\/a>\n \n <div class=\"nav-mobile-contact\">\n <p>Nous contacter directement<\/p>\n <a href=\"tel:+21629406790\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.37A16 16 0 0 0 16 16.46l1.06-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n +216 21629406790\n <\/a>\n <a href=\"mailto:sales@3ia-distribution.com\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n sales@3ia-distribution.com\n <\/a>\n <\/div>\n \n<\/div>\n \n<script>\n(function () {\n const hamburger = document.getElementById('nav-hamburger');\n const mobileMenu = document.getElementById('nav-mobile-menu');\n if (!hamburger || !mobileMenu) return;\n \n let isOpen = false;\n \n function openMenu() {\n isOpen = true;\n hamburger.classList.add('open');\n mobileMenu.classList.add('open');\n hamburger.setAttribute('aria-expanded', 'true');\n document.body.classList.add('nav-open');\n }\n \n function closeMenu() {\n isOpen = false;\n hamburger.classList.remove('open');\n mobileMenu.classList.remove('open');\n hamburger.setAttribute('aria-expanded', 'false');\n document.body.classList.remove('nav-open');\n }\n \n hamburger.addEventListener('click', () => {\n isOpen ? closeMenu() : openMenu();\n });\n \n \/* Close when a link inside the menu is clicked *\/\n mobileMenu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', closeMenu);\n });\n \n \/* Close on Escape key *\/\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && isOpen) closeMenu();\n });\n \n \/* Close when clicking outside (on the page content behind) *\/\n document.addEventListener('click', (e) => {\n if (isOpen &&\n !mobileMenu.contains(e.target) &&\n !hamburger.contains(e.target)) {\n closeMenu();\n }\n });\n})();\n<\/script>\n\n\n<div class=\"page-wrapper\" style=\"margin-top: 124px;\">\n\n \n <div class=\"form-card\">\n\n \n <div id=\"banner-success\" class=\"form-banner success\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\n <div>\n <strong>Demande envoy\u00e9e avec succ\u00e8s !<\/strong><br>\n Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible.\n <\/div>\n <\/div>\n <div id=\"banner-error\" class=\"form-banner error\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n <div>\n <strong>Erreur lors de l'envoi.<\/strong><br>\n Veuillez r\u00e9essayer ou contactez-nous directement par email.\n <\/div>\n <\/div>\n\n <h1 class=\"form-title\">Demande de Devis Rapide<\/h1>\n <p class=\"form-subtitle\">\n Pr\u00e9cisez vos besoins en pi\u00e8ces d'automatisation.\n Notre \u00e9quipe technique validera la compatibilit\u00e9 et vous r\u00e9pondra le plus t\u00f4t possible \n <\/p>\n\n <form id=\"devis-form\" novalidate>\n\n \n <div class=\"form-section-label\">Informations de contact<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"nom\">Nom du Contact <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"nom\" name=\"nom\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"entreprise\">Entreprise <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"entreprise\" name=\"entreprise\" required>\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"email\">Email Professionnel <span class=\"req\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"telephone\">T\u00e9l\u00e9phone Direct<\/label>\n <input type=\"tel\" id=\"telephone\" name=\"telephone\">\n <\/div>\n <\/div>\n\n \n <div class=\"form-section-label\">Sp\u00e9cifications Techniques<\/div>\n\n <div class=\"spec-header\">\n <span>R\u00e9f\u00e9rence Pi\u00e8ce \/ SKU <em>*<\/em><\/span>\n <span>Qt\u00e9 <em>*<\/em><\/span>\n \n <\/div>\n\n <div class=\"spec-rows\" id=\"spec-rows\">\n \n <div class=\"spec-row\">\n <input type=\"text\" name=\"sku[]\" placeholder=\"Ex: SIM-S7-1200\" required>\n <input type=\"number\" name=\"qty[]\" placeholder=\"1\" min=\"1\" value=\"1\" required>\n <select name=\"delai[]\">\n <option value=\"standard\">Standard (3\u20135j)<\/option>\n <option value=\"urgent\">Urgent (24\u201348h)<\/option>\n <option value=\"flexible\">Pas de contrainte<\/option>\n <\/select>\n <div style=\"width:36px\"><\/div>\n <\/div>\n <\/div>\n\n <button type=\"button\" class=\"btn-add-line\" id=\"btn-add-line\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n Ajouter une ligne\n <\/button>\n\n \n <div class=\"form-row full\" style=\"margin-bottom:0\">\n <div class=\"form-group\">\n <label for=\"notes\">Contexte du Projet \/ Notes Additionnelles<\/label>\n <textarea id=\"notes\" name=\"notes\" placeholder=\"Pr\u00e9cisez ici les contraintes sp\u00e9cifiques (certifications requises, environnement de d\u00e9ploiement, etc.)\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-footer\">\n <p class=\"gdpr-notice\">\n Vos donn\u00e9es sont trait\u00e9es conform\u00e9ment \u00e0 notre politique de confidentialit\u00e9\n pour la gestion de votre demande.\n <\/p>\n <button type=\"submit\" class=\"btn-submit\" id=\"btn-submit\">\n <span id=\"btn-text\">Soumettre la demande<\/span>\n <svg id=\"btn-arrow\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"\/><path d=\"M12 5l7 7-7 7\"\/><\/svg>\n \n <svg id=\"btn-spinner\" style=\"display:none;animation:spin 0.8s linear infinite\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"rgba(255,255,255,0.3)\" stroke-width=\"3\" fill=\"none\"\/><path d=\"M12 2a10 10 0 0 1 10 10\" stroke=\"white\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <\/form>\n <\/div>\n\n \n <div class=\"sidebar\">\n\n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-card-title\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\n Notre Processus\n <\/div>\n <div class=\"process-steps\">\n <div class=\"process-step\">\n <div class=\"step-num\">1<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">R\u00e9ception<\/div>\n <div class=\"step-desc\">Confirmation imm\u00e9diate de votre demande.<\/div>\n <\/div>\n <\/div>\n <div class=\"process-step\">\n <div class=\"step-num\">2<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Validation Technique<\/div>\n <div class=\"step-desc\">V\u00e9rification de la compatibilit\u00e9 et des alternatives si n\u00e9cessaire.<\/div>\n <\/div>\n <\/div>\n <div class=\"process-step\">\n <div class=\"step-num\">3<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Proposition chiffr\u00e9e<\/div>\n <div class=\"step-desc\">Devis d\u00e9taill\u00e9 envoy\u00e9 sous 24h avec d\u00e9lais d'approvisionnement r\u00e9els.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sidebar-card urgent\">\n <div class=\"sidebar-card-title\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.37A16 16 0 0 0 16 16.46l1.06-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n Besoin d'aide imm\u00e9diate ?\n <\/div>\n <p style=\"font-size:13px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.6\">\n Nos ing\u00e9nieurs technico-commerciaux sont disponibles pour vous assister.\n <\/p>\n <div class=\"contact-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.37A16 16 0 0 0 16 16.46l1.06-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n +216 29 406 790\n <\/div> \n \n <div class=\"contact-item\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n sales@3ia-distribution.com\n <\/div>\n <\/div>\n\n \n \n\n <\/div>\n<\/div>\n\n\n<footer>\n <div class=\"footer-top\">\n <div>\n <div class=\"footer-logo-name\">3IA Distribution<\/div>\n <p class=\"footer-tagline\">Sp\u00e9cialiste en automatisation industrielle. Votre partenaire de confiance.<\/p>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#\">Mentions L\u00e9gales<\/a>\n <a href=\"#\">Politique de Confidentialit\u00e9<\/a>\n <a href=\"#\">Conditions de Vente<\/a>\n <a href=\"#\">Support Technique<\/a>\n <\/div>\n <\/div>\n <p class=\"footer-copy\">\u00a9 2024 3IA Distribution. Tous droits r\u00e9serv\u00e9s.<\/p>\n<\/footer>\n\n\n<style>\n @keyframes spin { to { transform: rotate(360deg); } }\n<\/style>\n\n<script>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONFIGURATION \u2014 replace with your real Brevo values\n 1. Get your API key from: app.brevo.com \u2192 Settings \u2192 API Keys\n 2. Replace BUSINESS_EMAIL with the real 3IA Distribution address\n 3. Replace LIST_ID with the ID of your \"Devis\" list in Brevo\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n const BREVO_API_KEY = 'YOUR_BREVO_API_KEY'; \/\/ \u2190 paste here\n const BUSINESS_EMAIL = 'contact@3ia-distribution.com'; \/\/ \u2190 business email\n const BREVO_DEVIS_LIST = 3; \/\/ \u2190 your Brevo list ID (number)\n\n \/* \u2500\u2500\u2500 Dynamic spec rows \u2500\u2500\u2500 *\/\n let rowCount = 1;\n\n document.getElementById('btn-add-line').addEventListener('click', () => {\n rowCount++;\n const row = document.createElement('div');\n row.className = 'spec-row';\n row.innerHTML = `\n <input type=\"text\" name=\"sku[]\" placeholder=\"Ex: SIM-S7-1200\" required>\n <input type=\"number\" name=\"qty[]\" placeholder=\"1\" min=\"1\" value=\"1\" required>\n <select name=\"delai[]\">\n <option value=\"standard\">Standard (3\u20135j)<\/option>\n <option value=\"urgent\">Urgent (24\u201348h)<\/option>\n <option value=\"flexible\">Pas de contrainte<\/option>\n <\/select>\n <button type=\"button\" class=\"btn-remove\" onclick=\"this.closest('.spec-row').remove()\">\u00d7<\/button>\n `;\n document.getElementById('spec-rows').appendChild(row);\n });\n\n \/* \u2500\u2500\u2500 Form submission \u2500\u2500\u2500 *\/\n document.getElementById('devis-form').addEventListener('submit', async (e) => {\n e.preventDefault();\n\n const form = e.target;\n const btnSubmit = document.getElementById('btn-submit');\n const btnText = document.getElementById('btn-text');\n const btnArrow = document.getElementById('btn-arrow');\n const btnSpinner= document.getElementById('btn-spinner');\n\n \/\/ Collect spec rows\n const skus = [...form.querySelectorAll('input[name=\"sku[]\"]')].map(i => i.value).filter(Boolean);\n const qtys = [...form.querySelectorAll('input[name=\"qty[]\"]')].map(i => i.value);\n const delais = [...form.querySelectorAll('select[name=\"delai[]\"]')].map(s => s.options[s.selectedIndex].text);\n\n const specsFormatted = skus.map((sku, i) =>\n `\u2022 ${sku} \u2014 Qt\u00e9: ${qtys[i]} \u2014 ${delais[i]}`\n ).join('\\n');\n\n const payload = {\n nom: form.nom.value.trim(),\n entreprise: form.entreprise.value.trim(),\n email: form.email.value.trim(),\n telephone: form.telephone.value.trim(),\n specs: specsFormatted,\n notes: form.notes.value.trim(),\n };\n\n \/\/ Basic validation\n if (!payload.nom || !payload.entreprise || !payload.email || skus.length === 0) {\n showBanner('error'); return;\n }\n\n \/\/ Loading state\n btnSubmit.disabled = true;\n btnText.textContent = 'Envoi en cours...';\n btnArrow.style.display = 'none';\n btnSpinner.style.display = 'block';\n\n try {\n \/* 1\ufe0f\u20e3 Add\/update contact in Brevo CRM *\/\n await fetch('https:\/\/api.brevo.com\/v3\/contacts', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'api-key': BREVO_API_KEY,\n },\n body: JSON.stringify({\n email: payload.email,\n updateEnabled: true,\n listIds: [BREVO_DEVIS_LIST],\n attributes: {\n FIRSTNAME: payload.nom.split(' ')[0],\n LASTNAME: payload.nom.split(' ').slice(1).join(' '),\n COMPANY: payload.entreprise,\n SMS: payload.telephone,\n DEVIS_SPECS: payload.specs,\n DEVIS_NOTES: payload.notes,\n DEVIS_DATE: new Date().toLocaleDateString('fr-FR'),\n },\n }),\n });\n\n \/* 2\ufe0f\u20e3 Send confirmation email to the client *\/\n await fetch('https:\/\/api.brevo.com\/v3\/smtp\/email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'api-key': BREVO_API_KEY,\n },\n body: JSON.stringify({\n sender: { name: '3IA Distribution', email: BUSINESS_EMAIL },\n to: [{ email: payload.email, name: payload.nom }],\n subject: 'Confirmation de votre demande de devis \u2014 3IA Distribution',\n htmlContent: `\n <div style=\"font-family:Inter,sans-serif;max-width:560px;margin:auto;color:#111827\">\n <div style=\"background:#1E3A8A;padding:28px 32px;border-radius:12px 12px 0 0\">\n <h1 style=\"color:white;font-size:20px;margin:0\">3IA Distribution<\/h1>\n <\/div>\n <div style=\"background:#F9FAFB;padding:32px;border:1px solid #E5E7EB;border-top:none;border-radius:0 0 12px 12px\">\n <p style=\"font-size:16px;font-weight:700;margin-bottom:8px\">Bonjour ${payload.nom},<\/p>\n <p style=\"color:#6B7280;margin-bottom:24px;line-height:1.6\">\n Nous avons bien re\u00e7u votre demande de devis. Notre \u00e9quipe technique\n va l'analyser et vous r\u00e9pondra sous <strong>24h ouvr\u00e9es<\/strong>.\n <\/p>\n <div style=\"background:white;border:1px solid #E5E7EB;border-radius:10px;padding:20px;margin-bottom:24px\">\n <p style=\"font-size:13px;font-weight:700;color:#6B7280;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:12px\">R\u00e9capitulatif de votre demande<\/p>\n <p style=\"font-size:14px;margin-bottom:8px\"><strong>Entreprise:<\/strong> ${payload.entreprise}<\/p>\n <p style=\"font-size:14px;margin-bottom:8px\"><strong>Pi\u00e8ces demand\u00e9es:<\/strong><\/p>\n <pre style=\"font-size:13px;color:#374151;white-space:pre-wrap;margin:0\">${payload.specs}<\/pre>\n ${payload.notes ? `<p style=\"font-size:14px;margin-top:12px\"><strong>Notes:<\/strong> ${payload.notes}<\/p>` : ''}\n <\/div>\n <p style=\"font-size:13px;color:#6B7280;line-height:1.6\">\n Pour toute question urgente, contactez-nous directement :<br>\n \ud83d\udce7 ${BUSINESS_EMAIL}<br>\ud83d\udcde +33 (0)1 00 00 00 00\n <\/p>\n <\/div>\n <\/div>\n `,\n }),\n });\n\n \/* 3\ufe0f\u20e3 Send notification email to the business *\/\n await fetch('https:\/\/api.brevo.com\/v3\/smtp\/email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json',\n 'api-key': BREVO_API_KEY,\n },\n body: JSON.stringify({\n sender: { name: '3IA Distribution Site', email: BUSINESS_EMAIL },\n to: [{ email: BUSINESS_EMAIL, name: '3IA Distribution' }],\n subject: `\ud83d\udd14 Nouvelle demande de devis \u2014 ${payload.nom} (${payload.entreprise})`,\n htmlContent: `\n <div style=\"font-family:Inter,sans-serif;max-width:560px;margin:auto;color:#111827\">\n <div style=\"background:#1E3A8A;padding:24px 32px;border-radius:12px 12px 0 0\">\n <h2 style=\"color:white;font-size:16px;margin:0\">Nouvelle demande de devis re\u00e7ue<\/h2>\n <\/div>\n <div style=\"background:#F9FAFB;padding:28px 32px;border:1px solid #E5E7EB;border-top:none;border-radius:0 0 12px 12px\">\n <table style=\"width:100%;border-collapse:collapse;font-size:14px\">\n <tr><td style=\"padding:8px 0;color:#6B7280;width:140px\">Nom<\/td><td style=\"font-weight:600\">${payload.nom}<\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280\">Entreprise<\/td><td style=\"font-weight:600\">${payload.entreprise}<\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280\">Email<\/td><td><a href=\"mailto:${payload.email}\" style=\"color:#2563EB\">${payload.email}<\/a><\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280\">T\u00e9l\u00e9phone<\/td><td>${payload.telephone || '\u2014'}<\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280;vertical-align:top\">Pi\u00e8ces<\/td><td><pre style=\"margin:0;white-space:pre-wrap;font-size:13px\">${payload.specs}<\/pre><\/td><\/tr>\n <tr><td style=\"padding:8px 0;color:#6B7280;vertical-align:top\">Notes<\/td><td style=\"font-size:13px\">${payload.notes || '\u2014'}<\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n `,\n }),\n });\n\n showBanner('success');\n form.reset();\n \/\/ Reset spec rows to just one\n const rows = document.getElementById('spec-rows');\n rows.innerHTML = `\n <div class=\"spec-row\">\n <input type=\"text\" name=\"sku[]\" placeholder=\"Ex: SIM-S7-1200\" required>\n <input type=\"number\" name=\"qty[]\" placeholder=\"1\" min=\"1\" value=\"1\" required>\n <select name=\"delai[]\">\n <option value=\"standard\">Standard (3\u20135j)<\/option>\n <option value=\"urgent\">Urgent (24\u201348h)<\/option>\n <option value=\"flexible\">Pas de contrainte<\/option>\n <\/select>\n <div style=\"width:36px\"><\/div>\n <\/div>`;\n\n } catch (err) {\n console.error(err);\n showBanner('error');\n } finally {\n btnSubmit.disabled = false;\n btnText.textContent = 'Soumettre la demande';\n btnArrow.style.display = 'inline';\n btnSpinner.style.display = 'none';\n }\n });\n\n function showBanner(type) {\n const s = document.getElementById('banner-success');\n const e = document.getElementById('banner-error');\n s.style.display = type === 'success' ? 'flex' : 'none';\n e.style.display = type === 'error' ? 'flex' : 'none';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n<\/script>\n\n<\/body>\n<\/html>\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>Demander un Devis \u2014 3IA Distribution Nos Partenaires Contact Demander un devis Accueil Nos Fournisseurs Contact Demander un devis imm\u00e9diat Nous contacter directement +216 21629406790 sales@3ia-distribution.com Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>demander un devis - WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"demander un devis - WordPress\" \/>\n<meta property=\"og:description\" content=\"Demander un Devis \u2014 3IA Distribution Nos Partenaires Contact Demander un devis Accueil Nos Fournisseurs Contact Demander un devis imm\u00e9diat Nous contacter directement +216 21629406790 sales@3ia-distribution.com Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/3iadistribution\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-07T12:43:26+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/\",\"url\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/\",\"name\":\"demander un devis - WordPress\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"datePublished\":\"2026-06-18T10:22:35+00:00\",\"dateModified\":\"2026-08-07T12:43:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#primaryimage\",\"url\":\"http:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"contentUrl\":\"http:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/3ia-distribution.com\\\/index.php\\\/demander-un-devis\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/3ia-distribution.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"demander un devis\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#website\",\"url\":\"http:\\\/\\\/3ia-distribution.com\\\/\",\"name\":\"3ia-distribution.com\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/3ia-distribution.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#organization\",\"name\":\"3ia-distribution\",\"url\":\"http:\\\/\\\/3ia-distribution.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"contentUrl\":\"https:\\\/\\\/3ia-distribution.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/3ia-dist.png\",\"width\":148,\"height\":16,\"caption\":\"3ia-distribution\"},\"image\":{\"@id\":\"http:\\\/\\\/3ia-distribution.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/3iadistribution\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/3ia-distribution\\\/posts\\\/?feedView=all\"]}]}<\/script>\n","yoast_head_json":{"title":"demander un devis - WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","og_locale":"en_US","og_type":"article","og_title":"demander un devis - WordPress","og_description":"Demander un Devis \u2014 3IA Distribution Nos Partenaires Contact Demander un devis Accueil Nos Fournisseurs Contact Demander un devis imm\u00e9diat Nous contacter directement +216 21629406790 sales@3ia-distribution.com Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra le plus t\u00f4t possible. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide […]","og_url":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","og_site_name":"WordPress","article_publisher":"https:\/\/www.facebook.com\/3iadistribution\/","article_modified_time":"2026-08-07T12:43:26+00:00","og_image":[{"url":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","url":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","name":"demander un devis - WordPress","isPartOf":{"@id":"http:\/\/3ia-distribution.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#primaryimage"},"image":{"@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#primaryimage"},"thumbnailUrl":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","datePublished":"2026-06-18T10:22:35+00:00","dateModified":"2026-08-07T12:43:26+00:00","breadcrumb":{"@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#primaryimage","url":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","contentUrl":"http:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png"},{"@type":"BreadcrumbList","@id":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/3ia-distribution.com\/"},{"@type":"ListItem","position":2,"name":"demander un devis"}]},{"@type":"WebSite","@id":"http:\/\/3ia-distribution.com\/#website","url":"http:\/\/3ia-distribution.com\/","name":"3ia-distribution.com","description":"","publisher":{"@id":"http:\/\/3ia-distribution.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/3ia-distribution.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/3ia-distribution.com\/#organization","name":"3ia-distribution","url":"http:\/\/3ia-distribution.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/3ia-distribution.com\/#\/schema\/logo\/image\/","url":"https:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","contentUrl":"https:\/\/3ia-distribution.com\/wp-content\/uploads\/2026\/06\/3ia-dist.png","width":148,"height":16,"caption":"3ia-distribution"},"image":{"@id":"http:\/\/3ia-distribution.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/3iadistribution\/","https:\/\/www.linkedin.com\/company\/3ia-distribution\/posts\/?feedView=all"]}]}},"_links":{"self":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":18,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":385,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions\/385"}],"wp:attachment":[{"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}