Historique + Code Promo

Format

Banner format

COMPLEXITÉ

Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":":root {\n /* Règles CSS couleurs */\n --pm-primary-color: #FD8D5D;\n --pm-secondary-color: #F6B39E;\n \t--pm-tertiary-color: #FFFFFF;\n \n /* Sidebox Title configuration */\n --pm-font-family-1: 'Open Sans', sans-serif;\n\n \t--pm-font-family-2: 'Open Sans', sans-serif;\n\n }","mainStage":0,"name":"historique de navigation v2","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/984/JS/Copy_code_promo.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"38px","top":"4px"},"coverStyle":{"opacity":".6","transition":"opacity .5s linear","background-color":"transparent"},"iframeStyle":{},"wrapperClose":{"transition":"all .4s linear","bottom":"-100%"},"wrapperHidden":{"width":"950px","height":"210px","left":"-100%","bottom":"0"},"wrapperOpen":{"transition":"all .4s linear","left":"-890px"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width:20px;\n height: 20px;\n cursor: pointer;\n background-color:black;\n border-radius:100px;\n }\n .line{\n position: absolute;\n background-color:white;\n width: 12px;\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 only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n bottom: 0vh !important;\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:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');\n \n \n \n .pm-root{\n height:100%;\n border-radius: 0 10px 10px 0;\n width:100%;\n display:flex;\n position:relative;\n flex-direction:column;\n align-items: flex-start;\n justify-content:flex-end;\n font-family: var(--pm-font-family-1);\n \toverflow:hidden;\n background-color:transparent;\n position:relative;\n background-color: var(--pm-secondary-color);\n \n }\n .bubble{\n \tposition:absolute;\n right:20px;\n top:50%;\n transform:translateY(-50%);\n text-transform:uppercase;\n font-size:12px;\n height:100%;\n margin-top:10px;\n font-weight:700;\n text-align:center;\n color:white;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n\tcursor:pointer;\n \n }\n .pm-title{\n font-family: var(--pm-font-family-1);\n color:var(--pm-tertiary-color);\n margin-bottom: 0px;\n font-weight:700;\n text-align: center;\n position:absolute;\n right:-15%; \n padding: 3vh 0 0 0;\n border-radius: 10px 10px 0 0;\n font-size:9.5px;\n z-index:10;\n text-transform:uppercase;\ntransform:rotate(90deg);\n }\n \n \n \n .box-scroll{\n background-color: var(--pm-secondary-color);\n position: relative;\n width:100%;\n height: 70%;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n overflow-y: scroll;\n }\n .logo{\n position: fixed !important;\n left: 50%;\n transform: translateX(-50%);\n top:35px !important;\n height:25px !important;\n object-fit:contain;\n width:unset !important;\n }\n \n .box-scroll::-webkit-scrollbar {\n display: none; /* Suppression de la cross bar */\n }\n \n .produits{\n display: flex;\n flex-direction: row;\n box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;\n padding: 10px;\n margin:0px 10px ;\n min-width:185px;\n width: 230px;\n height: calc(100% - 55px);\n position:relative;\n background-color:var(--pm-tertiary-color);\n border-radius:8px;\n }\n .produits:hover{\n box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;\n }\n .produits img{\n height: 60px;\n object-fit: contain;\n width:85%;\n border-radius:9px;\n }\n \n \n \n \n .titreproduit{\n \tmargin: 6px 0 6px 0;\n text-align: left;\n display: -webkit-box;\n max-width: 100%;\n width: 100%;\n line-height: 1;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow:hidden;\n font-size:calc(10px + 1vw + 1vh);\n font-weight: 600;\n font-size: calc(8px + .2vw + .5vh);\n font-family: var(--pm-font-family-2);\n position:relative;\n }\n .before-titre{\n \tcolor: #313232;\n font-weight: 400;\n font-size: calc(6px + .3vw);\n text-align:left;\n align-self: baseline;\n }\n \n \n .prix{\n \tcolor:#313232;\n font-weight:300;\n font-size:calc(10px + .1vw);\n text-align:left;\n font-family: var(--pm-font-family-2);\n display:flex;\n align-items:center;\n }\n .price-container img{\n \t height: calc(10px + 0.1vw);\n width: auto;\n }\n\n \n .ordre{\n \tdisplay:flex;\n flex-direction:column;\n width:65%;\n justify-content: center;\n }\n .price-container{\n \tdisplay: flex;\n justify-content: flex-start;\n align-items:center;\n width: 100%;\n gap: 3px;\n }\n \n \n #link {\n text-decoration:none;\n color:#000;\n cursor:pointer;\n width:100%;\n display:flex;\n flex-direction:column;\n gap :5%;\n justify-content:center;\n align-items:center;\n }\n \n \n \n .product-cta{\n \tbackground-color:var(--pm-primary-color);\n color:white;\n border:1px solid var(--pm-primary-color);\n font-size:calc(7px + 1vh);\n margin:0;\n margin-top:10px;\n padding:1.5vh 0;\n cursor:pointer;\n transition:all ease .3s;\n display:flex;\n justify-content:center;\n align-items:center;\n border-radius:4px;\n font-weight:500;\n }\n .product-cta:hover{\n \tbackground-color:var(--pm-secondary-color);\n color:var(--pm-tertiary-color);\n }\n \n .pm-header{\n \tbackground-color:var(--pm-secondary-color);\n display:flex;\n align-items:center;\n justify-content:space-around;\n padding:3vh 6vw;\n width:80%;\n }\n .pm-heading{\n \t color:var(--pm-tertiary-color);\n font-size:17px;\n margin:0;\n text-overflow:ellipsis;\n font-family: var(--pm-font-family-1);\n font-weight:600;\n text-align:left;\n }\n .pm-heading span{\n \tcolor:#232A4C;\n }\n \n .copiercoller{\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding:7px 10px ;\n font-weight: 400;\n border: dashed 2px var(--pm-tertiary-color);\n gap:10px;\n }\n \n #codepromo{\n color:var(--pm-tertiary-color);\n\tfont-family:var(--pm-font-family-1);\n font-weight:100;\n font-size:25px;\n }\n \n .promocode{\n display:block;\n \tcolor:var(--pm-primary-color);\n }\n \n #copyButton{\n height:100%;\n width:100%;\n display:block;\n background-position:center;\n background-repeat: no-repeat;\n background-size:cover;\n border:none;\n background-color:transparent;\n cursor:pointer;\n }\n .svg-icon {\n width: 2em;\n height: 2em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: var(--pm-tertiary-color);\n}\n\n\n \n \n .popuptext {\n visibility: visible;\n width: 120%;\n background-color: #555;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 50%;\n top: -100%;\n transform: translate(-50%, -50%);\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #555 transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n \n @media only screen and (max-width: 640px) {\n \n }\n \n</style>\n\n<div class=\"pm-root\">\n \n <div class=\"pm-header\">\n <p class=\"pm-heading\">Content de vous revoir,<br> \n Profitez de <span>10%</span> sur l’intégralité de nos formations avec le code : </p>\n <div class=\"copiercoller\">\n <span class=\"promocode perfmaker-action\" id=\"codePromo\">SOU10</span>\n <button id=\"copyButton\">\n <svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M18.378,1.062H3.855c-0.309,0-0.559,0.25-0.559,0.559c0,0.309,0.25,0.559,0.559,0.559h13.964v13.964\n\t\t\t\t\t\t\t\tc0,0.309,0.25,0.559,0.559,0.559c0.31,0,0.56-0.25,0.56-0.559V1.621C18.938,1.312,18.688,1.062,18.378,1.062z M16.144,3.296H1.621\n\t\t\t\t\t\t\t\tc-0.309,0-0.559,0.25-0.559,0.559v14.523c0,0.31,0.25,0.56,0.559,0.56h14.523c0.309,0,0.559-0.25,0.559-0.56V3.855\n\t\t\t\t\t\t\t\tC16.702,3.546,16.452,3.296,16.144,3.296z M15.586,17.262c0,0.31-0.25,0.558-0.56,0.558H2.738c-0.309,0-0.559-0.248-0.559-0.558\n\t\t\t\t\t\t\t\tV4.972c0-0.309,0.25-0.559,0.559-0.559h12.289c0.31,0,0.56,0.25,0.56,0.559V17.262z\"></path>\n\t\t\t\t\t\t</svg>\n <span class=\"popuptext \" id=\"myPopup\">Code copié&nbsp;!</span>\n </button>\n </div>\n </div>\n <div class=\"box-scroll perfmaker-for\" data-key=\"BASKET_HISTORICS.historique\" data-varname=\"historique\">\n \n <div class=\"produits\" id=\"produit\">\n\n \t<a id=\"link\"class=\"perfmaker-action perfmaker-data\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">\n \n <img class=\"perfmaker-data\" data-attribute-src=\"${historique.product_image}\"> \n </a>\n <div class=\"ordre\">\n <!--titre du produit-->\n <span class=\"before-titre\">Formation</span>\n <div class=\"titreproduit perfmaker-data\" data-key=\"historique.product_name\">Titre produit</div>\n\n \n <!--prix-->\n <div class=\"price-container\">\n <img src=\"https://img.perfmaker.net/1177/1681808203_Group%201.svg\">\n \t<span class=\"prix perfmaker-data\" data-key=\"historique.product_price\">150€</span>\n \n \n </div>\n \n <a class=\"perfmaker-action product-cta\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">Découvrir</a>\n\n </div>\n </div>\n \n </div>\n <span class=\"bubble perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\">Dernières consultations </span>\n </div>\n\n\n\n\n\n\n\n\n","name":"SideBox","notBlocking":false},{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/984/JS/Copy_code_promo.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"38px","top":"4px"},"coverStyle":{"opacity":".6","transition":"opacity .5s linear","background-color":"transparent"},"iframeStyle":{},"wrapperClose":{"transition":"all .4s linear","left":"-100%"},"wrapperHidden":{"width":"950px","height":"210px","bottom":"0","left":"-100%"},"wrapperOpen":{"transition":"left .4s linear","left":"0"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width:20px;\n height: 20px;\n cursor: pointer;\n background-color:black;\n border-radius:100px;\n }\n .line{\n position: absolute;\n background-color:white;\n width: 12px;\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 only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n bottom: 0vh !important;\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:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');\n \n \n \n .pm-root{\n height:100%;\n border-radius: 0 10px 10px 0;\n width:100%;\n display:flex;\n position:relative;\n flex-direction:column;\n align-items: flex-start;\n justify-content:flex-end;\n font-family: var(--pm-font-family-1);\n \toverflow:hidden;\n background-color:transparent;\n position:relative;\n background-color: var(--pm-secondary-color);\n \n }\n .bubble{\n \tposition:absolute;\n right:20px;\n top:50%;\n transform:translateY(-50%);\n text-transform:uppercase;\n font-size:12px;\n height:100%;\n margin-top:10px;\n font-weight:700;\n text-align:center;\n color:white;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n\t\n }\n .pm-title{\n font-family: var(--pm-font-family-1);\n color:var(--pm-tertiary-color);\n margin-bottom: 0px;\n font-weight:700;\n text-align: center;\n position:absolute;\n right:-15%; \n padding: 3vh 0 0 0;\n border-radius: 10px 10px 0 0;\n font-size:9.5px;\n z-index:10;\n text-transform:uppercase;\ntransform:rotate(90deg);\n }\n \n \n \n .box-scroll{\n background-color: var(--pm-secondary-color);\n position: relative;\n width:100%;\n height: 70%;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n overflow-y: scroll;\n }\n .logo{\n position: fixed !important;\n left: 50%;\n transform: translateX(-50%);\n top:35px !important;\n height:25px !important;\n object-fit:contain;\n width:unset !important;\n }\n \n .box-scroll::-webkit-scrollbar {\n display: none; /* Suppression de la cross bar */\n }\n \n .produits{\n display: flex;\n flex-direction: row;\n box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;\n padding: 10px;\n margin:0px 10px ;\n min-width:185px;\n width: 230px;\n height: calc(100% - 55px);\n position:relative;\n background-color:var(--pm-tertiary-color);\n border-radius:8px;\n }\n .produits:hover{\n box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;\n }\n .produits img{\n height: 60px;\n object-fit: contain;\n width:85%;\n border-radius:9px;\n }\n \n \n \n \n .titreproduit{\n \tmargin: 6px 0 6px 0;\n text-align: left;\n display: -webkit-box;\n max-width: 100%;\n width: 100%;\n line-height: 1;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow:hidden;\n font-size:calc(10px + 1vw + 1vh);\n font-weight: 600;\n font-size: calc(8px + .2vw + .5vh);\n font-family: var(--pm-font-family-2);\n position:relative;\n }\n .before-titre{\n \tcolor: #313232;\n font-weight: 400;\n font-size: calc(6px + .3vw);\n text-align:left;\n align-self: baseline;\n }\n \n \n .prix{\n \tcolor:#313232;\n font-weight:300;\n font-size:calc(10px + .1vw);\n text-align:left;\n font-family: var(--pm-font-family-2);\n display:flex;\n align-items:center;\n }\n .price-container img{\n \t height: calc(10px + 0.1vw);\n width: auto;\n }\n\n \n .ordre{\n \tdisplay:flex;\n flex-direction:column;\n width:65%;\n justify-content: center;\n }\n .price-container{\n \tdisplay: flex;\n justify-content: flex-start;\n align-items:center;\n width: 100%;\n gap: 3px;\n }\n \n \n #link {\n text-decoration:none;\n color:#000;\n cursor:pointer;\n width:100%;\n display:flex;\n flex-direction:column;\n gap :5%;\n justify-content:center;\n align-items:center;\n }\n \n \n \n .product-cta{\n \tbackground-color:var(--pm-primary-color);\n color:white;\n border:1px solid var(--pm-primary-color);\n font-size:calc(7px + 1vh);\n margin:0;\n margin-top:10px;\n padding:1.5vh 0;\n cursor:pointer;\n transition:all ease .3s;\n display:flex;\n justify-content:center;\n align-items:center;\n border-radius:4px;\n font-weight:500;\n }\n .product-cta:hover{\n \tbackground-color:var(--pm-secondary-color);\n color:var(--pm-tertiary-color);\n }\n \n .pm-header{\n \tbackground-color:var(--pm-secondary-color);\n display:flex;\n align-items:center;\n justify-content:space-around;\n padding:3vh 6vw;\n width:80%;\n }\n .pm-heading{\n \t color:var(--pm-tertiary-color);\n font-size:17px;\n margin:0;\n text-overflow:ellipsis;\n font-family: var(--pm-font-family-1);\n font-weight:600;\n text-align:left;\n }\n .pm-heading span{\n \tcolor:#232A4C;\n }\n \n .copiercoller{\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding:4px 10px ;\n font-weight: 400;\n border: dashed 2px var(--pm-tertiary-color);\n gap:10px;\n }\n \n #codepromo{\n color:white;\n\tfont-family:var(--pm-font-family-1);\n font-weight:100;\n font-size:25px;\n }\n \n .promocode{\n display:block;\n color:white;\n }\n \n #copyButton{\n height:100%;\n width:100%;\n display:block;\n background-position:center;\n background-repeat: no-repeat;\n background-size:cover;\n border:none;\n background-color:transparent;\n cursor:pointer;\n }\n .svg-icon {\n width: 2em;\n height: 2em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: var(--pm-tertiary-color);\n}\n\n\n \n \n .popuptext {\n visibility: hidden;\n width: 10%;\n background-color: #555;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 76%;\n top: 35%;\n transform: translate(-50%, -50%);\n }\n .popuptext::after{\n \tdisplay:none;\n }\n \n \n .popup .show {\n visibility: none;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n \n @media only screen and (max-width: 640px) {\n \n }\n \n</style>\n\n<div class=\"pm-root\">\n \n <div class=\"pm-header\">\n <p class=\"pm-heading\">Content de vous revoir,<br> \n Profitez de <span>10%</span> sur l’intégralité de nos formations avec le code : </p>\n <div class=\"copiercoller\">\n <span class=\"promocode perfmaker-action\" id=\"codePromo\">SOU10</span>\n <button id=\"copyButton\">\n <svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M18.378,1.062H3.855c-0.309,0-0.559,0.25-0.559,0.559c0,0.309,0.25,0.559,0.559,0.559h13.964v13.964\n\t\t\t\t\t\t\t\tc0,0.309,0.25,0.559,0.559,0.559c0.31,0,0.56-0.25,0.56-0.559V1.621C18.938,1.312,18.688,1.062,18.378,1.062z M16.144,3.296H1.621\n\t\t\t\t\t\t\t\tc-0.309,0-0.559,0.25-0.559,0.559v14.523c0,0.31,0.25,0.56,0.559,0.56h14.523c0.309,0,0.559-0.25,0.559-0.56V3.855\n\t\t\t\t\t\t\t\tC16.702,3.546,16.452,3.296,16.144,3.296z M15.586,17.262c0,0.31-0.25,0.558-0.56,0.558H2.738c-0.309,0-0.559-0.248-0.559-0.558\n\t\t\t\t\t\t\t\tV4.972c0-0.309,0.25-0.559,0.559-0.559h12.289c0.31,0,0.56,0.25,0.56,0.559V17.262z\"></path>\n\t\t\t\t\t\t</svg>\n <span class=\"popuptext \" id=\"myPopup\">Code copié&nbsp;!</span>\n </button>\n </div>\n </div>\n <div class=\"box-scroll perfmaker-for\" data-key=\"BASKET_HISTORICS.historique\" data-varname=\"historique\">\n \n <div class=\"produits\" id=\"produit\">\n\n \t<a id=\"link\"class=\"perfmaker-action perfmaker-data\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">\n \n <img class=\"perfmaker-data\" data-attribute-src=\"${historique.product_image}\"> \n </a>\n <div class=\"ordre\">\n <!--titre du produit-->\n <span class=\"before-titre\">Formation</span>\n <div class=\"titreproduit perfmaker-data\" data-key=\"historique.product_name\">Titre produit</div>\n\n \n <!--prix-->\n <div class=\"price-container\">\n <img src=\"https://img.perfmaker.net/1177/1681808203_Group%201.svg\">\n \t<span class=\"prix perfmaker-data\" data-key=\"historique.product_price\">150€</span>\n \n \n </div>\n \n <a class=\"perfmaker-action product-cta\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">Découvrir</a>\n\n </div>\n </div>\n \n </div>\n <span class=\"bubble\">Dernières consultations </span>\n </div>\n\n\n\n\n\n\n\n\n","name":"SideBox","notBlocking":false},{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/984/JS/Copy_code_promo.js","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"38px","top":"4px"},"coverStyle":{"opacity":".6","transition":"opacity .5s linear","background-color":"transparent"},"iframeStyle":{},"wrapperClose":{"transition":"all .4s linear","bottom":"-100%"},"wrapperHidden":{"width":"950px","height":"210px","left":"-100%","bottom":"0"},"wrapperOpen":{"transition":"all .4s linear","left":"-890px"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width:20px;\n height: 20px;\n cursor: pointer;\n background-color:black;\n border-radius:100px;\n }\n .line{\n position: absolute;\n background-color:white;\n width: 12px;\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 only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n bottom: 0vh !important;\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:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');\n \n \n \n .pm-root{\n height:100%;\n border-radius: 0 10px 10px 0;\n width:100%;\n display:flex;\n position:relative;\n flex-direction:column;\n align-items: flex-start;\n justify-content:flex-end;\n font-family: var(--pm-font-family-1);\n \toverflow:hidden;\n background-color:transparent;\n position:relative;\n background-color: var(--pm-secondary-color);\n \n }\n .bubble{\n \tposition:absolute;\n right:20px;\n top:50%;\n transform:translateY(-50%);\n text-transform:uppercase;\n font-size:12px;\n height:100%;\n margin-top:10px;\n font-weight:700;\n text-align:center;\n color:white;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n\tcursor:pointer;\n }\n .pm-title{\n font-family: var(--pm-font-family-1);\n color:var(--pm-tertiary-color);\n margin-bottom: 0px;\n font-weight:700;\n text-align: center;\n position:absolute;\n right:-15%; \n padding: 3vh 0 0 0;\n border-radius: 10px 10px 0 0;\n font-size:9.5px;\n z-index:10;\n text-transform:uppercase;\ntransform:rotate(90deg);\n }\n \n \n \n .box-scroll{\n background-color: var(--pm-secondary-color);\n position: relative;\n width:100%;\n height: 70%;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n overflow-y: scroll;\n }\n .logo{\n position: fixed !important;\n left: 50%;\n transform: translateX(-50%);\n top:35px !important;\n height:25px !important;\n object-fit:contain;\n width:unset !important;\n }\n \n .box-scroll::-webkit-scrollbar {\n display: none; /* Suppression de la cross bar */\n }\n \n .produits{\n display: flex;\n flex-direction: row;\n box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;\n padding: 10px;\n margin:0px 10px ;\n min-width:185px;\n width: 230px;\n height: calc(100% - 55px);\n position:relative;\n background-color:var(--pm-tertiary-color);\n border-radius:8px;\n }\n .produits:hover{\n box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;\n }\n .produits img{\n height: 60px;\n object-fit: contain;\n width:85%;\n border-radius:9px;\n }\n \n \n \n \n .titreproduit{\n \tmargin: 6px 0 6px 0;\n text-align: left;\n display: -webkit-box;\n max-width: 100%;\n width: 100%;\n line-height: 1;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow:hidden;\n font-size:calc(10px + 1vw + 1vh);\n font-weight: 600;\n font-size: calc(8px + .2vw + .5vh);\n font-family: var(--pm-font-family-2);\n position:relative;\n }\n .before-titre{\n \tcolor: #313232;\n font-weight: 400;\n font-size: calc(6px + .3vw);\n text-align:left;\n align-self: baseline;\n }\n \n \n .prix{\n \tcolor:#313232;\n font-weight:300;\n font-size:calc(10px + .1vw);\n text-align:left;\n font-family: var(--pm-font-family-2);\n display:flex;\n align-items:center;\n }\n .price-container img{\n \t height: calc(10px + 0.1vw);\n width: auto;\n }\n\n \n .ordre{\n \tdisplay:flex;\n flex-direction:column;\n width:65%;\n justify-content: center;\n }\n .price-container{\n \tdisplay: flex;\n justify-content: flex-start;\n align-items:center;\n width: 100%;\n gap: 3px;\n }\n \n \n #link {\n text-decoration:none;\n color:#000;\n cursor:pointer;\n width:100%;\n display:flex;\n flex-direction:column;\n gap :5%;\n justify-content:center;\n align-items:center;\n }\n \n \n \n .product-cta{\n \tbackground-color:var(--pm-primary-color);\n color:white;\n border:1px solid var(--pm-primary-color);\n font-size:calc(7px + 1vh);\n margin:0;\n margin-top:10px;\n padding:1.5vh 0;\n cursor:pointer;\n transition:all ease .3s;\n display:flex;\n justify-content:center;\n align-items:center;\n border-radius:4px;\n font-weight:500;\n }\n .product-cta:hover{\n \tbackground-color:var(--pm-secondary-color);\n color:var(--pm-tertiary-color);\n }\n \n .pm-header{\n \tbackground-color:var(--pm-secondary-color);\n display:flex;\n align-items:center;\n justify-content:space-around;\n padding:3vh 6vw;\n width:80%;\n }\n .pm-heading{\n \t color:var(--pm-tertiary-color);\n font-size:17px;\n margin:0;\n text-overflow:ellipsis;\n font-family: var(--pm-font-family-1);\n font-weight:600;\n text-align:left;\n }\n .pm-heading span{\n \tcolor:#232A4C;\n }\n \n .copiercoller{\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding:7px 10px ;\n font-weight: 400;\n border: dashed 2px var(--pm-tertiary-color);\n gap:10px;\n }\n \n #codepromo{\n color:var(--pm-tertiary-color);\n\tfont-family:var(--pm-font-family-1);\n font-weight:100;\n font-size:25px;\n }\n \n .promocode{\n display:block;\n \tcolor:var(--pm-primary-color);\n }\n \n #copyButton{\n height:100%;\n width:100%;\n display:block;\n background-position:center;\n background-repeat: no-repeat;\n background-size:cover;\n border:none;\n background-color:transparent;\n cursor:pointer;\n }\n .svg-icon {\n width: 2em;\n height: 2em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: var(--pm-tertiary-color);\n}\n\n\n \n \n .popuptext {\n visibility: visible;\n width: 120%;\n background-color: #555;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 50%;\n top: -100%;\n transform: translate(-50%, -50%);\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #555 transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n \n @media only screen and (max-width: 640px) {\n \n }\n \n</style>\n\n<div class=\"pm-root\">\n \n <div class=\"pm-header\">\n <p class=\"pm-heading\">Content de vous revoir,<br> \n Profitez de <span>10%</span> sur l’intégralité de nos formations avec le code : </p>\n <div class=\"copiercoller\">\n <span class=\"promocode perfmaker-action\" id=\"codePromo\">SOU10</span>\n <button id=\"copyButton\">\n <svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M18.378,1.062H3.855c-0.309,0-0.559,0.25-0.559,0.559c0,0.309,0.25,0.559,0.559,0.559h13.964v13.964\n\t\t\t\t\t\t\t\tc0,0.309,0.25,0.559,0.559,0.559c0.31,0,0.56-0.25,0.56-0.559V1.621C18.938,1.312,18.688,1.062,18.378,1.062z M16.144,3.296H1.621\n\t\t\t\t\t\t\t\tc-0.309,0-0.559,0.25-0.559,0.559v14.523c0,0.31,0.25,0.56,0.559,0.56h14.523c0.309,0,0.559-0.25,0.559-0.56V3.855\n\t\t\t\t\t\t\t\tC16.702,3.546,16.452,3.296,16.144,3.296z M15.586,17.262c0,0.31-0.25,0.558-0.56,0.558H2.738c-0.309,0-0.559-0.248-0.559-0.558\n\t\t\t\t\t\t\t\tV4.972c0-0.309,0.25-0.559,0.559-0.559h12.289c0.31,0,0.56,0.25,0.56,0.559V17.262z\"></path>\n\t\t\t\t\t\t</svg>\n <span class=\"popuptext \" id=\"myPopup\">Code copié&nbsp;!</span>\n </button>\n </div>\n </div>\n <div class=\"box-scroll perfmaker-for\" data-key=\"BASKET_HISTORICS.historique\" data-varname=\"historique\">\n \n <div class=\"produits\" id=\"produit\">\n\n \t<a id=\"link\"class=\"perfmaker-action perfmaker-data\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">\n \n <img class=\"perfmaker-data\" data-attribute-src=\"${historique.product_image}\"> \n </a>\n <div class=\"ordre\">\n <!--titre du produit-->\n <span class=\"before-titre\">Formation</span>\n <div class=\"titreproduit perfmaker-data\" data-key=\"historique.product_name\">Titre produit</div>\n\n \n <!--prix-->\n <div class=\"price-container\">\n <img src=\"https://img.perfmaker.net/1177/1681808203_Group%201.svg\">\n \t<span class=\"prix perfmaker-data\" data-key=\"historique.product_price\">150€</span>\n \n \n </div>\n \n <a class=\"perfmaker-action product-cta\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">Découvrir</a>\n\n </div>\n </div>\n \n </div>\n <span class=\"bubble perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\">Dernières consultations </span>\n </div>\n\n\n\n\n\n\n\n\n","name":"SideBox","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1},{"__typename":"ScenarioTransitions","actionType":"STAGE_TIMER","closeBefore":false,"data":1,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":false,"data":null,"nextStage":2},{"__typename":"ScenarioTransitions","actionType":"STAGE_TIMER","closeBefore":false,"data":10,"nextStage":2}],[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1}]]}