{"id":1767,"date":"2026-06-15T15:15:08","date_gmt":"2026-06-15T13:15:08","guid":{"rendered":"https:\/\/e6c4-dea80e841ab2.wptiger.fr\/eclair-configurator\/"},"modified":"2026-06-19T10:03:35","modified_gmt":"2026-06-19T08:03:35","slug":"eclair-configurator","status":"publish","type":"page","link":"https:\/\/eclair.eu\/en\/eclair-configurator\/","title":{"rendered":"\u00c9clair Configurator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1767\" class=\"elementor elementor-1767 elementor-1534\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-694d59c e-flex e-con-boxed e-con e-parent\" data-id=\"694d59c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-929a644 elementor-widget elementor-widget-eclair_configurateur\" data-id=\"929a644\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"eclair_configurateur.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"eclair-wrap\"\n             id=\"eclair-929a644\"\n             data-show-codes=\"1\"\n             data-color=\"#D85A30\"\n             data-slider-threshold=\"6\"\n             style=\"--ec-primary:#D85A30\">\n\n            <div class=\"eclair-mission\">\n                <div class=\"eclair-mission-top\">\n                    <div>\n                        <div class=\"eclair-mission-kicker\">Guided experience<\/div>\n                        <div class=\"eclair-mission-title\">Create the ideal zipper<\/div>\n                        <p class=\"eclair-mission-text\">Go step by step to choose the right family, the right teeth, the right slider reference, and the right finish.<\/p>\n                    <\/div>\n                    <div class=\"eclair-mission-score\">\n                        <div class=\"eclair-mission-score-label\">Progress<\/div>\n                        <div class=\"eclair-mission-score-value\"><span id=\"eclair-929a644-percent\">0<\/span>%<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"eclair-prog\" role=\"progressbar\" aria-label=\"Configurator steps\">\n                                <div class=\"eclair-ps\" title=\"Coil, Metal, or Molded?\">\n                    <div class=\"eclair-pd act\"\n                         data-step=\"1\"\n                         aria-label=\"Step 1 : Family\">\n                        <span class=\"eclair-pd-num\">1<\/span>\n                        <span class=\"eclair-pd-check\" aria-hidden=\"true\"><\/span>\n                    <\/div>\n                    <div class=\"eclair-pl act\">Family<\/div>\n                <\/div>\n                                <div class=\"eclair-ps\" title=\"Which width?\">\n                    <div class=\"eclair-pd \"\n                         data-step=\"2\"\n                         aria-label=\"Step 2 : Teeth\">\n                        <span class=\"eclair-pd-num\">2<\/span>\n                        <span class=\"eclair-pd-check\" aria-hidden=\"true\"><\/span>\n                    <\/div>\n                    <div class=\"eclair-pl \">Teeth<\/div>\n                <\/div>\n                                <div class=\"eclair-ps\" title=\"How does it open?\">\n                    <div class=\"eclair-pd \"\n                         data-step=\"3\"\n                         aria-label=\"Step 3 : Type\">\n                        <span class=\"eclair-pd-num\">3<\/span>\n                        <span class=\"eclair-pd-check\" aria-hidden=\"true\"><\/span>\n                    <\/div>\n                    <div class=\"eclair-pl \">Type<\/div>\n                <\/div>\n                                <div class=\"eclair-ps\" title=\"Which slider reference?\">\n                    <div class=\"eclair-pd \"\n                         data-step=\"4\"\n                         aria-label=\"Step 4 : Slider\">\n                        <span class=\"eclair-pd-num\">4<\/span>\n                        <span class=\"eclair-pd-check\" aria-hidden=\"true\"><\/span>\n                    <\/div>\n                    <div class=\"eclair-pl \">Slider<\/div>\n                <\/div>\n                                <div class=\"eclair-ps\" title=\"Which surface?\">\n                    <div class=\"eclair-pd \"\n                         data-step=\"5\"\n                         aria-label=\"Step 5 : Finish\">\n                        <span class=\"eclair-pd-num\">5<\/span>\n                        <span class=\"eclair-pd-check\" aria-hidden=\"true\"><\/span>\n                    <\/div>\n                    <div class=\"eclair-pl \">Finish<\/div>\n                <\/div>\n                                <div class=\"eclair-prog-track\" aria-hidden=\"true\">\n                    <div class=\"eclair-prog-fill\" id=\"eclair-929a644-fill\"><\/div>\n                <\/div>\n            <\/div>\n\n                        <div class=\"eclair-step eclair-step-1 on\"\n                 role=\"region\" aria-label=\"Step 1\">\n\n                <div class=\"eclair-step-header\">\n                    <div class=\"eclair-snum\">Step 1 \/ 5<\/div>\n                    <h2 class=\"eclair-stit\">Start with the family<\/h2>\n                    <p class=\"eclair-ssub\" id=\"eclair-929a644-sub1\">\n                        Choose the base of your zipper: flexible, robust, or outdoor. This choice guides everything else.                     <\/p>\n                <\/div>\n\n                <div class=\"eclair-tip\" id=\"eclair-929a644-tip1\" aria-live=\"polite\"><\/div>\n                <div class=\"eclair-step-feedback\" id=\"eclair-929a644-feedback1\" aria-live=\"polite\"><\/div>\n\n                <div class=\"eclair-grid eclair-grid-famille\"\n                     id=\"eclair-929a644-g-famille\"\n                     role=\"radiogroup\"><\/div>\n\n                <div class=\"eclair-nav\">\n                                        <span><\/span>\n                    \n                                        <button class=\"eclair-btn-next\" id=\"eclair-929a644-btn1\"\n                            data-next=\"2\" disabled type=\"button\">\n                        Next <span aria-hidden=\"true\">\u2192<\/span>\n                    <\/button>\n                                    <\/div>\n            <\/div>\n                        <div class=\"eclair-step eclair-step-2\"\n                 role=\"region\" aria-label=\"Step 2\">\n\n                <div class=\"eclair-step-header\">\n                    <div class=\"eclair-snum\">Step 2 \/ 5<\/div>\n                    <h2 class=\"eclair-stit\">Refine with the teeth<\/h2>\n                    <p class=\"eclair-ssub\" id=\"eclair-929a644-sub2\">\n                        The teeth width affects strength, visual presence, and ease of use. The wider it is, the bolder the look.                     <\/p>\n                <\/div>\n\n                <div class=\"eclair-tip\" id=\"eclair-929a644-tip2\" aria-live=\"polite\"><\/div>\n                <div class=\"eclair-step-feedback\" id=\"eclair-929a644-feedback2\" aria-live=\"polite\"><\/div>\n\n                <div class=\"eclair-grid eclair-grid-maille\"\n                     id=\"eclair-929a644-g-maille\"\n                     role=\"radiogroup\"><\/div>\n\n                <div class=\"eclair-nav\">\n                                        <button class=\"eclair-btn-back\" data-prev=\"1\" type=\"button\">\n                        <span aria-hidden=\"true\">\u2190<\/span> Back                    <\/button>\n                    \n                                        <button class=\"eclair-btn-next\" id=\"eclair-929a644-btn2\"\n                            data-next=\"3\" disabled type=\"button\">\n                        Next <span aria-hidden=\"true\">\u2192<\/span>\n                    <\/button>\n                                    <\/div>\n            <\/div>\n                        <div class=\"eclair-step eclair-step-3\"\n                 role=\"region\" aria-label=\"Step 3\">\n\n                <div class=\"eclair-step-header\">\n                    <div class=\"eclair-snum\">Step 3 \/ 5<\/div>\n                    <h2 class=\"eclair-stit\">Define the opening type<\/h2>\n                    <p class=\"eclair-ssub\" id=\"eclair-929a644-sub3\">\n                        Now choose how the zipper opens: separating, non-separating, double slider, or continuous chain.                    <\/p>\n                <\/div>\n\n                <div class=\"eclair-tip\" id=\"eclair-929a644-tip3\" aria-live=\"polite\"><\/div>\n                <div class=\"eclair-step-feedback\" id=\"eclair-929a644-feedback3\" aria-live=\"polite\"><\/div>\n\n                <div class=\"eclair-grid eclair-grid-type\"\n                     id=\"eclair-929a644-g-type\"\n                     role=\"radiogroup\"><\/div>\n\n                <div class=\"eclair-nav\">\n                                        <button class=\"eclair-btn-back\" data-prev=\"2\" type=\"button\">\n                        <span aria-hidden=\"true\">\u2190<\/span> Back                    <\/button>\n                    \n                                        <button class=\"eclair-btn-next\" id=\"eclair-929a644-btn3\"\n                            data-next=\"4\" disabled type=\"button\">\n                        Next <span aria-hidden=\"true\">\u2192<\/span>\n                    <\/button>\n                                    <\/div>\n            <\/div>\n                        <div class=\"eclair-step eclair-step-4\"\n                 role=\"region\" aria-label=\"Step 4\">\n\n                <div class=\"eclair-step-header\">\n                    <div class=\"eclair-snum\">Step 4 \/ 5<\/div>\n                    <h2 class=\"eclair-stit\">Select the right slider<\/h2>\n                    <p class=\"eclair-ssub\" id=\"eclair-929a644-sub4\">\n                        Select the slider reference actually available for your teeth and opening type.                    <\/p>\n                <\/div>\n\n                <div class=\"eclair-tip\" id=\"eclair-929a644-tip4\" aria-live=\"polite\"><\/div>\n                <div class=\"eclair-step-feedback\" id=\"eclair-929a644-feedback4\" aria-live=\"polite\"><\/div>\n\n                <div class=\"eclair-grid eclair-grid-curseur\"\n                     id=\"eclair-929a644-g-curseur\"\n                     role=\"radiogroup\"><\/div>\n\n                <div class=\"eclair-nav\">\n                                        <button class=\"eclair-btn-back\" data-prev=\"3\" type=\"button\">\n                        <span aria-hidden=\"true\">\u2190<\/span> Back                    <\/button>\n                    \n                                        <button class=\"eclair-btn-next\" id=\"eclair-929a644-btn4\"\n                            data-next=\"5\" disabled type=\"button\">\n                        Next <span aria-hidden=\"true\">\u2192<\/span>\n                    <\/button>\n                                    <\/div>\n            <\/div>\n                        <div class=\"eclair-step eclair-step-5\"\n                 role=\"region\" aria-label=\"Step 5\">\n\n                <div class=\"eclair-step-header\">\n                    <div class=\"eclair-snum\">Step 5 \/ 5<\/div>\n                    <h2 class=\"eclair-stit\">Add the final finish<\/h2>\n                    <p class=\"eclair-ssub\" id=\"eclair-929a644-sub5\">\n                        The finish sets the final aesthetic tone: discreet, shiny, patinated, or technical. It is the final touch to your configuration.                     <\/p>\n                <\/div>\n\n                <div class=\"eclair-tip\" id=\"eclair-929a644-tip5\" aria-live=\"polite\"><\/div>\n                <div class=\"eclair-step-feedback\" id=\"eclair-929a644-feedback5\" aria-live=\"polite\"><\/div>\n\n                <div class=\"eclair-grid eclair-grid-finition\"\n                     id=\"eclair-929a644-g-finition\"\n                     role=\"radiogroup\"><\/div>\n\n                <div class=\"eclair-nav\">\n                                        <button class=\"eclair-btn-back\" data-prev=\"4\" type=\"button\">\n                        <span aria-hidden=\"true\">\u2190<\/span> Back                    <\/button>\n                    \n                                        <button class=\"eclair-btn-next\" id=\"eclair-929a644-btn5\"\n                            data-next=\"6\" disabled type=\"button\">\n                        View summary <span aria-hidden=\"true\">\u2192<\/span>\n                    <\/button>\n                                    <\/div>\n            <\/div>\n            \n            <div class=\"eclair-step eclair-step-recap\" role=\"region\" aria-label=\"Summary\">\n                <div class=\"eclair-congrats\" id=\"eclair-929a644-congrats\">\n                    <div class=\"eclair-congrats-icon\" aria-hidden=\"true\">\u2713<\/div>\n                    <div>\n                        <div class=\"eclair-congrats-title\">Your configuration is ready!<\/div>\n                        <div class=\"eclair-congrats-sub\">Check the details below and send your request.<\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"eclair-recap-grid\" id=\"eclair-929a644-recap\" aria-label=\"Summary of your selection\"><\/div>\n\n                <div class=\"eclair-form-section eclair-form-section--native\">\n                    <div class=\"eclair-form-title\">Your quote request<\/div>\n                    <p class=\"eclair-form-intro\">Complete your contact details and specify the desired colors, lengths, or quantities. Everything is sent with your configuration. <\/p>\n                    <div class=\"eclair-form-wrap eclair-form-wrap--native\" id=\"eclair-929a644-form\">\n                        <form class=\"eclair-quote-form\" method=\"post\" novalidate>\n                            <input type=\"hidden\" name=\"action\" value=\"eclair_submit_quote\">\n                            <input type=\"hidden\" name=\"nonce\" value=\"d29b1189a3\">\n                            <input type=\"hidden\" name=\"eclair_famille\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_maille\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_type\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_curseur\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_finition\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_code\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_desc\" value=\"\">\n                            <input type=\"hidden\" name=\"eclair_resume\" value=\"\">\n\n                            <div class=\"eclair-form-grid\">\n                                <div class=\"eclair-field\">\n                                    <label for=\"eclair-929a644-first_name\">First name *<\/label>\n                                    <input id=\"eclair-929a644-first_name\" type=\"text\" name=\"first_name\" required>\n                                <\/div>\n                                <div class=\"eclair-field\">\n                                    <label for=\"eclair-929a644-last_name\">Last name *<\/label>\n                                    <input id=\"eclair-929a644-last_name\" type=\"text\" name=\"last_name\" required>\n                                <\/div>\n                                <div class=\"eclair-field\">\n                                    <label for=\"eclair-929a644-company\">Company<\/label>\n                                    <input id=\"eclair-929a644-company\" type=\"text\" name=\"company\">\n                                <\/div>\n                                <div class=\"eclair-field\">\n                                    <label for=\"eclair-929a644-phone\">Phone<\/label>\n                                    <input id=\"eclair-929a644-phone\" type=\"text\" name=\"phone\">\n                                <\/div>\n                                <div class=\"eclair-field eclair-field--full\">\n                                    <label for=\"eclair-929a644-email\">Email *<\/label>\n                                    <input id=\"eclair-929a644-email\" type=\"email\" name=\"email\" required>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"eclair-form-subtitle\">Colors, lengths, and quantities<\/div>\n                            <div class=\"eclair-line-items\" data-eclair-items>\n                                <div class=\"eclair-line-item\">\n                                    <div class=\"eclair-field\"><label>Color<\/label><input type=\"text\" name=\"items[0][color]\" placeholder=\"Ex. Matte black \"><\/div>\n                                    <div class=\"eclair-field\"><label>Length<\/label><input type=\"text\" name=\"items[0][length]\" placeholder=\"Ex. 60 cm\"><\/div>\n                                    <div class=\"eclair-field\"><label>Quantity <small style=\"color:#888;font-weight:normal;\">(min. 100)<\/small><\/label><input type=\"number\" min=\"100\" max=\"999999\" name=\"items[0][quantity]\" placeholder=\"100\" value=\"100\" class=\"eclair-qty-input\"><\/div>\n                                    <button type=\"button\" class=\"eclair-line-remove\" aria-label=\"Remove this line\"><span aria-hidden=\"true\">\u00d7<\/span><\/button>\n                                <\/div>\n                            <\/div>\n                            <button type=\"button\" class=\"eclair-line-add\">+ Add a line<\/button>\n                                                        <div class=\"eclair-form-note\">Colored teeth are available in certain ranges; you can specify this in the Details field below, and we will get back to you upon receipt of this summary.<\/div>\n                            \n                            <div class=\"eclair-field eclair-field--full eclair-field--textarea\">\n                                <label for=\"eclair-929a644-message\">Details<\/label>\n                                <textarea id=\"eclair-929a644-message\" name=\"message\" rows=\"5\" placeholder=\"Describe your need, your constraints or the desired colors.\"><\/textarea>\n                            <\/div>\n\n                            <div class=\"eclair-form-actions\">\n                                <div class=\"eclair-form-status\" aria-live=\"polite\"><\/div>\n                                <button type=\"submit\" class=\"eclair-submit-btn\">\n                                    <span class=\"eclair-submit-label\">Send my request<\/span>\n                                    <span class=\"eclair-submit-loader\" aria-hidden=\"true\"><\/span>\n                                <\/button>\n                            <\/div>\n                            <div class=\"eclair-form-success\" hidden>Thank you, your request has been sent. We will get back to you shortly. <\/div>\n                        <\/form>\n                    <\/div>\n                <\/div>\n\n                <div class=\"eclair-nav\" style=\"margin-top:1rem\">\n                    <button class=\"eclair-btn-back\" data-prev=\"5\" type=\"button\">\n                        <span aria-hidden=\"true\">\u2190<\/span> Edit                    <\/button>\n                    <button class=\"eclair-btn-restart\" id=\"eclair-929a644-restart\" type=\"button\">\n                        New configuration                    <\/button>\n                <\/div>\n            <\/div>\n\n        <\/div>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Exp\u00e9rience guid\u00e9e Composez la fermeture id\u00e9ale Avancez \u00e9tape par \u00e9tape pour choisir la bonne famille, la bonne maille, la bonne r\u00e9f\u00e9rence de curseur et la bonne finition. Progression 0% 1 Famille 2 Maille 3 Type 4 Curseur 5 Finition \u00c9tape 1 \/ 5 Commencez par la famille Choisissez la base de votre fermeture : souple, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1767","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/pages\/1767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/comments?post=1767"}],"version-history":[{"count":2,"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/pages\/1767\/revisions"}],"predecessor-version":[{"id":1978,"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/pages\/1767\/revisions\/1978"}],"wp:attachment":[{"href":"https:\/\/eclair.eu\/en\/wp-json\/wp\/v2\/media?parent=1767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}