/** Shopify CDN: Minification failed Line 246:6 "@import" is only valid at the top level Line 402:6 "@import" is only valid at the top level Line 847:510 Expected "}" to go with "{" **/ .image-comparison { display: block; position: relative; overflow: hidden; --percent: 95%; } @media screen and (min-width: 750px) { .image-comparison { --percent: 98%; } } .image-comparison[animate] { --percent: 50%; } .image-comparison.animating .image-comparison__button { transition-property: top, left; transition-duration: var(--duration-animate); transition-timing-function: ease; } .image-comparison.animating .image-comparison__after { transition-property: clip-path; transition-duration: var(--duration-animate); transition-timing-function: ease; } .image-comparison__animate { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1rem; pointer-events: none; } .image-comparison__after { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .image-comparison[data-layout="horizontal"] .image-comparison__after { clip-path: inset(0px 0px 0px var(--percent)); } .image-comparison[data-layout="vertical"] .image-comparison__after { clip-path: inset(var(--percent) 0px 0px 0px); } .image-comparison__button { position: absolute; z-index: 2; background-color: transparent; border: none; padding: 0; cursor: pointer; } .image-comparison[data-layout="horizontal"] .image-comparison__button { top: 0; left: var(--percent); width: 4rem; height: 100%; margin-left: -2rem; cursor: col-resize; } .image-comparison[data-layout="vertical"] .image-comparison__button { left: 0; top: var(--percent); width: 100%; height: 4rem; margin-top: -2rem; cursor: row-resize; } .image-comparison__button::before, .image-comparison__button::after { content: ''; position: absolute; background-color: rgb(var(--color-border)); pointer-events: none; } .image-comparison[data-layout="horizontal"] .image-comparison__button::before, .image-comparison[data-layout="horizontal"] .image-comparison__button::after { width: 0.3rem; height: 50%; left: 50%; margin-left: -0.15rem; } .image-comparison[data-layout="vertical"] .image-comparison__button::before, .image-comparison[data-layout="vertical"] .image-comparison__button::after { width: 50%; height: 0.3rem; top: 50%; margin-top: -0.15rem; } .image-comparison[data-layout="horizontal"] .image-comparison__button::before { top: 0; margin-top: -2rem; } .image-comparison[data-layout="horizontal"] .image-comparison__button::after { bottom: 0; margin-bottom: -2rem; } .image-comparison[data-layout="vertical"] .image-comparison__button::before { left: 0; margin-left: -2rem; } .image-comparison[data-layout="vertical"] .image-comparison__button::after { right: 0; margin-right: -2rem; } .image-comparison__button span { position: absolute; top: 50%; left: 50%; width: 4rem; height: 4rem; margin-left: -2rem; margin-top: -2rem; border-radius: 50%; border: 0.3rem solid rgb(var(--color-border)); pointer-events: none; } .image-comparison__button span::before, .image-comparison__button span::after { content: ''; position: absolute; border: 0.6rem inset transparent; } .image-comparison[data-layout="horizontal"] .image-comparison__button span::before, .image-comparison[data-layout="horizontal"] .image-comparison__button span::after { top: 50%; margin-top: -0.6rem; } .image-comparison[data-layout="vertical"] .image-comparison__button span::before, .image-comparison[data-layout="vertical"] .image-comparison__button span::after { left: 50%; margin-left: -0.6rem; } .image-comparison[data-layout="horizontal"] .image-comparison__button span::before { border-left: 0.6rem solid rgb(var(--color-border)); left: 50%; margin-left: 0.4rem; } .image-comparison[data-layout="horizontal"] .image-comparison__button span::after { border-right: 0.6rem solid rgb(var(--color-border)); right: 50%; margin-right: 0.4rem; } .image-comparison[data-layout="vertical"] .image-comparison__button span::before { border-top: 0.6rem solid rgb(var(--color-border)); top: 50%; margin-top: 0.4rem; } .image-comparison[data-layout="vertical"] .image-comparison__button span::after { border-bottom: 0.6rem solid rgb(var(--color-border)); bottom: 50%; margin-bottom: 0.4rem; } .image-comparison__title { position: absolute; margin: 0; min-width: unset; pointer-events: none; transition: opacity var(--duration-default) ease; } .image-comparison[data-layout="horizontal"] .image-comparison__before .image-comparison__title { left: 2rem; } .image-comparison[data-layout="horizontal"] .image-comparison__after .image-comparison__title { right: 2rem; } .image-comparison[data-layout="horizontal"] .image-comparison__item--start .image-comparison__title { top: 2rem; } .image-comparison[data-layout="horizontal"] .image-comparison__item--end .image-comparison__title { bottom: 2rem; } .image-comparison[data-layout="horizontal"] .image-comparison__item--center .image-comparison__title { top: 50%; transform: translateY(-50%); } .image-comparison[data-layout="vertical"] .image-comparison__before .image-comparison__title { top: 2rem; } .image-comparison[data-layout="vertical"] .image-comparison__after .image-comparison__title { bottom: 2rem; } .image-comparison[data-layout="vertical"] .image-comparison__item--start .image-comparison__title { left: 2rem; } .image-comparison[data-layout="vertical"] .image-comparison__item--end .image-comparison__title { right: 2rem; } .image-comparison[data-layout="vertical"] .image-comparison__item--center .image-comparison__title { left: 50%; transform: translateX(-50%); } .image-comparison.scrolling .image-comparison__title { opacity: 0; /* ============================================ HELIX PREMIUM LUXURY - PAGE PRODUIT ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap'); :root { --luxury-gold: #C9A84C; --luxury-dark: #0A0A0A; --luxury-cream: #F8F5F0; --luxury-white: #FFFFFF; --luxury-gray: #6B6B6B; --luxury-light-gray: #E8E5E0; --luxury-font-serif: 'Cormorant Garamond', Georgia, serif; --luxury-font-sans: 'Montserrat', sans-serif; --luxury-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .product__title { font-family: var(--luxury-font-serif) !important; font-size: clamp(2rem, 4vw, 3.5rem) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; color: var(--luxury-dark) !important; text-transform: none !important; } .product__vendor { font-family: var(--luxury-font-sans) !important; font-size: 0.7rem !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--luxury-gold) !important; } .price__regular, .price-item--regular { font-family: var(--luxury-font-serif) !important; font-size: clamp(1.5rem, 2.5vw, 2rem) !important; font-weight: 400 !important; color: var(--luxury-dark) !important; letter-spacing: 0.03em !important; } .price__sale .price-item--sale { font-family: var(--luxury-font-serif) !important; font-size: clamp(1.5rem, 2.5vw, 2rem) !important; } .product-form__submit, button[name="add"] { background: var(--luxury-dark) !important; color: var(--luxury-white) !important; font-family: var(--luxury-font-sans) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; border: 1px solid var(--luxury-dark) !important; border-radius: 0 !important; padding: 18px 48px !important; transition: var(--luxury-transition) !important; position: relative; overflow: hidden; } .product-form__submit:hover, button[name="add"]:hover { background: var(--luxury-gold) !important; border-color: var(--luxury-gold) !important; color: var(--luxury-white) !important; box-shadow: 0 8px 30px rgba(201,168,76,0.35) !important; transform: translateY(-1px) !important; } .product__info-wrapper { padding: 0 0 0 4rem; } .form__label, .product-form__label { font-family: var(--luxury-font-sans) !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--luxury-dark) !important; } .quantity__button { border: 1px solid var(--luxury-light-gray) !important; background: transparent !important; color: var(--luxury-dark) !important; transition: var(--luxury-transition) !important; border-radius: 0 !important; } .quantity__button:hover { border-color: var(--luxury-gold) !important; color: var(--luxury-gold) !important; } .quantity__input { border-top: 1px solid var(--luxury-light-gray) !important; border-bottom: 1px solid var(--luxury-light-gray) !important; border-left: none !important; border-right: none !important; background: transparent !important; font-family: var(--luxury-font-sans) !important; letter-spacing: 0.1em !important; } .product__description p, .product__description li { font-family: var(--luxury-font-sans) !important; font-size: 0.88rem !important; font-weight: 300 !important; line-height: 1.9 !important; color: var(--luxury-gray) !important; letter-spacing: 0.03em !important; } .product__media img { transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; border-radius: 0 !important; } .product__media:hover img { transform: scale(1.02) !important; } .thumbnail.is-active, .product__thumbnail.is-active { outline: 2px solid var(--luxury-gold) !important; outline-offset: 2px !important; } .shopify-payment-button__button { border-radius: 0 !important; margin-top: 12px !important; } @keyframes luxuryFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media screen and (max-width: 749px) { .product__title { font-size: 1.8rem !important; } } /* FIN STYLES PREMIUM HELIX *//* ============================================ HELIX PREMIUM LUXURY — PAGE PRODUIT UNIQUEMENT ============================================ */ /* Import Google Fonts premium */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap'); /* Variables luxe */ :root { --luxury-gold: #C9A84C; --luxury-gold-light: #E8C97A; --luxury-dark: #0A0A0A; --luxury-deep: #111111; --luxury-cream: #F8F5F0; --luxury-white: #FFFFFF; --luxury-gray: #6B6B6B; --luxury-light-gray: #E8E5E0; --luxury-font-serif: 'Cormorant Garamond', Georgia, serif; --luxury-font-sans: 'Montserrat', sans-serif; --luxury-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --luxury-shadow: 0 20px 60px rgba(0,0,0,0.08); --luxury-shadow-hover: 0 30px 80px rgba(0,0,0,0.15); } /* ===== CONTAINER PAGE PRODUIT ===== */ .template-product .product-section, .template-product #shopify-section-product-template, body.template-product .shopify-section:first-of-type { background: var(--luxury-white); } /* ===== ZONE PRINCIPALE PRODUIT ===== */ .template-product .product, .template-product .product__wrapper, .template-product [class*="product-info"], .template-product .product-single { max-width: 1320px; margin: 0 auto; padding: 60px 40px; } /* ===== TITRE DU PRODUIT ===== */ .template-product .product__title, .template-product h1.product-title, .template-product .product-single__title { font-family: var(--luxury-font-serif) !important; font-size: clamp(2.2rem, 4vw, 3.8rem) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; color: var(--luxury-dark) !important; margin-bottom: 8px !important; text-transform: none !important; } /* ===== SOUS-TITRE / VENDOR ===== */ .template-product .product__vendor, .template-product .product-single__vendor { font-family: var(--luxury-font-sans) !important; font-size: 0.7rem !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--luxury-gold) !important; margin-bottom: 20px !important; } /* ===== ÉTOILES / AVIS ===== */ .template-product .product__rating, .template-product .product-single__reviews-badge, .template-product [class*="star"], .template-product .spr-badge { color: var(--luxury-gold) !important; letter-spacing: 0.05em; margin-bottom: 20px; } /* ===== SÉPARATEUR DORÉ FIN ===== */ .template-product .product__info-wrapper::before, .template-product .product-single__meta::before { content: ''; display: block; width: 60px; height: 1px; background: linear-gradient(90deg, var(--luxury-gold), transparent); margin: 20px 0 28px; } /* ===== PRIX ===== */ .template-product .price, .template-product .product__price, .template-product .product-single__price, .template-product .price__regular, .template-product .price-item--regular { font-family: var(--luxury-font-serif) !important; font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; font-weight: 400 !important; color: var(--luxury-dark) !important; letter-spacing: 0.03em !important; margin-bottom: 28px !important; } .template-product .price__sale, .template-product .price-item--sale { font-family: var(--luxury-font-serif) !important; color: var(--luxury-dark) !important; font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; font-weight: 400 !important; } .template-product .price__compare, .template-product .price-item--regular.price-item--last { color: var(--luxury-gray) !important; font-size: 1.1rem !important; text-decoration: line-through; } /* ===== DESCRIPTION COURTE ===== */ .template-product .product__description, .template-product .product-single__description { font-family: var(--luxury-font-sans) !important; font-size: 0.88rem !important; font-weight: 300 !important; line-height: 1.9 !important; color: var(--luxury-gray) !important; letter-spacing: 0.04em !important; margin-bottom: 28px !important; } /* ===== LISTES DE BÉNÉFICES ===== */ .template-product .product__description ul, .template-product .product-single__description ul { list-style: none !important; padding: 0 !important; } .template-product .product__description ul li, .template-product .product-single__description ul li { font-family: var(--luxury-font-sans) !important; font-size: 0.82rem !important; font-weight: 400 !important; letter-spacing: 0.06em !important; color: var(--luxury-dark) !important; padding: 8px 0 !important; border-bottom: 1px solid var(--luxury-light-gray) !important; display: flex; align-items: center; gap: 12px; } .template-product .product__description ul li::before { content: '—'; color: var(--luxury-gold); font-weight: 300; flex-shrink: 0; } /* ===== SÉLECTEURS DE VARIANTES ===== */ .template-product .product__form .form__label, .template-product label[for*="quantity"], .template-product .product-form__label { font-family: var(--luxury-font-sans) !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--luxury-dark) !important; margin-bottom: 12px !important; display: block; } /* ===== INPUT QUANTITÉ ===== */ .template-product .quantity__button, .template-product .product-form__quantity-button { border: 1px solid var(--luxury-light-gray) !important; background: transparent !important; color: var(--luxury-dark) !important; transition: var(--luxury-transition) !important; width: 44px !important; height: 44px !important; } .template-product .quantity__button:hover { border-color: var(--luxury-gold) !important; color: var(--luxury-gold) !important; } .template-product .quantity__input, .template-product input[type="number"].quantity { border-top: 1px solid var(--luxury-light-gray) !important; border-bottom: 1px solid var(--luxury-light-gray) !important; border-left: none !important; border-right: none !important; background: transparent !important; font-family: var(--luxury-font-sans) !important; font-size: 0.88rem !important; letter-spacing: 0.1em !important; text-align: center !important; height: 44px !important; } /* ===== BOUTON AJOUTER AU PANIER - EFFET LUXE ===== */ .template-product .product-form__submit, .template-product button[name="add"], .template-product .btn--add-to-cart, .template-product .product__submit__cta { background: var(--luxury-dark) !important; color: var(--luxury-white) !important; font-family: var(--luxury-font-sans) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; border: 1px solid var(--luxury-dark) !important; border-radius: 0 !important; padding: 18px 48px !important; width: 100% !important; cursor: pointer !important; transition: var(--luxury-transition) !important; position: relative; overflow: hidden; } .template-product .product-form__submit::before, .template-product button[name="add"]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.15), transparent); transition: left 0.6s ease; } .template-product .product-form__submit:hover::before, .template-product button[name="add"]:hover::before { left: 100%; } .template-product .product-form__submit:hover, .template-product button[name="add"]:hover { background: var(--luxury-gold) !important; border-color: var(--luxury-gold) !important; color: var(--luxury-white) !important; box-shadow: 0 8px 30px rgba(201, 168, 76, 0.35) !important; transform: translateY(-1px) !important; } /* ===== BOUTON ACHAT IMMÉDIAT (SHOP PAY) ===== */ .template-product .shopify-payment-button__button, .template-product .dynamic-checkout__content { margin-top: 12px !important; border-radius: 0 !important; } .template-product .shopify-payment-button__button--unbranded { background: transparent !important; border: 1px solid var(--luxury-light-gray) !important; color: var(--luxury-dark) !important; font-family: var(--luxury-font-sans) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; padding: 16px !important; transition: var(--luxury-transition) !important; border-radius: 0 !important; } .template-product .shopify-payment-button__button--unbranded:hover { background: var(--luxury-cream) !important; border-color: var(--luxury-dark) !important; } /* ===== LIEN "PLUS DE MOYENS DE PAIEMENT" ===== */ .template-product .product-form__payment-terms, .template-product [class*="more-payment"] { font-family: var(--luxury-font-sans) !important; font-size: 0.72rem !important; color: var(--luxury-gray) !important; letter-spacing: 0.08em !important; text-decoration: none !important; border-bottom: 1px solid var(--luxury-light-gray) !important; padding-bottom: 1px !important; transition: var(--luxury-transition) !important; } .template-product .product-form__payment-terms:hover, .template-product [class*="more-payment"]:hover { color: var(--luxury-gold) !important; border-color: var(--luxury-gold) !important; } /* ===== ICÔNES DE PAIEMENT ===== */ .template-product .payment-icons, .template-product [class*="payment-icon"] { opacity: 0.5; filter: grayscale(100%); margin-top: 20px !important; transition: var(--luxury-transition); } .template-product .payment-icons:hover { opacity: 0.8; filter: grayscale(30%); } /* ===== ACCORDÉONS / DÉTAILS PRODUIT ===== */ .template-product details summary, .template-product .collapsible-trigger, .template-product [class*="accordion"] button, .template-product [class*="accordion"] summary { font-family: var(--luxury-font-sans) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--luxury-dark) !important; padding: 18px 0 !important; border-top: 1px solid var(--luxury-light-gray) !important; border-bottom: none !important; cursor: pointer; transition: var(--luxury-transition) !important; list-style: none; } .template-product details summary:hover, .template-product .collapsible-trigger:hover { color: var(--luxury-gold) !important; } /* ===== GALERIE D'IMAGES ===== */ .template-product .product__media-container, .template-product .product__media-wrapper, .template-product .product-single__media-group { border-radius: 0 !important; } .template-product .product__media img, .template-product .product-single__photo img { border-radius: 0 !important; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } .template-product .product__media:hover img, .template-product .product-single__photo:hover img { transform: scale(1.03) !important; } /* ===== MINIATURES GALERIE ===== */ .template-product .product__media-list, .template-product .thumbnails-wrapper { gap: 8px !important; } .template-product .product__media-item.is-active .thumbnail, .template-product .thumbnail.is-active, .template-product .product__thumbnail.is-active { outline: 1px solid var(--luxury-gold) !important; outline-offset: 2px !important; } .template-product .product__media-item .thumbnail:hover, .template-product .thumbnail:hover { outline: 1px solid var(--luxury-gold) !important; outline-offset: 2px !important; opacity: 0.85 !important; } /* ===== BADGE "ÉCONOMISEZ" ===== */ .template-product .badge, .template-product .product__badge, .template-product [class*="sale-badge"] { background: var(--luxury-gold) !important; color: var(--luxury-white) !important; font-family: var(--luxury-font-sans) !important; font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 4px 10px !important; } /* ===== SECTION BADGES DE CONFIANCE ===== */ .template-product .product__pickup-availabilities, .template-product [class*="trust-badge"], .template-product [class*="security"] { margin-top: 24px !important; padding-top: 20px !important; border-top: 1px solid var(--luxury-light-gray) !important; } /* ===== BREADCRUMB ===== */ .template-product .breadcrumb, .template-product nav[aria-label="breadcrumb"] { font-family: var(--luxury-font-sans) !important; font-size: 0.72rem !important; letter-spacing: 0.1em !important; color: var(--luxury-gray) !important; padding: 20px 40px !important; } .template-product .breadcrumb a, .template-product nav[aria-label="breadcrumb"] a { color: var(--luxury-gray) !important; text-decoration: none !important; transition: var(--luxury-transition) !important; } .template-product .breadcrumb a:hover, .template-product nav[aria-label="breadcrumb"] a:hover { color: var(--luxury-gold) !important; } /* ===== RESPONSIVE ===== */ @media screen and (max-width: 749px) { .template-product .product__title, .template-product h1.product-title { font-size: 2rem !important; } .template-product .product, .template-product .product__wrapper { padding: 30px 20px !important; } } /* ===== ANIMATION D'ENTRÉE ===== */ @keyframes luxuryFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .template-product .product__info-wrapper, .template-product .product__media-wrapper { animation: luxuryFadeIn 0.8s ease forwards; } .template-product .product__media-wrapper { animation-delay: 0.1s; } /* ===== FIN STYLES PREMIUM HELIX ===== */