{"archived":0,"globalCss":null,"mainStage":null,"name":"recap panier step 1","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"15px","right":"15px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .3s"},"iframeStyle":{},"wrapperClose":{"right":"-410px"},"wrapperHidden":{"height":"calc(100vh - 20px)","width":"400px","top":"10px","right":"-410px"},"wrapperOpen":{"right":"10px","transition":"right .3s"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n .line{\n position: absolute;\n background:black;\n top:1vh;\n width: 20px;\n height: 1px;\n transition: All ease .3s;\n }\n .lines:hover .line1{\n transform: rotate(0deg);\n height:2px;\n }\n .lines:hover .line2{\n transform: rotate(0deg);\n height:2px;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n \n \t@media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n width: 90% !important;\n height: 75vh !important;\n left:5% !important;\n transform: translateY(12.5%);\n \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=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');\n\n \n #template-root {\n width: 100%;\n height: 100%;\n border-radius: 15px;\n font-family: 'Titillium Web', sans-serif;\n }\n \n .template-App {\n width: 100%;\n height: 100%;\n \n background-image:url(\"https://img.perfmaker.net/1111/1648541667_Component%202.png\");\n \tbackground-position:center;\n \tbackground-size:cover;\n border-radius: 15px;\n }\n .template-App-header{\n position:relative;\n \theight:5vh;\n display:flex;\n justify-content:center;\n align-items:center;\n }\n .template-App-header img {\n height: calc(18px + 3vh);\n margin-top: 14vh;\n }\n \n .template-App-subheader {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 100%;\n height: calc(100vh - 9vh);\n }\n\n .template-App-subheader .container {\n background-color: white;\n padding: 10px;\n box-sizing: border-box;\n height: 55%;\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: center;\n -webkit-box-shadow: 4px 1px 12px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 4px 1px 12px 0px rgba(0, 0, 0, 0.2);\n }\n \n .template-App-subheader .container form {\n \tdisplay: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin: 0;\n box-sizing: border-box;\n }\n \n .template-App-subheader .container form input.perfmaker-form-field {\n\t\twidth: 85%;\n \tborder:none;\n \tborder: 2px solid #FAD785;\n \theight: calc(20px + 2.5vh);\n padding: 0.5em 1em 0.15em 1em;\n margin-bottom: calc(5px + 2vh);\n \n }\n ::placeholder{\n font-family: 'Titillium Web', sans-serif;\n font-size:calc(8px + .8vh + .8vw);\n \n }\n \n \tinput.button {\n font-size: calc(7px + 1.2vh);\n background: black;\n border: none;\n color: white;\n padding: 1.5vh 3vh; \n font-family: 'Titillium Web', sans-serif;\n font-weight: 700;\n cursor: pointer;\n transition:all ease .4s;\n font-weight: 400;\n width: 85%\n \t}\n .button:hover{\n \ttransform:scale(0.98);\n transition:all ease .4s;\n }\n .template-app-subheader input:focus {\n outline: none;\n}\n \n .template-App-subheader .container h1 {\n color: #424A5D;\n font-size: calc(10px + 2vh);\n text-align: center;\n font-weight: 600;\n font-family: 'Titillium Web', sans-serif;\n margin: 0;\n margin-top:3vh;\n margin-bottom: 1vh;\n color: #0f2647;\n width:85%;\n line-height: 1.1em;\n }\n \n .template-App-subheader .container h1.bis {\n color: #424A5D;\n font-size: calc(10px + 1.5vh);\n text-align: center;\n font-weight: 700;\n font-family: 'Titillium Web', sans-serif;\n margin: 0;\n margin-top:3vh;\n margin-bottom: 3vh;\n color: #0f2647;\n font-weight: 500;\n line-height: 1.1em;\n width: 100%;\n }\n \n \t.template-App-subheader .container p {\n font-size: calc(11px + 1vh);\n width: 80%;\n text-align: center;\n color: #0f2647;\n margin-top: 1vh;\n \n }\n \n .template-App-subheader .footer {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n width: 80%;\n flex-direction: column;\n color: white;\n margin-bottom: 5%;\n }\n \n .template-App-subheader .footer p {\n margin: 0;\n margin-bottom: calc(5px + 1vh);\n font-size: calc(8px + 1.5vh);\n }\n \n \tbutton.bottom-btn {\n position: relative;\n padding: 1.5vh 10%;\n color: white;\n font-size: calc(10px + 0.5vh);\n text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);\n text-decoration: none;\n background:black;\n opacity: 1;\n border: none;\n font-weight: bold;\n cursor: pointer;\n font-family: 'Titillium Web', sans-serif;\n transition: all ease 0.3s;\n }\n button.bottom-btn:hover {\n transform:scale(0.98);\n transition:all ease .4s;\n }\n \t\n \t.template-App-subheader .succes {\n margin: 14vh auto;\n }\n \n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <div class=\"template-App-header\">\n \t<img src=\"https://img.perfmaker.net/1111/1648484322_image%201.png\"/>\n </div>\n <div class=\"template-App-subheader\">\n \n <div class=\"container\">\n \n <form class=\"perfmaker-form\" data-onsubmit-action=\"SEND_BASKET\">\n <h1>Finalisez votre commande <span style=\"color:#FAD785\">plus tard !</span></h1>\n\n <p>Saisissez votre e-mail et nous vous\n enverrons le <span style=\"font-weight:600\">récapitulatif</span>\n de votre panier</p>\n <input placeholder=\"E-mail\" id=\"email\" type=\"text\" name=\"email\" class=\"perfmaker-form-field\" data-type=\"email\" data-required=\"true\" data-error-msg=\"Votre adresse mail n'est pas valide\"/>\n <input class=\"button perfmaker-action\" type=\"submit\" value=\"Envoyer mon panier\" data-onclick=\"SHOW_SIDEBAR\"/>\n </form>\n <div class=\"perfmaker-form-success succes\">\n <h1 class=\"bis\">Votre panier a été envoyé avec succès</h1>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\" data-url=\"\">Fermer</button>\n </div>\n </div>\n </div>\n </div>\n</div>","name":"Scène 0: Sidebox","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"display":"none"},"coverStyle":{"display":"none","transition":"opacity 0.5s ease, visibility 0.5s ease"},"iframeStyle":{},"wrapperClose":{"right":"-180px"},"wrapperHidden":{"right":"-186px"},"wrapperOpen":{"height":"36px","width":"250px","top":"30%","right":"-113px","transform":"rotate(-90deg)","transition":"right ease .3s"}},"htmlCloseButton":"<a style=\"cursor: pointer; display: block; background-color: grey !important; opacity: 0.65; color: white !important; width: 40px; height: 40px; font-size: 16px;line-height: 40px;text-align: center;\">X</a>\n","htmlContent":"<style>\n \n \n @import url(https://fonts.googleapis.com/css?family=Raleway:400,800);\n\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');\n\n \n .root {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 92%;\n width: 100%;\n border-radius: 0px;\n color: #111;\n \n }\n \n .root .perfmaker-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 99%;\n width: 95%;\n cursor: pointer;\n background: #FAD785;\n color:white;\n border-radius: 4px;\n text-transform : uppercase;\n }\n \n .root .text {\n text-align:center;\n font-family: Raleway, Arial;\n font-size: 12px;\n padding:10px;\n font-family: \"Open Sans\",Helvetica Arial sans-serif;\n font-weight:600;\n }\n \n @keyframes pulse{\n 100% {\n box-shadow: 0 0 0 8px #dd005100;\n }\n\n</style>\n\n<div class=\"root\">\n <div class=\"perfmaker-bubble\">\n <div class=\"text\">Sauvegardez votre panier</div>\n </div>\n</div>","name":"Scène 1: Etiquette","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"MOUSE_CLICK","closeBefore":true,"data":null,"nextStage":0}]]}
