/** Shopify CDN: Minification failed Line 617:680 Unexpected "}" **/ /* ============================================ DIVERRA — Custom Premium CSS UX/UI Optimization v1.0 — April 2026 ============================================ */ /* ---- 1. DESIGN TOKENS & GLOBAL REFINEMENTS ---- */ :root { --diverra-purple: #9b8ec4; --diverra-purple-dark: #6b5ea8; --diverra-purple-light: #f5f2fc; --diverra-gold: #e8a83e; --diverra-text: #2d2347; --diverra-bg: #faf7f2; --diverra-bg2: #f5f2fc; --diverra-white: #ffffff; --diverra-border: rgba(155, 142, 196, 0.18); --diverra-shadow: 0 4px 24px rgba(107, 94, 168, 0.10); --diverra-shadow-hover: 0 8px 40px rgba(107, 94, 168, 0.18); --diverra-radius: 16px; --diverra-radius-sm: 10px; --diverra-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* ---- 2. TYPOGRAPHY REFINEMENTS ---- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.2; } .section-header h2, .collection-hero__title, [class*="__heading"] { letter-spacing: -0.025em; } /* ---- 3. ANNOUNCE BAR — Premium Pill Style ---- */ .announcement-bar { background: linear-gradient(135deg, var(--diverra-purple-dark) 0%, #8b7bc4 50%, var(--diverra-gold) 100%) !important; padding: 10px 0 !important; } .announcement-bar__message { font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: none !important; } /* ---- 4. HEADER — Sticky, Clean, Premium ---- */ .header { background-color: rgba(250, 247, 242, 0.95) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--diverra-border) !important; transition: var(--diverra-transition) !important; box-shadow: 0 2px 20px rgba(107, 94, 168, 0.06) !important; } .header.scrolled, .header--has-sticky-header { box-shadow: 0 4px 30px rgba(107, 94, 168, 0.12) !important; } .header__heading-logo { max-width: 130px !important; } .header__menu-item { font-size: 0.9rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: var(--diverra-text) !important; padding: 6px 12px !important; border-radius: 8px !important; transition: var(--diverra-transition) !important; } .header__menu-item:hover, .header__menu-item:focus { background-color: var(--diverra-purple-light) !important; color: var(--diverra-purple-dark) !important; } .header__icon svg { width: 22px !important; height: 22px !important; } /* ---- 5. BUTTONS — Elevated CTA Design ---- */ .button, .btn, button.button { border-radius: 50px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; padding: 14px 32px !important; font-size: 0.9rem !important; transition: var(--diverra-transition) !important; position: relative !important; overflow: hidden !important; } /* Primary button — deep purple with shimmer */ .button--primary, .button:not(.button--secondary):not(.button--tertiary) { background: linear-gradient(135deg, var(--diverra-purple-dark) 0%, var(--diverra-purple) 100%) !important; box-shadow: 0 4px 15px rgba(107, 94, 168, 0.35) !important; border: none !important; color: #fff !important; } .button--primary:hover, .button:not(.button--secondary):not(.button--tertiary):hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(107, 94, 168, 0.45) !important; } /* Secondary button — outlined purple */ .button--secondary { background: transparent !important; border: 2px solid var(--diverra-purple) !important; color: var(--diverra-purple-dark) !important; } .button--secondary:hover { background: var(--diverra-purple-light) !important; transform: translateY(-1px) !important; } /* Add to Cart button */ .product-form__submit, [name="add"] { background: linear-gradient(135deg, var(--diverra-purple-dark) 0%, var(--diverra-purple) 100%) !important; border: none !important; color: white !important; font-size: 1rem !important; padding: 16px 40px !important; box-shadow: 0 4px 20px rgba(107, 94, 168, 0.3) !important; width: 100% !important; border-radius: 50px !important; font-weight: 700 !important; letter-spacing: 0.03em !important; transition: var(--diverra-transition) !important; } .product-form__submit:hover, [name="add"]:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(107, 94, 168, 0.45) !important; } /* "Epuise" / sold-out button */ .product-form__submit[disabled], [name="add"][disabled] { background: #e0d9f0 !important; color: #9b8ec4 !important; box-shadow: none !important; transform: none !important; cursor: not-allowed !important; } /* ---- 6. PRODUCT CARDS — Premium Unified Cards ---- */ .card-wrapper { border-radius: var(--diverra-radius) !important; overflow: hidden !important; } .card { background: var(--diverra-white) !important; border-radius: var(--diverra-radius) !important; border: 1px solid var(--diverra-border) !important; box-shadow: var(--diverra-shadow) !important; transition: var(--diverra-transition) !important; overflow: hidden !important; } .card:hover { transform: translateY(-4px) !important; box-shadow: var(--diverra-shadow-hover) !important; border-color: rgba(155, 142, 196, 0.35) !important; } /* Uniform image ratio — 1:1 square */ .card__media, .card .media { aspect-ratio: 1 / 1 !important; overflow: hidden !important; background-color: #f8f6fb !important; } .card__media img, .card .media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } .card:hover .card__media img, .card:hover .media img { transform: scale(1.05) !important; } /* Card content area */ .card__content, .card__information { padding: 16px 20px 20px !important; } .card__heading, .card__heading a { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--diverra-text) !important; line-height: 1.35 !important; margin-bottom: 6px !important; /* Limit to 2 lines */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .price { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--diverra-purple-dark) !important; letter-spacing: -0.02em !important; } /* Card "Add to cart" quick button */ .card__footer .button, .card-information .button { margin-top: 12px !important; width: 100% !important; padding: 12px 20px !important; font-size: 0.85rem !important; } /* Badge "Epuise" overlay */ .badge { background: rgba(107, 94, 168, 0.12) !important; color: var(--diverra-purple-dark) !important; border-radius: 6px !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; padding: 4px 10px !important; border: 1px solid rgba(107, 94, 168, 0.2) !important; } /* ---- 7. COLLECTION CARDS (Homepage grid) ---- */ .collection-list .card, .collection-list__item .card { border-radius: var(--diverra-radius) !important; overflow: hidden !important; } .collection-list .card__heading, .collection-list__item .card__heading { font-size: 1rem !important; font-weight: 700 !important; } /* ---- 8. HOMEPAGE SECTIONS — Visual Flow ---- */ /* Hero section */ .banner { border-radius: 0 !important; } .banner__content { padding: 48px 40px !important; background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(8px) !important; border-radius: var(--diverra-radius) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; box-shadow: 0 8px 40px rgba(107, 94, 168, 0.15) !important; max-width: 600px !important; } /* Section headings */ .collection-list__title, [class*="featured-collection"] .section-header__title, .section-header__title { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; font-weight: 800 !important; color: var(--diverra-text) !important; letter-spacing: -0.03em !important; margin-bottom: 8px !important; } /* Section subtitles */ .section-header__description, [class*="subtitle"] { color: #8a7fb5 !important; font-size: 0.95rem !important; font-weight: 500 !important; } /* Alternate section backgrounds */ .shopify-section:nth-child(even) > div:not(.announcement-bar__wrap) { background-color: var(--diverra-bg2) !important; } /* Section vertical rhythm */ .shopify-section { padding-top: 60px !important; padding-bottom: 60px !important; } /* ---- 9. PRODUCT PAGE ENHANCEMENTS ---- */ /* Product title */ .product__title { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; color: var(--diverra-text) !important; } /* Price block */ .product__price .price--large { font-size: 1.8rem !important; font-weight: 900 !important; color: var(--diverra-purple-dark) !important; letter-spacing: -0.03em !important; } /* Product description */ .product__description { font-size: 0.95rem !important; line-height: 1.75 !important; color: #4a3d6b !important; } .product__description strong { color: var(--diverra-text) !important; font-weight: 700 !important; } .product__description ul { padding-left: 0 !important; list-style: none !important; } .product__description ul li { padding: 6px 0 6px 24px !important; position: relative !important; border-bottom: 1px solid var(--diverra-border) !important; font-size: 0.9rem !important; } .product__description ul li::before { content: '✓' !important; position: absolute !important; left: 0 !important; color: var(--diverra-purple) !important; font-weight: 800 !important; } /* Product media gallery */ .product__media-item { border-radius: var(--diverra-radius-sm) !important; overflow: hidden !important; border: 1px solid var(--diverra-border) !important; } /* Product form container */ .product__info-container { padding-left: 48px !important; } /* Guarantee strip above buy button */ .product-form { position: relative !important; } /* ---- 10. FOOTER — Clean & Structured ---- */ .footer { background-color: #1e1734 !important; color: rgba(255, 255, 255, 0.85) !important; padding-top: 60px !important; padding-bottom: 0 !important; border-top: none !important; } .footer__content-bottom { background-color: #160f28 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 20px 0 !important; margin-top: 40px !important; } .footer a, .footer__column a { color: rgba(255, 255, 255, 0.65) !important; text-decoration: none !important; font-size: 0.875rem !important; transition: color 0.2s ease !important; line-height: 2 !important; } .footer a:hover, .footer__column a:hover { color: var(--diverra-gold) !important; } .footer__column-header, .footer [class*="__title"] { color: #ffffff !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; margin-bottom: 16px !important; } /* Remove duplicate social icons */ .footer__column--social:last-of-type { display: none !important; } /* Footer newsletter */ .footer [class*="newsletter"] input { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: white !important; border-radius: 50px 0 0 50px !important; padding: 12px 20px !important; } .footer [class*="newsletter"] button { border-radius: 0 50px 50px 0 !important; background: var(--diverra-gold) !important; color: #1e1734 !important; font-weight: 700 !important; } /* ---- 11. TRUST BADGES STRIP ---- */ /* Enhance trust badges row */ [class*="icon-with-text"], [class*="trust"] { background: white !important; border-radius: var(--diverra-radius) !important; padding: 24px !important; border: 1px solid var(--diverra-border) !important; box-shadow: var(--diverra-shadow) !important; text-align: center !important; transition: var(--diverra-transition) !important; } [class*="icon-with-text"]:hover, [class*="trust"]:hover { transform: translateY(-2px) !important; box-shadow: var(--diverra-shadow-hover) !important; } /* ---- 12. MOBILE OPTIMIZATIONS ---- */ @media screen and (max-width: 749px) { /* Tighter hero on mobile */ .banner__content { padding: 28px 20px !important; margin: 16px !important; } /* Full-width cards grid on mobile */ .collection-list { gap: 12px !important; } /* Better product page on mobile */ .product__info-container { padding-left: 0 !important; padding-top: 24px !important; } .product__title { font-size: 1.4rem !important; } /* Larger tap targets for buttons */ .button, .product-form__submit { min-height: 52px !important; font-size: 1rem !important; } /* Section spacing on mobile */ .shopify-section { padding-top: 40px !important; padding-bottom: 40px !important; } /* Header on mobile */ .header { padding: 12px 16px !important; } /* Card headings — smaller on mobile */ .card__heading { font-size: 0.875rem !important; } /* Trust badges — horizontal scroll on mobile */ [class*="icon-with-text-list"] { display: flex !important; overflow-x: auto !important; gap: 12px !important; padding-bottom: 8px !important; scrollbar-width: none !important; } } /* ---- 13. MICRO-INTERACTIONS & POLISH ---- */ /* Smooth focus rings */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--diverra-purple) !important; outline-offset: 3px !important; } /* Image lazy load fade-in */ img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } img[loading="lazy"].loaded, img[loading="lazy"]:not([src=""]) { opacity: 1; } /* Quantity input refinement */ .quantity { border: 1.5px solid var(--diverra-border) !important; border-radius: 50px !important; overflow: hidden !important; } .quantity__input { font-weight: 700 !important; font-size: 1rem !important; } /* Form inputs */ input[type="text"], input[type="email"], input[type="tel"], textarea, select { border-radius: var(--diverra-radius-sm) !important; border: 1.5px solid var(--diverra-border) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: var(--diverra-purple) !important; box-shadow: 0 0 0 3px rgba(155, 142, 196, 0.15) !important; outline: none !important; } /* ---- 14. SECTION DIVIDERS ---- */ .shopify-section + .shopify-section { border-top: 1px solid var(--diverra-border) !important; } /* ---- 15. CART DRAWER REFINEMENTS ---- */ #cart-drawer, .cart-drawer { border-radius: 20px 0 0 20px !important; } .cart-drawer__header { background: var(--diverra-bg2) !important; border-bottom: 1px solid var(--diverra-border) !important; padding: 20px 24px !important; } /* ============================================ END OF DIVERRA CUSTOM CSS ============================================ */ } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } /* ============================================ DIVERRA — Header Uniformisation v1.1 Taille uniforme nav + localization, une seule ligne ============================================ */ /* --- Header: forcer une seule ligne --- */ header.header { flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; } /* --- Nav links desktop: taille uniforme 13px --- */ .header__inline-menu .header__menu-item, .header__inline-menu a.header__menu-item, .header__inline-menu .list-menu__item { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } /* --- Localization buttons: même taille que nav (13px) --- */ .desktop-localization-wrapper .localization-selector, .desktop-localization-wrapper .disclosure__button, #HeaderCountryForm .localization-selector, #HeaderLanguageForm .localization-selector { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; padding: 4px 6px !important; } /* --- Masquer le texte complet "Belgique | EUR €" et "Français" --- Technique: masquer le span original et afficher l'abréviation via ::after */ /* Bouton Pays/Devise: masquer "Belgique | EUR €", afficher "Be | €" */ #HeaderCountryForm .disclosure__button > span { display: inline-block !important; width: 0 !important; overflow: hidden !important; white-space: nowrap !important; font-size: 0 !important; } #HeaderCountryForm .disclosure__button::before { content: "Be | \20AC" !important; font-size: 13px !important; font-weight: 600 !important; color: inherit !important; white-space: nowrap !important; } /* Bouton Langue: masquer "Français", afficher "Fr" */ #HeaderLanguageForm .disclosure__button > span { display: inline-block !important; width: 0 !important; overflow: hidden !important; white-space: nowrap !important; font-size: 0 !important; } #HeaderLanguageForm .disclosure__button::before { content: "Fr" !important; font-size: 13px !important; font-weight: 600 !important; color: inherit !important; white-space: nowrap !important; } /* --- Desktop localization: flex sur une seule ligne --- */ .desktop-localization-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; white-space: nowrap !important; } .desktop-localization-wrapper localization-form { display: inline-flex !important; align-items: center !important; } /* --- Header icons: alignement horizontal parfait --- */ .header__icons { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; } /* --- Réduire l'icône caret (flèche dropdown) --- */ .desktop-localization-wrapper .icon-caret { width: 8px !important; height: 8px !important; } /* ============================================ DIVERRA — Header Fix v1.2 — Single line localization ============================================ */ /* Forcer localization-wrapper sur une seule ligne */ .desktop-localization-wrapper { flex-wrap: nowrap !important; align-items: center !important; } /* Forcer header__icons sur une seule ligne */ .header__icons.header__icons--localization { flex-wrap: nowrap !important; align-items: center !important; } /* S'assurer que les localization-form sont inline */ .desktop-localization-wrapper > localization-form { flex-shrink: 0 !important; flex-wrap: nowrap !important; } /* ============================================ DIVERRA — Header Fix v1.3 — Nav no-wrap + taille compacte ============================================ */ /* Forcer le menu nav inline sur une seule ligne */ .header__inline-menu ul.list-menu--inline { flex-wrap: nowrap !important; white-space: nowrap !important; } /* Réduire légèrement les nav items pour qu'ils tiennent tous sur une ligne */ .header__inline-menu .header__menu-item, .header__inline-menu a.header__menu-item { font-size: 12.5px !important; padding: 4px 8px !important; white-space: nowrap !important; } /* S'assurer que le header ne wrap pas non plus */ header.header .header__inline-menu { flex-shrink: 1 !important; min-width: 0 !important; } /* ============================================ DIVERRA — Masquer le lien "Ignorer et passer au contenu" ============================================ */ .skip-to-content-link { display: none !important; } /* ============================================ DIVERRA — Trust Badges sur fiches produit ============================================ */ .diverra-trust-badges { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 14px 16px; background: rgba(155, 142, 196, 0.07); border: 1px solid rgba(155, 142, 196, 0.2); border-radius: 12px; } .diverra-trust-badge { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: rgb(45, 35, 71); line-height: 1.3; } .diverra-trust-badge__icon { font-size: 16px; flex-shrink: 0; line-height: 1; } .diverra-trust-badge__text { color: rgb(45, 35, 71); font-family: Quicksand, sans-serif; } /* ============================================ DIVERRA — Trust Badges Fix v1.1 — Styles spécifiques ============================================ */ /* Surcharger les styles hérités du thème Dawn */ .diverra-trust-badges { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 16px !important; padding: 12px 14px !important; background: rgba(155, 142, 196, 0.08) !important; border: 1px solid rgba(155, 142, 196, 0.22) !important; border-radius: 12px !important; width: 100% !important; box-sizing: border-box !important; } .diverra-trust-badge { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .diverra-trust-badge__icon { display: inline !important; flex-shrink: 0 !important; font-size: 15px !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; background: none !important; border: none !important; } .diverra-trust-badge__text { display: inline !important; font-size: 13px !important; font-weight: 500 !important; color: rgb(45, 35, 71) !important; font-family: Quicksand, sans-serif !important; line-height: 1.4 !important; padding: 0 !important; margin: 0 !important; white-space: normal !important; } /* ============================================ DIVERRA — Agrandissement des polices +20% homepage Base: 1rem = 10px (Dawn). Valeurs multipliées par 1.2 ============================================ */ /* --- Barre d'annonces: 0.8rem -> 0.96rem (8px -> 9.6px) --- */ .announcement-bar__message { font-size: 0.96rem !important; } /* --- Titres des cartes collections/produits: 0.95rem -> 1.14rem (9.5px -> 11.4px) --- */ .card__heading, .card__heading a, .card__heading h3, .card__heading h2 { font-size: 1.14rem !important; } /* --- Titres collections dans la liste: 1rem -> 1.2rem (10px -> 12px) --- */ .collection-list .card__heading, .collection-list__item .card__heading { font-size: 1.2rem !important; } /* --- Prix des cartes: 1.05rem -> 1.26rem (10.5px -> 12.6px) --- */ .price, .price-item, .price-item--regular, .price__regular, .price--large { font-size: 1.26rem !important; } /* --- Boutons nav: 0.9rem -> 1.08rem (9px -> 10.8px) --- */ .header__menu-item, .header__menu-item a, .header__inline-menu .header__menu-item, .header__inline-menu a.header__menu-item { font-size: 1.08rem !important; } /* --- Boutons generaux: 0.9rem -> 1.08rem --- */ .button, .btn, button.button { font-size: 1.08rem !important; } /* --- Sous-titres / descriptions de section: 0.95rem -> 1.14rem --- */ .section-header__description, [class*="subtitle"], .banner__text p, .banner__text .subtitle { font-size: 1.14rem !important; } /* --- Card footer button: 0.85rem -> 1.02rem --- */ .card__footer .button, .card-information .button { font-size: 1.02rem !important; } /* --- Badge: 0.75rem -> 0.9rem --- */ .badge { font-size: 0.9rem !important; } /* --- Texte description produit sur fiche: 0.95rem -> 1.14rem --- */ .product__description, .product__description p { font-size: 1.14rem !important; } /* --- Localization selector: 13px -> 15.6px --- */ .desktop-localization-wrapper .localization-selector, .desktop-localization-wrapper .disclosure__button { font-size: 15.6px !important; } /* --- Boutons localization ::before (Be | €, Fr): 13px -> 15.6px --- */ #HeaderCountryForm .disclosure__button::before, #HeaderLanguageForm .disclosure__button::before { font-size: 15.6px !important; } /* ============================================ DIVERRA — Fix Homepage: Best-sellers + Marges + Titres ============================================ */ /* === 1. RÉDUIRE LES MARGES DE SECTION (60px -> 28px) === */ .shopify-section { padding-top: 28px !important; padding-bottom: 28px !important; } /* Garder l'announcement bar et header sans padding vertical forcé */ .shopify-section-group-header-group { padding-top: 0 !important; padding-bottom: 0 !important; } /* === 2. BEST-SELLERS: SLIDER CENTRÉ === */ /* Limiter le slider au viewport */ .slider-component-desktop.page-width { max-width: 100% !important; width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; } /* Corriger la marge gauche du premier slide qui crée le décalage */ .grid.product-grid > li.grid__item.slider__slide:first-child { margin-left: 0 !important; } /* Assurer que la grille produit est bien centrée */ .grid.product-grid.grid--4-col-desktop { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } .grid.product-grid.grid--4-col-desktop > li { scroll-snap-align: start !important; flex: 0 0 auto !important; width: calc(25% - 6px) !important; min-width: 200px !important; } /* === 3. TITRES DES PRODUITS: SUPPRIMER LA LIMITATION À 2 LIGNES === */ .card__heading, .card__heading a, .card__heading h3, .card__heading h2, .card-information .card__heading { display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; overflow: visible !important; white-space: normal !important; max-height: none !important; height: auto !important; } /* Mais garder une limite raisonnable (3 lignes) pour les cartes produit */ .card-information .card__heading { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* === 4. RÉDUIRE LE HEADER DE SECTION (grand espace entre header et hero) === */ .shopify-section-header-sticky + .shopify-section, .shopify-section-group-header-group + .shopify-section { padding-top: 0 !important; } /* === 5. PAGE WIDTH MAX-WIDTH pour limiter le contenu === */ .page-width { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* === BARRE DE RÉASSURANCE — Une seule ligne sans descriptions === */ /* Masquer les descriptions (sous-textes) dans la barre de réassurance */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .rte { display: none !important; } /* Réduire le padding des cartes */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .multicolumn-card__info { padding: 8px 6px !important; } /* Réduire la taille des titres (H3) */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .multicolumn-card__info h3 { font-size: 13px !important; font-weight: 500 !important; margin: 0 !important; white-space: nowrap !important; } /* Forcer la liste sur une seule ligne horizontale */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .multicolumn-list { flex-wrap: nowrap !important; justify-content: center !important; gap: 4px !important; align-items: center !important; } /* Réduire le padding de la section */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .section-template--29192946942294__multicolumn_aHEFRK-padding { padding-top: 10px !important; padding-bottom: 10px !important; } /* Assurer que les items s'adaptent à la largeur disponible */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .multicolumn-list__item { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } /* Centrer le contenu de chaque carte */ #shopify-section-template--29192946942294__multicolumn_aHEFRK .multicolumn-card { display: flex !important; align-items: center !important; justify-content: center !important; } /* === BANNER HERO — Texte directement sur l'image, mini cadre serré === */ /* Le conteneur principal : transparent, pas de box-shadow */ #shopify-section-template--29192946942294__image_banner .banner__content { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Le banner__box : réduit au strict contenu du texte */ #shopify-section-template--29192946942294__image_banner .banner__box { background: transparent !important; box-shadow: none !important; max-width: fit-content !important; width: auto !important; padding: 0 !important; } /* Texte en blanc avec ombre pour lisibilité sur l'image (desktop) */ @media screen and (min-width: 750px) { #shopify-section-template--29192946942294__image_banner .banner__heading, #shopify-section-template--29192946942294__image_banner .banner__text p, #shopify-section-template--29192946942294__image_banner .banner__text { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; max-width: 580px !important; } } /* Espacement entre les éléments */ #shopify-section-template--29192946942294__image_banner .banner__heading { margin-bottom: 12px !important; } #shopify-section-template--29192946942294__image_banner .banner__text { margin-bottom: 20px !important; } /* === BANNER HERO — Supprimer le padding de section (plein écran) === */ #shopify-section-template--29192946942294__image_banner { padding-top: 0 !important; padding-bottom: 0 !important; } /* === BANNER HERO — Supprimer backdrop-filter et overlay (cadre transparent) === */ /* Supprimer le blur/fond translucide sur le conteneur de texte */ #shopify-section-template--29192946942294__image_banner .banner__content { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Supprimer l'overlay violet sur l'image */ #shopify-section-template--29192946942294__image_banner .banner__media { background: transparent !important; } /* === BANNER HERO — Supprimer la bordure blanche du conteneur texte === */ #shopify-section-template--29192946942294__image_banner .banner__content { border: none !important; outline: none !important; } /* === SECTION COLLECTIONS — Toutes sur une seule ligne pleine largeur === */ /* Forcer la liste sur une seule ligne */ #shopify-section-template--29192946942294__collection_list_UkC38A ul.collection-list { flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; } /* Chaque item : largeur égale (1/6 de la ligne) */ #shopify-section-template--29192946942294__collection_list_UkC38A ul.collection-list > li.collection-list__item { flex: 1 1 0% !important; max-width: calc(16.666% - 10px) !important; min-width: 0 !important; width: auto !important; } /* Image : ratio 3/4 pour être plus compact */ #shopify-section-template--29192946942294__collection_list_UkC38A .card__inner .card__media, #shopify-section-template--29192946942294__collection_list_UkC38A .card__inner .media { aspect-ratio: 4 / 3 !important; height: auto !important; } /* S'assurer que la card prend toute la largeur */ #shopify-section-template--29192946942294__collection_list_UkC38A .card-wrapper, #shopify-section-template--29192946942294__collection_list_UkC38A .card { width: 100% !important; } /* Texte de la collection : taille réduite */ #shopify-section-template--29192946942294__collection_list_UkC38A .card__heading { font-size: 1.3rem !important; line-height: 1.3 !important; } /* === SECTION COLLECTIONS — Pleine largeur comme Best-sellers === */ /* Étendre le wrapper à toute la largeur de la page */ #shopify-section-template--29192946942294__collection_list_UkC38A .collection-list-wrapper { max-width: 100% !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; } /* La UL et le slider prennent aussi toute la largeur */ #shopify-section-template--29192946942294__collection_list_UkC38A slider-component, #shopify-section-template--29192946942294__collection_list_UkC38A .slider-mobile-gutter { max-width: 100% !important; width: 100% !important; } #shopify-section-template--29192946942294__collection_list_UkC38A ul.collection-list { width: 100% !important; } /* Le titre reste aligné à gauche avec le même padding */ #shopify-section-template--29192946942294__collection_list_UkC38A .title-wrapper-with-link { max-width: 100% !important; width: 100% !important; } /* === BEST-SELLERS — Titre et description alignés à gauche === */ #shopify-section-template--29192946942294__featured_collection .collection__title { margin-left: 20px !important; margin-right: auto !important; max-width: none !important; } /* === BANNER HERO MOBILE — Titre et texte en couleur lavande === */ @media screen and (max-width: 749px) { /* Override la variable CSS de couleur du thème sur cette section */ #shopify-section-template--29192946942294__image_banner .banner__box, #shopify-section-template--29192946942294__image_banner .banner__content { --color-foreground: 184, 169, 227; --color-base-text: 184, 169, 227; } #shopify-section-template--29192946942294__image_banner .banner__heading, #shopify-section-template--29192946942294__image_banner .banner__heading *, #shopify-section-template--29192946942294__image_banner h1, #shopify-section-template--29192946942294__image_banner h2 { color: #b8a9e3 !important; text-shadow: none !important; } #shopify-section-template--29192946942294__image_banner .banner__text, #shopify-section-template--29192946942294__image_banner .banner__text *, #shopify-section-template--29192946942294__image_banner .banner__text p, #shopify-section-template--29192946942294__image_banner .rte, #shopify-section-template--29192946942294__image_banner .subtitle { color: #b8a9e3 !important; text-shadow: none !important; } } /* === BANNER HERO MOBILE — Sous-texte lavande (règle renforcée) === */ @media screen and (max-width: 749px) { .shopify-section#shopify-section-template--29192946942294__image_banner .banner__box .banner__text, .shopify-section#shopify-section-template--29192946942294__image_banner .banner__box .banner__text p, .shopify-section#shopify-section-template--29192946942294__image_banner .color-scheme-1 .banner__text, .shopify-section#shopify-section-template--29192946942294__image_banner .color-scheme-1 .banner__text p, .shopify-section#shopify-section-template--29192946942294__image_banner .content-container .banner__text, .shopify-section#shopify-section-template--29192946942294__image_banner .content-container .banner__text p { color: #b8a9e3 !important; } } /* === COLLECTIONS MOBILE — Scroll horizontal comme Best-sellers === */ @media screen and (max-width: 749px) { /* Forcer le slider des collections à scroller horizontalement */ #shopify-section-template--29192946942294__collection_list_UkC38A slider-component { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; } /* Une seule ligne horizontale sur mobile */ #shopify-section-template--29192946942294__collection_list_UkC38A ul.collection-list { flex-wrap: nowrap !important; display: flex !important; gap: 12px !important; width: max-content !important; padding: 0 16px !important; } /* Chaque item : largeur fixe ~70% viewport comme Best-sellers */ #shopify-section-template--29192946942294__collection_list_UkC38A ul.collection-list > li.collection-list__item { width: 70vw !important; max-width: 260px !important; min-width: 0 !important; flex: 0 0 auto !important; } /* Images : ratio carré adapté mobile */ #shopify-section-template--29192946942294__collection_list_UkC38A .card__inner .card__media, #shopify-section-template--29192946942294__collection_list_UkC38A .card__inner .media { aspect-ratio: 1 / 1 !important; height: auto !important; } }