{"archived":0,"globalCss":null,"mainStage":0,"name":"Demande Optin","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/1112/1685350485_havas-demande-optin.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"10px","top":"10px","width":"40px","height":"40px"},"coverStyle":{"display":"none"},"iframeStyle":{},"wrapperClose":{"right":"-30%","transition":"right 0.5s linear"},"wrapperHidden":{"height":"200px","width":"400px","bottom":"5vh","right":"-100%","border-radius":"20px"},"wrapperOpen":{"transition":"right .3s linear","right":"5vh"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 40px;\n height: 40px;\n cursor: pointer;\n background-color:transparent;\n border-radius: 100px;\n }\n .line{\n position: absolute;\n background-color:#fff;\n width: 15px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\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\n @media screen and (max-width:600px){\n .perfmaker-sidebar-wrapper {\n width:100% !important;\n right:0% !important;\n bottom:0px !important;\n height:30vh !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>\n","htmlContent":"<style>\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');\n \n.pm-root{\n width: calc(100% - 40px);\n height: calc(100% - 40px);\n \tpadding:20px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n background-color:#189bd7;\n background-position:center;\n background-repeat: no-repeat;\n background-size:cover;\n overflow:hidden;\n \tcolor:#000;\n font-family: \"Open Sans\";\n border-radius:20px;\n }\n \n p.titre {\n font-size:19px !important;\n text-align:center;\n color:#fff;\n margin:0 0 20px 0;\n \n }\n#consent-form {\n margin: 0 auto;\n text-align: center;\n }\n \n \n .button-label {\n display: inline-block;\n padding: 6px 12px;\n background-color: transparent;\n color: #fff;\n text-align: center;\n text-decoration: none;\n border: 1px solid #fff;\n border-radius: 0.25rem;\n cursor: pointer;\n \t\t\tfont-size:18px;\n margin: 0px 10px;\n }\n\n .button-label:hover,\n .button-label.selected {\n background-color: #fff;\n color: #189BD7;\n }\n\n .hidden-input {\n display: none;\n }\n\n input[type=\"radio\"] {\n display: none;\n } \n \n input[type=\"radio\"]:checked+label {\n background-color: #fff;\n color:#189bd7\n }\n \n .consent-oui {\n background-color:#fff;\n color:#189bd7;\n }\n \n .consent-oui:hover {\n background-color:#fff;\n color:#189bd7;\n border:1px solid #000;\n }\n\n .hidden-input {\n display: none;\n }\n /*input[type=\"checkbox\"] {\n display:none;\n }*/\n .bottom-btn {\n background-color: #fff;\n color: #189BD7;\n font-size: calc(7px + 1vh);\n padding: 2vh 15vw;\n border: 2px solid #189BD7;\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\n .bottom-btn:hover{\n transform: scale(0.98);\n opacity:0.9;\n }\n \n .success {\n color:#fff;\n margin:0 auto;\n \n }\n .success p {\n font-size:19px;\n text-align:center;\n }\n .success .bottom-btn {\n \t\tdisplay: block;\n padding: 6px 12px;\n background-color: #fff;\n color: #189BD7;\n text-align: center;\n text-decoration: none;\n border: 1px solid #fff;\n border-radius: 0.25rem;\n cursor: pointer;\n \t\t\tfont-size:18px;\n \t\tmargin:0 auto;\n }\n \n</style>\n\n<div class=\"pm-root\">\n\n \n <form id=\"consent-form\" class=\"perfmaker-form\" data-onsubmit-action=\"SEND_BASKET\">\n <p class=\"titre\">Souhaitez-vous conserver les détails de cette réservation par e-mail?</p>\n <input placeholder=\"E-mail\" id=\"email\" type=\"text\" name=\"email\" class=\"perfmaker-form-field perfmaker-data\" data-type=\"email\" data-required=\"true\" data-error-msg=\"Votre adresse mail n'est pas valide\" data-attribute-value=\"EMAILS.mail\" style=\"display:none\"/>\n <input type=\"radio\" name=\"optin\" id=\"consent-oui\" class=\"perfmaker-form-field hidden-input\" value=\"true\">\n <label for=\"consent-oui\" class=\"button-label consent-oui\">Oui</label>\n <input type=\"radio\" name=\"optin\" id=\"consent-non\" class=\"perfmaker-action perfmaker-form-field hidden-input\" value=\"false\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"\" >\n <label for=\"consent-non\" class=\"button-label\">Non</label>\n <br>\n <button class=\"perfmaker-action bottom-btn\" type=\"submit\" style=\" display:none;\n\">Valider</button>\n </form>\n <div class=\"perfmaker-form-success success\">\n <p>Votre demande a bien été prise en compte.</p>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"\">Fermer</button>\n</div>\n \t</div>\n\n\n\n\n","name":"SideBox","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
