/** Shopify CDN: Minification failed Line 465:0 All "@import" rules must come first Line 2336:1 Expected "}" to go with "{" **/ /* Presets */ @font-face { font-family: 'HK Grotesk'; src: /*url(https://yotpo-stool.s3.amazonaws.com/images/Erborian/hkgrotesk-light-webfont.woff2) format('woff2'),*/ url(https://yotpo-stool.s3.amazonaws.com/images/Erborian/hkgrotesk-light-webfont.woff) format('woff'); } @font-face { font-family: 'HK Grotesk bold'; src: /*url(https://yotpo-stool.s3.amazonaws.com/images/Erborian/hkgrotesk_bold-webfont2) format('woff2'),*/ url(https://yotpo-stool.s3.amazonaws.com/images/Erborian/hkgrotesk_bold-webfont.woff) format('woff'); } /* === Changing font and colors === */ :root{ --PrimaryColor_Yotpo: #081F2C; --SecondaryColor_Yotpo: #081F2C; --FontColor_Yotpo: #081F2C; --BorderColor_Yotpo: #081F2C; --FallbackFont_Yotpo: sans-serif; --TitleReviews_Yotpo: #081F2C; --TitleReviewsWeight_Yotpo:; --ContentReviews_Yotpo: #081F2C; --VerifiedIconBackgroundColor_Yotpo: #081F2C; --StoreOwnerAvatar_Yotpo:; } div#yotpo-reviews-star-ratings-widget *{font-family: 'HK Grotesk',sans-serif!important;} div#yotpo-reviews-star-ratings-widget svg.star-container { width: 12px; height: 12px; } div#yotpo-reviews-star-ratings-widget .yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel { font-size: 1.2rem!important; padding: 0; line-height: 24px!important; } /* .yotpo-widget-instance[data-yotpo-section-id="product"] div#yotpo-reviews-star-ratings-widget .yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel:after { content: 'Voir plus'; margin-left: 6px; font-size: 12px; font-weight: 600; line-height: 16px; border-bottom: 1px solid #081f2c; } */ .pdp-main .product-hero .o-product-heading .a-product-reviews .yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel:after { content: 'Lire les avis'; margin-left: 6px; font-size: 12px; font-weight: 700; line-height: 16px; border-bottom: 1px solid #081f2c; } .pdp-main .product-hero .o-product-heading .a-product-reviews .yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel:hover:after { opacity: .7; } .yotpo-widget-products-redemption.yotpo-widget-override-css{ background: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-bg.png?v=1766505417) no-repeat center/cover; margin-bottom: 10px; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option { border-radius: 25px; position: relative; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option .yotpo-redemption-option-details .yotpo-action-button-widget.yotpo-redemption-option-redeem-button { position: absolute; z-index: 10; left: 0; right: 0; margin: 0 auto; bottom: -20%; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:has(.yotpo-redemption-option-redeem-button) .swiper-container { padding-bottom: 100px; } .yotpo-widget-products-redemption.yotpo-widget-override-css button, .yotpo-widget-products-redemption.yotpo-widget-override-css button *{ font-family: 'Hanken Grotesk' !important; font-weight: bold !important; font-size: 16px !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image-container .yotpo-redemption-option-image-label.yotpo-redemption-option-vip-tier-label { border-radius: 22px 22px 0 0; background: #081F2C !important; color: #fff !important; font-family: 'Gasoek One' !important; font-weight: 400 !important; z-index: 11; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image-container .yotpo-redemption-option-image-label.yotpo-redemption-option-vip-tier-label:before { content: "Dès le statut "; display: inline; font-family: 'Hanken Grotesk'; font-weight: 700; } /* Pas de label tier = accessible au tier → bandeau par défaut "Not enough points" */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option.yotpo-is-disabled-button .yotpo-redemption-option-image-container:not(:has(.yotpo-redemption-option-image-label))::before { z-index: 11; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image-container:not(:has(.yotpo-redemption-option-image-label))::before { content: "Points insuffisants"; display: block; position: absolute; top: 0; left: 0; right: 0; padding: 11px 0; font-family: 'Hanken Grotesk'; font-size: 17px; font-weight: 700; color: #fff; background: #081F2C !important; border-radius: 22px 22px 0 0; text-align: center; box-sizing: border-box; z-index: 2; } /* Assez de points ET bon tier → "Now redeemable" */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option:not(:has(button[disabled])):not(.yotpo-is-disabled-button) .yotpo-redemption-option-image-container:not(:has(.yotpo-redemption-option-image-label))::before { content: "DISPONIBLE"; } /* Contour #081F2C sur toutes les tuiles */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option { border-radius: 25px; position: relative; background-color: #fff !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image-container .yotpo-redemption-option-image { background-size: 185px; background-repeat: no-repeat; background-position: center bottom; padding-top: 50px; min-height: 215px; margin-bottom: 20px; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-products-container .yotpo-content-container .yotpo-headline { position: relative; text-transform: uppercase; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-products-container .yotpo-content-container .yotpo-headline:after { content: "*..."; color: #081F2C; display: inline; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-products-container .yotpo-content-container .yotpo-headline:before { content: "ÉCHANGEZ VOS POINTS CONTRE DES"; color: #081F2C; display: inline; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-content-container:after { content: "Découvrez les produits qui vous sont réservés."; display: block; font-family: 'Hanken Grotesk'; font-weight: 400; font-size: 16px; color: #081F2C; line-height: 30px; margin-bottom: 30px; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-options-container .yotpo-redemption-options-carousel button svg { color: #081F2C; } /* Container target - this is for no slider */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container .yotpo-redemption-options-list > div:has(button[disabled="disabled"]) .yotpo-redemption-option, .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(button[disabled="disabled"]) .yotpo-redemption-option, /* Tuiles inaccessibles par tier (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-options-list > div:has(.yotpo-redemption-option-image-label):not(:has(button)) .yotpo-redemption-option, .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(.yotpo-redemption-option-image-label):not(:has(button)) .yotpo-redemption-option, /* Tuiles out-of-stock dans le carousel commun (desktop + mobile, connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(.yotpo-redemption-option-out-of-stock) .yotpo-redemption-option, /* MOBILE : tuiles disabled via classe yotpo-is-disabled-button (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-mobile-carousel .yotpo-redemption-option.yotpo-is-disabled-button, /* MOBILE : tuiles VIP inaccessibles sans bouton (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-mobile-carousel .swiper-wrapper > div:has(.yotpo-redemption-option-image-label):not(:has(button)) .yotpo-redemption-option, /* MOBILE : tuiles out-of-stock via carousel mobile (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-mobile-carousel .yotpo-redemption-option:has(.yotpo-redemption-option-out-of-stock) { position: relative; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container .yotpo-redemption-options-list > div:has(button[disabled="disabled"]) .yotpo-redemption-option:before, .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(button[disabled="disabled"]) .yotpo-redemption-option:before, /* Overlay tuiles inaccessibles par tier (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-options-list > div:has(.yotpo-redemption-option-image-label):not(:has(button)) .yotpo-redemption-option:before, .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(.yotpo-redemption-option-image-label):not(:has(button)) .yotpo-redemption-option:before, /* Overlay out-of-stock dans le carousel commun (desktop + mobile, connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(.yotpo-redemption-option-out-of-stock) .yotpo-redemption-option:before, /* MOBILE : overlay via classe yotpo-is-disabled-button (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-mobile-carousel .yotpo-redemption-option.yotpo-is-disabled-button:before, /* MOBILE : overlay tuiles VIP inaccessibles sans bouton (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-mobile-carousel .swiper-wrapper > div:has(.yotpo-redemption-option-image-label):not(:has(button)) .yotpo-redemption-option:before, /* MOBILE : overlay tuiles out-of-stock via carousel mobile (connecté uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container:not(.yotpo-logged-out) .yotpo-redemption-mobile-carousel .yotpo-redemption-option:has(.yotpo-redemption-option-out-of-stock):before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 10; background: rgba(0,0,0,.6); border-radius: 25px; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container .yotpo-redemption-options-list > div:has(button[disabled="disabled"]) .yotpo-redemption-option button[disabled="disabled"], .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container .yotpo-redemption-options-carousel .swiper-container .swiper-wrapper > div:has(button[disabled="disabled"]) .yotpo-redemption-option button[disabled="disabled"]{ display: none; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-widget-products-redemption-container.yotpo-is-mobile .yotpo-headline.yotpo-is-mobile { max-width: none; margin: 0 auto 20px; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-mobile-carousel.yotpo-is-mobile .yotpo-redemption-option.yotpo-is-mobile { border-radius: 25px; } /* Centrage correct du carousel mobile */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-mobile-carousel .swiper-slide { display: flex; justify-content: center; } /* Cacher le bouton Redeem en mobile (pas de bouton dans ce layout) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-is-mobile .yotpo-redemption-option-redeem-button { display: none !important; } /* Pagination bullets en rouge */ .yotpo-widget-products-redemption.yotpo-widget-override-css .swiper-pagination-bullet { background: #CB333B !important; opacity: 0.4 !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .swiper-pagination-bullet-active { background: #CB333B !important; opacity: 1 !important; } body:has(#main) .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image { min-height: 265px; } /* Décoration SVG — mobile uniquement */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-cost::after { display: none; } @media (max-width: 768px) { .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-cost::after { content: ""; display: block; width: 100%; height: 32px; background: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-earning-tile-deco.svg?v=1766586174) no-repeat center; background-size: contain; margin-top: 8px; } } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-login-button button { height: 40px !important; padding: 0 32px !important; font-size: 16px !important; line-height: 40px !important; font-family: 'Hanken Grotesk' !important; font-weight: 700 !important; background: rgb(203, 51, 59) !important; color: #fff !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; transition: opacity 0.2s !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-login-button button span, .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-login-button button div { font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-login-button button:hover { opacity: 0.85 !important; } /* aligner la largeur du bouton standard sur le bouton coupons */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-login-button .yotpo-button-standard-size { min-width: 0 !important; width: auto !important; } /* ============================================ COUPONS WIDGET ============================================ */ /* Boutons coupons en 16px */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css button, .yotpo-coupons-redemption-widget.yotpo-widget-override-css button * { font-size: 16px !important; } /* Griser les tuiles coupons - pas assez de points */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-options-list > [role="listitem"]:has(button[disabled="disabled"]) { position: relative; overflow: hidden; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-options-list > [role="listitem"]:has(button[disabled="disabled"])::before { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.5); pointer-events: none; } /* Remplacer le texte du bouton disabled par "Not enough points" */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css button[disabled="disabled"] .yotpo-button-label { visibility: hidden; position: relative; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css button[disabled="disabled"] .yotpo-button-label::after { content: "Points insuffisants"; visibility: visible; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; } /* Garder les boutons disabled en rouge #CB333B */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css button[disabled="disabled"] { background-color: #CB333B !important; opacity: 1 !important; border: none !important; outline: none !important; } /* "GO BACK" → "RETOUR" (bouton retour après échec ajout panier uniquement) */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-add-to-cart-failed-button .yotpo-action-button-text { font-size: 0 !important; line-height: 0 !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-add-to-cart-failed-button .yotpo-action-button-text::after { content: "RETOUR"; font-size: 16px; font-weight: 700; line-height: normal; font-family: 'Hanken Grotesk'; color:#CB333B; } /* Titre produit dans la modale mobile → #081F2C */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-reward-mobile-modal { color: #081F2C !important; } /* "You don't have enough points" → "Vous n'avez pas assez de points" */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-not-enough-points-text-mobile-modal { font-size: 0 !important; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-not-enough-points-text-mobile-modal::after { content: "Vous n'avez pas assez de points."; font-size: 17px; font-family: 'Hanken Grotesk'; font-weight: 700; color: #cb333b !important; } .yotpo-add-to-cart-success-button { display: none !important; } .yotpo-redemption-option-view-cart-button-mobile-modal { display: none !important; } .yotpo-redemption-confirmation-title, .yotpo-redemption-confirmation-title-mobile-modal { font-size: 0 !important; } .yotpo-redemption-confirmation-title::after, .yotpo-redemption-confirmation-title-mobile-modal::after { content: "Êtes-vous sûr·e ?"; font-size: 17px; } @media (min-width: 769px) { .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-products-container .yotpo-content-container .yotpo-headline { display: inline; white-space: nowrap; } .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-content-container { width: 100%; max-width: none; } } /* ============================================ OUT OF STOCK ============================================ */ /* Bandeau — sélecteur allégé pour couvrir desktop ET mobile */ .yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image-label.yotpo-redemption-option-out-of-stock { border-radius: 22px 22px 0 0; background-color: #CB333B !important; color: #fff !important; font-family: 'Hanken Grotesk' !important; font-size: 17px !important; font-weight: 700 !important; line-height: 25px !important; padding-top: 11px !important; padding-bottom: 11px !important; z-index: 11; } @import url(https://fonts.googleapis.com/css2?family=Gasoek+One&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap); /* font-family: "Hanken Grotesk", sans-serif; font-family: "Gasoek One", sans-serif; font-family: "Noto Sans", sans-serif; */ .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-title { display: block; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-title::after { content: "Choisissez vos récompenses."; display: block; padding-bottom: 10px; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background:not(.yotpo-is-mobile) { background-position: right top; } @media (max-width: 1350px) { .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background:not(.yotpo-is-mobile) { background-position: left top !important; } } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-text-container { max-width: 600px !important; position: relative; flex-direction: column; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background:not(.yotpo-is-mobile) .yotpo-text-container:before { content: ""; width: 100%; height: 250px; display: block; position: relative; background: url(https://cdn-widget-assets.yotpo.com/static_assets/fb4Q71rOTUC3VLG3zYNDeA/images/image_2026_03_27_19_55_10_445) no-repeat center bottom/contain; margin-bottom: 40px; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-in-customer .yotpo-text-container.yotpo-center-layout:after { margin-top: 30px; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-in-customer .yotpo-text-container.yotpo-center-layout .yotpo-text-and-buttons .yotpo-title { position: relative; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-in-customer .yotpo-text-container .yotpo-text-and-buttons .yotpo-title:after { content: "fidélité"; display: inline; color: #CB333B; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .action_block_wrapper .yotpo-action-buttons-wrapper > div { width: 100%; max-width: 200px; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .action_block_wrapper .yotpo-action-buttons-wrapper > div button { width: 100%; max-width: 100%; font-family: 'Hanken Grotesk' !important; font-weight: 700 !important; border-width: 2px; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .action_block_wrapper .yotpo-action-buttons-wrapper > .yotpo-login-link button { background: #fff !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .action_block_wrapper .yotpo-action-buttons-wrapper > div button:hover { background: transparent !important; color: #333 !important; } .yotpo-widget-override-css *:focus { outline: none !important; box-shadow: none !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container .yotpo-text-on-background.yotpo-is-mobile { background: none !important; flex-direction: column; height: auto; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container .yotpo-text-on-background.yotpo-is-mobile:before { content: ""; width: 100%; aspect-ratio: 16/7; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-in-customer .yotpo-text-on-background.yotpo-is-mobile:before { background: url(https://cdn-widget-assets.yotpo.com/static_assets/fb4Q71rOTUC3VLG3zYNDeA/images/image_2026_03_27_19_52_44_314) no-repeat center top/cover; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container:not(.yotpo-logged-in-customer) .yotpo-text-on-background.yotpo-is-mobile:before { background: url(https://cdn-widget-assets.yotpo.com/static_assets/fb4Q71rOTUC3VLG3zYNDeA/images/image_2026_03_27_19_52_44_314) no-repeat center top/cover; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-container:after { text-align: center; display: block; width: 100%; } /* .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-container:before { height: 100px; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-and-buttons { padding-top: 0 !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile { height: auto; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-container { padding: 20px; box-sizing: border-box; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-container:after { width: 100%; text-align: center; } */ /* Bordure dégradée en dessous uniquement pour le bloc mobile connecté */ @media (max-width: 1023px) { .yotpo-layout-container.yotpo-logged-in-customer .yotpo-text-on-background.yotpo-is-mobile { border-bottom: none !important; border-image: none !important; padding-bottom: 0 !important; display: flex !important; } } /* Cache le conteneur complet (fond blanc + texte) en mode Mobile + Connecté */ .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-in-customer .yotpo-is-mobile .yotpo-text-container { display: none !important; } /* Centrer le text-container en mobile logged out */ .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-out-customer .yotpo-text-on-background.yotpo-is-mobile { justify-content: center !important; align-items: center !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-out-customer .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-container { width: 100% !important; max-width: 100% !important; position: relative !important; left: auto !important; right: auto !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; align-self: center !important; align-items: center !important; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-primary-button { text-decoration: none !important; } /* Container query — page confirmation (2 colonnes) */ .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear { container-type: inline-size; container-name: yotpo-referral; } @container yotpo-referral (max-width: 550px) { .yotpo-referral-image { display: none !important; } .yotpo-tile-wrapper { flex: 0 0 100% !important; } } /* Media query — page parrainage dédiée (pleine largeur) */ @media screen and (max-width: 1000px) { .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-referral-image { display: none !important; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-tile-wrapper { flex: 0 0 100% !important; } } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tile-wrapper { /* padding: 0 !important; */ } .yotpo-widget-clear { margin-top: 10px !important; margin-bottom: 10px !important; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tile-wrapper .yotpo-tile { align-content: center !important; align-items: center !important; flex-wrap: wrap; height: auto; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tile-wrapper { align-content: center; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear { padding: 90px 50px; box-sizing: border-box; background: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-raf-bg.png?v=1766597915) no-repeat center/cover; display: block; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container { width: 80% !important; margin: 0 auto; border-radius: 30px; overflow: hidden; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-referral-image { flex: 0 0 40%; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-tile-wrapper { flex: 0 0 60%; padding: 20px; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-tile-wrapper .yotpo-tile:after { content: "Vos amis parrainés doivent dépenser au moins 40 € pour que la réduction s'applique. Une fois leur commande expédiée, vous recevrez un bon de 10 € valable sous les mêmes conditions."; display: block; font-size: 12px; font-style: italic; font-family: 'Hanken Grotesk'; line-height: 20px; margin-top: 35px; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-tile-wrapper .yotpo-header-text { font-weight: bold !important; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-tile-wrapper div#yotpoReferralDescriptionText { margin: 25px auto 10px; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear .yotpo-container-background.yotpo-swap-container .yotpo-tile-wrapper div#yotpoReferralTitleText:after, .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-container-background.yotpo-is-mobile .yotpo-email-view.yotpo-is-mobile div#yotpoReferralTitleText:after{ content: "OBTENEZ 10€"; display: inline; color: #cb333b; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-input-container input { border-radius: 0; } .yotpo-widget-referral-widget.yotpo-widget-override-css button span { font-weight: bold !important; font-family: 'Hanken Grotesk' !important; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tile:has(.yotpo-final-view):after { display: none !important; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-final-view button { width: 100%; max-width: 300px; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-widget-clear:has(.yotpo-is-mobile) { padding: 30px 20px; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-container-background.yotpo-is-mobile { border-radius: 25px; overflow: hidden; } /* Masquer le texte des boutons de partage */ .yotpo-share-buttons-container .yotpo-share-button-txt { display: none !important; } /* Optionnel : Ajuster l'alignement des icônes pour les centrer */ .yotpo-share-buttons-container .yotpo-share-button-widget { display: flex; justify-content: center; align-items: center; padding: 10px; /* À ajuster selon votre design */ } .yotpo-share-options-headline { display: none !important; } /* 1. Mettre la marge du formulaire à 0 */ .yotpo-referral-widget-form { margin-bottom: 20px !important; } @media screen and (max-width: 480px) { /* 1. Mettre la marge du formulaire à 0 */ .yotpo-referral-widget-form { margin-bottom: 20px !important; } /* 3. Ajuster le wrapper de partage pour qu'il remonte bien */ .yotpo-share-buttons-wrapper.yotpo-is-mobile { padding-top: 0 !important; margin-top: 10px !important; /* Petit espace optionnel pour ne pas coller au bouton */ } /* 4. S'assurer que les icônes restent bien centrées */ .yotpo-share-buttons-container { justify-content: center !important; padding: 0 !important; } } /* Centrage du conteneur principal */ .yotpo-share-buttons-container { display: flex !important; flex-wrap: wrap !important; /* Permet le passage à la ligne sur mobile */ justify-content: center !important; /* Centre horizontalement */ align-items: center !important; /* Centre verticalement */ gap: 10px !important; /* Espace régulier entre les boutons */ padding: 0 !important; margin: 0 auto !important; list-style: none !important; } /* Centrage des éléments de liste */ .yotpo-share-buttons-container li { display: flex !important; justify-content: center !important; margin: 0 !important; /* On utilise gap sur le parent pour l'espacement */ } /* Optionnel : Si vous voulez que le bouton "Copy Link" soit sur sa propre ligne tout en étant centré */ .yotpo-share-copy-link { flex-basis: 100% !important; display: flex !important; justify-content: center !important; margin-bottom: 10px !important; } .yotpo-tile-wrapper { padding: 20px !important; display: block !important; } .yotpo-text-copied-label { display: none; } .yotpo-text-copied::after { content: "Copié"; color: #CB333B; font-si .yotpo-vip-tiers-widget.yotpo-widget-override-css > div > div { display: block; background: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-bg.png?v=1766505417) no-repeat center/cover !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list { position: relative; display: flex; flex-direction: column; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-headline { font-family: 'Gasoek One' !important; font-weight: 400 !important; position: relative; margin: 0; order: 1; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-headline:before { content: "Les avantages"; display: inline; font-family: 'Hanken Grotesk'; color: #081F2C; text-transform: uppercase; font-weight: bold; font-size: 32px: } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper { order: 3; width: 100% !Important; background: #fff !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-container { order: 4; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:after { content: "Évoluez entre les statuts et débloquez de nouveaux avantages exclusifs."; order: 2; text-align: center; margin: 20px auto 50px; font-size: 16px; font-family: 'Hanken Grotesk'; font-weight:400; line-height: 30px; color: #081F2C; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header { width: 92%; margin: 0 auto; border-radius: 15px; box-shadow: 0 0 0 5px #fff; position: relative; padding: 20px 0; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header { min-height: 120px !important; height: auto !important; margin-bottom: 13px; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header-blank { min-height: 122px !important; height: auto !important; margin-bottom: 13px; } /* .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-is-mobile .yotpo-vip-tiers-grid-header-blank{ min-height: 120px !important; } */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header .yotpo-vip-tier-icon-wrapper { height: 100px; margin-top: -72px; position: relative; z-index: 2; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header .yotpo-vip-tier-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div .yotpo-vip-tiers-grid-benefit-name:nth-child(even), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div .yotpo-vip-tiers-grid-benefit-status:nth-child(even) { background: #fff; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div .yotpo-vip-tiers-grid-benefit-name:nth-child(odd), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div .yotpo-vip-tiers-grid-benefit-status:nth-child(odd) { background-image: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-vip-deco-grad.jpg?v=1766590456); background-size: cover; background-repeat: no-repeat; border: none !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div .yotpo-vip-tiers-grid-benefit-name p { font-family: 'Hanken Grotesk' !IMPORTANT; font-weight: bold !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-name:nth-child(odd), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(odd){ background-position: 0%; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-name:nth-child(odd), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(odd){ background-position: 20%; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-name:nth-child(odd), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(odd){ background-position: 40%; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-name:nth-child(odd), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(odd){ background-position: 60%; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-name:nth-child(odd), .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(odd){ background-position: 80%; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-container .yotpo-vip-tiers-grid-container > div:first-child > div:nth-child(2){ border-radius: 25px 0 0 0; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-container .yotpo-vip-tiers-grid-container > div:first-child > div:nth-child(14){ border-radius: 0 0 0 25px; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container div:last-child .yotpo-grid-vip-tier div:nth-child(2) { border-radius: 0 25px 0 0; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container div:last-child .yotpo-grid-vip-tier div:nth-child(14) { border-radius: 0 0 25px 0; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container .yotpo-active { position: relative; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container .yotpo-active .yotpo-grid-vip-tier, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container .yotpo-active .yotpo-grid-vip-tier > div { border: none !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container .yotpo-active:after { content: ""; width: 100%; height: 101%; border-radius: 25px; border: 4px solid #081F2C !important; display: block; position: absolute; left: 0; top: -9px; z-index: 1; margin: 0 auto; right: 0; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header .yotpo-vip-tier-name { font-family: 'Gasoek One' !important; font-weight: 400 !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-header .yotpo-vip-tier-threshold { font-weight: bold !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-vip-tiers-progress-bar-summary .yotpo-vip-tiers-progress-bar-tier-status { margin-bottom: 15px; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container * { font-size: 16px !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-vip-tiers-progress-bar-summary .yotpo-vip-tiers-progress-bar-summary-current span.yotpo-templated-variable { font-family: 'Gasoek One' !important; font-weight: 400; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-vip-tiers-progress-bar-summary .yotpo-vip-tiers-progress-bar-summary-next span.yotpo-templated-variable:last-child { font-family: 'Gasoek One'; font-weight: 400 !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-top { margin-bottom: 20px; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-top .yotpo-progress-bar-top-left:after { content: "Vous êtes superbe."; display: block; font-style: italic; font-size: 11px; font-weight: 400; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-top .yotpo-progress-bar-top-right { font-family: 'Gasoek One' !important; color: #081f2c !important; font-weight: 400 !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-outer { height: 13px; border-radius: 50px !important; background: #081f2c; border: none !IMPORTANT; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-outer .yotpo-progress-bar-inner { border-radius: 50px !important; border: none !important; /* On remplace background par le dégradé */ background: linear-gradient(90deg, #CDE0EE 0%, #F6D5E0 33%, #E4CCDF 66%, #BC96BD 100%) !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-outer .yotpo-progress-bar-indicator { background-color: #BC96BD !important; border-color: #BC96BD !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-outer .yotpo-progress-bar-indicator { display: none; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-container .yotpo-progress-bar-bottom * { font-style: italic; color: #081F2C !important; } /* first row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(2) p, /* second row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p, /* third row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(4) p, /* sixth row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(7) p { display: none; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container > div .yotpo-vip-tiers-grid-benefit-status:before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div .yotpo-vip-tiers-grid-benefit-status:before{ color: #111; font-family: 'Hanken Grotesk'; font-weight: bold; font-size: 17px; } /* This is for first row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before { content: "1 point"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before { content: "1 point"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before { content: "1 point"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(2):before { content: "1 point"; } /* This is for second row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before { content: "15 points"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before { content: "30 points"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before { content: "50 points"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(3):before { content: "100 points"; } /* This is for third row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before { content: "Dès 49€"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before { content: "Dès 39€"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before { content: "Dès 19€"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(4):before { content: "Pour toute commande"; } /* This is for sixth row */ .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before { content: "Bon de 5 €"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before { content: "Bon de 10 €"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before { content: "Bon de 15 €"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list:not(.yotpo-is-mobile) .yotpo-vip-tiers-grid-container > div:nth-child(5) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-inner > div:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(7):before { content: "Bon de 20 €"; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .yotpo-vip-tiers-headline { font-size: 25.6px !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile:after { font-size: 17px; line-height: 20px; margin-bottom: 0; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .VueCarousel-wrapper { padding-top: 50px; padding-bottom: 20px; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .yotpo-vip-tiers-grid-column.yotpo-vip-tiers-grid-column-benefits { padding-top: 52px; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .yotpo-vip-tiers-progress-bar-wrapper { max-width: 80%; margin: 0 auto; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile .yotpo-vip-tiers-progress-bar-wrapper .yotpo-progress-bar-bottom * { font-size: 14px !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-list.yotpo-is-mobile:has(.yotpo-vip-tiers-progress-bar-wrapper.yotpo-mobile):after{ margin-bottom: 30px; } /* 1. On force le dégradé sur la barre elle-même */ .yotpo-progress-bar-outer .yotpo-progress-bar-inner { background-color: transparent !important; background-image: linear-gradient(90deg, #CDE0EE 0%, #F6D5E0 33%, #E4CCDF 66%, #BC96BD 100%) !important; background-attachment: fixed !important; /* Optionnel : garde le dégradé fixe */ } /* 2. On change aussi la couleur de l'indicateur (le petit curseur) pour qu'il soit assorti */ .yotpo-progress-bar-outer .yotpo-progress-bar-indicator { background-color: #BC96BD !important; /* La dernière couleur du dégradé */ border-color: #BC96BD !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-grid-container:has(.yotpo-active) .yotpo-vip-tiers-grid-column .yotpo-vip-tiers-grid-header-blank { min-height: 121px !important; border: none !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-is-mobile .yotpo-vip-tiers-grid-container:has(.yotpo-active) .yotpo-vip-tiers-grid-column .yotpo-vip-tiers-grid-header-blank, .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-is-mobile .yotpo-vip-tiers-grid-header-blank{ min-height: 121px !Important; border: none !important; } .yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-is-mobile .yotpo-vip-tiers-grid-header { min-height: 123px !important; } /* fond image dégradé */ .yotpo-coupons-redemption-widget-container { background-image: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-bg.png?v=1766505417) !important; background-size: cover !important; background-position: center !important; background-color: transparent !important; } /* titre avant et après DISCOUNT */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-headline:before { content: "...ET DES"; display: inline; color: #081F2C; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-headline:after { content: " *"; display: inline; color: #081F2C; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-headline.yotpo-is-mobile { font-size: 25.6px !important; font-family: "Hanken Grotesk" !important; font-weight: 700 !important; font-style: normal !important; } /* ── FORME COUPON DENTELÉE (desktop + mobile) ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-container { background-color: #FFFFFF !important; border: none !important; border-radius: 0 !important; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); transition: transform 0.18s ease, filter 0.18s ease; clip-path: polygon( 0% 0%, 2% 4%, 0% 9%, 2% 14%, 0% 19%, 2% 24%, 0% 29%, 2% 34%, 0% 39%, 2% 44%, 0% 49%, 2% 54%, 0% 59%, 2% 64%, 0% 69%, 2% 74%, 0% 79%, 2% 84%, 0% 89%, 2% 94%, 0% 100%, 100% 100%, 98% 96%, 100% 91%, 98% 86%, 100% 81%, 98% 76%, 100% 71%, 98% 66%, 100% 61%, 98% 56%, 100% 51%, 98% 46%, 100% 41%, 98% 36%, 100% 31%, 98% 26%, 100% 21%, 98% 16%, 100% 11%, 98% 6%, 100% 0% ) !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-container:hover { transform: scale(1.02) translateY(-2px); filter: drop-shadow(0 8px 20px rgba(0,0,0,0.22)); } /* ajout de BON DE avant les montants */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-reward:before { content: "BON DE "; font-size: 24px !important; font-weight: 700 !important; color: #081F2C !important; display: inline !important; } /* taille uniforme du montant (desktop + mobile) */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-reward { font-size: 24px !important; } /* conditions T&C en bas des tuiles */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-id-1095875 .yotpo-redemption-option-cost:after { content: "dès 40€*"; font-size: 10px !important; color: rgb(108, 108, 108); display: block !important; margin-top: 5px !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-id-1095876 .yotpo-redemption-option-cost:after { content: "dès 60€*"; font-size: 10px !important; color: rgb(108, 108, 108); display: block !important; margin-top: 5px !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-id-1095877 .yotpo-redemption-option-cost:after { content: "dès 80€*"; font-size: 10px !important; color: rgb(108, 108, 108); display: block !important; margin-top: 5px !important; } /* masquer les dots SVG autour du texte de règle */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-rule-container .dot { display: none !important; } /* ── Typographie mobile — même tailles que desktop ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-headline.yotpo-is-mobile:before { content: "...ET DES "; display: inline; color: #081F2C; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-headline.yotpo-is-mobile:after { content: " *"; display: inline; color: #081F2C; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-rule.yotpo-is-mobile { font-size: 16px !important; padding-bottom: 5px !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-description.yotpo-is-mobile { font-size: 14px !important; } /* Solde de points en font-weight 400 */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-points-balance, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-points-balance * { font-weight: 400 !important; } /* Réordonner : titre → points → rule → description */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-content-container { display: flex !important; flex-direction: column !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-content-container .yotpo-headline { order: 1 !important; margin-bottom: 11px !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-content-container .yotpo-headline.yotpo-is-mobile { margin-bottom: 11px !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-content-container .yotpo-points-balance { order: 2 !important; margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-content-container .yotpo-rule-container { order: 3 !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-content-container .yotpo-description { order: 4 !important; } /* Solde de points taille mobile */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-coupouns-container.yotpo-is-mobile .yotpo-points-balance { font-size: 17.6px !important; } /* ── Harmonisation bouton Redeem now (logged OUT) ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button button { height: 40px !important; padding: 0 32px !important; font-size: 16px !important; line-height: 40px !important; font-family: 'Hanken Grotesk' !important; font-weight: 700 !important; background: rgb(203, 51, 59) !important; color: #fff !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; transition: opacity 0.2s !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button button div, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button button span, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button button .yotpo-button-label { font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; font-family: 'Hanken Grotesk' !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button button:hover { opacity: 0.85 !important; } /* réduction de l'espace interne de la tuile */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option.yotpo-redemption-option-grid { padding-top: 8px !important; padding-bottom: 8px !important; } /* padding vertical du container coupon */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-container { padding-top: 12px !important; padding-bottom: 20px !important; } /* contenu centré verticalement */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option.yotpo-redemption-option-grid { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* espacement entre les tuiles coupons */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-options-list { gap: 50px !important; } /* ── Harmonisation bouton Redeem my points (logged IN) ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-redeem-button { font-family: 'Hanken Grotesk' !important; font-weight: 700 !important; font-size: 16px !important; border-radius: 0 !important; transition: opacity 0.2s !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-redeem-button .yotpo-button-label { font-size: 16px !important; font-weight: 700 !important; font-family: 'Hanken Grotesk' !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-redeem-button:hover { opacity: 0.85 !important; } /* espace sous les coupons en mobile */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-coupouns-container.yotpo-is-mobile .yotpo-redemption-options-mobile-list { margin-bottom: 25px !important; } /* Griser les tuiles coupons - pas assez de points */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-options-list > [role="listitem"]:has(button[disabled="disabled"]), .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-swiper-wrapper .swiper-slide:has(button[disabled="disabled"]) [role="listitem"] { position: relative; overflow: hidden; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-options-list > [role="listitem"]:has(button[disabled="disabled"])::before, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-swiper-wrapper .swiper-slide:has(button[disabled="disabled"]) [role="listitem"]::before { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.5); pointer-events: none; } /* Remplacer le texte du bouton disabled par "Points insuffisants" */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css button[disabled="disabled"] .yotpo-button-label { visibility: hidden; position: relative; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css button[disabled="disabled"] .yotpo-button-label::after { content: "Points insuffisants"; visibility: visible; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css button[disabled="disabled"] { background-color: #666666 !important; opacity: 1 !important; border: none !important; outline: none !important; } /* Pagination bullets en rouge */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .swiper-pagination-bullet { background: #CB333B !important; opacity: 0.4 !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .swiper-pagination-bullet-active { background: #CB333B !important; opacity: 1 !important; } /* ── Traduction "Are you sure?" ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-title { visibility: hidden; position: relative; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-title::after { content: "Êtes-vous sûr·e ?"; visibility: visible; position: absolute; left: 0; right: 0; top: 0; } /* ── Traduction bouton "Non" ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-option-cancel-btn .yotpo-button-label { font-size: 0 !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-option-cancel-btn .yotpo-button-label::before { content: "Non"; font-size: 14px !important; font-weight: 700 !important; font-family: 'Hanken Grotesk' !important; } /* ── Traduction bouton "Oui" ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-option-confirm-btn .yotpo-button-label { font-size: 0 !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-option-confirm-btn .yotpo-button-label::before { content: "Oui"; font-size: 14px !important; font-weight: 700 !important; font-family: 'Hanken Grotesk' !important; } /* ── Suppression des arrondis sur TOUS les boutons (CTA) ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-confirmation-options button, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-widgets-action-button, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-rounded-btn-type { border-radius: 0 !important; --yotpo-rounded-btn-type: 0 !important; } /* ── Traduction du label "Copied" ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-text-copied-label { font-size: 0 !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-text-copied-label::before { content: "Code copié"; font-size: 16px; display: inline-block; } /* ── Style du message de remerciement (Toast) ── */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-message-toast-container { background-color: #cb333b !important; border-radius: 0 !important; border: none !important; padding: 12px !important; min-height: auto !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-message-toast-text-body { font-size: 0 !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; } .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-message-toast-text-body::before { content: "Points échangés ! Copiez ce code et collez-le au moment de payer."; font-size: 16px !important; line-height: 1.4 !important; color: #FFFFFF !important; display: block; text-align: center; } /* Icône succès/fermeture dans le bandeau en blanc */ .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-message-toast-container svg, .yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-message-toast-container i { fill: #FFFFFF !important; color: #FFFFFF !important; } /* Logged out */ .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-customized-text.yotpo-headline .yotpo-inner-text { position: relative; text-transform: uppercase; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background:has(.yotpo-tile) .yotpo-customized-text.yotpo-headline .yotpo-inner-text:after { content: "MARCHE"; display: inline; color: #CB333B; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-reward-steps-content .yotpo-customized-text.yotpo-reward-steps-title .yotpo-inner-text { font-family: "Gasoek One", sans-serif !important; text-transform: uppercase; line-height: 100%; margin: 10px auto 14px; letter-spacing: 1px; font-weight: 400 !important; } /* Logged in */ .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-customized-text.yotpo-headline { position: relative; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-customized-text.yotpo-headline .yotpo-inner-text { position: relative; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-customized-text.yotpo-headline .yotpo-inner-text:before { content: "Bonjour "; display: inline; color: #081F2C; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-customized-text.yotpo-headline:after { content: "Vous rayonnez aujourd'hui. Comme toujours."; display: block; font-size: 16px; line-height: 30px; color: #081F2C; font-weight: 600 !important; margin-top: 0px; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-description.yotpo-description-margin-top { margin: 30px auto 40px; flex-direction: column; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-description.yotpo-description-margin-top .yotpo-vertical-divider { display: none; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-description.yotpo-description-margin-top .yotpo-customized-text.yotpo-description-points-balance .yotpo-inner-text { color: #CB333B !important; position: relative; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-description.yotpo-description-margin-top .yotpo-customized-text.yotpo-description-points-balance .yotpo-inner-text:before { content: "Vous avez "; display: inline; color: #081f2c; font-weight: 400 !important; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-description.yotpo-description-margin-top .yotpo-customized-text.yotpo-description-tier-status .yotpo-inner-text { font-family: "Gasoek One", sans-serif !important; font-weight: 400 !important; position: relative; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-description.yotpo-description-margin-top .yotpo-customized-text.yotpo-description-tier-status .yotpo-inner-text:before { content: "Vous êtes notre "; font-family: 'Hanken Grotesk' !important; font-weight: 400 !important; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-action-buttons-tile > * { width: 100%; max-width: 236px; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-action-buttons-tile button { width: 100%; font-weight: bold !important; border-width: 2px; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view .yotpo-action-buttons-tile button:hover { background: #fff !important; color: #333 !important; border-color: #333 !important; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view { position: relative; z-index: 1; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background .yotpo-logged-in-view:before { content: ""; position: absolute; left: -50%; top: 50%; transform: translateY(-50%); display: block; width: 251px; height: 289px; background: url(https://cdn-widget-assets.yotpo.com/static_assets/Jet0S4wa7Pk8PTcJFu6Aiw/images/image_2026_03_29_21_39_10_201) no-repeat center/contain; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background.yotpo-is-mobile .yotpo-reward-steps-item { flex-direction: column; justify-content: center; align-items: center; row-gap: 15px; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background.yotpo-is-mobile .yotpo-reward-steps-item .yotpo-reward-steps-content { text-align: center; justify-content: center; align-items: center; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background.yotpo-is-mobile .yotpo-logged-in-view:before { display: none; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-background.yotpo-is-mobile .yotpo-action-buttons-tile { flex-direction: column; row-gap: 11px; } .yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-logged-in-view .yotpo-action-buttons-tile a { text-decoration: none !important; } /* Tableau historique - taille texte */ .yotpo-rewards-history-wrapper .yotpo-grid .yotpo-inner-text { font-size: 12px !important; } .yotpo-grid-row-headers .yotpo-inner-text { font-size: 12px !important; } /* Tableau historique - background image sur les lignes */ .yotpo-rewards-history-wrapper .yotpo-grid .yotpo-row-display { background-image: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-vip-deco-grad.jpg?v=1766590456) !important; background-size: cover !important; background-position: center !important; background-color: transparent !important; } /* 6. Traduction du tooltip "COPIED" */ .yotpo-widget-tooltip-message { font-size: 0 !important; /* Cache le texte original "COPIED" */ } .yotpo-widget-tooltip-message::before { content: "Copié"; font-size: 14px !important; /* Rétablit la taille du texte */ text-transform: uppercase; display: inline-block; } /* Optionnel : Assurer que l'icône (le check) reste bien alignée avec le nouveau texte */ .yotpto-widget-tooltip-wrapper { display: flex !important; align-items: center !important; gap: 5px; } .yotpo-widget-my-rewards-widget .yotpo-close-btn-wrapper { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; min-height: 44px !important; padding: 10px 16px !important; background: #fff !important; } .yotpo-widget-my-rewards-widget .yotpo-close-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; cursor: pointer !important; } .yotpo-widget-my-rewards-widget .yotpo-close-icon { color: #081F2C !important; width: 18px !important; height: 18px !important; display: block !important; } /* --- FIX FINAL : FORCE ZÉRO ARRONDI --- */ /* On cible le wrapper que tu as envoyé et TOUTES les sous-classes de lignes */ .yotpo-rewards-history-wrapper, .yotpo-rewards-history-wrapper *, /* Cible absolument tout à l'intérieur */ .yotpo-rewards-history-tile, .yotpo-grid-wrapper, .yotpo-grid-row, .yotpo-row-display, .border-style-rectangular, .yotpo-border-style { border-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* On s'assure que le wrapper de la popup (le parent tout en haut) n'impose rien */ .yotpo-popup-tile-wrapper { border-radius: 0 !important; } /* On réinitialise aussi le bouton fermer pour qu'il soit raccord */ .yotpo-close-btn-wrapper { border-radius: 0 !important; } /* ═══════════════════════════════════════════════════════════════ YOTPO – CAMPAIGN WIDGET | Erborian Seoulmate Rewards ═══════════════════════════════════════════════════════════════ */ /* ── TITRE : ajout "POINTS" après le headline ── */ .yotpo-widget-campaign-widget.yotpo-widget-override-css.yotpo-widget-clear .yotpo-container-headline:after { content: "POINTS"; color: #CB333B; display: inline; } /* ══════════════════════════════════════════════ CONTENEUR GLOBAL ══════════════════════════════════════════════ */ .yotpo-widget-campaign-widget-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ══════════════════════════════════════════════ GRILLE Mobile : 2 colonnes iPad : 4 colonnes (768 – 1023 px) Desktop : 5 colonnes (1024 px +) ══════════════════════════════════════════════ */ .campaigns-wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; margin-top: 20px !important; } @media (min-width: 768px) and (max-width: 1023px) { .campaigns-wrapper { grid-template-columns: repeat(4, 1fr) !important; } /* 2 dernières tuiles centrées sur iPad */ .campaigns-wrapper .yotpo-outer-tile:nth-child(9) { grid-column: 2 / 3 !important; } .campaigns-wrapper .yotpo-outer-tile:nth-child(10) { grid-column: 3 / 4 !important; } } @media (min-width: 1024px) { .campaigns-wrapper { grid-template-columns: repeat(5, 1fr) !important; } } /* ══════════════════════════════════════════════ TUILE EXTERNE – carrée, bordure dégradée ══════════════════════════════════════════════ */ .yotpo-outer-tile { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; position: relative !important; /* ancrage de tous les overlays */ overflow: hidden !important; border: 5px solid transparent !important; border-radius: 10px !important; background-image: linear-gradient(white, white), linear-gradient(135deg, #CDE0EE, #F6D5E0, #E4CCDF, #BC96BD) !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ══════════════════════════════════════════════ CONTENU INTERNE DE LA TUILE (état normal) ══════════════════════════════════════════════ */ .yotpo-outer-tile .yotpo-campaign-switcher-wrapper, .yotpo-outer-tile .yotpo-tile-wrapper, .yotpo-outer-tile .yotpo-tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 5px !important; background: transparent !important; border: none !important; box-sizing: border-box !important; } /* ══════════════════════════════════════════════ TUILES COMPLÉTÉES & MESSAGE ══════════════════════════════════════════════ */ .yotpo-outer-tile .yotpo-completed-tile, .yotpo-outer-tile .yotpo-message-tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 5px !important; background: #ffffff !important; border: none !important; box-sizing: border-box !important; } .yotpo-outer-tile .yotpo-display-contents { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .yotpo-outer-tile .yotpo-message-tile-text { text-align: center !important; width: 100% !important; } /* ══════════════════════════════════════════════ HEADLINE CONTAINER ══════════════════════════════════════════════ */ .yotpo-headline-container { display: flex !important; flex-direction: column !important; align-items: center !important; } /* ══════════════════════════════════════════════ PICTO décoratif (tuiles NON complétées uniquement) ══════════════════════════════════════════════ */ .yotpo-outer-tile:not(:has(.yotpo-tile-completed)):not(:has(.yotpo-message-already-completed)) .yotpo-headline-container::after { content: ""; display: block !important; margin-top: 2px !important; width: 25px; height: 25px; background-image: url(https://cdn.shopify.com/s/files/1/0215/9253/9208/files/erborian-earning-tile-deco.svg?v=1766586174); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } /* Suppression picto legacy */ .yotpo-tile::after { display: none !important; } /* ══════════════════════════════════════════════ BIRTHDAY OVERLAY – espaces réduits uniquement ══════════════════════════════════════════════ */ /* Wrapper overlay birthday : padding réduit */ .yotpo-outer-tile .yotpo-container-birthday-action-tile { padding: 6px 8px !important; } /* Action tile : gap réduit entre les 3 blocs */ .yotpo-outer-tile .yotpo-container-birthday-action-tile .yotpo-action-tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; } /* Disclaimer en bas : 10px, line-height serré */ .yotpo-outer-tile .yotpo-container-birthday-action-tile .yotpo-message-text { font-size: 10px !important; line-height: 1.2 !important; margin: 0 !important; } /* Date-picker + bouton : colonne, centrés */ .yotpo-outer-tile .yotpo-container-birthday-action-tile .yotpo-flex-container.yotpo-flex-row { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; } /* ══════════════════════════════════════════════ ICÔNE PRINCIPALE ══════════════════════════════════════════════ */ .yotpo-widget-campaign-widget-custom-icon { max-height: 70px !important; width: auto !important; margin-bottom: 8px !important; } /* ══════════════════════════════════════════════ NEUTRALISATION DU HOVER ══════════════════════════════════════════════ */ .yotpo-outer-tile:hover, .yotpo-outer-tile * { transform: none !important; transition: none !important; } /* ══════════════════════════════════════════════ CROIX DE FERMETURE – supprimée partout ══════════════════════════════════════════════ */ .yotpo-close-button, .yotpo-widget-campaign-widget-close-button { display: none !important; } /* ══════════════════════════════════════════════ OVERLAYS – restent dans la tuile (logged-out, action, message, custom-link, birthday, etc.) – TOUTES résolutions ══════════════════════════════════════════════ */ .yotpo-outer-tile .yotpo-overlay-tile, .yotpo-outer-tile .yotpo-logged-out-tile, .yotpo-outer-tile .yotpo-container-action-tile, .yotpo-outer-tile .yotpo-message-tile, .yotpo-outer-tile .yotpo-action-tile, .yotpo-outer-tile .yotpo-birthday-tile, .yotpo-outer-tile .yotpo-custom-link-tile, .yotpo-outer-tile [class*="yotpo-"][class*="-tile"]:not(.yotpo-tile):not(.yotpo-tile-wrapper):not(.yotpo-completed-tile) { /* Confinement dans la tuile parente */ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; /* Annulation des overrides Yotpo mobile */ transform: none !important; top: 0 !important; left: 0 !important; /* Apparence */ z-index: 10 !important; border-radius: 8px !important; box-shadow: none !important; box-sizing: border-box !important; padding: 8px !important; /* Centrage du contenu */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; } /* ══════════════════════════════════════════════ LOGGED-OUT TILE – ajustements internes ══════════════════════════════════════════════ */ /* Bouton S'inscrire : taille naturelle, centré */ .yotpo-outer-tile .yotpo-logged-out-tile .yotpo-action-button-widget { width: auto !important; display: flex !important; justify-content: center !important; } /* Zone "Déjà membre / Se connecter" */ .yotpo-outer-tile .yotpo-logged-out-tile .yotpo-logged-out-center-element { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; } /* ══════════════════════════════════════════════ BIRTHDAY – bouton Submit : remplace l'icône flèche par "Valider" ══════════════════════════════════════════════ */ /* Cache le SVG flèche */ .yotpo-outer-tile .yotpo-container-birthday-action-tile button[aria-label="Submit"] svg { display: none !important; } /* Injecte le texte */ .yotpo-outer-tile .yotpo-container-birthday-action-tile button[aria-label="Submit"]::after { content: "Valider"; font-family: 'Hanken Grotesk' !important; font-size: 14px !important; font-weight: 700 !important; color: #fff !important; } /* Cache le SVG flèche */ .yotpo-outer-tile .yotpo-container-birthday-action-tile .yotpo-filled-button svg { display: none !important; } /* Injecte le texte */ .yotpo-outer-tile .yotpo-container-birthday-action-tile .yotpo-filled-button::after { content: "Valider"; font-family: 'Hanken Grotesk' !important; font-size: 14px !important; font-weight: 400 !important; color: #fff !important; }