{"archived":0,"name":"SearchBar","stages":[{"__typename":"ScenarioStages","customScript":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","transition":"right .3s"},"wrapperHidden":{"height":"calc(100vh - 20px)","width":"400px","top":"10px","right":"-410px"},"wrapperOpen":{"right":"10px","transition":"right .3s"}},"htmlCloseButton":"<style>\n .perfmaker-close-button {\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n background-color: #464646;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n \tfont-weight: 700;\n }\n \n \t@media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n width: 90% !important;\n height: 400px !important;\n transform: translateY(40%);\n }\n }\n</style>\n\n<a class=\"perfmaker-close-button perfmaker-action\">\n X\n</a>","htmlContent":"<style>\n @import url(https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i);\n #template-root {\n width: 100%;\n height: 100%;\n border-radius: 15px;\n font-family: 'Lato', Arial, Helvetica, sans-serif;\n }\n \n .template-App {\n width: 100%;\n height: 100%;\n --color-blue: #0e4391;\n }\n \n .template-App-subheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: linear-gradient(180deg, white 50%, #1f242b 50%);\n border-radius: 15px;\n }\n \n .template-App-subheader .logo {\n margin-top: calc(20px + 2vh);\n height: calc(10px + 5vh);\n }\n \n .template-App-subheader .container {\n background-color: white;\n padding: 10px;\n box-sizing: border-box;\n height: 40%;\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 position: relative;\n width: 95%;\n margin: 0;\n }\n \n .template-App-subheader .container form input {\n height: calc(20px + 3vh);\n width: 100%;\n background-color: white;\n border: 2px solid var(--color-blue);\n border-right: 0;\n box-sizing: border-box;\n padding: 10px;\n }\n \n .template-App-subheader .container form button {\n position: absolute;\n height: calc(20px + 3vh);\n border: 2px solid var(--color-blue);\n border-left: 0;\n top: 0;\n right: 0;\n width: 20%;\n background-color: white;\n cursor: pointer;\n }\n \n .template-App-subheader .container form button img {\n height: 80%;\n }\n \n .template-App-subheader .container .buttons-group {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin-top: calc(5px + 1.5vh);\n }\n \n .template-App-subheader .container .buttons-group hr {\n width: 30%;\n border: 1px solid #0e4391;\n }\n \n .template-App-subheader .container .buttons-group .group {\n display: flex;\n }\n \n .template-App-subheader .container .buttons-group button {\n background-color: white;\n border: 1px solid #586076;\n color: #586076;\n border-radius: 50px;\n margin: 5px;\n padding: 2px 7px;\n box-sizing: border-box;\n font-size: calc(8px + .6vh);\n cursor: pointer;\n transition: .3s ease;\n }\n \n .template-App-subheader .container .buttons-group .group.blue button {\n background-color: #0e4391;\n color: white;\n border: 1px solid transparent;\n }\n \n .template-App-subheader .container .buttons-group button:hover {\n color: white;\n background: #586076;\n border: 1px solid #586076;\n transition: .3s ease;\n }\n \n .template-App-subheader .container h1 {\n color: #0e4391;\n font-size: calc(8px + 3vh);\n text-align: center;\n font-weight: 600;\n font-family: 'Raleway', sans-serif;\n margin: 0;\n margin-top: calc(5px + 2.5vh);\n margin-bottom: calc(5px + 2.5vh);\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 \t \t@media only screen and (max-width: 600px) {\n .template-App-subheader .container {\n height: 50%;\n }\n }\n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <div class=\"template-App-subheader\">\n <img src=\"https://img.perfmaker.net/858/logo.png\" alt=\"\" class=\"logo\">\n <div class=\"container\">\n <h1>Que recherchez-<span style=\"font-weight: 700;\">vous</span> ?</h1>\n <form class=\"perfmaker-form\" data-onsubmit-action=\"HIDE_SIDEBAR\" data-method=\"GET\" data-post=\"SearchTerm\" data-url=\"https://www.bernard.fr/INTERSHOP/web/WFS/RAJA-BERNARDFR-Site/fr_FR/-/EUR/ViewParametricSearch-SimpleOfferSearch\">\n <input type=\"text\" placeholder=\"Rechercher un produit\" class=\"searchBar perfmaker-form-field\" name=\"SearchTerm\" id=\"SearchTerm\" data-required=\"true\" data-error-msg=\"Requête invalide\" />\n <button class=\"searchButton\" type=\"submit\" value=\"submit\">\n <img src=\"https://img.perfmaker.net/858/loupe2.png\" />\n </button>\n </form>\n <div class=\"buttons-group\">\n <div class=\"group\">\n <button class=\"perfmaker-action\" data-url=\"https://www.bernard.fr/papier-toilette_C1007.html\" data-onclick=\"HIDE_SIDEBAR\">Papier toilette</button>\n <button class=\"perfmaker-action\" data-url=\"https://www.bernard.fr/essuie-mains_C1005.html\" data-onclick=\"HIDE_SIDEBAR\">Essuie-mains</button>\n <button class=\"perfmaker-action\" data-url=\"https://www.bernard.fr/desinfectants-nettoyants_C090503.html?SearchCat=suggested&SearchQuery=D%C3%A9sinfectants+nettoyants\" data-onclick=\"HIDE_SIDEBAR\">Désinfectant nettoyant</button>\n </div>\n <div class=\"group\">\n <button class=\"perfmaker-action\" data-url=\"https://www.bernard.fr/ramettes-papier-papeterie_C12.html\" data-onclick=\"HIDE_SIDEBAR\">Ramette de papier</button>\n <button class=\"perfmaker-action\" data-url=\"https://www.bernard.fr/sacs-poubelle_C0305.html\" data-onclick=\"HIDE_SIDEBAR\">Sac poubelle</button>\n <button class=\"perfmaker-action\" data-url=\"https://www.bernard.fr/balais-laveurs-franges-microfibres_C070401.html?SearchCat=suggested&SearchQuery=Balais+laveurs%2C+franges%2C+microfibres\" data-onclick=\"HIDE_SIDEBAR\">Balais laveurs, franges, microfibres</button>\n </div>\n </div>\n </div>\n <div class=\"footer\">\n <p>Besoin d'aide ?</p>\n <p><span style=\"font-size:calc(11px + 0.5vh)\">Appelez-nous : </span><br><span style=\"font-weight: 700\">0825 836 846 </span><span style=\"font-size:calc(9px + 0.5vh)\">(0,125€ht/min)</span></p>\n </div>\n </div>\n </div>\n</div>","name":"SideBox","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
