{"id":23,"date":"2026-06-18T10:22:35","date_gmt":"2026-06-18T10:22:35","guid":{"rendered":"https:\/\/3ia-distribution.com\/?page_id=23"},"modified":"2026-06-23T07:16:47","modified_gmt":"2026-06-23T07:16:47","slug":"demander-un-devis","status":"publish","type":"page","link":"https:\/\/3ia-distribution.com\/index.php\/demander-un-devis\/","title":{"rendered":"demander un devis"},"content":{"rendered":"\t\t
\n\t\t\t\t
\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 NAV (shared) \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 var(--gray-200);\n padding: 0 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\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 }\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 .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }\n .nav-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-links li a:hover { color: var(--blue-600); }\n .nav-btn {\n background: var(--blue-600) !important; color: white !important;\n padding: 9px 20px; border-radius: 7px;\n font-weight: 600 !important; font-size: 14px !important;\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<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAV \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<nav>\n <a href=\"\/\" class=\"nav-logo\">\n <div class=\"nav-logo-placeholder\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\n <path d=\"M2 17l10 5 10-5\"\/>\n <path d=\"M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n 3IA Distribution\n <\/a>\n <ul class=\"nav-links\">\n <li><a href=\"\/nos-fournisseurs\">Nos Fournisseurs<\/a><\/li>\n <li><a href=\"\/contact\">Contact<\/a><\/li>\n <li><a href=\"\/demander-un-devis\" class=\"nav-btn\">Demander un devis<\/a><\/li>\n <\/ul>\n<\/nav>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PAGE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"page-wrapper\" style=\"margin-top: 124px;\">\n\n <!-- \u2500\u2500 LEFT: FORM \u2500\u2500 -->\n <div class=\"form-card\">\n\n <!-- Success \/ Error banner (shown via JS) -->\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 sous 24h ouvr\u00e9es. Un email de confirmation vous a \u00e9t\u00e9 envoy\u00e9.\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 sous 24h ouvr\u00e9es.\n <\/p>\n\n <form id=\"devis-form\" novalidate>\n\n <!-- CONTACT INFO -->\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\" placeholder=\"Ex: Jean Dupont\" 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\" placeholder=\"Ex: Usines Martin SA\" 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\" placeholder=\"jean.dupont@entreprise.com\" 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\" placeholder=\"+33 1 23 45 67 89\">\n <\/div>\n <\/div>\n\n <!-- SPECIFICATIONS TECHNIQUES -->\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 <span>D\u00e9lai Souhait\u00e9<\/span>\n <\/div>\n\n <div class=\"spec-rows\" id=\"spec-rows\">\n <!-- Row 1 (non-removable) -->\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><!-- spacer to align with rows that have remove btn -->\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 <!-- NOTES -->\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 <!-- FOOTER -->\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 <!-- Spinner (hidden by default) -->\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 <!-- \u2500\u2500 RIGHT: SIDEBAR \u2500\u2500 -->\n <div class=\"sidebar\">\n\n <!-- Process steps -->\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 <!-- Urgent contact -->\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 +33 (0)1 00 00 00 00\n <\/div> \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 +33 (0)1 00 00 00 00\n <\/div>\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 support@3ia-distribution.com\n <\/div>\n <\/div>\n\n <!-- Trust badges -->\n <!--- <div class=\"sidebar-card\">\n <div class=\"badge-row\">\n <div class=\"badge-item\">\ud83c\udfc5 ISO 9001<\/div>\n <div class=\"badge-item\">\u2b50 Partner Pro<\/div>\n <\/div>\n <\/div> -->\n\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\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<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCRIPTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\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 3IA Distribution Nos Fournisseurs Contact Demander un devis Demande envoy\u00e9e avec succ\u00e8s ! Notre \u00e9quipe technique vous r\u00e9pondra sous 24h ouvr\u00e9es. Un email de confirmation vous a \u00e9t\u00e9 envoy\u00e9. Erreur lors de l’envoi. Veuillez r\u00e9essayer ou contactez-nous directement par email. Demande de Devis Rapide Pr\u00e9cisez vos besoins en pi\u00e8ces […]<\/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"],"_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":4,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/3ia-distribution.com\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions\/73"}],"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}]}}