Suivi de commande \u2014 IDP Drive<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --idp-primary: #2a8a60;\r\n --idp-primary-dark: #1a5c42;\r\n --idp-bright: #4ade80;\r\n --idp-tint: #e8f5ee;\r\n --idp-bg-soft: #f7fcf9;\r\n --idp-text: #0f1f18;\r\n --idp-muted: #4a5b53;\r\n --idp-muted-2: #6b7f77;\r\n --idp-border: #e0ece7;\r\n --idp-error: #d33f3f;\r\n --idp-error-tint: #fbeaea;\r\n --idp-font-head: \"Sora\", -apple-system, sans-serif;\r\n --idp-font-body: \"DM Sans\", -apple-system, sans-serif;\r\n }\r\n body {\r\n margin: 0;\r\n padding: 40px 0 60px;\r\n background: #eef2ef;\r\n font-family: var(--idp-font-body);\r\n color: var(--idp-text);\r\n }\r\n .idp-wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }\r\n .idp-hero { text-align: center; margin-bottom: 24px; }\r\n .idp-hero .tag {\r\n display: inline-flex; align-items: center; gap: 7px;\r\n background: var(--idp-tint); color: var(--idp-primary);\r\n padding: 6px 14px; border-radius: 99px;\r\n font-family: var(--idp-font-head); font-weight: 700;\r\n font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;\r\n margin-bottom: 16px;\r\n }\r\n .idp-hero .tag::before { content: \"\"; width: 6px; height: 6px; background: var(--idp-bright); border-radius: 50%; }\r\n .idp-hero h1 {\r\n font-family: var(--idp-font-head); font-weight: 800;\r\n font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.15;\r\n margin: 0 0 8px; letter-spacing: -0.01em;\r\n }\r\n .idp-hero p { color: var(--idp-muted); margin: 0; font-size: 0.98rem; }\r\n .idp-card {\r\n background: #fff; border: 1px solid var(--idp-border); border-radius: 14px;\r\n padding: 28px; box-shadow: 0 4px 16px rgba(15, 31, 24, 0.05);\r\n }\r\n .idp-form { display: grid; gap: 14px; }\r\n .idp-field label {\r\n display: block; font-family: var(--idp-font-head);\r\n font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; color: var(--idp-text);\r\n }\r\n .idp-field input {\r\n width: 100%; box-sizing: border-box; padding: 12px 14px;\r\n border: 1.5px solid var(--idp-border); border-radius: 10px;\r\n font-size: 0.95rem; font-family: var(--idp-font-body);\r\n background: var(--idp-bg-soft); color: var(--idp-text);\r\n }\r\n .idp-field input:focus {\r\n outline: none; border-color: var(--idp-primary); background: #fff;\r\n box-shadow: 0 0 0 3px var(--idp-tint);\r\n }\r\n .idp-submit {\r\n background: linear-gradient(135deg, var(--idp-primary) 0%, var(--idp-primary-dark) 100%);\r\n color: #fff; border: none; border-radius: 999px;\r\n padding: 14px 20px; font-size: 0.95rem; font-weight: 700;\r\n font-family: var(--idp-font-head); cursor: pointer;\r\n box-shadow: 0 6px 16px rgba(42, 138, 96, 0.28);\r\n transition: transform 0.15s ease, box-shadow 0.15s ease;\r\n }\r\n .idp-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(42, 138, 96, 0.35); }\r\n .idp-submit:active { transform: translateY(0); }\r\n .idp-msg {\r\n margin-top: 16px; padding: 12px 14px; border-radius: 10px;\r\n font-size: 0.9rem; display: none;\r\n background: var(--idp-error-tint); color: var(--idp-error); border: 1px solid #f4c7c1;\r\n }\r\n .idp-result { margin-top: 26px; display: none; }\r\n .idp-result-head {\r\n display: flex; justify-content: space-between; align-items: baseline;\r\n flex-wrap: wrap; gap: 8px; margin-bottom: 20px;\r\n }\r\n .idp-order-id { font-family: var(--idp-font-head); font-weight: 700; font-size: 1.05rem; }\r\n .idp-order-date { color: var(--idp-muted-2); font-size: 0.85rem; }\r\n .idp-status-pill {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n padding: 5px 13px; border-radius: 999px;\r\n font-family: var(--idp-font-head); font-size: 0.78rem; font-weight: 700;\r\n background: var(--idp-tint); color: var(--idp-primary);\r\n }\r\n .idp-status-pill::before { content: \"\"; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }\r\n .idp-status-pill.is-cancelled { background: var(--idp-error-tint); color: var(--idp-error); }\r\n .idp-steps { display: flex; justify-content: space-between; position: relative; margin: 32px 0 8px; }\r\n .idp-steps::before {\r\n content: \"\"; position: absolute; top: 15px; left: 22px; right: 22px;\r\n height: 3px; background: var(--idp-border);\r\n }\r\n .idp-steps-fill {\r\n position: absolute; top: 15px; left: 22px; height: 3px;\r\n background: var(--idp-primary); transition: width 0.3s ease;\r\n }\r\n .idp-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }\r\n .idp-dot {\r\n width: 32px; height: 32px; border-radius: 50%; background: #fff;\r\n border: 3px solid var(--idp-border);\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: var(--idp-font-head); font-size: 0.8rem; font-weight: 700; color: var(--idp-muted-2);\r\n }\r\n .idp-step.is-done .idp-dot { border-color: var(--idp-primary); background: var(--idp-primary); color: #fff; }\r\n .idp-step.is-current .idp-dot { border-color: var(--idp-primary); color: var(--idp-primary); box-shadow: 0 0 0 4px var(--idp-tint); }\r\n .idp-step-label { font-size: 0.78rem; text-align: center; color: var(--idp-muted-2); max-width: 90px; }\r\n .idp-step.is-done .idp-step-label, .idp-step.is-current .idp-step-label { color: var(--idp-text); font-weight: 700; }\r\n .idp-tracking {\r\n margin-top: 22px; padding: 14px 16px;\r\n background: var(--idp-bg-soft); border: 1px solid var(--idp-border);\r\n border-radius: 10px; font-size: 0.9rem;\r\n display: flex; align-items: center; gap: 10px;\r\n }\r\n .idp-tracking a { color: var(--idp-primary); font-weight: 700; text-decoration: none; }\r\n .idp-items {\r\n margin-top: 18px; border-top: 1px solid var(--idp-border);\r\n padding-top: 14px; font-size: 0.88rem; color: var(--idp-muted-2);\r\n }\r\n .idp-trust-row {\r\n display: flex; justify-content: center; gap: 22px; margin-top: 22px;\r\n font-family: var(--idp-font-head); font-size: 0.75rem; font-weight: 700;\r\n color: var(--idp-muted-2); letter-spacing: 0.02em; flex-wrap: wrap;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"idp-wrap\">\r\n <div class=\"idp-hero\">\r\n <span class=\"tag\">Suivi de commande<\/span>\r\n <h1>Suivre ma commande<\/h1>\r\n <p>Saisissez votre num\u00e9ro de commande et l'adresse e-mail utilis\u00e9e lors du paiement.<\/p>\r\n <\/div>\r\n <div class=\"idp-card\">\r\n <form class=\"idp-form\" id=\"idp-demo-form\" action=\"\">\r\n <div class=\"idp-field\">\r\n <label for=\"idp-demo-order\">Num\u00e9ro de commande<\/label>\r\n <input type=\"text\" id=\"idp-demo-order\" placeholder=\"par exemple 10432\" required>\r\n <\/div>\r\n <div class=\"idp-field\">\r\n <label for=\"idp-demo-email\">Adresse e-mail<\/label>\r\n <input type=\"email\" id=\"idp-demo-email\" placeholder=\"you@example.com\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"idp-submit\">Suivi de commande<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\r\n <div class=\"idp-msg\" id=\"idp-demo-msg\"><\/div>\r\n <div class=\"idp-result\" id=\"idp-demo-result\">\r\n <div class=\"idp-result-head\">\r\n <div>\r\n <div class=\"idp-order-id\" id=\"idp-demo-result-id\"><\/div>\r\n <div class=\"idp-order-date\" id=\"idp-demo-result-date\"><\/div>\r\n <\/div>\r\n <span class=\"idp-status-pill\" id=\"idp-demo-result-pill\"><\/span>\r\n <\/div>\r\n <div class=\"idp-steps\" id=\"idp-demo-steps\">\r\n <div class=\"idp-steps-fill\" id=\"idp-demo-steps-fill\"><\/div>\r\n <div class=\"idp-step\" data-step=\"0\"><div class=\"idp-dot\">1<\/div><div class=\"idp-step-label\">Commande re\u00e7ue<\/div><\/div>\r\n <div class=\"idp-step\" data-step=\"1\"><div class=\"idp-dot\">2<\/div><div class=\"idp-step-label\">Traitement<\/div><\/div>\r\n <div class=\"idp-step\" data-step=\"2\"><div class=\"idp-dot\">3<\/div><div class=\"idp-step-label\">Exp\u00e9di\u00e9<\/div><\/div>\r\n <div class=\"idp-step\" data-step=\"3\"><div class=\"idp-dot\">4<\/div><div class=\"idp-step-label\">Livr\u00e9<\/div><\/div>\r\n <\/div>\r\n <div class=\"idp-tracking\" id=\"idp-demo-tracking\" style=\"display:none;\"><\/div>\r\n <div class=\"idp-items\" id=\"idp-demo-items\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"idp-trust-row\">\r\n <span>\ud83d\udd12 SSL 256 bits<\/span>\r\n <span>\u2605 4,8 sur Trustpilot<\/span>\r\n <span>\u21a9 Garantie \u00ab satisfait ou rembours\u00e9 \u00bb<\/span>\r\n <\/div>\r\n<\/div>\r\n<script>\r\n(function () {\r\n var form = document.getElementById('idp-demo-form');\r\n var msgBox = document.getElementById('idp-demo-msg');\r\n var result = document.getElementById('idp-demo-result');\r\n\r\n \/\/ Real lookup: calls your WordPress site (admin-ajax.php) which checks the\r\n \/\/ actual WooCommerce order matching the order number + email.\r\n \/\/ Requires the \"idp-order-tracking-backend.php\" snippet to be active in WPCode.\r\n var AJAX_URL = 'https:\/\/idpdrive.org\/wp-admin\/admin-ajax.php';\r\n\r\n function lookupOrder(orderId, email) {\r\n var body = new URLSearchParams();\r\n body.append('action', 'idp_track_order');\r\n body.append('order_number', orderId);\r\n body.append('email', email);\r\n\r\n return fetch(AJAX_URL, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n body: body.toString()\r\n }).then(function (r) { return r.json(); });\r\n }\r\n\r\n function fillSteps(stepIndex, cancelled) {\r\n var stepsWrap = document.getElementById('idp-demo-steps');\r\n var fill = document.getElementById('idp-demo-steps-fill');\r\n var steps = stepsWrap.querySelectorAll('.idp-step');\r\n steps.forEach(function (el) {\r\n var i = parseInt(el.getAttribute('data-step'), 10);\r\n el.classList.remove('is-done', 'is-current');\r\n if (cancelled) return;\r\n if (i < stepIndex) el.classList.add('is-done');\r\n if (i === stepIndex) el.classList.add('is-current');\r\n });\r\n if (cancelled) {\r\n fill.style.width = '0%';\r\n stepsWrap.style.opacity = '0.4';\r\n } else {\r\n stepsWrap.style.opacity = '1';\r\n var pct = (stepIndex \/ (steps.length - 1)) * 100;\r\n fill.style.width = pct + '%';\r\n }\r\n }\r\n\r\n form.addEventListener('submit', function (e) {\r\n e.preventDefault();\r\n msgBox.style.display = 'none';\r\n result.style.display = 'none';\r\n\r\n var orderId = document.getElementById('idp-demo-order').value.trim();\r\n var email = document.getElementById('idp-demo-email').value.trim();\r\n\r\n if (!orderId || !email) {\r\n msgBox.textContent = 'Please enter your order number and email address.';\r\n msgBox.style.display = 'block';\r\n return;\r\n }\r\n\r\n var submitBtn = form.querySelector('.idp-submit');\r\n submitBtn.disabled = true;\r\n submitBtn.textContent = 'Checking\u2026';\r\n\r\n lookupOrder(orderId, email).then(function (d) {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = 'Track Order';\r\n\r\n if (!d || !d.found) {\r\n msgBox.textContent = \"We couldn't find an order matching that order number and email. Please double-check and try again.\";\r\n msgBox.style.display = 'block';\r\n return;\r\n }\r\n\r\n document.getElementById('idp-demo-result-id').textContent = 'Order #' + d.order_id;\r\n document.getElementById('idp-demo-result-date').textContent = d.order_date;\r\n var pill = document.getElementById('idp-demo-result-pill');\r\n pill.textContent = d.status_label;\r\n pill.className = 'idp-status-pill' + (d.cancelled ? ' is-cancelled' : '');\r\n fillSteps(d.step_index, d.cancelled);\r\n\r\n var trackingBox = document.getElementById('idp-demo-tracking');\r\n if (d.tracking_number) {\r\n trackingBox.style.display = 'flex';\r\n trackingBox.innerHTML = '\ud83d\udce6 Tracking number: <a href=\"#\">' + d.tracking_number + '<\/a>';\r\n } else {\r\n trackingBox.style.display = 'none';\r\n }\r\n\r\n document.getElementById('idp-demo-items').textContent = d.items_summary || '';\r\n result.style.display = 'block';\r\n }).catch(function () {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = 'Track Order';\r\n msgBox.textContent = 'Something went wrong. Please try again in a moment.';\r\n msgBox.style.display = 'block';\r\n });\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Track Order \u2014 IDP Drive Order Tracking Track My Order Enter your order number and the email used at checkout. Order Number Email Address Track Order 1Order Received 2Processing 3Shipped 4Delivered \ud83d\udd12 SSL 256-bit \u2605 4.8 Trustpilot \u21a9 Money-back guarantee<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":16,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages\/571\/revisions"}],"predecessor-version":[{"id":666,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages\/571\/revisions\/666"}],"wp:attachment":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/media?parent=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nSuivi de commande \u2014 IDP Drive<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --idp-primary: #2a8a60;\r\n --idp-primary-dark: #1a5c42;\r\n --idp-bright: #4ade80;\r\n --idp-tint: #e8f5ee;\r\n --idp-bg-soft: #f7fcf9;\r\n --idp-text: #0f1f18;\r\n --idp-muted: #4a5b53;\r\n --idp-muted-2: #6b7f77;\r\n --idp-border: #e0ece7;\r\n --idp-error: #d33f3f;\r\n --idp-error-tint: #fbeaea;\r\n --idp-font-head: \"Sora\", -apple-system, sans-serif;\r\n --idp-font-body: \"DM Sans\", -apple-system, sans-serif;\r\n }\r\n body {\r\n margin: 0;\r\n padding: 40px 0 60px;\r\n background: #eef2ef;\r\n font-family: var(--idp-font-body);\r\n color: var(--idp-text);\r\n }\r\n .idp-wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }\r\n .idp-hero { text-align: center; margin-bottom: 24px; }\r\n .idp-hero .tag {\r\n display: inline-flex; align-items: center; gap: 7px;\r\n background: var(--idp-tint); color: var(--idp-primary);\r\n padding: 6px 14px; border-radius: 99px;\r\n font-family: var(--idp-font-head); font-weight: 700;\r\n font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;\r\n margin-bottom: 16px;\r\n }\r\n .idp-hero .tag::before { content: \"\"; width: 6px; height: 6px; background: var(--idp-bright); border-radius: 50%; }\r\n .idp-hero h1 {\r\n font-family: var(--idp-font-head); font-weight: 800;\r\n font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.15;\r\n margin: 0 0 8px; letter-spacing: -0.01em;\r\n }\r\n .idp-hero p { color: var(--idp-muted); margin: 0; font-size: 0.98rem; }\r\n .idp-card {\r\n background: #fff; border: 1px solid var(--idp-border); border-radius: 14px;\r\n padding: 28px; box-shadow: 0 4px 16px rgba(15, 31, 24, 0.05);\r\n }\r\n .idp-form { display: grid; gap: 14px; }\r\n .idp-field label {\r\n display: block; font-family: var(--idp-font-head);\r\n font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; color: var(--idp-text);\r\n }\r\n .idp-field input {\r\n width: 100%; box-sizing: border-box; padding: 12px 14px;\r\n border: 1.5px solid var(--idp-border); border-radius: 10px;\r\n font-size: 0.95rem; font-family: var(--idp-font-body);\r\n background: var(--idp-bg-soft); color: var(--idp-text);\r\n }\r\n .idp-field input:focus {\r\n outline: none; border-color: var(--idp-primary); background: #fff;\r\n box-shadow: 0 0 0 3px var(--idp-tint);\r\n }\r\n .idp-submit {\r\n background: linear-gradient(135deg, var(--idp-primary) 0%, var(--idp-primary-dark) 100%);\r\n color: #fff; border: none; border-radius: 999px;\r\n padding: 14px 20px; font-size: 0.95rem; font-weight: 700;\r\n font-family: var(--idp-font-head); cursor: pointer;\r\n box-shadow: 0 6px 16px rgba(42, 138, 96, 0.28);\r\n transition: transform 0.15s ease, box-shadow 0.15s ease;\r\n }\r\n .idp-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(42, 138, 96, 0.35); }\r\n .idp-submit:active { transform: translateY(0); }\r\n .idp-msg {\r\n margin-top: 16px; padding: 12px 14px; border-radius: 10px;\r\n font-size: 0.9rem; display: none;\r\n background: var(--idp-error-tint); color: var(--idp-error); border: 1px solid #f4c7c1;\r\n }\r\n .idp-result { margin-top: 26px; display: none; }\r\n .idp-result-head {\r\n display: flex; justify-content: space-between; align-items: baseline;\r\n flex-wrap: wrap; gap: 8px; margin-bottom: 20px;\r\n }\r\n .idp-order-id { font-family: var(--idp-font-head); font-weight: 700; font-size: 1.05rem; }\r\n .idp-order-date { color: var(--idp-muted-2); font-size: 0.85rem; }\r\n .idp-status-pill {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n padding: 5px 13px; border-radius: 999px;\r\n font-family: var(--idp-font-head); font-size: 0.78rem; font-weight: 700;\r\n background: var(--idp-tint); color: var(--idp-primary);\r\n }\r\n .idp-status-pill::before { content: \"\"; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }\r\n .idp-status-pill.is-cancelled { background: var(--idp-error-tint); color: var(--idp-error); }\r\n .idp-steps { display: flex; justify-content: space-between; position: relative; margin: 32px 0 8px; }\r\n .idp-steps::before {\r\n content: \"\"; position: absolute; top: 15px; left: 22px; right: 22px;\r\n height: 3px; background: var(--idp-border);\r\n }\r\n .idp-steps-fill {\r\n position: absolute; top: 15px; left: 22px; height: 3px;\r\n background: var(--idp-primary); transition: width 0.3s ease;\r\n }\r\n .idp-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }\r\n .idp-dot {\r\n width: 32px; height: 32px; border-radius: 50%; background: #fff;\r\n border: 3px solid var(--idp-border);\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: var(--idp-font-head); font-size: 0.8rem; font-weight: 700; color: var(--idp-muted-2);\r\n }\r\n .idp-step.is-done .idp-dot { border-color: var(--idp-primary); background: var(--idp-primary); color: #fff; }\r\n .idp-step.is-current .idp-dot { border-color: var(--idp-primary); color: var(--idp-primary); box-shadow: 0 0 0 4px var(--idp-tint); }\r\n .idp-step-label { font-size: 0.78rem; text-align: center; color: var(--idp-muted-2); max-width: 90px; }\r\n .idp-step.is-done .idp-step-label, .idp-step.is-current .idp-step-label { color: var(--idp-text); font-weight: 700; }\r\n .idp-tracking {\r\n margin-top: 22px; padding: 14px 16px;\r\n background: var(--idp-bg-soft); border: 1px solid var(--idp-border);\r\n border-radius: 10px; font-size: 0.9rem;\r\n display: flex; align-items: center; gap: 10px;\r\n }\r\n .idp-tracking a { color: var(--idp-primary); font-weight: 700; text-decoration: none; }\r\n .idp-items {\r\n margin-top: 18px; border-top: 1px solid var(--idp-border);\r\n padding-top: 14px; font-size: 0.88rem; color: var(--idp-muted-2);\r\n }\r\n .idp-trust-row {\r\n display: flex; justify-content: center; gap: 22px; margin-top: 22px;\r\n font-family: var(--idp-font-head); font-size: 0.75rem; font-weight: 700;\r\n color: var(--idp-muted-2); letter-spacing: 0.02em; flex-wrap: wrap;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"idp-wrap\">\r\n <div class=\"idp-hero\">\r\n <span class=\"tag\">Suivi de commande<\/span>\r\n <h1>Suivre ma commande<\/h1>\r\n <p>Saisissez votre num\u00e9ro de commande et l'adresse e-mail utilis\u00e9e lors du paiement.<\/p>\r\n <\/div>\r\n <div class=\"idp-card\">\r\n <form class=\"idp-form\" id=\"idp-demo-form\" action=\"\">\r\n <div class=\"idp-field\">\r\n <label for=\"idp-demo-order\">Num\u00e9ro de commande<\/label>\r\n <input type=\"text\" id=\"idp-demo-order\" placeholder=\"par exemple 10432\" required>\r\n <\/div>\r\n <div class=\"idp-field\">\r\n <label for=\"idp-demo-email\">Adresse e-mail<\/label>\r\n <input type=\"email\" id=\"idp-demo-email\" placeholder=\"you@example.com\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"idp-submit\">Suivi de commande<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\r\n <div class=\"idp-msg\" id=\"idp-demo-msg\"><\/div>\r\n <div class=\"idp-result\" id=\"idp-demo-result\">\r\n <div class=\"idp-result-head\">\r\n <div>\r\n <div class=\"idp-order-id\" id=\"idp-demo-result-id\"><\/div>\r\n <div class=\"idp-order-date\" id=\"idp-demo-result-date\"><\/div>\r\n <\/div>\r\n <span class=\"idp-status-pill\" id=\"idp-demo-result-pill\"><\/span>\r\n <\/div>\r\n <div class=\"idp-steps\" id=\"idp-demo-steps\">\r\n <div class=\"idp-steps-fill\" id=\"idp-demo-steps-fill\"><\/div>\r\n <div class=\"idp-step\" data-step=\"0\"><div class=\"idp-dot\">1<\/div><div class=\"idp-step-label\">Commande re\u00e7ue<\/div><\/div>\r\n <div class=\"idp-step\" data-step=\"1\"><div class=\"idp-dot\">2<\/div><div class=\"idp-step-label\">Traitement<\/div><\/div>\r\n <div class=\"idp-step\" data-step=\"2\"><div class=\"idp-dot\">3<\/div><div class=\"idp-step-label\">Exp\u00e9di\u00e9<\/div><\/div>\r\n <div class=\"idp-step\" data-step=\"3\"><div class=\"idp-dot\">4<\/div><div class=\"idp-step-label\">Livr\u00e9<\/div><\/div>\r\n <\/div>\r\n <div class=\"idp-tracking\" id=\"idp-demo-tracking\" style=\"display:none;\"><\/div>\r\n <div class=\"idp-items\" id=\"idp-demo-items\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"idp-trust-row\">\r\n <span>\ud83d\udd12 SSL 256 bits<\/span>\r\n <span>\u2605 4,8 sur Trustpilot<\/span>\r\n <span>\u21a9 Garantie \u00ab satisfait ou rembours\u00e9 \u00bb<\/span>\r\n <\/div>\r\n<\/div>\r\n<script>\r\n(function () {\r\n var form = document.getElementById('idp-demo-form');\r\n var msgBox = document.getElementById('idp-demo-msg');\r\n var result = document.getElementById('idp-demo-result');\r\n\r\n \/\/ Real lookup: calls your WordPress site (admin-ajax.php) which checks the\r\n \/\/ actual WooCommerce order matching the order number + email.\r\n \/\/ Requires the \"idp-order-tracking-backend.php\" snippet to be active in WPCode.\r\n var AJAX_URL = 'https:\/\/idpdrive.org\/wp-admin\/admin-ajax.php';\r\n\r\n function lookupOrder(orderId, email) {\r\n var body = new URLSearchParams();\r\n body.append('action', 'idp_track_order');\r\n body.append('order_number', orderId);\r\n body.append('email', email);\r\n\r\n return fetch(AJAX_URL, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n body: body.toString()\r\n }).then(function (r) { return r.json(); });\r\n }\r\n\r\n function fillSteps(stepIndex, cancelled) {\r\n var stepsWrap = document.getElementById('idp-demo-steps');\r\n var fill = document.getElementById('idp-demo-steps-fill');\r\n var steps = stepsWrap.querySelectorAll('.idp-step');\r\n steps.forEach(function (el) {\r\n var i = parseInt(el.getAttribute('data-step'), 10);\r\n el.classList.remove('is-done', 'is-current');\r\n if (cancelled) return;\r\n if (i < stepIndex) el.classList.add('is-done');\r\n if (i === stepIndex) el.classList.add('is-current');\r\n });\r\n if (cancelled) {\r\n fill.style.width = '0%';\r\n stepsWrap.style.opacity = '0.4';\r\n } else {\r\n stepsWrap.style.opacity = '1';\r\n var pct = (stepIndex \/ (steps.length - 1)) * 100;\r\n fill.style.width = pct + '%';\r\n }\r\n }\r\n\r\n form.addEventListener('submit', function (e) {\r\n e.preventDefault();\r\n msgBox.style.display = 'none';\r\n result.style.display = 'none';\r\n\r\n var orderId = document.getElementById('idp-demo-order').value.trim();\r\n var email = document.getElementById('idp-demo-email').value.trim();\r\n\r\n if (!orderId || !email) {\r\n msgBox.textContent = 'Please enter your order number and email address.';\r\n msgBox.style.display = 'block';\r\n return;\r\n }\r\n\r\n var submitBtn = form.querySelector('.idp-submit');\r\n submitBtn.disabled = true;\r\n submitBtn.textContent = 'Checking\u2026';\r\n\r\n lookupOrder(orderId, email).then(function (d) {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = 'Track Order';\r\n\r\n if (!d || !d.found) {\r\n msgBox.textContent = \"We couldn't find an order matching that order number and email. Please double-check and try again.\";\r\n msgBox.style.display = 'block';\r\n return;\r\n }\r\n\r\n document.getElementById('idp-demo-result-id').textContent = 'Order #' + d.order_id;\r\n document.getElementById('idp-demo-result-date').textContent = d.order_date;\r\n var pill = document.getElementById('idp-demo-result-pill');\r\n pill.textContent = d.status_label;\r\n pill.className = 'idp-status-pill' + (d.cancelled ? ' is-cancelled' : '');\r\n fillSteps(d.step_index, d.cancelled);\r\n\r\n var trackingBox = document.getElementById('idp-demo-tracking');\r\n if (d.tracking_number) {\r\n trackingBox.style.display = 'flex';\r\n trackingBox.innerHTML = '\ud83d\udce6 Tracking number: <a href=\"#\">' + d.tracking_number + '<\/a>';\r\n } else {\r\n trackingBox.style.display = 'none';\r\n }\r\n\r\n document.getElementById('idp-demo-items').textContent = d.items_summary || '';\r\n result.style.display = 'block';\r\n }).catch(function () {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = 'Track Order';\r\n msgBox.textContent = 'Something went wrong. Please try again in a moment.';\r\n msgBox.style.display = 'block';\r\n });\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Track Order \u2014 IDP Drive Order Tracking Track My Order Enter your order number and the email used at checkout. Order Number Email Address Track Order 1Order Received 2Processing 3Shipped 4Delivered \ud83d\udd12 SSL 256-bit \u2605 4.8 Trustpilot \u21a9 Money-back guarantee<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":16,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages\/571\/revisions"}],"predecessor-version":[{"id":666,"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/pages\/571\/revisions\/666"}],"wp:attachment":[{"href":"https:\/\/idpdrive.org\/fr\/wp-json\/wp\/v2\/media?parent=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}