{"archived":0,"globalCss":null,"mainStage":0,"name":"reco produit","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/858/1630515890_check_products.js","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"0px","right":"0px"},"coverStyle":{"opacity":".6","background-color":"black","transition":"opacity .3s linear"},"iframeStyle":{},"wrapperClose":{"right":"-100%","transition":"right .3s linear"},"wrapperHidden":{"height":"94vh","width":"400px","top":"3vh","right":"-100%"},"wrapperOpen":{"right":"1vw","transition":"right .3s linear"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 35px;\n height: 35px;\n border-radius:100px;\n cursor: pointer;\n background:transparent;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .line{\n position: absolute;\n background:black;\n width: 20px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n \n \t@media only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n width: 90vw !important;\n height: 60vh !important;\n top: unset !important; \n bottom: 6%;\n left: 5vw;\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 :root {\n --primary-color: #FFD777;\n \t--titillium:'Titillium Web', sans-serif;\n }\n \n #template-root,\n .template-App {\n height: 100%;\n width: 100%;\n border-radius: 10px;\n }\n \n .template-App {\n display: flex;\n background-color: white;\n font-family: Arial;\n align-items: center;\n flex-direction: column;\n font-family: var(--titillium);\n }\n \n .template-App p {\n margin: 0;\n font-family: var(--titillium);\n font-weight: 600;\n font-size: calc(5px + 1vh);\n }\n \n .template-App .logo-container,\n .template-App .title-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n max-height: 10%;\n }\n \n .template-App .logo-container {\n align-items: center;\n \theight: 7vh;\n \t \tmargin-top: 1vh;\n }\n \n \n \n .template-App .logo-container img {\n height: 50%;\n }\n \n .template-App .title-container h1 {\n font-size: calc(8px + 2.3vh);\n text-align: center;\n font-family: var(--titillium);\n font-weight: 600;\n color: #222831;\n \tline-height: 1em;\n position:relative;\n margin:1.5vh 0 2vh 0;\n }\n .template-App .title-container h1:after {\n \tcontent:\"\";\n position:absolute;\n height:1.5px;\n width:14%;\n bottom:-40%;\n right:2%;\n background-color:#FFD777;\n }\n \n .template-App .products-container {\n display: flex;\n flex-direction: column;\n gap: 1.75vh;\n align-items: center;\n width: 100%;\n height: 70%;\n margin-top:1vh;\n }\n \n .template-App .product-container {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n width: 85%;\n height: 23%;\n -webkit-box-shadow: 1px 3px 7px rgba(178, 178, 178, 0.59);\n box-shadow: 1px 3px 7px rgba(178, 178, 178, 0.59);\n padding: calc(2px + .4vh);\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n z-index: 5 !important;\n pointer-events: auto;\n transition: .2s;\n }\n \n .template-App .product-container:hover {\n transform: translateY(-1px);\n transition: .2s;\n }\n \n .template-App .image-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 40%;\n overflow: hidden;\n pointer-events: none;\n }\n \n .template-App .image-container img {\n max-height: 70%;\n max-width: 90%;\n pointer-events: none;\n }\n \n .template-App .product-container .description-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n width: 60%;\n height: 70%;\n }\n \n .template-App .product-container .name {\n font-size: calc(5px + .9vh);\n margin-bottom: calc(2px + .2vh);\n text-align: left;\n min-height: calc(9px + .5vw);\n \t\tdisplay: -webkit-box;\n\t\t\tmax-width: 90%;\n\t\t\t-webkit-line-clamp: 3;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n }\n \n .template-App .product-container .ref {\n color: black;\n margin-bottom: calc(2px + .2vh);\n line-height: 1.25em;\n font-size: calc(8px + 1vh);\n text-align:left;\n }\n \n .template-App .product-container .text-before-price {\n color: black;\n font-size: calc(5px + 1.1vh);\n \talign-self: flex-end;\n position: absolute;\n text-align:right;\n bottom: 7%;\n right: 4%;\n \n }\n \n \n \n .text-before-price span{\n position: relative;\n z-index: 2 !important;\n color:var(--primary-color);\n text-transform:uppercase;\n }\n .bottom-btn{\n \tbackground-color:var(--primary-color);\n color:black;\n font-family:var(--titillium);\n border:1px solid var(--primary-color);\n font-weight:600;\n font-size:calc(9px + 1.25vh);\n padding:1.5vh 0;\n width:90%;\n margin-top:2vh;\n cursor:pointer;\n transition:all ease .3s;\n border-radius:3px;\n }\n \n \n \n \n @media all and (max-height: 480px) {\n .products-container {\n flex-direction: row !important;\n overflow-x: scroll;\n flex-wrap: nowrap;\n justify-content: unset !important;\n }\n .product-container {\n margin: 0 15px 0 0;\n flex-direction: column !important;\n flex: 0 0 auto;\n height: 90% !important;\n width: 40% !important;\n justify-content: unset !important;\n }\n .product-container .description-container {\n height: 50% !important;\n width: 100% !important;\n \tpadding: 5px;\n box-sizing: border-box;\n justify-content: unset !important;\n text-align: left;\n align-items:flex-start !important;\n \n }\n .product-container .ref {\n font-size: calc(8px + 1.2vh) !important;\n \t\t\t margin-top: 2vh;\n }\n .product-container:first-child {\n margin-left: 15px;\n }\n .product-container .description-container .name {\n margin-bottom: calc(5px + 3vh);\n \tmin-height: calc(9px + .5vw);\n \t\tdisplay: -webkit-box;\n\t\t\tmax-width: 90%;\n\t\t\t-webkit-line-clamp: 3;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n }\n .product-container .image-container {\n height: 50%;\n width: 100%;\n }\n .product-container .price .price-value {\n font-size: calc(5px + 2vh);\n }\n .text-before-price{\n \tposition: absolute;\n bottom: 3%;\n right: 4%;\n font-size: calc(6px + 1.1vh) !important;\n }\n .product-container .image-container img {\n width: 80% !important;\n height: unset !important;\n max-width: unset;\n max-height: unset;\n }\n .product-container p {\n font-size: calc(2px + 1vh);\n }\n }\n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <div class=\"logo-container\">\n <img src=\"https://img.perfmaker.net/1111/1648484322_image%201.png\" alt=\"\">\n </div>\n <div class=\"title-container\">\n <h1>\n Vous pourriez aussi aimer\n </h1>\n </div>\n <div class=\"products-container\">\n <div class=\"product-container perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associé_link1}\">\n <div class=\"image-container\">\n <img src=\"https://img.perfmaker.net/1111/1663154624_image%203%20(2).png\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associé_img1}\">\n </div>\n <div class=\"description-container\">\n <p class=\"ref perfmaker-data\" data-key=\"BASKET.produit_associé_name1\">\n Feuillard acier laqué noir en galettes plates\n </p>\n \n <p class=\"text-before-price\">A partir de :<br><span class=\"perfmaker-data price-value\" data-key=\"BASKET.produit_associé_prix1\">43.33 € HT La Ramette</span></p>\n \n </div>\n </div>\n <div class=\"product-container perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associé_link2}\">\n <div class=\"image-container\">\n <img src=\"https://img.perfmaker.net/1111/1663154624_image%203%20(2).png\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associé_img2}\">\n </div>\n <div class=\"description-container\">\n <p class=\"ref perfmaker-data\" data-key=\"BASKET.produit_associé_name2\">\n Feuillard acier laqué noir en galettes plates\n </p>\n \n <p class=\"text-before-price\">A partir de :<br><span class=\"perfmaker-data price-value\" data-key=\"BASKET.produit_associé_prix2\">43.33 € HT La Ramette</span></p>\n </div>\n </div>\n <div class=\"product-container perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associé_link3}\">\n <div class=\"image-container\">\n <img src=\"https://img.perfmaker.net/1111/1663154624_image%203%20(2).png\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associé_img3}\">\n </div>\n <div class=\"description-container\">\n <p class=\"ref perfmaker-data\" data-key=\"BASKET.produit_associé_name3\">\n Feuillard acier laqué noir en galettes plates\n </p>\n \n <p class=\"text-before-price\">A partir de :<br><span class=\"perfmaker-data price-value\" data-key=\"BASKET.produit_associé_prix3\">43.33 € HT La Ramette</span></p>\n </div>\n </div>\n <div class=\"product-container perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associé_link4}\">\n <div class=\"image-container\">\n <img src=\"https://img.perfmaker.net/1111/1663154624_image%203%20(2).png\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associé_img4}\">\n </div>\n <div class=\"description-container\">\n <p class=\"ref perfmaker-data\" data-key=\"BASKET.produit_associé_name4\">\n Feuillard acier laqué noir en galettes plates\n </p>\n \n <p class=\"text-before-price\">A partir de :<br><span class=\"perfmaker-data price-value\" data-key=\"BASKET.produit_associé_prix4\">43.33 € HT La Ramette</span></p>\n </div>\n </div>\n </div>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.catégorie_associée}\">Voir tous les produits de la catégorie</button>\n </div>\n</div>","name":"","notBlocking":true}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
