{"archived":0,"globalCss":".App {\n overflow:hidden !important;\n }","mainStage":0,"name":"Collecte de Lead Test","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/1163/1678801584_copy.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"-3px","left":"-1px"},"coverStyle":{"display":"none"},"iframeStyle":{},"wrapperClose":{"transition":"bottom ease .5s"},"wrapperHidden":{"height":"425px","width":"61px","right":"-30px","bottom":"7%","overflow":"hidden !important"},"wrapperOpen":{"transition":"bottom ease .5s"}},"htmlCloseButton":"\n\n<style>\n\n\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 35px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:white;\n width: 15px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n /*@media only screen and (max-width: 650px) {\n \t.perfmaker-sidebar-wrapper {\n width: 100% !important;\n \t}\n } */\n\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Roboto+Condensed&display=swap');\n \n .App>div{\n \toverflow:hidden;\n }\n.App{\n \toverflow:hidden;\n }\n\n .pm-root{\n animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n height: 90%;\n width: 100%;\n display: flex;\n align-items: center;\n overflow:hidden;\n justify-content: center;\n font-family: 'Roboto Condensed', sans-serif;\n }\n \n .container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n \n height: 100%;\n width: calc(100% - 70px);\n background-image: url(\"https://img.perfmaker.net/1163/1678717041_background.jpg\");\n background-repeat: no-repeat;\n background-size: cover;\n }\n \n .logo {\n position: absolute;\n right: 10px;\n top: 10px;\n width: 90px;\n }\n \n .pm-header{\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n cursor:pointer;\n align-items: center;\n position: absolute;\n left: -35px;\n top: 0;\n font-weight: medium;\n width: 35px;\n color: #fff;\n padding: 0 0 10px 3px;\n background-color: #90CAA1;\n font-size: calc(10px + 1vh);\n }\n\n .pm-right-container{\n height: 100%;\n width:100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .pm-logo{\n height: calc(35px + 10vh);\n margin-top: 5%;\n }\n .pm-title{\n text-align: center;\n font-weight: 400;\n max-width: 90%;\n font-weight: regular;\n line-height: 1.2em;\n font-size: calc(13px + 1vh);\n margin:1.5vh 0;\n }\n .pm-subtitle{\n text-align: center;\n font-weight: 300;\n color: black;\n line-height: 1.2em;\n width: 87.5%;\n font-size: calc(12px + 1vh);\n \tmargin:2vh 0;\n }\n .pm-subtitle span{\n font-family: 'DM Serif Display', serif;\n color: #90CAA1;\n font-size: calc(18px + 1vh);\n }\n .bottom-btn{\n \n width:50%;\n border:none;\n background-color:#90CAA1;\n color:white;\n text-transform:uppercase;\n font-size:12px;\n height: 35px;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n \n .perfmaker-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 80%;\n width:80%;\n margin-top:10vh;\n background-color: #fff;\n }\n .pm-input{\n box-shadow: 0px 3.7162160873413086px 11.148648262023926px 0px #0000001A;\n width:80%;\n height:calc(19px + 5vh);\n border: 0;\n text-align:left;\n outline:none;\n padding-left:3%;\n color:black;\n margin-bottom:2vh;\n }\n .input-bloc{\n \tdisplay:flex;\n align-items:center;\n justify-content:space-evenly;\n flex-direction: column;\n width:100%;\n position:relative;\n\n }\n ::placeholder{\n text-align:left;\n \tcolor:#AEADAD;\n font-size: calc(7px + 1vw);\n \tfont-weight:100;\n }\n\n .formfield-checkbox{\n \twidth:100%;\n font-size: calc(6px + .5vh);\n\n }\n .pm-checkbox{\n \tcursor:pointer;\n }\n p {\n margin:0;\n padding:0\n }\n \n .succes-btn{\n \twidth:70%;\n border:none;\n background-color:#004F9F;\n border-radius:4px;\n color:white;\n text-transform:uppercase;\n font-size:12px;\n padding:4vh 0;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n .perfmaker-form-success {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 80%;\n width:80%;\n margin-top:10vh;\n background-color: #fff;\n}\n \n \n .round{\n \tdisplay: flex;\n align-items: center;\n justify-content: center;\n margin-top: 2vh;\n width: 80%;\n margin-left: 10%;\n }\n \n .merci {\n text-align: center; \n \tmargin: 10% 0 5% 0;\n font-size: calc(12px + 1vh);\n }\n \n .merci span {\n \tfont-size: calc(18px + 1vh);\n line-height: 2em;\n }\n \n .code-description {\n \ttext-align: center; \n margin-bottom: 5%;\n font-size: calc(12px + 1vh);\n }\n \n \n \n .promo-wrapper {\n \tdisplay: flex;\n justify-content: center;\n width: 100%;\n }\n \n \n .code-promo-container {\n \tpadding: 7px 7px 12px 7px;\n \twidth: min-content;\n z-index: 100;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin: 5px 0 5px 0;\n position: relative;\n color: #90CAA1; \n text-transform: uppercase;\n font-weight: 400;\n font-size: calc(16px + 1vh);\n border: dashed 2px #90CAA1;\n text-align:center;\n border-radius:4px;\n }\n \n \n \n .popuptext {\n visibility: hidden;\n width: 120%;\n background-color: #FFF;\n color: #004F9F;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 85%;\n top: -63%;\n transform: translate(-50%, -50%);\n }\n .with-code{\n \tcolor:#90CAA1;\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #FFF transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n .copy-button{\n \tcolor:#004F9F;\n background-color:#90CAA1;\n font-size:17px;\n border:none;\n width:40%;\n margin:3vh;\n border-radius:4px;\n padding:2vh 0;\n cursor:pointer;\n text-transform:uppercase;\n \n }\n .code-promo-container button {\n display: block;\n \tmargin:0;\n height: 100%;\n width: 25%;\n background-color: transparent;\n border: none !important;\n cursor: pointer;\n \tmin-width: 20%;\n }\n \n .code-promo-container img {\n\t\theight: 20px;\n \tbackground: #90CAA1;\n \tpointer-events:none;\n \tpadding: 7px 5px;\n \tborder-radius: 5px;\n \tmargin-left: 10px;\n \tcursor: pointer;\n }\n \n .pm-header img {\n display: none;\n max-width: 20px;\n margin-top: 5px;\n }\n \n .pm-header .desktop {\n\twriting-mode: tb-rl;\n transform: rotate(-180deg);\n text-orientation: sideways-right;\n }\n \n .pm-header .mobile {\n\tdisplay: none;\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n text-orientation: sideways-right;\n }\n \n .lines{ \n z-index: 10000;\n animation: show 1.2s;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 35px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:white;\n width: 15px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n\n /*@media screen \n and (max-device-width: 480px) \n { \n .desktop {\n display: none;\n }\n \n .mobile {\n display: block; \n }\n }*/\n \n</style>\n\n<div class=\"pm-root\">\n<div class=\"container\">\n <img class=\"logo\" src=\"https://img.perfmaker.net/1163/1678791868_Logo_PDS_SansFerronerie_1_NOIR_WEB.webp\">\n <div class=\"pm-header perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\"> \n \n <div class=\"lines perfmaker-close-cross\" data-onclick=\"CLOSE_BUTTON_CLICK\">\n \n </div>\n <div class=\"desktop\">-10% sur votre première commande</div>\n \n <div class=\"mobile\">-10%</div>\n\t<img src=\"https://img.perfmaker.net/1163/1678875186_reduction.png\"/>\n \n </div>\n\n <div class=\"pm-right-container\">\n\n <form class=\"perfmaker-form\" data-onsubmit-action=\"FORM\">\n \n <h1 class=\"pm-title\">Des avantages et remises pour profiter de vos produits favoris plus souvent 💕</h1>\n <p class=\"pm-subtitle\">Abonnez-vous à notre newsletter et bénéficiez de <span>10%</span> sur votre première commande !</p>\n \n \t\t\t\n\t\t\n<div class=\"input-bloc\">\n <input id=\"email\"\n type=\"text\"\n name=\"email\"\n placeholder=\"E-mail\"\n class=\"perfmaker-form-field pm-input\"\n data-type=\"email\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; left:7%;'>*Votre adresse mail n'est pas valide</span>\" />\n\n \n </div>\n <div class=\"formfield-checkbox\">\n <div class=\"round\">\n <input \n type=\"checkbox\"\n id=\"optin\"\n name=\"optin\"\n class=\"perfmaker-form-field pm-checkbox\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; right:2%;'>*Champs requis</span>\"\n \t\t\t\tid=\"optin\" /><span class=\"conditions\">J’accepte de recevoir les communications de Panier des Sens.</span>\n <label for=\"optin\"></label>\n \n </div>\n \n</div>\n <button type=\"submit\" value=\"Submit\" class=\"bottom-btn perfmaker-action\">\n Je m'inscris\n </button> \n </form>\n <div class=\"perfmaker-form-success succes\">\n <p class=\"merci\"><span>Merci !</span><br>Votre inscription a bien été prise en compte. </p>\n \n <p class=\"code-description\">Voici votre code utilisable dès maintenant<br> pour votre 1ère commande :</p>\n \n <div class=\"promo-wrapper\"> \n <div class=\"code-promo-container\" id=\"copyButton\">\n <span class=\"promocode perfmaker-action\" data-onclick=\"KEEP_SIDEBAR_OPEN\" id=\"codePromo\">BIENVENUEFR10</span>\n <span class=\"popuptext\" id=\"myPopup\" style=\"font-size:10px\">Code copié !</span>\n <img src=\"https://img.perfmaker.net/1163/1678801196_copy.png\n \"/>\n </div> \n </div>\n \n <!--<button class=\"perfmaker-action bottom-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\">fermer\n </button>-->\n </div>\n </div>\n \n </div>\n \n </div>\n </div>","name":"Scène 1","notBlocking":true},{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/1163/1678801584_copy.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"-3px","right":"0px"},"coverStyle":{"display":"none"},"iframeStyle":{},"wrapperClose":{"transition":"bottom ease .5s"},"wrapperHidden":{"height":"425px","width":"460px","right":"-30px","bottom":"7%","overflow":"hidden !important"},"wrapperOpen":{"transition":"bottom ease .5s"}},"htmlCloseButton":"\n\n<style>\n \n @keyframes show {\n 0% {\n opacity:0;\n }\n 90% {\n opacity:0;\n }\n 100% {\n opacity:1;\n }\n}\n .perfmaker-close-cross{\n opacity:1;\n \tanimation : show .5s linear both !important;\n \n }\n \n .perfmaker-close-button {\n left: 0;\n }\n\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 35px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:white;\n width: 15px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n @media only screen and (max-width: 650px) {\n \t.perfmaker-sidebar-wrapper {\n width: 100% !important;\n \t}\n } \n\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Roboto+Condensed&display=swap');\n .App>div{\n \toverflow:hidden;\n height:100vh;\n }\n.App{\n \toverflow:hidden;\n }\n@keyframes slide-left {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n \n .pm-root{\n animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n height: 90%;\n width: 101%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Roboto Condensed', sans-serif;\n }\n \n .container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: calc(100% - 70px);\n background-image: url(\"https://img.perfmaker.net/1163/1678717041_background.jpg\");\n background-repeat: no-repeat;\n background-size: cover;\n }\n \n .logo {\n position: absolute;\n right: 10px;\n top: 10px;\n width: 90px;\n }\n \n .pm-header{\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n cursor:pointer;\n align-items: center;\n position: absolute;\n left: -35px;\n top: 0;\n font-weight: medium;\n width: 35px;\n color: #fff;\n padding: 25px 0 10px 0;\n background-color: #90CAA1;\n font-size: calc(10px + 1vh);\n }\n\n .pm-right-container{\n height: 100%;\n width:100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .pm-logo{\n height: calc(35px + 10vh);\n margin-top: 5%;\n }\n .pm-title{\n text-align: center;\n font-weight: 400;\n max-width: 90%;\n font-weight: regular;\n line-height: 1.2em;\n font-size: calc(13px + 1vh);\n margin:1.5vh 0;\n }\n .pm-subtitle{\n text-align: center;\n font-weight: 300;\n color: black;\n line-height: 1.2em;\n width: 87.5%;\n font-size: calc(12px + 1vh);\n \tmargin:2vh 0;\n }\n .pm-subtitle span{\n font-family: 'DM Serif Display', serif;\n color: #90CAA1;\n font-size: calc(18px + 1vh);\n }\n .bottom-btn{\n \n width:50%;\n border:none;\n background-color:#90CAA1;\n color:white;\n text-transform:uppercase;\n font-size:12px;\n height: 35px;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n \n .perfmaker-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 80%;\n width:80%;\n margin-top:10vh;\n background-color: #fff;\n }\n .pm-input{\n box-shadow: 0px 3.7162160873413086px 11.148648262023926px 0px #0000001A;\n width:80%;\n height:calc(19px + 5vh);\n border: 0;\n text-align:left;\n outline:none;\n padding-left:3%;\n color:black;\n margin-bottom:2vh;\n }\n .input-bloc{\n \tdisplay:flex;\n align-items:center;\n justify-content:space-evenly;\n flex-direction: column;\n width:100%;\n position:relative;\n\n }\n ::placeholder{\n text-align:left;\n \tcolor:#AEADAD;\n font-size: calc(7px + 1vw);\n \tfont-weight:100;\n }\n\n .formfield-checkbox{\n \twidth:100%;\n font-size: calc(6px + .6vh);\n\n }\n .pm-checkbox{\n \tcursor:pointer;\n }\n p {\n margin:0;\n padding:0\n }\n \n .succes-btn{\n \twidth:70%;\n border:none;\n background-color:#004F9F;\n border-radius:4px;\n color:white;\n text-transform:uppercase;\n font-family: \"Normartive\";\n font-size:12px;\n padding:4vh 0;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n .perfmaker-form-success {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 80%;\n width:80%;\n margin-top:10vh;\n background-color: #fff;\n}\n \n \n .round{\n \tdisplay: flex;\n align-items: center;\n justify-content: center;\n margin-top: 2vh;\n width: 80%;\n margin-left: 10%;\n }\n \n .merci {\n text-align: center; \n \tmargin: 10% 0 5% 0;\n font-size: calc(12px + 1vh);\n }\n \n .merci span {\n \tfont-size: calc(18px + 1vh);\n line-height: 2em;\n }\n \n .code-description {\n \ttext-align: center; \n margin-bottom: 5%;\n font-size: calc(12px + 1vh);\n }\n \n \n \n .promo-wrapper {\n \tdisplay: flex;\n justify-content: center;\n width: 100%;\n }\n \n \n .code-promo-container {\n \tpadding: 7px 7px 12px 7px;\n \twidth: min-content;\n z-index: 100;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin: 5px 0 5px 0;\n position: relative;\n color: #90CAA1; \n text-transform: uppercase;\n font-weight: 400;\n font-size: calc(16px + 1vh);\n border: dashed 2px #90CAA1;\n text-align:center;\n letter-spacing: .15em;\n border-radius:4px;\n }\n \n \n \n .popuptext {\n visibility: hidden;\n width: 120%;\n background-color: #FFF;\n color: #FFF;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 85%;\n width:50%;\n background-color: #90CAA1;\n top: -63%;\n transform: translate(-50%, -50%);\n }\n .with-code{\n \tcolor:#90CAA1;\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #FFF transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n .copy-button{\n \tcolor:#004F9F;\n background-color:#90CAA1;\n font-size:17px;\n border:none;\n width:40%;\n margin:3vh;\n border-radius:4px;\n padding:2vh 0;\n cursor:pointer;\n text-transform:uppercase;\n \n }\n .code-promo-container button {\n display: block;\n \tmargin:0;\n height: 100%;\n width: 25%;\n background-color: transparent;\n border: none !important;\n cursor: pointer;\n \tmin-width: 20%;\n }\n \n .code-promo-container img {\n\t\theight: 20px;\n \tbackground: #90CAA1;\n \tpointer-events:none;\n \tpadding: 7px 5px;\n \tborder-radius: 5px;\n \tmargin-left: 10px;\n \tcursor: pointer;\n }\n \n .pm-header img {\n display: none;\n max-width: 20px;\n margin-top: 5px;\n }\n \n .pm-header .desktop {\n\twriting-mode: tb-rl;\n transform: rotate(-180deg);\n text-orientation: sideways-right;\n }\n \n .pm-header .mobile {\n\tdisplay: none;\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n text-orientation: sideways-right;\n }\n \n\n\n /*@media screen \n and (max-device-width: 480px) \n { \n .desktop {\n display: none;\n }\n \n .mobile {\n display: block; \n }\n }/*\n \n</style>\n\n<div class=\"pm-root\">\n<div class=\"container\">\n <img class=\"logo\" src=\"https://img.perfmaker.net/1163/1678791868_Logo_PDS_SansFerronerie_1_NOIR_WEB.webp\">\n <div class=\"pm-header perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"2\"> \n <div class=\"desktop\">-10% sur votre première commande</div>\n \n <div class=\"mobile\">-10%</div>\n\t<img src=\"https://img.perfmaker.net/1163/1678875186_reduction.png\"/>\n \n </div>\n\n <div class=\"pm-right-container\">\n\n <form class=\"perfmaker-form\" data-callbacks=\"https://pim.panierdessens.com/t/t?a=1767591872&as=1795330106&t=2&tk=1\" data-onsubmit-action=\"FORM\">\n \n <h1 class=\"pm-title\">Des avantages et remises pour profiter de vos produits favoris plus souvent 💕</h1>\n <p class=\"pm-subtitle\">Abonnez-vous à notre newsletter et bénéficiez de <span>10%</span> sur votre première commande !</p>\n \n \t\t\t\n\t\t\n<div class=\"input-bloc\">\n <input id=\"email\"\n type=\"text\"\n name=\"email\"\n placeholder=\"E-mail\"\n class=\"perfmaker-form-field pm-input\"\n data-type=\"email\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; left:7%;'>*Votre adresse mail n'est pas valide</span>\" />\n\n \n </div>\n <div class=\"formfield-checkbox\">\n <div class=\"round\">\n <input \n type=\"checkbox\"\n id=\"optin\"\n name=\"optin\"\n class=\"perfmaker-form-field pm-checkbox\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; right:2%;'>*Champs requis</span>\"\n \t\t\t\tid=\"optin\" /><span class=\"conditions\">J’accepte de recevoir les communications de Panier des Sens.</span>\n <label for=\"optin\"></label>\n \n </div>\n \n</div>\n <button type=\"submit\" value=\"Submit\" class=\"bottom-btn perfmaker-action\">\n Je m'inscris\n </button> \n </form>\n <div class=\"perfmaker-form-success succes\">\n <p class=\"merci\"><span>Merci !</span><br>Votre inscription a bien été prise en compte. </p>\n \n <p class=\"code-description\">Voici votre code utilisable dès maintenant<br> pour votre 1ère commande :</p>\n \n <div class=\"promo-wrapper\"> \n <div class=\"code-promo-container\" id=\"copyButton\">\n <span class=\"promocode perfmaker-action\" data-onclick=\"KEEP_SIDEBAR_OPEN\" id=\"codePromo\">BIENVENUEFR10</span>\n <span class=\"popuptext\" id=\"myPopup\" style=\"font-size:10px\">Code copié !</span>\n <img src=\"https://img.perfmaker.net/1163/1678801196_copy.png\n \"/>\n </div> \n </div>\n \n <a class=\"perfmaker-action bottom-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\" data-url=\"\" data-callbacks=\"https://pim.panierdessens.com/t/t?a=1767591872&as=1795330106&t=2&tk=1\">Fermer\n </a>\n </div>\n </div>\n \n </div>\n \n </div>\n </div>","name":"Scène 2","notBlocking":true},{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/1163/1678801584_copy.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"-3px","left":"-1px"},"coverStyle":{"display":"none"},"iframeStyle":{},"wrapperClose":{"transition":"bottom ease .5s"},"wrapperHidden":{"height":"425px","width":"61px","right":"-30px","bottom":"7%","overflow":"hidden !important"},"wrapperOpen":{"transition":"bottom ease .5s"}},"htmlCloseButton":"\n\n<style>\n \n\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 35px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:white;\n width: 15px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n /*@media only screen and (max-width: 650px) {\n \t.perfmaker-sidebar-wrapper {\n width: 100% !important;\n \t}\n } */\n\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Roboto+Condensed&display=swap');\n .App>div{\n \toverflow:hidden;\n }\n.App{\n \toverflow:hidden;\n }\n@keyframes slide-left {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(0%);\n }\n}\n \n .pm-root{\n animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n height: 90%;\n width: 100%;\n display: flex;\n align-items: center;\n overflow:hidden;\n justify-content: center;\n font-family: 'Roboto Condensed', sans-serif;\n }\n \n .container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: calc(100% - 70px);\n background-image: url(\"https://img.perfmaker.net/1163/1678717041_background.jpg\");\n background-repeat: no-repeat;\n background-size: cover;\n }\n \n .logo {\n position: absolute;\n right: 10px;\n top: 10px;\n width: 90px;\n }\n \n .pm-header{\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n cursor:pointer;\n align-items: center;\n position: absolute;\n left: -35px;\n top: 0;\n font-weight: medium;\n width: 35px;\n color: #fff;\n padding: 0 0 10px 3px;\n background-color: #90CAA1;\n font-size: calc(10px + 1vh);\n }\n \n\n .pm-right-container{\n height: 100%;\n width:100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .pm-logo{\n height: calc(35px + 10vh);\n margin-top: 5%;\n }\n .pm-title{\n text-align: center;\n font-weight: 400;\n max-width: 90%;\n font-weight: regular;\n line-height: 1.2em;\n font-size: calc(13px + 1vh);\n margin:1.5vh 0;\n }\n .pm-subtitle{\n text-align: center;\n font-weight: 300;\n color: black;\n line-height: 1.2em;\n width: 87.5%;\n font-size: calc(12px + 1vh);\n \tmargin:2vh 0;\n }\n .pm-subtitle span{\n font-family: 'DM Serif Display', serif;\n color: #90CAA1;\n font-size: calc(18px + 1vh);\n }\n .bottom-btn{\n \n width:50%;\n border:none;\n background-color:#90CAA1;\n color:white;\n text-transform:uppercase;\n font-size:12px;\n height: 35px;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n \n .perfmaker-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 80%;\n width:80%;\n margin-top:10vh;\n background-color: #fff;\n }\n .pm-input{\n box-shadow: 0px 3.7162160873413086px 11.148648262023926px 0px #0000001A;\n width:80%;\n height:calc(19px + 5vh);\n border: 0;\n text-align:left;\n outline:none;\n padding-left:3%;\n color:black;\n margin-bottom:2vh;\n }\n .input-bloc{\n \tdisplay:flex;\n align-items:center;\n justify-content:space-evenly;\n flex-direction: column;\n width:100%;\n position:relative;\n\n }\n ::placeholder{\n text-align:left;\n \tcolor:#AEADAD;\n font-size: calc(7px + 1vw);\n \tfont-weight:100;\n }\n\n .formfield-checkbox{\n \twidth:100%;\n font-size: calc(6px + .5vh);\n\n }\n .pm-checkbox{\n \tcursor:pointer;\n }\n p {\n margin:0;\n padding:0\n }\n \n .succes-btn{\n \twidth:70%;\n border:none;\n background-color:#004F9F;\n border-radius:4px;\n color:white;\n text-transform:uppercase;\n font-family: \"Normartive\";\n font-size:12px;\n padding:4vh 0;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n .perfmaker-form-success {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 80%;\n width:80%;\n margin-top:10vh;\n background-color: #fff;\n}\n \n \n .round{\n \tdisplay: flex;\n align-items: center;\n justify-content: center;\n margin-top: 2vh;\n width: 80%;\n margin-left: 10%;\n }\n \n .merci {\n text-align: center; \n \tmargin: 10% 0 5% 0;\n font-size: calc(12px + 1vh);\n }\n \n .merci span {\n \tfont-size: calc(18px + 1vh);\n line-height: 2em;\n }\n \n .code-description {\n \ttext-align: center; \n margin-bottom: 5%;\n font-size: calc(12px + 1vh);\n }\n \n \n \n .promo-wrapper {\n \tdisplay: flex;\n justify-content: center;\n width: 100%;\n }\n \n \n .code-promo-container {\n \tpadding: 7px 7px 12px 7px;\n \twidth: min-content;\n z-index: 100;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin: 5px 0 5px 0;\n position: relative;\n color: #90CAA1; \n text-transform: uppercase;\n font-weight: 400;\n font-size: calc(16px + 1vh);\n \n border: dashed 2px #90CAA1;\n text-align:center;\n border-radius:4px;\n }\n \n \n \n .popuptext {\n visibility: hidden;\n width: 120%;\n background-color: #FFF;\n color: #004F9F;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 85%;\n top: -63%;\n transform: translate(-50%, -50%);\n }\n .with-code{\n \tcolor:#90CAA1;\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #FFF transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n .copy-button{\n \tcolor:#004F9F;\n background-color:#90CAA1;\n font-size:17px;\n border:none;\n width:40%;\n margin:3vh;\n border-radius:4px;\n padding:2vh 0;\n cursor:pointer;\n text-transform:uppercase;\n \n }\n .code-promo-container button {\n display: block;\n \tmargin:0;\n height: 100%;\n width: 25%;\n background-color: transparent;\n border: none !important;\n cursor: pointer;\n \tmin-width: 20%;\n }\n \n .code-promo-container img {\n\t\theight: 20px;\n \tbackground: #90CAA1;\n \tpointer-events:none;\n \tpadding: 7px 5px;\n \tborder-radius: 5px;\n \tmargin-left: 10px;\n \tcursor: pointer;\n }\n \n .pm-header img {\n display: none;\n max-width: 20px;\n margin-top: 5px;\n }\n \n .pm-header .desktop {\n\twriting-mode: tb-rl;\n transform: rotate(-180deg);\n text-orientation: sideways-right;\n }\n \n .pm-header .mobile {\n\tdisplay: none;\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n text-orientation: sideways-right;\n }\n \n .lines{\n z-index: 10000;\n animation: show 1.2s;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 35px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:white;\n width: 15px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n /*@media screen \n and (max-device-width: 480px) \n { \n .desktop {\n display: none;\n }\n \n .mobile {\n display: block; \n }\n }*/\n \n</style>\n\n<div class=\"pm-root\">\n<div class=\"container\">\n <img class=\"logo\" src=\"https://img.perfmaker.net/1163/1678791868_Logo_PDS_SansFerronerie_1_NOIR_WEB.webp\">\n <div class=\"pm-header perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\"> \n <div class=\"lines perfmaker-close-cross\" data-onclick=\"CLOSE_BUTTON_CLICK\">\n \n </div>\n \n <div class=\"desktop\">-10% sur votre première commande</div>\n \n <div class=\"mobile\">-10%</div>\n\t<img src=\"https://img.perfmaker.net/1163/1678875186_reduction.png\"/>\n \n </div>\n\n <div class=\"pm-right-container\">\n\n <form class=\"perfmaker-form\" data-onsubmit-action=\"FORM\">\n \n <h1 class=\"pm-title\">Des avantages et remises pour profiter de vos produits favoris plus souvent 💕</h1>\n <p class=\"pm-subtitle\">Abonnez-vous à notre newsletter et bénéficiez de <span>10%</span> sur votre première commande !</p>\n \n \t\t\t\n\t\t\n<div class=\"input-bloc\">\n <input id=\"email\"\n type=\"text\"\n name=\"email\"\n placeholder=\"E-mail\"\n class=\"perfmaker-form-field pm-input\"\n data-type=\"email\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; left:7%;'>*Votre adresse mail n'est pas valide</span>\" />\n\n \n </div>\n <div class=\"formfield-checkbox\">\n <div class=\"round\">\n <input \n type=\"checkbox\"\n id=\"optin\"\n name=\"optin\"\n class=\"perfmaker-form-field pm-checkbox\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; right:2%;'>*Champs requis</span>\"\n \t\t\t\tid=\"optin\" /><span class=\"conditions\">J’accepte de recevoir les communications de Panier des Sens.</span>\n <label for=\"optin\"></label>\n \n </div>\n \n</div>\n <button type=\"submit\" value=\"Submit\" class=\"bottom-btn perfmaker-action\">\n Je m'inscris\n </button> \n </form>\n <div class=\"perfmaker-form-success succes\">\n <p class=\"merci\"><span>Merci !</span><br>Votre inscription a bien été prise en compte. </p>\n \n <p class=\"code-description\">Voici votre code utilisable dès maintenant<br> pour votre 1ère commande :</p>\n \n <div class=\"promo-wrapper\"> \n <div class=\"code-promo-container\" id=\"copyButton\">\n <span class=\"promocode perfmaker-action\" data-onclick=\"KEEP_SIDEBAR_OPEN\" id=\"codePromo\">BIENVENUEFR10</span>\n <span class=\"popuptext\" id=\"myPopup\" style=\"font-size:10px\">Code copié !</span>\n <img src=\"https://img.perfmaker.net/1163/1678801196_copy.png\n \"/>\n </div> \n </div>\n \n <!--<button class=\"perfmaker-action bottom-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\">fermer\n </button>-->\n </div>\n </div>\n \n </div>\n \n </div>\n </div>","name":"Scène 1","notBlocking":true}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1},{"__typename":"ScenarioTransitions","actionType":"STAGE_TIMER","closeBefore":false,"data":2,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":false,"data":null,"nextStage":2},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":2}],[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1}]]}
