{"archived":0,"globalCss":null,"mainStage":0,"name":"Remarketing consentement ","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"5px","top":"5px","min-width":" 38px","min-height":" 38px","display":"flex","justify-content":"center","align-items":"center"},"coverStyle":{},"iframeStyle":{},"wrapperClose":{"right":"-100%","transition":"all ease .2s"},"wrapperHidden":{"width":"370px","height":"200px","min-height":"200px","bottom":"8vh","right":"-100%","border-radius":"0px 0px 20px 20px;"},"wrapperOpen":{"right":"-1px","transition":"all ease .3s"}},"htmlCloseButton":"<style>\n\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 1vh;\n right: 10px;\n width: 30px;\n height: 30px;\n cursor: pointer;\n background:white;\n border-radius:100px;\n }\n .line{\n position: absolute;\n background:#379CD8;\n width: 18px;\n height: 2px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n @media (max-width:500px){\n .perfmaker-sidebar-wrapper{\n \twidth:90% !important;\n \theight: 60% !important;\n \tbottom:15% !important;\n \tleft:5% !important;\n \ttop:unset !important;\n }\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 \n @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');\n\n\n .pm-root{\n background: #fff;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: bottom;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-family: 'Lato', sans-serif;\n border-radius: 20px 0px 0px 20px;\n position:relative;\n display:flex;\n flex-direction:column;\n align-items:center;\n justify-content:space-evenly;\n \n }\n\n a\n {\n cursor:pointer;\n text-decoration:underline;}\n .content{\n \twidth:92%;\n height:100%;\n background-color:white;\n border-radius:20px;\n }\n\n .pm-subtitle{\n \tcolor:#000;\n font-size:calc(12px + 1vh);\n\tfont-family: 'Lato', sans-serif;\n font-weight:400;\n margin-top:9vh;\n text-align:center;\n margin:0;\n }\n \n .bottom-btn{\n background-color: #189BD7;\n color: white;\n font-size: calc(7px + 1vh);\n padding: 2vh 15vw;\n border: none;\n transition: all ease .15s;\n cursor: pointer;\n font-weight: 400;\n margin: 2.5vh 0 1vh 0;\n border-radius:5px;\n }\n .bottom-btn:hover{\n transform: scale(0.98);\n opacity:0.9;\n }\n \n \n .pm-root form {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 80%;\n margin: 0;\n box-sizing: border-box;\n position: relative;\n font-family: 'Lato', sans-serif;\n }\n \n .pm-root form input.perfmaker-form-field {\n\t\twidth: 100%;\n \tborder: none;\n border-radius:5px;\n margin:2vh 0;\n \theight: calc(20px + 1.5vh);\n padding: 3vh 2vh;\n box-sizing: border-box;\n z-index: 1000;\n font-family: 'Lato', sans-serif;\n background: #C9F4FF;\n }\n \n \t.pm-root form .button {\n background-color: #189BD7;\n color: white;\n font-size: calc(7px + 1vh);\n padding: 2vh 15vw;\n border: none;\n transition: all ease .15s;\n cursor: pointer;\n font-weight: 400;\n margin: 2.5vh 0 1vh 0;\n border-radius:5px;\n \t}\n \n\n \t.pm-root p {\n font-size: calc(10px + 1vh);\n width:100%;\n text-align: center;\n font-family: 'Lato', sans-serif;\n color: white; \n }\n \n \t\n \t.pm-root .succes {\n margin: 0 auto;\n text-align:center;\n font-family: 'Lato', sans-serif;\n width: 100%;\n }\n \n \t.pm-root .succes p{\n margin: 3vh auto;\n text-align:center;\n font-family: 'Lato', sans-serif;\n width: 100%;\n }\n \n\n .formfield-checkbox label{\n font-size:calc(8px + 0.5vh) ; \n font-family: 'Lato', sans-serif;\n\n }\n \n \n .checkbox{\n width:100%;\n display:flex;\n align-items:center;\n justify-content:center;\n align-content:center;\n }\n\n #optin{\n width:5%;\n background: lightblue;\n }\n.checkbox input {\n margin:0 5% 0 0 !important;\n }\n .checkbox label{\n font-size: calc(8px + 0.5vh); \n width: 100%;\n display: inline;\n vertical-align:top;\n color:#000;\n z-index: 1000;\n font-family: 'Lato', sans-serif;\n }\n \n p {\n \tcolor: #000 !important; \n }\n \n</style>\n\n\n\n<div class=\"pm-root\">\n<form class=\"perfmaker-form\" data-onsubmit-action=\"SEND_BASKET\">\n <h2 class=\"pm-subtitle\">Souhaitez-vous recevoir votre récapitulatif par mail ?</h2>\n <input placeholder=\"E-mail\" id=\"email\" type=\"text\" name=\"email\" class=\"perfmaker-form-field\" data-type=\"email\" data-required=\"true\" data-error-msg=\"<span style='color:white;font-size: calc(8px + 0.5vh);'>Votre adresse mail n'est pas valide</span>\"/>\n <div class=\"checkbox\">\n <input type=\"checkbox\" id=\"optin\" name=\"optin\" class=\"perfmaker-form-field\" data-required=\"true\" data-error-msg=\"<span style='color:white;font-size: calc(8px + 0.5vh);position: absolute;bottom: 20%;'>Merci d'accepter les conditions d'utilisation.</span><br>\" />\n <label style=\"text-align:left;\" for=\"optin\" class=\"formfield-checkbox\" >J'accepte de recevoir un e-mail dans le cadre de ma demande.</label>\n </div>\n \n \n <input class=\"button bottom-btn\"style=\"margin-top:10%\" type=\"submit\" value=\"Valider\" />\n \n </form>\n <div class=\"perfmaker-form-success succes\">\n <p>Votre sauvegarde sélection vient de vous être envoyée avec succès.</p>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"\">Fermer</button>\n</div>\n</div>\n","name":"","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
