{"archived":0,"name":"Produits complémentaires [Mobile] v2","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/940/JS/1637847233_js_vuillermoz_mobile.js","formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"10px","right":"10px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .5s"},"iframeStyle":{},"wrapperClose":{"bottom":"-100%","transition":"bottom ease .5s"},"wrapperHidden":{"height":"50vh","width":"90vw","right":"50%","bottom":"-100%","transform":"translate(50%, 50%)","overflow":"hidden !important"},"wrapperOpen":{"bottom":"50%","transition":"bottom ease .5s"}},"htmlCloseButton":"<style>\n .perfmaker-close-button {\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n height: 20px;\n width: 20px;\n border: none;\n margin: 0;\n \tcolor: #000;\n padding: 0;\n \tfont-weight: bold;\n box-sizing: border-box;\n cursor: pointer;\n }\n \n @media only screen and (max-width: 670px) {\n \t.perfmaker-sidebar-wrapper {\n top:unset !important;\n bottom:2vh!important;\n right: 50% !important;\n transform: translateX(50%)!important;\n \t}\n } \n \n \n</style>\n\n<a class=\"perfmaker-close-button perfmaker-action\">\n X\n</a>","htmlContent":"<style>\n\n @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');\n \n :root {\n /* Règles CSS générales */\n --pm-background-color: #FFFFFF;\n --pm-primary-color: #000000;\n --pm-secondary-color: #D81D61;\n --pm-text-color: black;\n --pm-button-color: black;\n --pm-wrapper-border-radius: 0px;\n /* Logo */\n --pm-logo:url('https://img.perfmaker.net/1064/1633699311_logo_test.png');\n --pm-logo-width:10vh;\n --pm-logo-height:10vh;\n /* Image de droite */\n --pm-background-img:url('https://img.perfmaker.net/1064/1634207475_photo-1604173552214-3464d9175fa0.jpeg');\n /* Sidebox Title configuration */\n --pm-title-family: 'Open Sans', sans-serif;\n --pm-title-size: calc(15px + 1vh);\n --pm-title-weight: 700;\n /* Product configuration */\n --pm-product-family: 'Open Sans', sans-serif;\n --pm-product-size: calc(7px + 1vh);\n --pm-product-weight: 400;\n /* Price configuration */\n --pm-price-family: 'Open Sans', sans-serif;\n --pm-price-size: calc(10px + 1vh);\n --pm-price-weight: 500;\n /* Container configuration */\n --pm-container-family: 'Open Sans', sans-serif;\n --pm-container-size: calc(12px + 1vh);\n --pm-container-weight: 300;\n /* Bouton */\n --pm-bouton-family: 'Open Sans', sans-serif;\n --pm-bouton-color:#FFFFFF;\n --pm-bouton-size: calc(11px + 1vh);\n --pm-bouton-weight: 400;\n --pm-bouton-text: \"Poursuivre ma navigation\";\n --pm-bouton-text-transform: uppercase;\n --pm-bouton-border-radius:0px;\n --pm-bouton-border:1px solid transparent;\n --pm-bouton-color-hover:white;\n }\n \n \n \n \n /* Se remplit automatiquement avec le BO. Remplir uniquement pour les tests */\n \n .pm-root,\n .pm-container {\n width: 100%;\n background-color: var(--pm-background-color);\n height: 100%;\n overflow: hidden;\n position: relative;\n z-index: 2;\n border-radius: var(--pm-wrapper-border-radius);\n }\n .pm-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background-color:var(--pm-background-color);\n overflow: hidden;\n }\n .pm-title {\n width: 80%;\n text-align: center;\n text-transform: none;\n font-size: var(--pm-title-size);\n margin-top: 5vh;\n color: var(--pm-primary-color);\n font-family: var(--pm-title-family);\n font-weight:var(--pm-title-weight);\n \n }\n .pm-container .container {\n width: 100%;\n height: 90%;\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n }\n \n .pm-container .card {\n display: flex;\n width: 100%;\n height: 80%;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n cursor:pointer;\n }\n .pm-container .image {\n display: flex;\n justify-content: center;\n align-items: center;\n height:80%;\n }\n .pm-container .image img {\n width:30vh;\n height:30vh;\n }\n \n .pm-container .name {\n width: 80%;\n text-align: center;\n text-transform: none;\n font-size: var(--pm-product-size);\n margin: 1vh;\n color: var(--pm-primary-color);\n font-family: var(--pm-product-family);\n font-weight:var(--pm-product-weight);\n }\n \n .pm-container .price {\n text-align: center;\n text-transform: none;\n font-size: var(--pm-price-size);\n color: var(--pm-primary-color);\n font-family: var(--pm-price-family);\n font-weight:var(--pm-price-weight);\n }\n \n .pm-container button {\n background-color: var(--pm-primary-color);\n color: var(--pm-bouton-color);\n border-radius: var(--pm-bouton-border-radius);\n border: var(--pm-bouton-border);\n text-transform: var(--pm-bouton-text-transform);\n box-sizing: border-box;\n padding: 2vh 7vh;\n font-size: var(--pm-bouton-size);\n cursor: pointer;\n margin-top: 15px;\n margin-bottom: 20px;\n transition: all ease .5s;\n font-family: var(--pm-bouton-family);\n font-weight: var(--pm-bouton-weight);\n }\n \n .pm-container button:hover {\n transition: all ease .5s;\n background-color:var(--pm-secondary-color);\n color:var(--pm-bouton-color-hover);\n }\n .pm-container button:before{\n content : var(--pm-bouton-text);\n }\n .pm-container .voirplus {\n text-transform:uppercase;\n font-size:calc(8px + 1vh);\n font-family:'Open Sans', sans-serif;\n color:grey;\n text-decoration:underline;\n cursor:pointer;\n }\n \n @media all and (max-width: 740px) {\n .container {\n flex-direction: row !important;\n overflow-x: scroll;\n flex-wrap: nowrap;\n justify-content: center !important;\n }\n .pm-container .card {\n flex-direction: column !important;\n flex: 0 0 auto;\n height: 90% !important;\n width: 35% !important;\n /*justify-content: flex-start !important;*/\n margin-right:5vh;\n cursor:pointer;\n }\n .pm-container .card:last-child {\n margin-right:0;\n }\n .pm-container .name {\n height: auto !important;\n width: 100% !important;\n padding: px;\n box-sizing: border-box;\n justify-content: unset !important;\n text-align: center;\n align-items:unset !important;\n font-size:calc(6px + 1vw);\n }\n .pm-container .image {\n height: 50%;\n width: 100%;\n }\n .pm-container .voirplus {\n margin-top:2vh;\n }\n \n }\n \n\n \n </style>\n <div class=\"pm-container\">\n <div class=\"pm-title\">Vous pourriez aussi aimer...</div>\n <div class=\"container\">\n\n <div id=\"produit_4\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link_4}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-pendantes-or-jaune-375-grenat-poire-de-5x3mm-et-diamants_33023-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img_4}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name_4\">Boucles d'oreilles Pendantes Or Jaune 375 Grenat poire de 5x3mm et Diamants</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix_4\">221 €</div>\n </div>\n\n <div id=\"produit_3\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link_3}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-coeur-grenat-et-diamant-en-or-jaune-375_18086-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img_3}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name_3\">Boucles d'oreilles Coeur Grenat et Diamant en Or Jaune 375</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix_3\">129€</div>\n </div>\n\n <div id=\"produit_2\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link_2}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-pendantes-or-jaune-375-grenat-ovale-et-diamant_20793-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img_2}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name_2\">Boucles d'oreilles Pendantes Or Jaune 375 Grenat Ovale et Diamant</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix_2\">193 €</div>\n </div>\n\n\n <div id=\"produit_1\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link_1}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-or-jaune-375-grenat-navette-6x3mm_30627-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img_1}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name_1\">Boucles d'oreilles Or jaune 375 grenat navette 6x3mm</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix_1\">147 €</div>\n </div>\n\n\n <div id=\"produit0\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link0}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-pendantes-or-jaune-375-grenat-poire-de-5x3mm-et-diamants_33023-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img0}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name0\">Boucles d'oreilles Pendantes Or Jaune 375 Grenat poire de 5x3mm et Diamants</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix0\">221 €</div>\n </div>\n\n <div id=\"produit1\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link1}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-pendantes-or-jaune-375-grenat-poire-de-5x3mm-et-diamants_33023-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img1}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name1\">Boucles d'oreilles Pendantes Or Jaune 375 Grenat poire de 5x3mm et Diamants</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix1\">221 €</div>\n </div>\n\n <div id=\"produit2\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link2}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-coeur-grenat-et-diamant-en-or-jaune-375_18086-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img2}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name2\">Boucles d'oreilles Coeur Grenat et Diamant en Or Jaune 375</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix2\">129€</div>\n </div>\n\n <div id=\"produit3\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link3}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-pendantes-or-jaune-375-grenat-ovale-et-diamant_20793-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img3}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name3\">Boucles d'oreilles Pendantes Or Jaune 375 Grenat Ovale et Diamant</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix3\">193 €</div>\n </div>\n\n <div id=\"produit4\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link4}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-or-jaune-375-grenat-navette-6x3mm_30627-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img4}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name4\">Boucles d'oreilles Or jaune 375 grenat navette 6x3mm</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix4\">147 €</div>\n </div>\n\n <div id=\"produit5\" class=\"card perfmaker-data perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_link5}\">\n <div class=\"image\"><img src=\"https://img.perfmaker.net/940/1635154745_boucles-d-oreilles-pendantes-or-jaune-375-grenat-taille-poire_33029-1.jpeg\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${BASKET.produit_associe_img5}\"></div>\n <div class=\"name perfmaker-data\"data-key=\"BASKET.produit_associe_name5\">Boucles d'oreilles Or jaune 375 grenat navette 6x3mm</div>\n <div class=\"price perfmaker-data\"data-key=\"BASKET.produit_associe_prix5\">147 €</div>\n </div>\n\n\n\n </div>\n <div class=\"voirplus perfmaker-data perfmaker-action\"data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_associe_voirpluslink}\"data-key=\"BASKET.produit_associe_voirplustext\">Voir plus de boucles d'oreilles or et grenats</div>\n <button class=\"perfmaker-action\"data-onclick=\"HIDE_SIDEBAR\" data-url=\"\"></button>\n </div>\n ","name":"Produits 1","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
