{"id":7257,"date":"2025-05-03T12:29:09","date_gmt":"2025-05-03T12:29:09","guid":{"rendered":"https:\/\/hygge-constructions.fr\/?page_id=7257"},"modified":"2025-05-27T12:46:59","modified_gmt":"2025-05-27T12:46:59","slug":"formulaire-fenetre","status":"publish","type":"page","link":"https:\/\/hygge-constructions.fr\/en\/formulaire-fenetre\/","title":{"rendered":"formulaire-fenetre"},"content":{"rendered":"<style>.elementor-7257 .elementor-element.elementor-element-c0e4b1e > .elementor-container{max-width:687px;}.elementor-7257 .elementor-element.elementor-element-c0e4b1e{margin-top:5px;margin-bottom:0px;}.elementor-7257 .elementor-element.elementor-element-c812a32{text-align:center;}.elementor-7257 .elementor-element.elementor-element-c812a32 .elementor-heading-title{font-family:\"la bisane\", Sans-serif;font-size:48px;font-weight:600;color:var( --e-global-color-c8e8da9 );}.elementor-7257 .elementor-element.elementor-element-c812a32 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-7257 .elementor-element.elementor-element-cda9453{columns:1;text-align:center;font-family:\"Number Altone\", Sans-serif;font-size:18px;font-weight:500;font-style:normal;color:var( --e-global-color-c8e8da9 );}.elementor-7257 .elementor-element.elementor-element-cda9453 p{margin-block-end:0px;}.elementor-7257 .elementor-element.elementor-element-ab5b703 > .elementor-container{max-width:1217px;}.elementor-7257 .elementor-element.elementor-element-4cf2818{columns:1;text-align:justify;font-family:\"Number Altone\", Sans-serif;font-size:16px;font-weight:400;font-style:normal;color:#2E3141;}.elementor-7257 .elementor-element.elementor-element-4cf2818 p{margin-block-end:0px;}.elementor-7257 .elementor-element.elementor-element-dd4bc9b > .elementor-container{max-width:1448px;}.elementor-7257 .elementor-element.elementor-element-dd4bc9b > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-7257 .elementor-element.elementor-element-dd4bc9b, .elementor-7257 .elementor-element.elementor-element-dd4bc9b > .elementor-background-overlay{border-radius:20px 20px 20px 20px;}.elementor-7257 .elementor-element.elementor-element-dd4bc9b{margin-top:0px;margin-bottom:0px;padding:0% 0% 0% 0%;}.elementor-7257 .elementor-element.elementor-element-5806fc0 > .elementor-element-populated, .elementor-7257 .elementor-element.elementor-element-5806fc0 > .elementor-element-populated > .elementor-background-overlay, .elementor-7257 .elementor-element.elementor-element-5806fc0 > .elementor-background-slideshow{border-radius:20px 20px 20px 20px;}.elementor-7257 .elementor-element.elementor-element-74be229 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:32px 32px 32px 32px;}.elementor-7257 .elementor-element.elementor-element-74be229{width:100%;max-width:100%;}.elementor-7257 .elementor-element.elementor-element-74be229.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-7257 .elementor-element.elementor-element-7cfcaa5{--display:flex;--min-height:106px;}.elementor-7257 .elementor-element.elementor-element-847fefd{--spacer-size:50px;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-7257 .elementor-element.elementor-element-5806fc0{width:100%;}}\/* Start Custom Fonts CSS *\/@font-face {\n\tfont-family: 'la bisane';\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/07\/LaBisane-Medium.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'la bisane';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/07\/LaBisane-Light.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'la bisane';\n\tfont-style: normal;\n\tfont-weight: 300;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/07\/LaBisane-ExtraLight_1.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'la bisane';\n\tfont-style: normal;\n\tfont-weight: 600;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/07\/LaBisane-SemiBold.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'la bisane';\n\tfont-style: normal;\n\tfont-weight: 700;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/07\/LaBisane-Bold.ttf') format('truetype');\n}\n@font-face {\n\tfont-family: 'la bisane';\n\tfont-style: normal;\n\tfont-weight: 800;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/07\/LaBisane-Bold-1.ttf') format('truetype');\n}\n\/* End Custom Fonts CSS *\/\n\/* Start Custom Fonts CSS *\/@font-face {\n\tfont-family: 'Number Altone';\n\tfont-style: normal;\n\tfont-weight: normal;\n\tfont-display: auto;\n\tsrc: url('https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/08\/Altone-Regular.ttf') format('truetype');\n}\n\/* End Custom Fonts CSS *\/<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7257\" class=\"elementor elementor-7257\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c0e4b1e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c0e4b1e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9fcf7e0\" data-id=\"9fcf7e0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c812a32 elementor-widget elementor-widget-heading\" data-id=\"c812a32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Obtenir une estimation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cda9453 elementor-widget elementor-widget-text-editor\" data-id=\"cda9453\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7391072 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"7391072\" data-element_type=\"section\"><div class=\"elementor-container elementor-column-gap-default\"><div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-079e305\" data-id=\"079e305\" data-element_type=\"column\"><div class=\"elementor-widget-wrap elementor-element-populated\"><div class=\"elementor-element elementor-element-fd079c1 elementor-widget-mobile__width-auto elementor-widget elementor-widget-text-editor animated fadeIn\" data-id=\"fd079c1\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:700}\" data-widget_type=\"text-editor.default\"><div class=\"elementor-widget-container\"><article class=\"text-token-text-primary w-full\" dir=\"auto\" data-testid=\"conversation-turn-20\" data-scroll-anchor=\"true\"><div class=\"text-base my-auto mx-auto py-5 [--thread-content-margin:--spacing(4)] @[37rem]:[--thread-content-margin:--spacing(6)] @[72rem]:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\"><div class=\"[--thread-content-max-width:32rem] @[34rem]:[--thread-content-max-width:40rem] @[64rem]:[--thread-content-max-width:48rem] mx-auto flex max-w-(--thread-content-max-width) flex-1 text-base gap-4 md:gap-5 lg:gap-6 group\/turn-messages focus-visible:outline-hidden\" tabindex=\"-1\"><div class=\"group\/conversation-turn relative flex w-full min-w-0 flex-col agent-turn\"><div class=\"relative flex-col gap-1 md:gap-3\"><div class=\"flex max-w-full flex-col grow\"><div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"226e1442-8f8d-4c09-a4ec-aaa474c39322\" data-message-model-slug=\"o4-mini-high\"><div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\"><div class=\"markdown prose dark:prose-invert w-full break-words dark\"><p data-start=\"0\" data-end=\"106\" data-is-last-node=\"\" data-is-only-node=\"\">En 6 \u00e9tapes simples, estimez les fen\u00eatres de vos r\u00eaves et recevez une proposition personnalis\u00e9e sous 48 h.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article><\/div><\/div><\/div><\/div><\/div><\/section>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ab5b703 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ab5b703\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5925f09\" data-id=\"5925f09\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4cf2818 elementor-widget elementor-widget-text-editor\" data-id=\"4cf2818\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7391072 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"7391072\" data-element_type=\"section\"><div class=\"elementor-container elementor-column-gap-default\"><div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-079e305\" data-id=\"079e305\" data-element_type=\"column\"><div class=\"elementor-widget-wrap elementor-element-populated\"><div class=\"elementor-element elementor-element-fd079c1 elementor-widget-mobile__width-auto elementor-widget elementor-widget-text-editor animated fadeIn\" data-id=\"fd079c1\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:700}\" data-widget_type=\"text-editor.default\"><div class=\"elementor-widget-container\"><p><span style=\"text-decoration: underline;\"><strong>Important \u2013 Estimation<\/strong><\/span><\/p><p><em>les r\u00e9sultats obtenus via ce formulaire sont fournis \u00e0 titre indicatif. Ils ne constituent pas un devis contractuel et peuvent varier en fonction de la configuration r\u00e9elle, des mat\u00e9riaux choisis, des contraintes techniques et des tarifs en vigueur. Pour une estimation pr\u00e9cise et personnalis\u00e9e, merci de nous contacter directement \u00e0 <a class=\"cursor-pointer\" rel=\"noopener\" data-start=\"346\" data-end=\"376\">contact@hygge-constructions.com<\/a> ou au 07 51 40 08 44.<\/em><\/p><\/div><\/div><\/div><\/div><\/div><\/section>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dd4bc9b elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dd4bc9b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5806fc0\" data-id=\"5806fc0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-74be229 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"74be229\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Formulaire Produits Multistep<\/title>\r\n    <link\r\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\"\r\n      rel=\"stylesheet\"\r\n    \/>\r\n  <style>\r\n    \/* Styles will be moved to Shadow DOM *\/\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <my-multiform><\/my-multiform>\r\n\r\n  <script type=\"module\">\r\n    class MyMultiForm extends HTMLElement {\r\n      constructor() {\r\n        super();\r\n        this.shadow = this.attachShadow({ mode: 'open' });\r\n      }\r\n\r\n      connectedCallback() {\r\n        this.shadow.innerHTML = `\r\n          <style>\r\n            \/* Style for the custom element itself *\/\r\n            :host {\r\n              display: block; \/* Ensures it takes up space *\/\r\n              width: 100%; \/* Or 100vw if you want it to force viewport width *\/\r\n              height: 100%; \/* Or 100vh if you want it to force viewport height *\/\r\n              \/* For the form to truly take 100% of the page, \r\n                 the <my-multiform> element itself in your main HTML \r\n                 might need style=\"width:100vw; height:100vh; margin:0; padding:0;\" \r\n                 and its parent (e.g. body) might also need margin:0; padding:0; height:100%; *\/\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Reset & Base \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .msf-wrapper * {\r\n              margin: 0;\r\n              padding: 0;\r\n              box-sizing: border-box;\r\n            }\r\n            .my_body { \/* This class will now apply to a div inside shadow DOM if needed, or removed if body styling is handled by the page *\/\r\n              font-family: \"Inter\", sans-serif;\r\n              background: #f4f6fa; \/* Reverted from transparent *\/\r\n              line-height: 1.5;\r\n              color: #2e3141;\r\n              width: 100%;     \/* Full width *\/\r\n              height: 100%;    \/* Full height *\/\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Wrapper \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .formbold-main-wrapper {\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              padding: 0; \/* Removed padding for full width\/height *\/\r\n              width: 100%;\r\n              height: 100%;\r\n            }\r\n            .formbold-form-wrapper {\r\n              width: 100%;\r\n              max-width: 100%; \/* Changed from 70% *\/\r\n              height: 100%;    \/* Full height *\/\r\n              background: #fff; \/* Reverted from transparent *\/\r\n              font-family: \"la bisane\";\r\n              line-height: 1.5;\r\n              color: #2e3141;\r\n              padding: 20px; \/* Consistent padding *\/\r\n              border-radius: 0; \/* Removed for full page *\/\r\n              box-shadow: none; \/* Removed for full page *\/\r\n              position: relative; \/* Make it a positioning context *\/\r\n              padding-bottom: 100px; \/* Space for buttons, consistent with mobile *\/\r\n              box-sizing: border-box; \/* Ensure padding is included in 100% *\/\r\n            }\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Navigation Steps \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .formbold-steps ul {\r\n              list-style: none;\r\n              display: flex;\r\n              gap: 0;\r\n              margin: auto;\r\n              margin-top: 20px;\r\n              margin-bottom: 40px;\r\n              flex-wrap: wrap;\r\n              height: auto;\r\n            }\r\n\r\n            .formbold-steps li {\r\n              display: flex;\r\n              flex-direction: column;\r\n              align-items: center;\r\n              margin-left: 0;\r\n              font-weight: 500;\r\n              color: #2e3141;\r\n              flex: 1;\r\n              position: relative;\r\n              text-align: center;\r\n              min-height: 120px;\r\n              padding-top: 10px;\r\n              font-size: 18px;\r\n            }\r\n\r\n            .formbold-steps li span {\r\n              width: 55px;\r\n              height: 55px;\r\n              border-radius: 50%;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              background: #dde3ec;\r\n              color: #536387;\r\n              margin-bottom: 15px;\r\n              font-size: 24px;\r\n              z-index: 1;\r\n              position: relative;\r\n              flex-shrink: 0;\r\n              transition: background-color 0.3s ease, color 0.3s ease,\r\n                transform 0.3s ease;\r\n            }\r\n            \/* Connector Line Styling - Adjusted for larger circles *\/\r\n            .formbold-steps li:not(:first-child)::before {\r\n              content: \"\";\r\n              position: absolute;\r\n              height: 3px;\r\n              background-color: #dde3ec;\r\n              top: calc(\r\n                10px + 55px \/ 2\r\n              );\r\n              transform: translateY(-50%);\r\n              left: calc(-50% + 27.5px);\r\n              right: calc(50% + 27.5px);\r\n              z-index: 0;\r\n              transition: background-color 0.4s ease;\r\n            }\r\n\r\n            \/* Completed Step Styles *\/\r\n            .formbold-steps li.completed span {\r\n              background-color: #e1885e;\r\n              color: #fff;\r\n            }\r\n            .formbold-steps li.completed {\r\n              color: #e1885e;\r\n            }\r\n\r\n            \/* Active Step Styles (ensure it overrides completed if necessary) *\/\r\n            .formbold-steps li.active {\r\n              color: #e1885e;\r\n            }\r\n            .formbold-steps li.active span {\r\n              background: #e1885e;\r\n              color: #fff;\r\n              transform: scale(1.3);\r\n            }\r\n\r\n            \/* Line Coloring Logic *\/\r\n            \/* Color the line if the *previous* step is completed *\/\r\n            .formbold-steps li.completed + li::before {\r\n              background-color: #e1885e;\r\n            }\r\n\r\n            #multiForm {\r\n              height: 100%;\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Grilles & Cartes \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n\r\n            .formbold-product-grid,\r\n            .formbold-material-grid,\r\n            .formbold-opening-grid,\r\n            .formbold-color-grid {\r\n              display: flex;\r\n              flex-wrap: wrap;\r\n              gap: 20px;\r\n              margin-top: 5%;\r\n            }\r\n            .formbold-product-card,\r\n            .formbold-material-card,\r\n            .formbold-opening-card,\r\n            .formbold-color-card {\r\n              flex: 1 1 calc(25% - 20px);\r\n              border: 1px solid #dde3ec;\r\n              border-radius: 8px;\r\n              padding: 16px;\r\n              text-align: center;\r\n              background: transparent;\r\n              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\r\n              transition: background 0.2s, border-color 0.2s, box-shadow 0.2s,\r\n                transform 0.2s ease;\r\n              cursor: pointer;\r\n              justify-items: center;\r\n            }\r\n\r\n            .formbold-product-card{\r\n              justify-content : center;\r\n              justify-items : center;\r\n              align-items : center;\r\n              align-content : center;\r\n            }\r\n            \/* Hover effect for selectable cards *\/\r\n            .formbold-material-card:hover,\r\n            .formbold-opening-card:hover,\r\n            .formbold-color-card:hover {\r\n              transform: translateY(-3px);\r\n              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n              border-color: #c8ccd3;\r\n            }\r\n\r\n            \/* Active\/Selected state *\/\r\n            .formbold-product-card.has-value,\r\n            .formbold-material-card.active,\r\n            .formbold-opening-card.active,\r\n            .formbold-color-card.active {\r\n              background: #fdf8f5;\r\n              border-color: #e1885e;\r\n              box-shadow: 0 0 8px rgba(225, 136, 94, 0.3);\r\n            }\r\n            \/* Ensure active hover doesn't conflict badly *\/\r\n            .formbold-material-card.active:hover,\r\n            .formbold-opening-card.active:hover,\r\n            .formbold-color-card.active:hover {\r\n              transform: translateY(-1px);\r\n              box-shadow: 0 2px 8px rgba(225, 136, 94, 0.35);\r\n            }\r\n\r\n            .formbold-product-card img,\r\n            .formbold-material-card img,\r\n            .formbold-opening-card img,\r\n            .formbold-color-card img {\r\n              width: 60px;\r\n              margin-bottom: 12px;\r\n              opacity: 0.9;\r\n              transition: opacity 0.2s ease;\r\n            }\r\n            .formbold-product-card:hover img,\r\n            .formbold-material-card:hover img,\r\n            .formbold-opening-card:hover img,\r\n            .formbold-color-card:hover img,\r\n            .formbold-product-card.has-value img,\r\n            .formbold-material-card.active img,\r\n            .formbold-opening-card.active img,\r\n            .formbold-color-card.active img {\r\n              opacity: 1;\r\n            }\r\n\r\n            .formbold-product-card p,\r\n            .formbold-material-card p,\r\n            .formbold-opening-card p,\r\n            .formbold-color-card p {\r\n              font-weight: 500;\r\n              color: #2e3141;\r\n              margin-bottom: 8px;\r\n            }\r\n            .formbold-opening-card small,\r\n            .formbold-color-card small {\r\n              display: block;\r\n              font-size: 13px;\r\n              color: #2e3141;\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Compteurs Produit \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .product-counter {\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              gap: 10px;\r\n              margin-top: 12px;\r\n            }\r\n            .product-counter button,\r\n            .product-counter span {\r\n              width: 36px;\r\n              height: 36px;\r\n              background: #fff;\r\n              border: none;\r\n              border-radius: 6px;\r\n              font-size: 18px;\r\n              color: #e1885e;\r\n              font-weight: 500;\r\n              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              transition: transform 0.1s ease, background-color 0.2s ease;\r\n            }\r\n            .product-counter button {\r\n              cursor: pointer;\r\n            }\r\n            .product-counter button:hover {\r\n              transform: scale(1.1);\r\n              background: #fdf8f5;\r\n              color: #e1885e;\r\n            }\r\n            .product-counter button:active {\r\n              transform: scale(0.95);\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Summary & Error \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .formbold-error-message {\r\n              color: #c81e1e;\r\n              font-size: 14px;\r\n              text-align: left;\r\n              background-color: #fdecea;\r\n              border-left: 4px solid #e03e3e;\r\n              border-radius: 4px;\r\n              font-weight: 500;\r\n              position: relative;\r\n              opacity: 0;\r\n              max-height: 0;\r\n              padding-top: 0;\r\n              padding-bottom: 0;\r\n              padding-left: 40px;\r\n              padding-right: 40px;\r\n              margin-bottom: 2%;\r\n              margin-top: 1%;\r\n              overflow: hidden;\r\n              transition: opacity 0.3s ease-out, max-height 0.4s ease-in-out,\r\n                margin-bottom 0.3s ease-out, padding 0.3s ease-out;\r\n            }\r\n\r\n            .title-step-1,\r\n            .title-step-2,\r\n            .title-step-3,\r\n            .title-step-4,\r\n            .title-step-5 {\r\n              text-align: center;\r\n            }\r\n            \/* Warning icon *\/\r\n            .formbold-error-message::before {\r\n              content: \"\u26a0\";\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              font-size: 18px;\r\n              color: #e03e3e;\r\n            }\r\n            \/* Close Button Styling *\/\r\n            .formbold-error-close-btn {\r\n              position: absolute;\r\n              top: 50%;\r\n              right: 10px;\r\n              transform: translateY(-50%);\r\n              background: none;\r\n              border: none;\r\n              font-size: 20px;\r\n              line-height: 1;\r\n              color: #c81e1e;\r\n              cursor: pointer;\r\n              padding: 2px;\r\n              opacity: 0.7;\r\n              transition: opacity 0.2s ease;\r\n            }\r\n            .formbold-error-close-btn:hover {\r\n              opacity: 1;\r\n            }\r\n\r\n            .formbold-error-message:not(:empty) {\r\n            }\r\n\r\n            \/* NEW: Class to control visibility *\/\r\n            .formbold-error-message.is-visible {\r\n              opacity: 1;\r\n              max-height: 100px;\r\n              margin-bottom: 16px;\r\n              padding-top: 10px;\r\n              padding-bottom: 10px;\r\n            }\r\n            \/* NEW: Span for error text to prevent overlap with button *\/\r\n            .formbold-error-message .error-text {\r\n              display: inline-block;\r\n              padding-right: 25px;\r\n            }\r\n\r\n            .formbold-summary {\r\n              margin-top: 24px;\r\n              padding: 16px;\r\n              border: 1px solid #dde3ec;\r\n              border-radius: 8px;\r\n              background: #fafbfe;\r\n            }\r\n            .formbold-summary h3 {\r\n              margin-bottom: 12px;\r\n              font-size: 16px;\r\n              color: #2e3141;\r\n            }\r\n            .formbold-summary ul {\r\n              list-style: none;\r\n              padding-left: 0;\r\n            }\r\n            .formbold-summary li {\r\n              margin-bottom: 6px;\r\n              font-size: 14px;\r\n              color: #2e3141;\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Navigation Buttons \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .formbold-form-btn-wrapper {\r\n              display: flex;\r\n              gap: 24px;\r\n              position: absolute;\r\n              bottom: 32px;\r\n              left: 32px;\r\n              right: 32px;\r\n              width: calc(100% - 64px);\r\n              justify-content: center;\r\n              align-items: center;\r\n              border-top: 1px solid #dde3ec;\r\n              padding-top: 24px;\r\n            }\r\n\r\n            .formbold-back-btn {\r\n              border: 1px solid transparent;\r\n              font-weight: 500;\r\n              padding: 16px 20px;\r\n              font-size: 16px;\r\n              border-radius: 6px;\r\n              transition: background 0.2s, color 0.2s, border-color 0.2s;\r\n              background: #f0f2f5;\r\n              color: #a8b0be;\r\n              cursor: not-allowed;\r\n              min-width: 120px;\r\n              text-align: center;\r\n              font-family: \"la bisane\";\r\n            }\r\n            .formbold-back-btn.active {\r\n              color: #e1885e;\r\n              background: #ffffff;\r\n              border: 1px solid #e1885e;\r\n              cursor: pointer;\r\n              transition: background-color 0.2s ease, box-shadow 0.2s ease;\r\n              font-family: \"la bisane\";\r\n            }\r\n\r\n            .formbold-back-btn.active:focus {\r\n              outline: none;\r\n              box-shadow: 0 0 0 3px rgba(225, 136, 94, 0.5);\r\n            }\r\n\r\n            .formbold-btn {\r\n              padding: 16px 32px;\r\n              background: #e1885e;\r\n              color: #fff;\r\n              border: none;\r\n              border-radius: 6px;\r\n              font-weight: 500;\r\n              cursor: pointer;\r\n              font-size: 16px;\r\n              min-width: 120px;\r\n              text-align: center;\r\n              font-family: \"la bisane\";\r\n              opacity: 1;\r\n            }\r\n            .btn-left {\r\n              flex: initial;\r\n            }\r\n            .btn-right {\r\n              flex: initial;\r\n            }\r\n            .formbold-btn:disabled {\r\n              background: #eeeceb;\r\n              cursor: not-allowed;\r\n              opacity: 0.7;\r\n              color: #a8b0be;\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Masquage & Transition des \u00c9tapes \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .formbold-form-step-1,\r\n            .formbold-form-step-2,\r\n            .formbold-form-step-3,\r\n            .formbold-form-step-4,\r\n            .formbold-form-step-5,\r\n            .formbold-form-step-6 {\r\n              display: none;\r\n              box-sizing: border-box;\r\n              opacity: 0;\r\n              transition: opacity 0.4s ease-in-out;\r\n            }\r\n            .formbold-form-step-1.active,\r\n            .formbold-form-step-2.active,\r\n            .formbold-form-step-3.active,\r\n            .formbold-form-step-4.active,\r\n            .formbold-form-step-5.active,\r\n            .formbold-form-step-6.active {\r\n              display: block;\r\n              opacity: 1;\r\n              max-height: 72%;\r\n              overflow-y: auto;\r\n              padding: 5%;\r\n              padding-bottom: 50px;\r\n            }\r\n\r\n            \/* Styling for the containers that hold dynamically generated product items *\/\r\n            .formbold-dynamic-step-container {\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 \u00c9tape 5 : Dimensions \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            .formbold-dimensions-container {\r\n              margin-top: 16px;\r\n            }\r\n            \/* chaque row avec deux colonnes \u00e9gales *\/\r\n            .formbold-dimensions-container .dimensions-row {\r\n              display: grid;\r\n              grid-template-columns: 1fr 1fr;\r\n              gap: 16px;\r\n              margin-bottom: 0;\r\n            }\r\n            .formbold-dimensions-container label {\r\n              display: block;\r\n              margin-bottom: 6px;\r\n              font-size: 14px;\r\n              color: #07074d;\r\n              font-weight: 500;\r\n            }\r\n            .formbold-dimensions-container input {\r\n              width: 100%;\r\n              padding: 10px 12px;\r\n              border: 1px solid #dde3ec;\r\n              border-radius: 4px;\r\n              font-size: 14px;\r\n              color: #2e3141;\r\n              transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n            }\r\n            .formbold-dimensions-container input:focus {\r\n              border-color: #e1885e;\r\n              outline: none;\r\n              box-shadow: 0 0 0 2px rgba(225, 136, 94, 0.2);\r\n            }\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Transitions anim\u00e9es des \u00e9tapes (Circles) \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            \/* Keeping the existing animation if desired *\/\r\n            \/* @keyframes fadeInStep { ... } *\/\r\n\r\n            \/* Style for the new dimension item structure *\/\r\n            .dimension-item {\r\n              margin-bottom: 24px;\r\n              padding-bottom: 16px;\r\n              border-bottom: 1px solid #f0f2f5;\r\n            }\r\n            .dimension-item:last-child {\r\n              border-bottom: none;\r\n            }\r\n            .dimension-item-heading {\r\n              font-size: 15px;\r\n              font-weight: 600;\r\n              color: #07074d;\r\n              margin-bottom: 16px;\r\n            }\r\n\r\n            \/* Style for rows containing multiple fields *\/\r\n            .formbold-field-row {\r\n              display: grid;\r\n              grid-template-columns: 1fr 1fr;\r\n              gap: 24px;\r\n            }\r\n\r\n            \/* Step 6: Personal Info Styles *\/\r\n            .formbold-form-step-6 .formbold-input-group {\r\n              margin-bottom: 20px;\r\n              position: relative;\r\n            }\r\n            .formbold-form-step-6 label {\r\n              display: block;\r\n              margin-bottom: 8px;\r\n              font-size: 14px;\r\n              color: #07074d;\r\n              font-weight: 500;\r\n            }\r\n            .formbold-form-step-6 input[type=\"text\"],\r\n            .formbold-form-step-6 input[type=\"email\"],\r\n            .formbold-form-step-6 input[type=\"tel\"],\r\n            .formbold-form-step-6 textarea {\r\n              width: 100%;\r\n              padding: 12px 15px;\r\n              border: 1px solid #dde3ec;\r\n              border-radius: 6px;\r\n              font-size: 14px;\r\n              color: #2e3141;\r\n              box-sizing: border-box;\r\n              transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n            }\r\n            .formbold-form-step-6 textarea {\r\n              resize: vertical;\r\n              min-height: 80px;\r\n            }\r\n            \/* Enhanced focus style for Step 6 *\/\r\n            .formbold-form-step-6 input:focus,\r\n            .formbold-form-step-6 textarea:focus {\r\n              border-color: #e1885e;\r\n              outline: none;\r\n              box-shadow: 0 0 0 3px rgba(225, 136, 94, 0.25);\r\n            }\r\n            \/* Style for invalid fields *\/\r\n            .formbold-form-step-6 input:invalid,\r\n            .formbold-form-step-6 textarea:invalid {\r\n            }\r\n            .formbold-form-step-6 input.error-highlight,\r\n            .formbold-form-step-6 textarea.error-highlight {\r\n              border-color: #e03e3e !important;\r\n              box-shadow: 0 0 0 3px rgba(224, 62, 62, 0.2);\r\n            }\r\n\r\n            .formbold-back-btn:disabled {\r\n              background-color: none;\r\n              color: #ffffff;\r\n            }\r\n\r\n            .formbold-dynamic-select {\r\n              width: 100%;\r\n              padding: 12px 15px;\r\n              border: 1px solid #dde3ec;\r\n              border-radius: 6px;\r\n              font-size: 14px;\r\n              color: #2e3141;\r\n              box-sizing: border-box;\r\n              transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n              background-color: #fff;\r\n              -webkit-appearance: none;\r\n              -moz-appearance: none;\r\n              appearance: none;\r\n              background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20width%3D\"20\"%20height%3D\"20\"%20xmlns%3D\"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\"%3E%3Cpath%20d%3D\"M5%208l5%205%205-5z\"%20fill%3D\"%23536387\"%2F%3E%3C%2Fsvg%3E');\r\n              background-repeat: no-repeat;\r\n              background-position: right 15px center;\r\n              background-size: 12px;\r\n              cursor: pointer;\r\n            }\r\n            .formbold-dynamic-select:focus {\r\n              border-color: #e1885e;\r\n              outline: none;\r\n              box-shadow: 0 0 0 3px rgba(225, 136, 94, 0.25);\r\n            }\r\n\r\n            \/* Removed duplicate .formbold-back-btn:disabled *\/\r\n\r\n            \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Responsive Adjustments \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n            @media (max-width: 800px) {\r\n              .formbold-main-wrapper {\r\n                padding: 20px 0;\r\n              }\r\n              .formbold-form-wrapper {\r\n                max-width: 100%;\r\n                width: 100vw;\r\n                height: auto;\r\n                min-height: 100vh;\r\n                padding: 20px;\r\n                padding-bottom: 100px;\r\n                border-radius: 0;\r\n                box-shadow: none;\r\n              }\r\n\r\n              \/* Step Indicators: Show only active, centered *\/\r\n              .formbold-steps ul {\r\n                margin-bottom: 20px;\r\n                justify-content: center;\r\n              }\r\n              .formbold-steps li {\r\n                display: none;\r\n                flex: none;\r\n                min-height: auto;\r\n                font-size: 16px;\r\n                margin-left: 0;\r\n              }\r\n              .formbold-steps li.active {\r\n                display: flex;\r\n                text-align: center;\r\n              }\r\n              .formbold-steps li span {\r\n                width: 45px;\r\n                height: 45px;\r\n                font-size: 20px;\r\n                margin-bottom: 8px;\r\n              }\r\n              .formbold-steps li:not(:first-child)::before {\r\n                display: none;\r\n              }\r\n              .formbold-steps li.completed + li::before {\r\n                display: none;\r\n              }\r\n\r\n              \/* Active Step Content: Allow natural height, page scroll *\/\r\n              .formbold-form-step-1.active,\r\n              .formbold-form-step-2.active,\r\n              .formbold-form-step-3.active,\r\n              .formbold-form-step-4.active,\r\n              .formbold-form-step-5.active,\r\n              .formbold-form-step-6.active {\r\n                max-height: none;\r\n                overflow-y: visible;\r\n                padding: 15px;\r\n              }\r\n\r\n              \/* Button Wrapper *\/\r\n              .formbold-form-btn-wrapper {\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                width: 100%;\r\n                padding: 15px;\r\n                gap: 10px;\r\n                box-sizing: border-box;\r\n                background-color: #fff;\r\n                border-top: 1px solid #dde3ec;\r\n              }\r\n              .formbold-back-btn,\r\n              .formbold-btn {\r\n                padding: 14px 10px;\r\n                font-size: 15px;\r\n                flex-grow: 1;\r\n              }\r\n\r\n              \/* Adjust card layouts for better stacking *\/\r\n              .formbold-product-grid,\r\n              .formbold-material-grid,\r\n              .formbold-opening-grid,\r\n              .formbold-color-grid {\r\n                gap: 15px;\r\n              }\r\n              .formbold-product-card,\r\n              .formbold-material-card,\r\n              .formbold-opening-card,\r\n              .formbold-color-card {\r\n                flex: 1 1 100%;\r\n                justify-content : center;\r\n                justify-items : center;\r\n                align-items : center;\r\n                align-content : center;\r\n              }\r\n\r\n              \/* Dimension and Personal Info Rows *\/\r\n              .formbold-dimensions-container .dimensions-row,\r\n              .formbold-field-row {\r\n                grid-template-columns: 1fr;\r\n                gap: 0;\r\n              }\r\n              .formbold-field-row .formbold-input-group:not(:last-child) {\r\n                margin-bottom: 15px;\r\n              }\r\n\r\n              .formbold-dynamic-select {\r\n                font-size: 15px;\r\n              }\r\n            }\r\n\r\n            \/* Error highlight for dynamic selects in steps 2, 3, 4 *\/\r\n            .formbold-form-step-2 select.error-highlight,\r\n            .formbold-form-step-3 select.error-highlight,\r\n            .formbold-form-step-4 select.error-highlight {\r\n              border-color: #e03e3e !important;\r\n              box-shadow: 0 0 0 3px rgba(224, 62, 62, 0.2);\r\n            }\r\n\r\n            \/* Error highlight for dimension inputs in step 5 *\/\r\n            .formbold-form-step-5 input.error-highlight {\r\n              border-color: #e03e3e !important;\r\n              box-shadow: 0 0 0 3px rgba(224, 62, 62, 0.2);\r\n            }\r\n          <\/style>\r\n          <div class=\"msf-wrapper my_body\">\r\n            <div class=\"formbold-main-wrapper\">\r\n              <div class=\"formbold-form-wrapper\">\r\n                <form id=\"multiForm\" method=\"POST\">\r\n                  <!-- Steps -->\r\n                  <div class=\"formbold-steps\">\r\n                    <ul>\r\n                      <li class=\"formbold-step-menu1 active\">\r\n                        <span>1<\/span>Produits\r\n                      <\/li>\r\n                      <li class=\"formbold-step-menu2\"><span>2<\/span>Mat\u00e9riaux<\/li>\r\n                      <li class=\"formbold-step-menu3\"><span>3<\/span>Ouvertures<\/li>\r\n                      <li class=\"formbold-step-menu4\"><span>4<\/span>Couleurs<\/li>\r\n                      <li class=\"formbold-step-menu5\"><span>5<\/span>Dimensions<\/li>\r\n                      <li class=\"formbold-step-menu6\">\r\n                        <span>6<\/span>Infos personnelles\r\n                      <\/li>\r\n                    <\/ul>\r\n                  <\/div>\r\n\r\n                  <!-- STEP 1 -->\r\n                  <div class=\"formbold-form-step-1 active\">\r\n                    <h3 class = \"title-step-1\">Quels produits recherchez-vous ?<\/h3>\r\n                    <p id=\"error-step1\" class=\"formbold-error-message\">\r\n                      <span class=\"error-text\"><\/span>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"formbold-error-close-btn\"\r\n                        aria-label=\"Close\"\r\n                      >\r\n                        &times;\r\n                      <\/button>\r\n                    <\/p>\r\n                    <div class=\"formbold-product-grid\">\r\n                      <div class=\"formbold-product-card\" data-type=\"fenetres\">\r\n                        <img decoding=\"async\"\r\n                          src=\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2025\/05\/fenetre.png\"\r\n                          alt=\"Fen\u00eatres\"\r\n                        \/>\r\n                        <p>Fen\u00eatres<\/p>\r\n                        <div class=\"product-counter\">\r\n                          <button type=\"button\">-<\/button><span>0<\/span\r\n                          ><button type=\"button\">+<\/button>\r\n                        <\/div>\r\n                      <\/div>\r\n                      <div class=\"formbold-product-card\" data-type=\"portes-fenetres\">\r\n                        <img decoding=\"async\"\r\n                          src=\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2025\/05\/porte_fenetre.png\"\r\n                          alt=\"Portes-Fen\u00eatres\"\r\n                        \/>\r\n                        <p>Portes-Fen\u00eatres<\/p>\r\n                        <div class=\"product-counter\">\r\n                          <button type=\"button\">-<\/button><span>0<\/span\r\n                          ><button type=\"button\">+<\/button>\r\n                        <\/div>\r\n                      <\/div>\r\n                      <div class=\"formbold-product-card\" data-type=\"volets\">\r\n                        <img decoding=\"async\"\r\n                          src=\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2025\/05\/volets.png\"\r\n                          alt=\"Volets\"\r\n                        \/>\r\n                        <p>Volets<\/p>\r\n                        <div class=\"product-counter\">\r\n                          <button type=\"button\">-<\/button><span>0<\/span\r\n                          ><button type=\"button\">+<\/button>\r\n                        <\/div>\r\n                      <\/div>\r\n                      <div class=\"formbold-product-card\" data-type=\"portes\">\r\n                        <img decoding=\"async\"\r\n                          src=\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2025\/05\/porte.png\"\r\n                          alt=\"Portes\"\r\n                        \/>\r\n                        <p>Portes<\/p>\r\n                        <div class=\"product-counter\">\r\n                          <button type=\"button\">-<\/button><span>0<\/span\r\n                          ><button type=\"button\">+<\/button>\r\n                        <\/div>\r\n                      <\/div>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  <!-- STEP 2 -->\r\n                  <div class=\"formbold-form-step-2\">\r\n                    <h3 class = \"title-step-2\">Choisissez un mat\u00e9riau pour chaque produit<\/h3>\r\n                    <p id=\"error-step2\" class=\"formbold-error-message\">\r\n                      <span class=\"error-text\"><\/span>\r\n                      <button type=\"button\" class=\"formbold-error-close-btn\" aria-label=\"Close\">&times;<\/button>\r\n                    <\/p>\r\n                    <div id=\"materials-container\" class=\"formbold-dynamic-step-container\"><\/div>\r\n                  <\/div>\r\n\r\n                  <!-- STEP 3 -->\r\n                  <div class=\"formbold-form-step-3\">\r\n                    <h3 class = \"title-step-3\">Quel type d'ouverture pour chaque produit ?<\/h3>\r\n                    <p id=\"error-step3\" class=\"formbold-error-message\">\r\n                      <span class=\"error-text\"><\/span>\r\n                      <button type=\"button\" class=\"formbold-error-close-btn\" aria-label=\"Close\">&times;<\/button>\r\n                    <\/p>\r\n                    <div id=\"openings-container\" class=\"formbold-dynamic-step-container\"><\/div>\r\n                  <\/div>\r\n\r\n                  <!-- STEP 4 -->\r\n                  <div class=\"formbold-form-step-4\">\r\n                    <h3 class = \"title-step-4\">Quelle couleur pour chaque produit ?<\/h3>\r\n                    <p id=\"error-step4\" class=\"formbold-error-message\">\r\n                      <span class=\"error-text\"><\/span>\r\n                      <button type=\"button\" class=\"formbold-error-close-btn\" aria-label=\"Close\">&times;<\/button>\r\n                    <\/p>\r\n                    <div id=\"colors-container\" class=\"formbold-dynamic-step-container\"><\/div>\r\n                  <\/div>\r\n\r\n                  <!-- STEP 5 -->\r\n                  <div class=\"formbold-form-step-5\">\r\n                    <h3 class = \"title-step-5\">Dimensions (cm)<\/h3>\r\n                    <p id=\"error-step5\" class=\"formbold-error-message\">\r\n                      <span class=\"error-text\"><\/span>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"formbold-error-close-btn\"\r\n                        aria-label=\"Close\"\r\n                      >\r\n                        &times;\r\n                      <\/button>\r\n                    <\/p>\r\n                    <div\r\n                      id=\"dimensions-container\"\r\n                      class=\"formbold-dimensions-container\"\r\n                    ><\/div>\r\n                  <\/div>\r\n\r\n                  <!-- STEP 6 - Personal Info -->\r\n                  <div class=\"formbold-form-step-6\">\r\n                    <h3>Vos informations personnelles<\/h3>\r\n                    <p id=\"error-step6\" class=\"formbold-error-message\">\r\n                      <span class=\"error-text\"><\/span>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"formbold-error-close-btn\"\r\n                        aria-label=\"Close\"\r\n                      >\r\n                        &times;\r\n                      <\/button>\r\n                    <\/p>\r\n                    <!-- Row 1: Nom & Pr\u00e9nom -->\r\n                    <div class=\"formbold-field-row\">\r\n                      <div class=\"formbold-input-group\">\r\n                        <label for=\"nom\">Nom:<\/label>\r\n                        <input type=\"text\" id=\"nom\" name=\"nom\" required \/>\r\n                      <\/div>\r\n                      <div class=\"formbold-input-group\">\r\n                        <label for=\"prenom\">Pr\u00e9nom:<\/label>\r\n                        <input type=\"text\" id=\"prenom\" name=\"prenom\" required \/>\r\n                      <\/div>\r\n                    <\/div>\r\n                    <!-- Row 2: Email & T\u00e9l\u00e9phone -->\r\n                    <div class=\"formbold-field-row\">\r\n                      <div class=\"formbold-input-group\">\r\n                        <label for=\"email\">Adresse mail:<\/label>\r\n                        <input type=\"email\" id=\"email\" name=\"email\" required \/>\r\n                      <\/div>\r\n                      <div class=\"formbold-input-group\">\r\n                        <label for=\"telephone\">Num\u00e9ro de t\u00e9l\u00e9phone:<\/label>\r\n                        <input type=\"tel\" id=\"telephone\" name=\"telephone\" required \/>\r\n                      <\/div>\r\n                    <\/div>\r\n                    <!-- Row 3: Adresse & Code Postal -->\r\n                    <div class=\"formbold-field-row\">\r\n                      <div class=\"formbold-input-group\">\r\n                        <label for=\"adresse\">Adresse postale:<\/label>\r\n                        <input type=\"text\" id=\"adresse\" name=\"adresse\" required \/>\r\n                      <\/div>\r\n                      <div class=\"formbold-input-group\">\r\n                        <label for=\"code_postal\">Code postal:<\/label>\r\n                        <input\r\n                          type=\"text\"\r\n                          id=\"code_postal\"\r\n                          name=\"code_postal\"\r\n                          pattern=\"\\\\d{5}\"\r\n                          title=\"Entrez un code postal \u00e0 5 chiffres\"\r\n                          required\r\n                        \/>\r\n                      <\/div>\r\n                    <\/div>\r\n                    <!-- Message Field -->\r\n                    <div class=\"formbold-input-group\">\r\n                      <label for=\"message\">Message (facultatif):<\/label>\r\n                      <textarea id=\"message\" name=\"message\" rows=\"4\"><\/textarea>\r\n                    <\/div>\r\n                  <\/div>\r\n                  <input type=\"hidden\" name=\"action\" value=\"envoyer_form\" \/>\r\n\r\n                  <!-- Nav boutons -->\r\n                  <div class=\"formbold-form-btn-wrapper\">\r\n                    <div class=\"btn-left\">\r\n                      <button type=\"button\" class=\"formbold-back-btn\">Retour<\/button>\r\n                    <\/div>\r\n                    <div class=\"btn-right\">\r\n                      <button type=\"button\" class=\"formbold-btn\">Suivant<\/button>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/form>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        `;\r\n        this._initLogic();\r\n      }\r\n\r\n      _initLogic() {\r\n        const root = this.shadow;\r\n        const ajax_url = \"https:\/\/hygge-constructions.fr\/wp-admin\/admin-ajax.php\";\r\n\r\n        const MIN_DIM = 50;\r\n        const MAX_WIDTH_DIM = 400;\r\n        const MAX_HEIGHT_DIM = 350;\r\n\r\n        const form = root.getElementById(\"multiForm\");\r\n        const error1 = root.getElementById(\"error-step1\");\r\n        const error2 = root.getElementById(\"error-step2\");\r\n        const error3 = root.getElementById(\"error-step3\");\r\n        const error4 = root.getElementById(\"error-step4\");\r\n        const error5 = root.getElementById(\"error-step5\");\r\n        const error6 = root.getElementById(\"error-step6\");\r\n\r\n        const btnNext = root.querySelector(\".formbold-btn\");\r\n        const btnBack = root.querySelector(\".formbold-back-btn\");\r\n\r\n        const menus = [\r\n          root.querySelector(\".formbold-step-menu1\"),\r\n          root.querySelector(\".formbold-step-menu2\"),\r\n          root.querySelector(\".formbold-step-menu3\"),\r\n          root.querySelector(\".formbold-step-menu4\"),\r\n          root.querySelector(\".formbold-step-menu5\"),\r\n          root.querySelector(\".formbold-step-menu6\"),\r\n        ];\r\n        const steps = [\r\n          root.querySelector(\".formbold-form-step-1\"),\r\n          root.querySelector(\".formbold-form-step-2\"),\r\n          root.querySelector(\".formbold-form-step-3\"),\r\n          root.querySelector(\".formbold-form-step-4\"),\r\n          root.querySelector(\".formbold-form-step-5\"),\r\n          root.querySelector(\".formbold-form-step-6\"),\r\n        ];\r\n        let current = 0;\r\n\r\n        function showStep(i) {\r\n          menus.forEach((m, idx) => {\r\n            m.classList.toggle(\"active\", idx === i);\r\n            m.classList.toggle(\"completed\", idx < i);\r\n          });\r\n          steps.forEach((s, idx) => s.classList.toggle(\"active\", idx === i));\r\n          btnBack.classList.toggle(\"active\", i > 0);\r\n          btnNext.textContent =\r\n            i === steps.length - 1 ? \"Submit\" : \"Suivant\";\r\n        }\r\n        showStep(current);\r\n\r\n        root\r\n          .querySelectorAll(\".formbold-product-card\")\r\n          .forEach((card) => {\r\n            const productCounter = card.querySelector(\".product-counter\");\r\n            if (!productCounter) {\r\n              \/\/ console.error(\"Product counter div not found in card:\", card);\r\n              return; \r\n            }\r\n\r\n            const span = productCounter.querySelector(\"span\");\r\n            const buttons = productCounter.querySelectorAll(\"button\");\r\n\r\n            if (!span || buttons.length < 2) {\r\n              \/\/ console.error(\"Span or buttons not found in product counter:\", productCounter);\r\n              return; \r\n            }\r\n            const [minus, plus] = buttons;\r\n            \r\n            const hid = document.createElement(\"input\");\r\n            hid.type = \"hidden\";\r\n            hid.name = card.dataset.type;\r\n            hid.value = \"0\";\r\n            card.appendChild(hid); \/\/ Corrected: append to card, not productCounter\r\n\r\n            function upd(v) {\r\n              span.textContent = v;\r\n              hid.value = v;\r\n              card.classList.toggle(\"has-value\", v > 0);\r\n            }\r\n            minus.addEventListener(\"click\", (e) => {\r\n              e.stopPropagation();\r\n              let v = +span.textContent;\r\n              if (v > 0) upd(v - 1);\r\n            });\r\n            plus.addEventListener(\"click\", (e) => {\r\n              e.stopPropagation();\r\n              upd(+span.textContent + 1);\r\n            });\r\n            \/\/ Corrected: Listener should be on the card itself\r\n            card.addEventListener(\"click\", (e) => {\r\n              if (e.target.closest(\".product-counter\")) return; \r\n              upd(+span.textContent + 1); \r\n            });\r\n          });\r\n\r\n        const materialData = [\r\n          { name: \"PVC\", img: \"https:\/\/img.icons8.com\/ios\/100\/window.png\", desc: \"\" },\r\n          { name: \"Aluminium\", img: \"https:\/\/img.icons8.com\/ios\/100\/open-window.png\", desc: \"\" },\r\n          { name: \"Bois\", img: \"https:\/\/img.icons8.com\/ios\/100\/roller-shutter.png\", desc: \"\" }\r\n        ];\r\n\r\n        const openingData = [\r\n          { name: \"Battant\", img: \"https:\/\/example.com\/battant.png\", desc: \"Classique\" },\r\n          { name: \"Oscillo-Battant\", img: \"https:\/\/example.com\/oscillo.png\", desc: \"Complet\" },\r\n          { name: \"Coulissant\", img: \"https:\/\/example.com\/coulissant.png\", desc: \"Gain de place\" },\r\n          { name: \"Autres\", img: \"https:\/\/example.com\/autres.png\", desc: \"Complexe\" }\r\n        ];\r\n\r\n        const colorData = [\r\n          { name: \"Blanc\", img: \"https:\/\/img.icons8.com\/ios\/100\/ffffff-window.png\", desc: \"Standard\" },\r\n          { name: \"Gris anthracite\", img: \"https:\/\/img.icons8.com\/ios\/100\/multi-window.png\", desc: \"Moderne\" },\r\n          { name: \"Noir\", img: \"https:\/\/img.icons8.com\/ios\/100\/multi-window.png\", desc: \"\u00c9l\u00e9gant\" },\r\n          { name: \"Beige\", img: \"https:\/\/img.icons8.com\/ios\/100\/multi-window.png\", desc: \"Classique\" },\r\n          { name: \"Couleur\", img: \"https:\/\/img.icons8.com\/ios\/100\/multi-window.png\", desc: \"+100 nuances\" }\r\n        ];\r\n\r\n        function createChoiceDropdown(optionsData, selectName, productIndex, productTypeLabel, defaultOptionText = \"S\u00e9lectionnez...\") {\r\n          const select = document.createElement('select');\r\n          select.classList.add('formbold-dynamic-select');\r\n          select.name = selectName;\r\n          select.required = true;\r\n\r\n          const defaultOption = document.createElement('option');\r\n          defaultOption.value = \"\";\r\n          defaultOption.textContent = defaultOptionText;\r\n          defaultOption.disabled = true;\r\n          defaultOption.selected = true;\r\n          select.appendChild(defaultOption);\r\n\r\n          optionsData.forEach(optionData => {\r\n            const option = document.createElement('option');\r\n            option.value = optionData.name;\r\n            option.textContent = optionData.name + (optionData.desc ? ` (${optionData.desc})` : '');\r\n            select.appendChild(option);\r\n          });\r\n          return select;\r\n        }\r\n\r\n        function populateDynamicChoiceStep(containerId, stepTitlePrefix, choiceData, choiceType, inputNamePrefix) {\r\n          const container = root.getElementById(containerId);\r\n          container.innerHTML = '';\r\n\r\n          let productItemCounter = 0;\r\n          [\"fenetres\", \"portes-fenetres\", \"volets\", \"portes\"].forEach(type => {\r\n            const qtyInput = form.querySelector(`input[name=\"${type}\"]`);\r\n            const qty = qtyInput ? +qtyInput.value : 0;\r\n\r\n            for (let i = 1; i <= qty; i++) {\r\n              productItemCounter++;\r\n              const productTypeLabel = type === \"portes-fenetres\" ? \"Porte-Fen\u00eatre\" :\r\n                                     type === \"volets\" ? \"Volet\" :\r\n                                     type === \"portes\" ? \"Porte\" : \"Fen\u00eatre\";\r\n              const itemLabel = `${productTypeLabel} ${i}`;\r\n\r\n              const itemWrapper = document.createElement('div');\r\n              itemWrapper.classList.add('dimension-item');\r\n\r\n              const itemHeading = document.createElement('h4');\r\n              itemHeading.textContent = `${itemLabel}: ${stepTitlePrefix}`;\r\n              itemHeading.classList.add('dimension-item-heading');\r\n              itemWrapper.appendChild(itemHeading);\r\n\r\n              const selectElementName = `${inputNamePrefix}_${productItemCounter}_${choiceType}`;\r\n              const dropdown = createChoiceDropdown(choiceData, selectElementName, productItemCounter, productTypeLabel, `Choisissez ${stepTitlePrefix.toLowerCase()}...`);\r\n              \r\n              const selectWrapper = document.createElement('div');\r\n              selectWrapper.classList.add('formbold-input-group');\r\n              selectWrapper.appendChild(dropdown);\r\n\r\n              itemWrapper.appendChild(selectWrapper);\r\n              container.appendChild(itemWrapper);\r\n            }\r\n          });\r\n        }\r\n\r\n        function populateMaterials() {\r\n          populateDynamicChoiceStep('materials-container', 'Mat\u00e9riau', materialData, 'material', 'material');\r\n        }\r\n        function populateOpenings() {\r\n          populateDynamicChoiceStep('openings-container', 'Type d\\'ouverture', openingData, 'opening', 'openingType');\r\n        }\r\n        function populateColors() {\r\n          populateDynamicChoiceStep('colors-container', 'Couleur', colorData, 'color', 'colorChoice');\r\n        }\r\n\r\n        function populateDimensions() {\r\n          const container = root.getElementById(\"dimensions-container\");\r\n          container.innerHTML = \"\";\r\n          [\"fenetres\", \"portes-fenetres\", \"volets\", \"portes\"].forEach(\r\n            (type) => {\r\n              const qtyInput = form.querySelector(`input[name=\"${type}\"]`);\r\n              const qty = qtyInput ? +qtyInput.value : 0;\r\n\r\n              for (let i = 1; i <= qty; i++) {\r\n                const itemWrapper = document.createElement(\"div\");\r\n                itemWrapper.classList.add(\"dimension-item\");\r\n\r\n                const labelType =\r\n                  type === \"portes-fenetres\"\r\n                    ? \"Porte-Fen\u00eatre\"\r\n                    : type === \"volets\"\r\n                    ? \"Volet\"\r\n                    : type === \"portes\"\r\n                    ? \"Porte\"\r\n                    : \"Fen\u00eatre\";\r\n\r\n                const itemHeading = document.createElement(\"h4\");\r\n                itemHeading.textContent = `${labelType} ${i}`;\r\n                itemHeading.classList.add(\"dimension-item-heading\");\r\n                itemWrapper.appendChild(itemHeading);\r\n\r\n                const row = document.createElement(\"div\");\r\n                row.classList.add(\"dimensions-row\");\r\n\r\n                [\"largeur\", \"hauteur\"].forEach((dim) => {\r\n                  const wrap = document.createElement(\"div\");\r\n                  const lbl = document.createElement(\"label\");\r\n                  lbl.textContent = `${\r\n                    dim.charAt(0).toUpperCase() + dim.slice(1)\r\n                  } (cm)`;\r\n                  const inp = document.createElement(\"input\");\r\n                  inp.type = \"number\";\r\n                  inp.min = \"0\";\r\n                  inp.required = true;\r\n                  inp.name = `${type}_${i}_${dim}`;\r\n                  wrap.append(lbl, inp);\r\n                  row.append(wrap);\r\n                });\r\n                itemWrapper.appendChild(row);\r\n                container.append(itemWrapper);\r\n              }\r\n            }\r\n          );\r\n        }\r\n\r\n        function displayError(stepIndex, message) {\r\n          const errorP = steps[stepIndex].querySelector(\r\n            \".formbold-error-message\"\r\n          );\r\n          const errorTextSpan = errorP?.querySelector(\".error-text\");\r\n          if (errorTextSpan) {\r\n            errorTextSpan.textContent = message;\r\n            errorP.classList.add(\"is-visible\");\r\n          } else {\r\n            console.error(`Error span not found for step ${stepIndex + 1} inside shadow DOM`);\r\n          }\r\n        }\r\n\r\n        function clearError(stepIndex) {\r\n          const errorP = steps[stepIndex].querySelector(\r\n            \".formbold-error-message\"\r\n          );\r\n          const errorTextSpan = errorP?.querySelector(\".error-text\");\r\n          if (errorTextSpan) {\r\n            errorTextSpan.textContent = \"\";\r\n            errorP.classList.remove(\"is-visible\");\r\n          }\r\n          steps[stepIndex].querySelectorAll('.error-highlight').forEach(el => el.classList.remove('error-highlight'));\r\n        }\r\n\r\n        btnNext.addEventListener(\"click\", (e) => {\r\n          e.preventDefault();\r\n          let validationPassed = false;\r\n          let firstInvalidField = null;\r\n\r\n          steps[current].querySelectorAll('.error-highlight').forEach(el => el.classList.remove('error-highlight'));\r\n\r\n          if (current === 0) {\r\n            const any = Array.from(\r\n              form.querySelectorAll(\r\n                \".formbold-product-card input[type=hidden]\"\r\n              )\r\n            ).some((i) => +i.value > 0);\r\n            if (!any) {\r\n              displayError(0, \"Veuillez s\u00e9lectionner au moins un produit.\");\r\n            } else {\r\n              clearError(0);\r\n              validationPassed = true;\r\n            }\r\n          } else if (current === 1) {\r\n            clearError(1);\r\n            const materialSelects = form.querySelectorAll('#materials-container select.formbold-dynamic-select');\r\n            let allMaterialsValid = true;\r\n            firstInvalidField = null;\r\n            materialSelects.forEach(select => {\r\n              if (select.value.trim() === '') {\r\n                select.classList.add('error-highlight');\r\n                if (!firstInvalidField) firstInvalidField = select;\r\n                allMaterialsValid = false;\r\n              } else {\r\n                select.classList.remove('error-highlight');\r\n              }\r\n            });\r\n            if (!allMaterialsValid) { \r\n              displayError(1, \"Veuillez choisir un mat\u00e9riau pour chaque produit.\"); \r\n            } else { \r\n              validationPassed = true; \r\n            }\r\n          } else if (current === 2) {\r\n            clearError(2);\r\n            const openingSelects = form.querySelectorAll('#openings-container select.formbold-dynamic-select');\r\n            let allOpeningsValid = true;\r\n            firstInvalidField = null;\r\n            openingSelects.forEach(select => {\r\n              if (select.value.trim() === '') {\r\n                select.classList.add('error-highlight');\r\n                if (!firstInvalidField) firstInvalidField = select;\r\n                allOpeningsValid = false;\r\n              } else {\r\n                select.classList.remove('error-highlight');\r\n              }\r\n            });\r\n            if (!allOpeningsValid) { \r\n              displayError(2, \"Veuillez choisir un type d\\'ouverture pour chaque produit.\"); \r\n            } else { \r\n              validationPassed = true; \r\n            }\r\n          } else if (current === 3) {\r\n            clearError(3);\r\n            const colorSelects = form.querySelectorAll('#colors-container select.formbold-dynamic-select');\r\n            let allColorsValid = true;\r\n            firstInvalidField = null;\r\n            colorSelects.forEach(select => {\r\n              if (select.value.trim() === '') {\r\n                select.classList.add('error-highlight');\r\n                if (!firstInvalidField) firstInvalidField = select;\r\n                allColorsValid = false;\r\n              } else {\r\n                select.classList.remove('error-highlight');\r\n              }\r\n            });\r\n            if (!allColorsValid) { \r\n              displayError(3, \"Veuillez choisir une couleur pour chaque produit.\"); \r\n            } else { \r\n              validationPassed = true; \r\n            }\r\n          }\r\n\r\n          if (current < 4 && validationPassed) {\r\n            clearError(current);\r\n            current++;\r\n            if (current === 1) { populateMaterials(); }\r\n            else if (current === 2) { populateOpenings(); }\r\n            else if (current === 3) { populateColors(); }\r\n            else if (current === 4) { populateDimensions(); }\r\n            showStep(current);\r\n            return;\r\n          }\r\n\r\n          if (current === 4) {\r\n            clearError(4);\r\n            const dimensionItems = form.querySelectorAll(\".formbold-dimensions-container .dimension-item\");\r\n            let allDimensionsValid = true;\r\n            let firstInvalidDimensionField = null;\r\n\r\n            dimensionItems.forEach(item => {\r\n              const largeurInput = item.querySelector('input[name*=\"_largeur\"]');\r\n              const hauteurInput = item.querySelector('input[name*=\"_hauteur\"]');\r\n              \r\n              const largeurValue = largeurInput.value.trim() === \"\" ? NaN : +largeurInput.value;\r\n              const hauteurValue = hauteurInput.value.trim() === \"\" ? NaN : +hauteurInput.value;\r\n\r\n              if (!(largeurValue >= MIN_DIM && largeurValue <= MAX_WIDTH_DIM)) {\r\n                allDimensionsValid = false;\r\n                largeurInput.classList.add('error-highlight');\r\n                if (!firstInvalidDimensionField) firstInvalidDimensionField = largeurInput;\r\n              } else {\r\n                largeurInput.classList.remove('error-highlight');\r\n              }\r\n\r\n              if (!(hauteurValue >= MIN_DIM && hauteurValue <= MAX_HEIGHT_DIM)) {\r\n                allDimensionsValid = false;\r\n                hauteurInput.classList.add('error-highlight');\r\n                if (!firstInvalidDimensionField) firstInvalidDimensionField = hauteurInput;\r\n              } else {\r\n                hauteurInput.classList.remove('error-highlight');\r\n              }\r\n            });\r\n\r\n            if (!allDimensionsValid) {\r\n              displayError(4, `Veuillez v\u00e9rifier les dimensions. Largeur: ${MIN_DIM}-${MAX_WIDTH_DIM}cm. Hauteur: ${MIN_DIM}-${MAX_HEIGHT_DIM}cm.`);\r\n              firstInvalidDimensionField?.focus();\r\n              return;\r\n            }\r\n            current = 5;\r\n            showStep(current);\r\n            return;\r\n          }\r\n\r\n          if (current === 5) {\r\n            clearError(5);\r\n            const requiredInfo = form.querySelectorAll(\r\n              \".formbold-form-step-6 [required]\"\r\n            );\r\n            let allInfoValid = true;\r\n            let firstInvalidField = null;\r\n            let errorMessageForDisplay = \"Veuillez corriger les champs en rouge.\";\r\n\r\n            requiredInfo.forEach((input) => {\r\n              let isCurrentInputValid = true;\r\n              let currentInputSpecificError = \"\";\r\n              const fieldName = input.name;\r\n              const value = input.value.trim();\r\n\r\n              if (!value) {\r\n                isCurrentInputValid = false;\r\n                currentInputSpecificError = \"Ce champ est requis.\";\r\n              } else {\r\n                if (fieldName === \"email\" && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(value)) {\r\n                  isCurrentInputValid = false;\r\n                  currentInputSpecificError = \"Veuillez entrer une adresse mail valide.\";\r\n                } else if (fieldName === \"telephone\" && !\/^\\d{7,}$\/.test(value.replace(\/\\s|-|\\.\/g, \"\"))) {\r\n                  isCurrentInputValid = false;\r\n                  currentInputSpecificError = \"Veuillez entrer un num\u00e9ro de t\u00e9l\u00e9phone valide (au moins 7 chiffres).\";\r\n                } else if (fieldName === \"code_postal\" && input.pattern && !new RegExp(`^${input.pattern}$`).test(value)) {\r\n                  isCurrentInputValid = false;\r\n                  currentInputSpecificError = input.title || \"Veuillez entrer un code postal valide.\";\r\n                } else if (fieldName === \"adresse\") {\r\n                  if (value.length < 3) {\r\n                    isCurrentInputValid = false;\r\n                    currentInputSpecificError = \"L\\'adresse postale semble trop courte (minimum 3 caract\u00e8res).\";\r\n                  } else if (!\/\\d\/.test(value) || !\/[a-zA-Z\u00c0-\u00ff]\/.test(value)) {\r\n                    isCurrentInputValid = false;\r\n                    currentInputSpecificError = \"L\\'adresse postale doit contenir des lettres et des chiffres (ex: 123 Rue de Paris).\";\r\n                  }\r\n                } else if (fieldName === \"nom\" || fieldName === \"prenom\") {\r\n                  if (\/[\\d]\/.test(value)) {\r\n                    isCurrentInputValid = false;\r\n                    currentInputSpecificError = `Le ${fieldName} ne doit pas contenir de chiffres.`;\r\n                  } else if (value.length < 2) {\r\n                    isCurrentInputValid = false;\r\n                    currentInputSpecificError = `Le ${fieldName} semble trop court (minimum 2 caract\u00e8res).`;\r\n                  }\r\n                }\r\n              }\r\n\r\n              if (!isCurrentInputValid) {\r\n                allInfoValid = false;\r\n                input.classList.add(\"error-highlight\");\r\n                if (!firstInvalidField) {\r\n                  firstInvalidField = input;\r\n                  errorMessageForDisplay = currentInputSpecificError || \"Ce champ contient une erreur.\";\r\n                }\r\n              } else {\r\n                input.classList.remove(\"error-highlight\");\r\n              }\r\n            });\r\n\r\n            if (!allInfoValid) {\r\n              displayError(5, errorMessageForDisplay);\r\n              firstInvalidField?.focus();\r\n              return;\r\n            }\r\n\r\n            console.log(\"Submitting form...\");\r\n            const formData = new FormData(form);\r\n\r\n            form\r\n              .querySelectorAll(\".error-highlight\")\r\n              .forEach((el) => el.classList.remove(\"error-highlight\"));\r\n            const errorContainerStep6 = root.getElementById(\"error-step6\");\r\n            if(errorContainerStep6) errorContainerStep6.classList.remove(\"is-visible\");\r\n\r\n            btnNext.textContent = \"Envoi en cours...\";\r\n            btnNext.disabled = true;\r\n            btnBack.disabled = true;\r\n\r\n            fetch(ajax_url, {\r\n              method: \"POST\",\r\n              body: formData,\r\n              headers: {\r\n                Accept: \"application\/json\",\r\n              },\r\n            })\r\n            .then((response) => {\r\n              if (response.ok) {\r\n                return response.json();\r\n              } else {\r\n                return response\r\n                  .json()\r\n                  .then((data) => {\r\n                    let errorMessage = \"Erreur serveur.\";\r\n                    if (data && data.errors && data.errors.length > 0) {\r\n                      errorMessage = data.errors\r\n                        .map((err) => err.message)\r\n                        .join(\", \");\r\n                    } else if (data && data.error) {\r\n                      errorMessage = data.error;\r\n                    }\r\n                    throw new Error(errorMessage);\r\n                  })\r\n                  .catch(() => {\r\n                    throw new Error(\r\n                      `Erreur ${response.status}: ${response.statusText}`\r\n                    );\r\n                  });\r\n              }\r\n            })\r\n            .then((data) => {\r\n              console.log(\"Success:\", data);\r\n              form.reset();\r\n              form\r\n                .querySelectorAll(\".error-highlight\")\r\n                .forEach((el) => el.classList.remove(\"error-highlight\"));\r\n              steps.forEach((_, index) => clearError(index));\r\n              root\r\n                .querySelectorAll(\".formbold-product-card\")\r\n                .forEach((c) => c.classList.remove(\"has-value\"));\r\n              root\r\n                .querySelectorAll(\r\n                  \".formbold-material-card, .formbold-opening-card, .formbold-color-card\"\r\n                )\r\n                .forEach((c) => c.classList.remove(\"active\"));\r\n              current = 0;\r\n              showStep(current);\r\n              window.location.href = 'https:\/\/hygge-constructions.fr\/remerciements\/';\r\n            })\r\n            .catch((error) => {\r\n              console.error(\"Error:\", error);\r\n              displayError(5, error.message || \"Une erreur est survenue lors de l'envoi.\");\r\n            })\r\n            .finally(() => {\r\n              btnNext.textContent =\r\n                current === 5 ? \"Submit\" : \"Next Step \u2192\";\r\n              btnNext.disabled = false;\r\n              btnBack.disabled = false;\r\n            });\r\n          }\r\n\r\n          if ([1, 2, 3].includes(current) && !validationPassed) {\r\n            firstInvalidField?.focus();\r\n          }\r\n        });\r\n\r\n        btnBack.addEventListener(\"click\", (e) => {\r\n          e.preventDefault();\r\n          if (current > 0) {\r\n            clearError(current);\r\n            current--;\r\n            showStep(current);\r\n          }\r\n        });\r\n\r\n        root\r\n          .querySelectorAll(\".formbold-error-close-btn\")\r\n          .forEach((button) => {\r\n            button.addEventListener(\"click\", (e) => {\r\n              const errorP = e.target.closest(\".formbold-error-message\");\r\n              if (errorP) {\r\n                const errorTextSpan = errorP.querySelector(\".error-text\");\r\n                if (errorTextSpan) {\r\n                  errorTextSpan.textContent = \"\";\r\n                }\r\n                errorP.classList.remove(\"is-visible\");\r\n              }\r\n            });\r\n          });\r\n      }\r\n    }\r\n    customElements.define('my-multiform', MyMultiForm);\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-7cfcaa5 e-flex e-con-boxed e-con e-parent\" data-id=\"7cfcaa5\" 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-847fefd elementor-widget elementor-widget-spacer\" data-id=\"847fefd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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>Obtenir une estimation En 6 \u00e9tapes simples, estimez les fen\u00eatres de vos r\u00eaves et recevez une proposition personnalis\u00e9e sous 48 h. Important \u2013 Estimation les r\u00e9sultats obtenus via ce formulaire sont fournis \u00e0 titre indicatif. Ils ne constituent pas un devis contractuel et peuvent varier en fonction de la configuration r\u00e9elle, des mat\u00e9riaux choisis, des [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7257","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>formulaire-fenetre - Hygge Constructions<\/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:\/\/hygge-constructions.fr\/en\/formulaire-fenetre\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"formulaire-fenetre - Hygge Constructions\" \/>\n<meta property=\"og:description\" content=\"Obtenir une estimation En 6 \u00e9tapes simples, estimez les fen\u00eatres de vos r\u00eaves et recevez une proposition personnalis\u00e9e sous 48 h. Important \u2013 Estimation les r\u00e9sultats obtenus via ce formulaire sont fournis \u00e0 titre indicatif. Ils ne constituent pas un devis contractuel et peuvent varier en fonction de la configuration r\u00e9elle, des mat\u00e9riaux choisis, des [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hygge-constructions.fr\/en\/formulaire-fenetre\/\" \/>\n<meta property=\"og:site_name\" content=\"Hygge Constructions\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-27T12:46:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/09\/ISSY-5.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1680\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/\",\"url\":\"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/\",\"name\":\"formulaire-fenetre - Hygge Constructions\",\"isPartOf\":{\"@id\":\"https:\/\/hygge-constructions.fr\/#website\"},\"datePublished\":\"2025-05-03T12:29:09+00:00\",\"dateModified\":\"2025-05-27T12:46:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/hygge-constructions.fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"formulaire-fenetre\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hygge-constructions.fr\/#website\",\"url\":\"https:\/\/hygge-constructions.fr\/\",\"name\":\"Hygge Constructions\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hygge-constructions.fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hygge-constructions.fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hygge-constructions.fr\/#organization\",\"name\":\"Hygge Constructions\",\"url\":\"https:\/\/hygge-constructions.fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hygge-constructions.fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/08\/Logo-modifie.png\",\"contentUrl\":\"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/08\/Logo-modifie.png\",\"width\":196,\"height\":35,\"caption\":\"Hygge Constructions\"},\"image\":{\"@id\":\"https:\/\/hygge-constructions.fr\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"formulaire-fenetre - Hygge Constructions","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:\/\/hygge-constructions.fr\/en\/formulaire-fenetre\/","og_locale":"en_US","og_type":"article","og_title":"formulaire-fenetre - Hygge Constructions","og_description":"Obtenir une estimation En 6 \u00e9tapes simples, estimez les fen\u00eatres de vos r\u00eaves et recevez une proposition personnalis\u00e9e sous 48 h. Important \u2013 Estimation les r\u00e9sultats obtenus via ce formulaire sont fournis \u00e0 titre indicatif. Ils ne constituent pas un devis contractuel et peuvent varier en fonction de la configuration r\u00e9elle, des mat\u00e9riaux choisis, des [&hellip;]","og_url":"https:\/\/hygge-constructions.fr\/en\/formulaire-fenetre\/","og_site_name":"Hygge Constructions","article_modified_time":"2025-05-27T12:46:59+00:00","og_image":[{"width":1680,"height":1120,"url":"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/09\/ISSY-5.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/","url":"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/","name":"formulaire-fenetre - Hygge Constructions","isPartOf":{"@id":"https:\/\/hygge-constructions.fr\/#website"},"datePublished":"2025-05-03T12:29:09+00:00","dateModified":"2025-05-27T12:46:59+00:00","breadcrumb":{"@id":"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hygge-constructions.fr\/formulaire-fenetre\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hygge-constructions.fr\/formulaire-fenetre\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/hygge-constructions.fr\/"},{"@type":"ListItem","position":2,"name":"formulaire-fenetre"}]},{"@type":"WebSite","@id":"https:\/\/hygge-constructions.fr\/#website","url":"https:\/\/hygge-constructions.fr\/","name":"Hygge Constructions","description":"","publisher":{"@id":"https:\/\/hygge-constructions.fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hygge-constructions.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hygge-constructions.fr\/#organization","name":"Hygge Constructions","url":"https:\/\/hygge-constructions.fr\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hygge-constructions.fr\/#\/schema\/logo\/image\/","url":"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/08\/Logo-modifie.png","contentUrl":"https:\/\/hygge-constructions.fr\/wp-content\/uploads\/2023\/08\/Logo-modifie.png","width":196,"height":35,"caption":"Hygge Constructions"},"image":{"@id":"https:\/\/hygge-constructions.fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/pages\/7257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/comments?post=7257"}],"version-history":[{"count":364,"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/pages\/7257\/revisions"}],"predecessor-version":[{"id":8060,"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/pages\/7257\/revisions\/8060"}],"wp:attachment":[{"href":"https:\/\/hygge-constructions.fr\/en\/wp-json\/wp\/v2\/media?parent=7257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}