/** Shopify CDN: Minification failed Line 2727:0 Unexpected "}" Line 2752:0 Unexpected "}" **/ /* ========================================================================== TABLE DES MATIÈRES -------------------------------------------------------------------------- 1. GÉNÉRAL 1.1 Polices et variables 1.2 Typographie (règles actives + anciennes versions commentées) 1.3 Composants généraux 1.4 Correctifs globaux (mobile, flèches de carrousel) 2. ACCUEIL 2.1 Temps des fêtes 2.2 Bannière vidéo 2.3 Slideshow (commenté) 2.4 Titres de sections 2.5 Widget Instagram 2.6 Bandeau d'avis clients 2.7 Bannière « Un Noël signé d'ici » 3. HEADER 3.1 Barre d'annonce 3.2 Header : base, navigation et recherche 3.3 Header : espacement 3.4 Header : menu du bas 3.5 Mega menu 3.6 Recherche prédictive 4. COLLECTION / RECHERCHE 5. PRODUIT 5.1 Informations produit 5.2 Cartes produit et badges 5.3 Variantes, quantité et paiement 5.4 Barre d'achat rapide (quick add) 5.5 Réassurance / Athena 5.6 Galerie (zoom) 5.7 Disponibilité en magasin (pickup) 5.8 Produits similaires 5.9 Produits certifiés 6. PANIER 6.1 Barre de livraison gratuite 6.2 Tiroir panier et recommandations 6.3 Page panier : « Saviez-vous que... » 6.4 Page panier : typographie uniformisée 7. AVIS JUDGE.ME 8. BLOG 9. FOOTER 10. SYSTÈME TYPOGRAPHIQUE DU SITE 11. FORMULAIRES KLAVIYO 12. BANNIÈRE DE COOKIES (SHOPIFY) ========================================================================== */ /* ========================================================================== 1. GÉNÉRAL ========================================================================== */ /* -------------------------------------------------------------------------- 1.1 Polices et variables -------------------------------------------------------------------------- */ /* * GENERAL */ /* Espacement vertical entre les sections (repris du thème en ligne le 16 oct. 2026 : il était dans un bloc Liquid personnalisé de l'en-tête, custom_liquid_N47x8X). Plus serré que les valeurs d'Impact. */ :root { --section-outer-spacing-block: 1.5rem !important; --section-inner-max-spacing-block: 1.5rem !important; --section-stack-spacing-block: 1rem !important; } @media screen and (min-width: 700px) { :root { --section-outer-spacing-block: 2rem !important; --section-inner-max-spacing-block: 2rem !important; --section-stack-spacing-block: 1.5rem !important; } } @media screen and (min-width: 1000px) { :root { --section-outer-spacing-block: 2.5rem !important; --section-inner-max-spacing-block: 2rem !important; --section-stack-spacing-block: 1.5rem !important; } } /* -------------------------------------------------------------------------- 1.2 Typographie -------------------------------------------------------------------------- */ @font-face { font-family: 'pp eiko'; src: url('/cdn/shop/files/PPEiko-Thin.otf?v=1692844910') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; } /* Vitesse (14 oct. 2026) : PP Eiko en version latine WOFF2, 42 Ko au lieu des 171 Ko du fichier .otf complet. Le fichier complet reste déclaré juste au-dessus : il ne se télécharge que si un titre contient un caractère absent de la version latine (unicode-range). Fichier dans Contenu > Fichiers : sl-ppeiko-thin-latin.woff2. */ @font-face { font-family: 'pp eiko'; src: url('/cdn/shop/files/sl-ppeiko-thin-latin.woff2?v=1792031991') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC; } :root { --heading-font-family: 'pp eiko', 'Times New Roman', Times, Georgia, serif; --heading-font-weight: 400; } html body .header__main-nav .header__link-list a, html body .header__main-nav .header__link-list summary, html body .header__main-nav .header__link-list button, html body .header__wrapper > .header__link-list a, html body .header__wrapper > .header__link-list summary, html body .header__wrapper > .header__link-list button, html body .mobile-sticky-search__input, html body .search-input input, html body .search-input button, .header__icon-list .bold, html body [class*="video-banner-text-"] *, html body [class*="video-banner-button-"], html body [class*="video-banner-button-"] *, html body .product-card__title, html body .product-card__title *, .button--xl, .button { font-weight: 400 !important; } html body [class*="video-banner-heading-"] * { font-family: var(--heading-font-family) !important; font-weight: 400 !important; } /* Graisses et polices du thème en ligne (snippets/sl-typographie-reference.liquid, 15 oct. 2026), reprises le 16 oct. pour que le rendu soit identique : texte en 400 (le thème met plusieurs éléments en gras 700), gras des strong/b en 600, titres en PP Eiko 400, menus en Jost. Les popups Klaviyo gardent leurs propres réglages. */ /* Poids : comme avant, le texte reste en 400 (le thème met plusieurs éléments en gras 700) et le gras des balises strong/b passe à 600. Les popups Klaviyo gardent leurs propres réglages. */ html body :is(p, span, a, button, input, textarea, select, summary, label, legend, small, li):not(:where(.klaviyo-form *)) { font-weight: 400 !important; } html body :is(strong, b):not(:where(.klaviyo-form *)) { font-weight: 600 !important; } /* Titres en PP Eiko. */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .h0, html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6, html body .sl-price, html body .sl-st, html body .sl-typecard > b, html body .sl-step > b, html body [class*="video-banner-heading-"], html body [class*="video-banner-heading-"] * { font-family: var(--heading-font-family) !important; font-weight: 400 !important; } html body .sl-collection-title, html body .sl-collection-title *, html body .sl-collection-title split-lines { font-family: var(--heading-font-family) !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; } /* Menus (tiroir de navigation, liens suggérés de la recherche, choix de langue) : le thème leur donne des classes de titre (h3, h5, h6). Ce ne sont pas des titres : Jost. */ html body .panel__wrapper li:is(.h1, .h2, .h3, .h4, .h5, .h6), html body .panel__wrapper :is(a, button):is(.h1, .h2, .h3, .h4, .h5, .h6), html body .search-drawer__featured-links :is(.h1, .h2, .h3, .h4, .h5, .h6), html body x-popover p:is(.h4, .h5, .h6) { font-family: var(--text-font-family) !important; font-weight: 400 !important; } /* 3 nov. 2026, Claude, demande de Dawei : montant du total du panier (tiroir et page /cart) en Jost, comme tous les autres prix du site. En PP Eiko, son « $ » ne ressemblait pas aux autres. 3 nov. 2026 (fin de journée), demande de Dawei (uniformiser les polices du panier) : le mot « Total » passe aussi en Jost, et la ligne est en 600 (avant : :last-child et 400). Taille : section 6.4. */ html body #cart-drawer [slot="footer"] .h-stack.justify-between > .h5, html body .cart-form .h-stack.justify-between > .h5 { font-family: var(--text-font-family) !important; font-weight: 600 !important; letter-spacing: 0; } /* Pastilles « Non taxable » : assets/theme.css les met en Roboto. Jost, au poids prévu par le thème (500). */ html body .non-taxable-badge { font-family: var(--text-font-family) !important; font-weight: 500 !important; } /* Numéros du carrousel de la bannière d'accueil (Montserrat dans la section SS - Video banner pro) : Jost. */ html body .swiper-pagination-bullet, html body .swiper-pagination-bullet span { font-family: var(--text-font-family) !important; } /* Popup 5 $ ordinateur (Klaviyo QVJ2Y9). Le test A/B verrouille les variantes dans Klaviyo, donc la correction se fait ici : sous-titre (Georgia ou Roboto) et bouton (Roboto) en Jost. À retirer quand le test sera terminé et que la variante gagnante aura ses polices réglées directement dans Klaviyo. */ html body form[data-testid="klaviyo-form-QVJ2Y9"] em, html body form[data-testid="klaviyo-form-QVJ2Y9"] .klaviyo-form-button { font-family: var(--text-font-family) !important; } /* Panneau 5 $ cellulaire (Klaviyo) ouvert : la bulle Shopify Inbox chevauche le champ courriel, on la cache. */ html body:has(.sl-row) shopify-chat { display: none !important; } @media (max-width:749px){ shopify-chat{display:none !important;} } /* -------------------------------------------------------------------------- 1.3 Composants généraux -------------------------------------------------------------------------- */ /* * AUTRE */ .content-over-media > :is(img, video, iframe, svg, video-media) { transform-origin: bottom; } .block-swatch { white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .js .page-transition { opacity: 0; } } .social-media { align-items:center; } @media screen and (min-width: 700px) { .tabs-inner { text-align: center; } } @media screen and (min-width: 1000px) { .timeline__slide { text-align: left; } } .wp-caption { max-width:100%!important; } a[slot="subtitle"]:hover { text-decoration: underline; color:#2B4735; } /* * BOUTONS PLEINS EN RELIEF * 2 nov. 2026 (soir), Claude, demande de Dawei : les boutons pleins étaient plats. Quatre ombres superposées * leur donnent du relief : 1. une ligne de lumière en haut, 2. une ombre en bas, 3. une ombre de contact serrée, * 4. un halo doux de la couleur du bouton (color-mix sur --button-background). * Les boutons à contour (button--outline) et atténués (button--subdued) ne changent pas. * Si un navigateur ne comprend pas color-mix(), il ignore toute la règle et le bouton reste plat comme avant. */ .button:not(.button--outline):not(.button--subdued) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px color-mix(in srgb, rgb(var(--button-background)) 60%, transparent); } /* Boutons pleins qui ne sont pas des .button d'Impact, même vert : « Voir plus de produits locaux » (collections), Judge.me et « Voir notre Instagram » (app Instagram de l'accueil, ajouté le 3 nov. 2026 dans la nuit, demande de Dawei : c'était le seul bouton de l'accueil sans relief). */ .collection-load-more__button, .jm-button--primary, .gfa-content__button { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px rgb(43 71 53 / .6); } /* Bouton blanc sur le fond vert de la bannière « Un Noël signé d'ici » : un halo blanc ferait une lueur sur le vert, on garde l'ombre du bas et une ombre sombre douce. 3 nov. 2026, Claude, demande de Dawei : règle désactivée. La bannière est maintenant sur fond blanc avec un bouton vert sapin, qui prend le relief normal des boutons pleins (règle plus haut, halo vert). [id$="__media_with_text_sapin26"] .button:not(.button--outline):not(.button--subdued) { box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px -6px rgb(0 0 0 / .45); } */ /* -------------------------------------------------------------------------- 1.4 Correctifs globaux -------------------------------------------------------------------------- */ /* Code qui empêche le bug de scroll sur mobile */ @media screen and (max-width: 749px) { html, body { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; min-height: 100% !important; touch-action: auto !important; } body * { overscroll-behavior: auto; } [aria-hidden="true"] { pointer-events: none !important; } } body { overflow-x: clip !important; overflow-y: visible !important; } /* Correctif des flèches de carrousels */ button[is="prev-button"].circle-chevron > svg, button[is="next-button"].circle-chevron > svg { display: none !important; } button[is="prev-button"].circle-chevron::before, button[is="next-button"].circle-chevron::before { content: ""; display: block; width: 7px; height: 7px; box-sizing: border-box; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; } button[is="prev-button"].circle-chevron::before { transform: rotate(-135deg); margin-left: 2px; } button[is="next-button"].circle-chevron::before { transform: rotate(45deg); margin-right: 2px; } /* -------------------------------------------------------------------------- 1.5 Rendu des sections natives changé par la mise à jour d'Impact (16 oct. 2026) Référence : OFFICIEL (16 OCTOBRE). -------------------------------------------------------------------------- */ /* Gros boutons (.button--xl) en 22 px, comme dans le thème en ligne (assets/theme.css y avait été modifié). La graisse reste à 400 par la règle de typographie plus haut. */ .button--xl { font-size: 22px; } /* Section « Images avec texte défilant » : la mise à jour d'Impact passe les titres des blocs de .h2 à .h1. On garde la taille .h2 (pages Devenir marchand, Corporatif, Marché de Noël, etc.). */ .shopify-section--images-and-text-scrolling .images-scrolling__content .h1 { font-size: var(--text-h2); line-height: 1.1; } /* Retouches faites directement dans assets/theme.css du thème en ligne (OFFICIEL 16 OCTOBRE), perdues avec la mise à jour d'Impact. Reprises ici pour ne pas modifier le theme.css d'Impact. */ /* Prix de la fiche produit (et autres textes .text-lg) en 22 px. */ .text-lg { font-size: 22px; } /* Prix soldés en noir, gras 600, 18 px (au lieu de la couleur « solde » du thème). */ .text-on-sale { color: #202020; font-weight: 600; font-size: 18px; } /* Champ de quantité : largeur fixe (la nouvelle version d'Impact l'ajuste au nombre de chiffres). */ .quantity-input { width: 44px; } @media screen and (min-width: 700px) { .quantity-input { width: 48px; } } /* Coins arrondis des tiroirs (panier, recherche, menu) et de la bannière des témoins. */ .drawer::part(content), .privacy-bar__inner { border-radius: 8px; } /* Pastilles de variantes : 2 px au-dessus et au-dessous, pour que le contour de la pastille choisie ne soit pas coupé. */ .variant-picker__option-values.scroll-area { padding-block-start: 2px; padding-block-end: 2px; } /* Encadrés .offer (boîte « Commande cadeau » du panier, offres de la fiche produit) : la mise à jour d'Impact passe la marge intérieure de 16 à 20 px et l'écart de 4 à 8 px. On garde les valeurs d'avant. */ .offer { gap: var(--spacing-1); padding: var(--spacing-4); } /* ========================================================================== 2. ACCUEIL ========================================================================== */ /* -------------------------------------------------------------------------- 2.1 Temps des fêtes -------------------------------------------------------------------------- */ /* TEMPS DES FETES ACCUEIL */ .shopify-section--featured-collection .section { padding-block-start: calc(var(--calculated-section-spacing-block-start)/1.5)!important; padding-block-end: calc(var(--calculated-section-spacing-block-end)/2)!important; } .shopify-section--featured-collection .section-stack { gap: calc(var(--section-stack-spacing-block, 0px)/2) var(--section-stack-spacing-inline, 0px)!important; } .shopify-section--featured-collection .product-card__info { padding: 1rem!important; } .gfa-widget.GSC-tDYeNPHSvDpwUQe { padding: 40px 20px !important; } @media screen and (min-width: 1000px) { .gfa-widget.GSC-tDYeNPHSvDpwUQe { padding-left: 0 !important; } } @media screen and (min-width: 700px) { .scrollable-with-controls { gap: calc(var(--spacing-10)/2)!important; } } /* -------------------------------------------------------------------------- 2.2 Bannière vidéo -------------------------------------------------------------------------- */ /* * ACCUEIL */ /* Bannière vidéo (section SS - Video banner pro, réglée sur Height = Auto depuis le 8 oct. 2026) : la bannière prend la forme des vidéos, 8:3 sur ordinateur et 4:5 sur cellulaire. Rien n'est coupé, quel que soit l'écran. Remplace l'ancienne hauteur forcée à la hauteur de l'écran (qui coupait les nouvelles vidéos). */ video[class*="video-banner-video-"] { aspect-ratio: 8 / 3; height: auto !important; } @media (max-width: 1023px) { video[class*="video-banner-video-"] { aspect-ratio: 4 / 5; } } /* -------------------------------------------------------------------------- 2.3 Slideshow (commenté) -------------------------------------------------------------------------- */ /*.slideshow .h0 { font-family: 'jost' !important; font-weight:700; letter-spacing: var(--text-letter-spacing); } .slideshow .content { font-size:var(--text-h5); } .slideshow .button { border:1px solid rgb(var(--button-outline-color)); }*/ /* -------------------------------------------------------------------------- 2.4 Titres de sections -------------------------------------------------------------------------- */ #shopify-section-ef04bdae-d146-4b3f-98a1-8e17ecc1a415 .h2 { font-size: 1.5rem !important; } /* Réduire uniquement ces trois titres de la page d’accueil */ [id$="__custom_liquid_gcw3km"] .mm-heading, [id$="__featured_collection_tBkXDF"] .section-header .h2, [id$="__featured_collection_CmbHNm"] .section-header .h2 { font-size: 30px !important; line-height: 1.2 !important; } /* Taille mobile */ @media screen and (max-width: 699px) { [id$="__custom_liquid_gcw3km"] .mm-heading, [id$="__featured_collection_tBkXDF"] .section-header .h2, [id$="__featured_collection_CmbHNm"] .section-header .h2 { font-size: 25px !important; } } /* Réduire d’autres titres de la page d’accueil */ [id$="__recently_viewed_products_BGzVFw"] .section-header .h2, [id$="__featured_collection_6CVqAT"] .section-header .h2, [id$="__featured_collection_nNa9kF"] .section-header .h2, [id$="__featured_collection_dtC7xi"] .section-header .h2 { font-size: 30px !important; line-height: 1.2 !important; } @media screen and (max-width: 699px) { [id$="__recently_viewed_products_BGzVFw"] .section-header .h2, [id$="__featured_collection_6CVqAT"] .section-header .h2, [id$="__featured_collection_nNa9kF"] .section-header .h2, [id$="__featured_collection_dtC7xi"] .section-header .h2 { font-size: 25px !important; } } /* -------------------------------------------------------------------------- 2.5 Widget Instagram (GFA) -------------------------------------------------------------------------- */ .gfa-content__text > h3, .gfa-content__text > span { text-align: left !important; } .gfa-content__text { align-self: flex-start !important; } .gfa-content__button-container { align-self: flex-start !important; } /* Centrer le bouton du widget Instagram */ .gfa-content.GSC-tDYeNPHSvDpwUQe > a:last-child, .gfa-content.GSC-tDYeNPHSvDpwUQe > button:last-child { display: flex !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } /* Cas où le bouton se trouve dans un conteneur */ .gfa-content.GSC-tDYeNPHSvDpwUQe > div:last-child { display: flex !important; justify-content: center !important; width: 100% !important; } .gfa-content.GSC-tDYeNPHSvDpwUQe > div:last-child > a, .gfa-content.GSC-tDYeNPHSvDpwUQe > div:last-child > button { margin-left: auto !important; margin-right: auto !important; } /* SL — Alignement accueil avis + Instagram Sur grand écran, le parent est déjà aligné sur le conteneur Impact. Quand le viewport devient plus étroit (ex. zoom navigateur), on remet le gutter natif d'Impact pour garder le même départ que les titres standards. */ /*.sl-rv__head { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }*/ /*@media screen and (max-width: 1695px) { .sl-rv__head { width: calc(100% - (var(--container-gutter) * 2)) !important; margin-inline: auto !important; } }*/ /* 4 nov. 2026 : le titre « L'envers du décor » commençait plus à droite que les photos et que les titres des autres sections (452 px au lieu de 308 px sur un écran de 1916 px) : il était centré dans une boîte plus étroite que la section. Il suit maintenant le bord gauche de la section, comme les photos (largeur du thème : Paramètres du thème > Page width). */ [id$="__1763553199f30ac911"] :is(h1, h2, h3, h4) { max-width: var(--container-max-width); margin-inline: 0 !important; } /* SL — Instagram : conserver l’alignement gauche Impact, étendre à droite */ @media screen and (min-width: 1000px) { [id*="__1763553199f30ac911"] .section { padding-inline-end: 0 !important; } /* 4 nov. 2026 : même marge à gauche que les autres sections. La section de l'app ne gardait pas la marge minimale du thème (48 px) : les photos touchaient le bord gauche quand l'écran est à peine plus large que la page (jusqu'à 1 696 px de large avec la page à 1 600 px). */ html body [id*="__1763553199f30ac911"] .section { padding-inline-start: max(var(--container-gutter), calc((100vw - var(--container-max-width)) / 2)) !important; } [id*="__1763553199f30ac911"] .shopify-app-block { width: 100% !important; max-width: none !important; } .gfa-widget.GSC-tDYeNPHSvDpwUQe { width: 100% !important; max-width: none !important; } .gfa-content.GSC-tDYeNPHSvDpwUQe { width: 100% !important; max-width: none !important; --gfa-content-max-width: 100% !important; } } /* SL — Instagram : bouton centré selon GSC */ @media screen and (min-width: 1000px) { .gfa-widget.GSC-tDYeNPHSvDpwUQe .gfa-content__button-container.button-LDjMGRYqAVBH { align-self: center !important; position: static !important; left: auto !important; transform: none !important; } } /* 3 nov. 2026, Claude, demande de Dawei : « Voir notre Instagram » centré sur la page, sous le logo. La rangée de photos déborde à droite, donc le milieu de son conteneur était décalé vers la droite (1095 px au lieu de 953 px sur un écran de 1906 px). Le conteneur du bouton prend maintenant la largeur du contenu centré de la page (même marge à gauche et à droite). Rien ne change sous 1000 px. 4 nov. 2026 : le bouton était 7,5 px à droite du logo quand le navigateur affiche une barre de défilement (Mac avec une souris, Windows) : 100vw compte la barre, la page non. La largeur part maintenant de celle du bloc de l'app (100cqw, sans la barre) moins la marge de gauche. container-type ne change rien d'autre : la fenêtre des photos Instagram s'ouvre toujours sur tout l'écran (vérifié). */ @media screen and (min-width: 1000px) { html body [id*="__1763553199f30ac911"] .shopify-app-block { container-type: inline-size; } .gfa-widget.GSC-tDYeNPHSvDpwUQe .gfa-content__button-container.button-LDjMGRYqAVBH { align-self: flex-start !important; width: calc(100cqw - max(var(--container-gutter), (100vw - var(--container-max-width)) / 2)) !important; max-width: none !important; } } /* -------------------------------------------------------------------------- 2.6 Bandeau d'avis clients (snippets/sl-avis-clients.liquid) 2 nov. 2026, Claude, demande de Dawei : une seule rangée en noir et blanc (environ 200 px de haut) au lieu des deux rangées de grandes cartes de couleur (environ 790 px). La rangée défile toute seule et se fait aussi glisser à la main (doigt, trackpad, souris) : script dans assets/sl-theme.js, bloc « Accueil, bandeau d'avis ». Une ligne sous les avis montre qu'on peut les faire défiler. sl-avis-defilement n'est plus rendu. -------------------------------------------------------------------------- */ .sl-avis { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 0 24px max(var(--container-gutter), calc((100vw - var(--container-max-width)) / 2)); /* 4 nov. 2026 : 24px et 1300px avant, marge et largeur du thème maintenant */ overflow: hidden; background: #f2f2f2; color: #111; font-family: var(--text-font-family); } .sl-avis * { box-sizing: border-box; } .sl-avis p { margin: 0; } .sl-avis .sl-avis__titre { margin: 0 0 6px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #6b6b6b; font-weight: 500 !important; } .sl-avis__note { display: flex; align-items: baseline; gap: 4px; line-height: 1; } .sl-avis__chiffre { font-family: var(--heading-font-family); font-size: 42px; letter-spacing: -.02em; } .sl-avis__sur { font-size: 14px; color: #6b6b6b; } .sl-avis .sl-avis__etoiles { margin: 6px 0 7px; letter-spacing: 3px; font-size: 12px; color: #111; } .sl-avis__src { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #444; } .sl-avis__src svg { width: 13px; height: 13px; flex: 0 0 auto; } .sl-avis__piste { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 93%, transparent 100%); } .sl-avis__piste::-webkit-scrollbar { display: none; } @media (hover: hover) and (pointer: fine) { .sl-avis__piste { cursor: grab; } .sl-avis__piste.is-glisse { cursor: grabbing; user-select: none; } } .sl-avis__rang { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; } .sl-avis__droite { min-width: 0; } /* Ligne de défilement sous les avis : même style que les carrousels de produits d'Impact (classes scrollbar et scrollbar__progress). On peut aussi cliquer ou glisser dessus. */ .sl-avis__barre { margin: 14px max(var(--container-gutter), calc((100vw - var(--container-max-width)) / 2)) 0 0; /* 4 nov. 2026 : 24px et 1300px avant */ padding: 8px 0; cursor: pointer; touch-action: none; } .sl-avis__carte { width: 300px; min-height: 116px; margin: 0 12px 0 0; padding: 14px 16px 12px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid #e4e4e4; } .sl-avis__et { display: block; margin-bottom: 6px; letter-spacing: 2px; font-size: 9.5px; color: #111; } .sl-avis .sl-avis__q { margin: 0 0 9px; font-family: var(--heading-font-family); font-size: 13.5px; line-height: 1.42; color: #1a1a1a; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .sl-avis__qui { font-size: 10px; line-height: 1.35; } .sl-avis__qui b { font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; } .sl-avis__qui span { color: #777; } @media screen and (max-width: 749px) { .sl-avis { grid-template-columns: 1fr; gap: 12px; padding: 20px 0 22px; } .sl-avis__score { padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; row-gap: 2px; } .sl-avis .sl-avis__titre { width: 100%; margin-bottom: 3px; } .sl-avis__chiffre { font-size: 26px; } .sl-avis__sur { font-size: 12px; } .sl-avis .sl-avis__etoiles { margin: 0; font-size: 11px; } .sl-avis__piste { -webkit-mask-image: none; mask-image: none; padding-left: 20px; } .sl-avis__barre { margin: 10px 20px 0; } .sl-avis__carte { width: 250px; min-height: 120px; } .sl-avis .sl-avis__q { font-size: 13px; -webkit-line-clamp: 5; } } @media (prefers-reduced-motion: reduce) { .sl-avis__rang [aria-hidden="true"] { display: none; } } /* -------------------------------------------------------------------------- 2.7 Bannière « Un Noël signé d'ici » 2 nov. 2026 (soir), Claude, demande de Dawei : la bannière pleine largeur (section image-with-text-overlay) était trop imposante. Elle est remplacée par la section Impact « Media with text » (photo carrée à gauche, message sur fond vert sapin à droite, id media_with_text_sapin26), réglée dans l'éditeur, sans CSS. Les règles de hauteur qui étaient ici ont été retirées. -------------------------------------------------------------------------- */ /* 3 nov. 2026, Claude, demande de Dawei : la bannière passe en moitié-moitié (photo 50 %, réglage « Image width » dans l'éditeur) et le message passe sur fond blanc, texte noir, bouton vert sapin (réglages du bloc dans l'éditeur). Comme la page est blanche aussi, un filet gris clair encadre le message pour qu'il reste un bloc. */ [id$="__media_with_text_sapin26"] .media-with-text__content { border: 1px solid #e6e6e6; } /* ========================================================================== 3. HEADER ========================================================================== */ .section-header { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; column-gap: 16px !important; } /* -------------------------------------------------------------------------- 3.1 Barre d'annonce -------------------------------------------------------------------------- */ /* HEADER */ .announcement-bar.announcement-bar .bold { font-weight:400 !important; } /* Barre d'annonce amincie (8 oct. 2026) : un seul rang de texte sur ordinateur ; sur cellulaire, marges de 6 px et le texte peut aller sur deux lignes. */ .announcement-bar { padding-block: 6px !important; } .announcement-bar__static-list { max-width: none !important; } .announcement-bar__static-list p { white-space: normal; } @media (min-width: 700px) { .announcement-bar__static-list p { white-space: nowrap; } .announcement-bar.announcement-bar { padding-block: 6px !important; } .announcement-bar__wrapper.announcement-bar__wrapper { max-width: none !important; width: max-content; margin-inline: auto; } } /* -------------------------------------------------------------------------- 3.2 Header : base, navigation et recherche -------------------------------------------------------------------------- */ /* * HEADER */ .header__logo { max-width: max-content; grid-area: logo; display: block; position: relative; margin-left:auto; margin-right:auto; } .header__logo-image { height: var(--header-logo-height); } .header__main-nav { justify-self:start; } @media screen and (min-width: 1150px) { .header__main-nav { justify-self:center; } } .header__secondary-nav { flex-direction:row-reverse; } .header__link-list { grid-area: link-list; font-size:15px; } .custom-search-form-sl { display: flex; flex-direction: row; } .custom-search-form-sl input[type="search"] { padding: 8px 15px; border: 1px solid rgb(43 71 53 / 10%); width: clamp(50px, 20vw, 400px); } .custom-search-form-sl button[type="submit"] { width: 40px; height: auto; background: #2b4735; color: #ffffff; text-align: center; } .custom-search-form-sl button[type="submit"] svg { margin-left: auto; margin-right: auto; } .custom-search-form-sl button[type="submit"]:hover { background:rgba(43,71,53,0.9); } @media screen and (min-width: 1150px) { .header__icon-list .tap-area[aria-controls="search-drawer"] { position:relative; margin-right:20px; } .header__icon-list .tap-area[aria-controls="search-drawer"]:after { display: block; width: 265px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.2); content: ''; position: absolute; right: 0; top: 0; transform: translate(10px, -10px); content: attr(aria-label); padding: 8px; color: rgba(0, 0, 0, 0.5); } } .header__icon-list { justify-content:flex-end; grid-area: icon-list; } @media screen and (min-width: 1150px) { .header__main-nav .header__link-list { width:100%; justify-content:space-between; } } .mega-menu .navigation-promo__wrapper, .mega-menu .navigation-promo { margin-left: 0 !important; } /* reporté de header.liquid code custom inline 2026-09-17 */ .header__main-nav .header__link-list a, .header__main-nav .header__link-list summary, .header__main-nav .header__link-list button { font-family: var(--text-font-family) !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: var(--text-letter-spacing) !important; font-size: 15px !important; line-height: 1.6 !important; } @media screen and (max-width: 699px) { /*#shopify-section-{{ section.id }} { position: relative !important; top: auto !important; z-index: 50; }*/ .header__icon-list > a[aria-controls="search-drawer"] { display: none !important; } .mobile-sticky-search { display: block; position: relative; z-index: 60; padding: 10px 16px; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .mobile-sticky-search.is-fixed { position: fixed; top: 0; right: 0; left: 0; z-index: 90; padding: 10px 16px; background: #ffffff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .mobile-sticky-search-placeholder { display: none; height: 0; } .mobile-sticky-search-placeholder.is-active { display: block; } .mobile-sticky-search__form { position: relative; display: flex; align-items: center; width: 300px; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0; border: 0; background: transparent; } .mobile-sticky-search__input { display: flex; align-items: center; width: 100%; height: 46px; padding: 0 46px 0 12px; border: 1px solid #d3d3d3; border-radius: 4px; background: #ffffff; color: #777777; font-size: 0; line-height: 1; text-align: left; box-shadow: none; appearance: none; } .mobile-sticky-search__input::before { content: attr(data-desktop-label); font-size: 16px; line-height: 1; color: #777777; } .mobile-sticky-search__icon { position: absolute; right: 12px; left: auto; z-index: 1; display: flex; align-items: center; pointer-events: none; color: rgb(var(--text-color)); } main, [role="main"] { padding-top: 0 !important; } } @media screen and (min-width: 700px) { .mobile-sticky-search { display: none !important; } .mobile-sticky-search.is-fixed { display: block !important; position: fixed; top: 0; right: 0; left: 0; z-index: 90; padding: 10px 0; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .mobile-sticky-search-placeholder { display: none !important; } .mobile-sticky-search__form { position: relative; display: flex; align-items: center; width: 300px; max-width: calc(100vw - 48px); margin-left: auto; margin-right: var(--desktop-search-right, 24px); padding: 0; border: 0; background: transparent; } .mobile-sticky-search__input { display: flex; align-items: center; width: 100%; height: 46px; padding: 0 46px 0 12px; border: 1px solid #d3d3d3; border-radius: 4px; background: #ffffff; color: #777777; font-size: 0; line-height: 1; text-align: left; box-shadow: none; } .mobile-sticky-search__input::before { content: attr(data-desktop-label); font-size: 16px; line-height: 1; color: #777777; } .mobile-sticky-search__icon { position: absolute; right: 12px; left: auto; z-index: 1; display: flex; align-items: center; pointer-events: none; color: rgb(var(--text-color)); } } @media screen and (max-width: 699px) { .mobile-sticky-search.is-fixed .mobile-sticky-search__form { width: 100%; max-width: none; margin-inline: 0; } } @media screen and (min-width: 700px) { .mobile-sticky-search.is-fixed .mobile-sticky-search__form { width: calc(100% - 48px); max-width: 1280px; margin-inline: auto; } } @media screen and (min-width: 1150px) { .header__icon-list .tap-area[aria-controls="search-drawer"]:after { border-radius: 4px; } } /* fin reporté */ .mobile-sticky-search__input--fake { display: flex; align-items: center; color: rgba(var(--text-color), 0.65); cursor: text; } /* -------------------------------------------------------------------------- 3.3 Header : espacement -------------------------------------------------------------------------- */ .header__wrapper { row-gap: 24px !important; } /* -------------------------------------------------------------------------- 3.4 Header : menu du bas -------------------------------------------------------------------------- */ /* Header - rendre le menu du bas aussi foncé/gras que le menu du haut */ @media screen and (min-width: 1150px) { store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > a, store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > details > summary, store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > button { font-family: var(--text-font-family), sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 24px !important; letter-spacing: 0 !important; font-style: normal !important; text-transform: none !important; color: #202020 !important; opacity: 1 !important; -webkit-font-smoothing: auto !important; text-rendering: auto !important; } store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--spacing-6) !important; } store-header.header .header__main-nav nav.header__link-list.wrap .text-with-icon { display: flex !important; align-items: center !important; gap: 10px !important; } store-header.header .header__main-nav nav.header__link-list.wrap .icon-chevron-bottom { width: 10px !important; height: 7px !important; position: relative !important; top: 1px !important; color: #202020 !important; opacity: 1 !important; } } /* -------------------------------------------------------------------------- 3.5 Mega menu -------------------------------------------------------------------------- */ /* Mega menu - fermeture rapide au mouseleave */ details[is="mega-menu-disclosure"] > .mega-menu, details[is="mega-menu-disclosure"][open] > .mega-menu { transition: opacity 0.25s ease, visibility 0.25s ease; } .mega-menu { --mega-menu-block-padding: var(--spacing-10); --mega-menu-gap: var(--spacing-12); width: 100%; gap: var(--mega-menu-gap); justify-content: var(--mega-menu-justify-content); padding: var(--mega-menu-block-padding) 30px; max-width: calc(100vw - var(--container-gutter) * 2); left: calc(var(--container-gutter) / 2) !important; max-height: calc(100vh - var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) - var(--header-height, 0px) - 20px); overscroll-behavior-y: contain; background: rgb(var(--header-background)); color: rgb(var(--header-text)); mix-blend-mode: plus-lighter; border-block-start-width: 1px; align-items: flex-start; display: flex; position: absolute; top: 100%; overflow-x: hidden; overflow-y: auto; box-shadow: 0 9999px 0 9999px #0006; } .mega-menu__nav a { padding: 2px 0 !important; line-height: 1.2 !important; } .mega-menu .navigation-promo__wrapper { flex: 0 0 auto !important; max-width: max-content !important; margin-left: 0 !important; } button.mega-menu__close { display: none !important; } /* @media screen and (min-width: 1150px) { #navigation-promo-{{ promo_id }} .content-over-media { --content-over-media-height: 380px !important; } } @media screen and (min-width: 1400px) { #navigation-promo-{{ promo_id }} .content-over-media { --content-over-media-height: 420px !important; } }*/ /* Mega menu: reduce promo carousel image height */ /*.navigation-promo--carousel .content-over-media { max-height: 220px; } .navigation-promo--carousel .content-over-media img { height: 220px; object-fit: cover; } */ @media screen and (min-width: 1150px) { .mega-menu { align-items: flex-start !important; justify-content: center !important; gap: 42px !important; } .mega-menu .mega-menu__nav { flex: 0 1 46% !important; max-width: 46% !important; min-width: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 42px; row-gap: 22px; } .mega-menu__nav > li ul, .mega-menu__nav-sublist { gap: 8px; } .mega-menu__nav > li > a, .mega-menu__nav > li > a.h5, .mega-menu__nav > li > a span, .mega-menu__nav-heading, .mega-menu__nav-heading span { font-size: 16px !important; line-height: 1.25 !important; } .mega-menu__nav ul a, .mega-menu__nav .link-faded, .mega-menu__nav .reversed-link { font-size: 15px !important; line-height: 1.3 !important; } .mega-menu__promo { flex: 0 0 24%; max-width: 24%; min-width: 220px; } .mega-menu__promo img, .mega-menu__promo picture, .mega-menu__promo svg, .mega-menu__promo .content-over-media { width: 100% !important; max-width: 100% !important; } .mega-menu .navigation-promo__wrapper { max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; margin:0!important; } .mega-menu .navigation-promo__carousel-controls { display: none !important; } .mega-menu > *:not(.navigation-promo__wrapper) { min-width: 0; } .mega-menu .navigation-promo__wrapper { flex: 0 1 50% !important; max-width: 50% !important; width: auto !important; min-width: 0 !important; margin-left: 0 !important; /*flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-left: 0 !important;*/ } .mega-menu .navigation-promo { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(3, 200px) !important; gap: 14px !important; justify-content: center !important; align-items: start !important; width: auto !important; } .mega-menu .mega-menu__promo-carousel { max-width: none !important; width: 100% !important; } .mega-menu mega-menu-promo-carousel.navigation-promo--carousel { /*display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;*/ gap: 12px !important; width: 100% !important; display: flex !important; flex-direction: row; flex-wrap: wrap; } .mega-menu mega-menu-promo-carousel.navigation-promo--carousel > * { grid-area: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; min-width: 0 !important; width: 100% !important; } .mega-menu .navigation-promo .content-over-media { width: 200px !important; height: 200px !important; aspect-ratio: 1 / 1 !important; max-width: 200px !important; max-height: 200px !important; overflow: hidden !important; aspect-ratio: 1 !important; width: 100% !important; height: auto !important; } .mega-menu .navigation-promo .content-over-media img, .mega-menu .navigation-promo .content-over-media picture, .mega-menu .navigation-promo .content-over-media svg { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; display: block !important; } } /* Let the carousel work normally between 1150px and 1399px */ /*@media screen and (min-width: 1150px) and (max-width: 1399px) { .mega-menu mega-menu-promo-carousel.navigation-promo--carousel { width: 100% !important; } .mega-menu mega-menu-promo-carousel.navigation-promo--carousel > * { width: 100% !important; } .mega-menu .navigation-promo__carousel-controls { display: flex !important; } } .mega-menu .navigation-promo__wrapper .content-over-media, .mega-menu .navigation-promo__wrapper .content-over-media img, .mega-menu .navigation-promo__wrapper .content-over-media picture, .mega-menu .navigation-promo__wrapper .content-over-media svg { width: 100% !important; } .mega-menu .navigation-promo__wrapper .content-over-media { overflow: hidden !important; } .mega-menu .navigation-promo__wrapper .content-over-media img, .mega-menu .navigation-promo__wrapper .content-over-media picture, .mega-menu .navigation-promo__wrapper .content-over-media svg { height: 100% !important; object-fit: cover !important; display: block !important; } }*/ /* Large desktop: keep 3 images side by side */ /*@media screen and (min-width: 1361px) { .mega-menu mega-menu-promo-carousel.navigation-promo--carousel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .mega-menu .navigation-promo__wrapper .content-over-media { height: clamp(240px, 18vw, 320px) !important; max-height: 320px !important; } }*/ /* Small desktop / 1280x720-ish: keep text wider + real carousel */ /*@media screen and (min-width: 1150px) and (max-width: 1360px) { .mega-menu { align-items: start !important; } .mega-menu > *:not(.navigation-promo__wrapper) { min-width: 0 !important; flex: 1 1 auto !important; } .mega-menu .navigation-promo__wrapper { flex: 0 0 220px !important; max-width: 220px !important; width: 220px !important; min-width: 220px !important; margin-inline-start: auto !important; } .mega-menu .mega-menu__nav { column-count: 3 !important; column-gap: 24px !important; display: block !important; max-width: calc(100% - 220px - 20px) !important; } .mega-menu .mega-menu__nav > li { break-inside: avoid !important; page-break-inside: avoid !important; display: inline-block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin-bottom: 18px !important; vertical-align: top !important; }*/ /* Real carousel: slides must overlap, not stack vertically */ /*.mega-menu mega-menu-promo-carousel.navigation-promo--carousel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; position: relative !important; } .mega-menu mega-menu-promo-carousel.navigation-promo--carousel > * { grid-area: 1 / 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .mega-menu .navigation-promo__carousel-controls { display: flex !important; z-index: 3 !important; } .mega-menu .navigation-promo__wrapper .content-over-media { height: 220px !important; max-height: 220px !important; overflow: hidden !important; } .mega-menu .navigation-promo__wrapper .content-over-media img, .mega-menu .navigation-promo__wrapper .content-over-media picture, .mega-menu .navigation-promo__wrapper .content-over-media svg { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; } }*/ /*@media screen and (min-width: 1400px) { .mega-menu { gap: 64px !important; } .mega-menu .navigation-promo { grid-template-columns: repeat(3, 210px) !important; gap: 16px !important; } .mega-menu .navigation-promo .content-over-media { width: 210px !important; height: 210px !important; max-width: 210px !important; max-height: 210px !important; } }*/ /*@media screen and (min-width: 1150px) and (max-width: 1365px) { .mega-menu__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 42px; row-gap: 22px; } .mega-menu__promo { flex: 0 0 22%; max-width: 22%; min-width: 200px; } }*/ /* Firefox : pendant le passage direct d'un libelle de mega-menu a un autre, on se base sur le summary réellement survole plutot que sur details:hover. */ @supports (-moz-appearance: none) { @media screen and (min-width: 1150px) and (pointer: fine) { .header__link-list:has(details[is="mega-menu-disclosure"][trigger="hover"] > summary:hover) details[is="mega-menu-disclosure"][trigger="hover"][open]:not(:has(> summary:hover)) > .mega-menu { opacity: 0 !important; } .header__link-list details[is="mega-menu-disclosure"][trigger="hover"][open]:has(> summary:hover) > .mega-menu { opacity: 1 !important; } } } /* -------------------------------------------------------------------------- 3.6 Recherche prédictive -------------------------------------------------------------------------- */ /* Recherche prédictive : suggestions à gauche */ .sl-predictive-layout { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); align-items: start; gap: clamp(28px, 4vw, 60px); width: 100%; } .sl-predictive-suggestions { min-width: 0; padding-right: clamp(22px, 3vw, 42px); border-right: 1px solid rgba(0, 0, 0, 0.14); } .sl-predictive-suggestions__heading { margin: 0 0 22px; font-size: 16px; font-weight: 700; line-height: 1.3; text-transform: uppercase; } .sl-predictive-suggestions__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .sl-predictive-suggestions__link { display: flex; align-items: center; gap: 13px; color: inherit; font-size: 18px; line-height: 1.35; text-decoration: none; transition: opacity 0.2s ease; } .sl-predictive-suggestions__link:hover { opacity: 0.6; } .sl-predictive-suggestions__icon { width: 21px; height: 21px; flex: 0 0 21px; } .sl-predictive-suggestions__link mark { padding: 0; background: transparent; color: inherit; font-weight: 700; } .sl-predictive-current-results { min-width: 0; } /* Version mobile */ @media screen and (max-width: 749px) { .sl-predictive-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sl-predictive-suggestions { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.14); } .sl-predictive-suggestions__list { gap: 14px; } .sl-predictive-suggestions__link { font-size: 16px; } } /* reporté/fusionné sl-search.css 2026-10-30 */ /* reporté de theme.liquid code custom inline 2026-09-17 */ html.sl-synonym-search-loading .shopify-section--main-search h1.h2.text-center, html.sl-synonym-search-loading .shopify-section--main-search .main-search-form { visibility: hidden !important; } /* reporté de search-drawer.liquid code custom inline 2026-09-17 */ /*#shopify-section-{{ section.id }} { --predictive-search-column-count: 4; }*/ #search-drawer::part(content) { height: 75vh !important; height: 75dvh !important; max-height: 75vh !important; max-height: 75dvh !important; } #search-drawer::part(body) { overflow-y: auto; } #search-drawer .search-drawer__featured-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 12px; width: 100%; } #search-drawer .search-drawer__featured-links li { min-width: 0; } #search-drawer .search-drawer__featured-links a { display: block; } #search-drawer .sl-view-all-mobile { display: none; } @media screen and (max-width: 699px) { #search-drawer .search-drawer__featured-links { column-gap: 16px; row-gap: 10px; } } /* MOBILE : enlever Suggestions et placer Voir tout à droite */ @media screen and (max-width: 999px) { #search-drawer .sl-search-suggestions-content { display: none !important; } #search-drawer .sl-search-suggestions-title { display: none !important; } #search-drawer .sl-suggestions-desktop, #search-drawer .sl-view-all-desktop { display: none !important; } #search-drawer .sl-view-all-mobile { display: inline-flex !important; align-items: center; gap: 8px; } #search-drawer .predictive-search__tabs { position: relative; } #search-drawer .predictive-search__tab-item--products { grid-column: 1 / -1 !important; display: flex !important; align-items: center; } #search-drawer .sl-view-all-mobile { position: absolute !important; top: 0; right: 0; margin: 0 !important; } #search-drawer .predictive-search__products-grid { grid-column: 1 / -1 !important; } } /* MOBILE 390px+ : 2 produits par rangée, image au-dessus */ @media screen and (min-width: 390px) and (max-width: 999px) { #search-drawer .predictive-search__products-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; width: 100%; align-items: start; } #search-drawer .predictive-search__products-grid .predictive-search-result { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100%; min-width: 0; } #search-drawer .predictive-search__products-grid .predictive-search-result img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; display: block; } #search-drawer .predictive-search__products-grid .predictive-search-result > .v-stack { width: 100%; min-width: 0; } #search-drawer .predictive-search__products-grid .predictive-search-result .reversed-link { white-space: normal; overflow-wrap: anywhere; } } @media screen and (min-width: 1000px) { #search-drawer .predictive-search__tab-item--products, #search-drawer .predictive-search__products-grid { grid-column: 1 / span 3; } #search-drawer .sl-search-suggestions-title, #search-drawer .sl-search-suggestions-content { grid-column: 4 / span 1; } #search-drawer .predictive-search__products-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; width: 100%; } #search-drawer .predictive-search__products-grid .predictive-search-result { width: 100%; min-width: 0; max-width: 100%; } #search-drawer .predictive-search__products-grid .predictive-search-result > .v-stack, #search-drawer .predictive-search__products-grid .predictive-search-result .v-stack { min-width: 0; max-width: 100%; } #search-drawer .predictive-search__products-grid .predictive-search-result .reversed-link { white-space: normal; overflow-wrap: anywhere; word-break: normal; } } @media screen and (min-width: 1500px) { #search-drawer .predictive-search__products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 3.9 En-tête sur ordinateur : marges, menu en 14 px, en-tête fixe et compact au défilement (repris du thème en ligne le 16 oct. 2026 ; comportement dans assets/sl-theme.js, « En-tête compact ») -------------------------------------------------------------------------- */ @media (min-width: 1000px) { .header__wrapper { padding-block: 16px !important; row-gap: 24px !important; } html body store-header.header .header__link-list a, html body store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > a, html body store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > details > summary, html body store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > button { font-size: 14px !important; } } @media (min-width: 1150px) { store-header .header__wrapper { transition: padding-block 0.3s ease, row-gap 0.3s ease; } store-header .header__main-nav { max-height: 60px; transition: max-height 0.3s ease, opacity 0.2s ease 0.1s; } store-header.sl-fixe { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: #fdfdfd; transition: background-color 0.3s ease, box-shadow 0.3s ease; } store-header.sl-fixe.sl-compact { background: rgba(253, 253, 253, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.07); } store-header.sl-compact .header__wrapper { padding-block: 14px !important; row-gap: 0px !important; } store-header.sl-compact .header__main-nav { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 0.3s ease, opacity 0.15s ease; } height-observer .mobile-sticky-search.is-fixed { display: none !important; } } @media (prefers-reduced-motion: reduce) { store-header, store-header .header__wrapper, store-header .header__main-nav { transition: none !important; } } /* ========================================================================== 4. COLLECTION / RECHERCHE ========================================================================== */ .sl-collection-title { font-weight: 400 !important; } .blog-filter-list__placeholder-do-not-use { } .facets__floating-filter { width: 100%; text-align: center; z-index: 1; position: static; bottom: var(--spacing-4); } /* Collections sur cellulaire : la mise à jour d'Impact ajoute son gros bouton « Filtrer et trier ». On garde seulement le petit bouton à côté du nombre de produits, comme OFFICIEL (16 OCTOBRE). */ .shopify-section--main-collection facet-floating-filter.facets__floating-filter { display: none; } .collection-load-more__button { cursor: pointer; } /* Bouton Voir plus : pages de collection et de recherche (snippets/sl-voir-plus.liquid) */ :is(.shopify-section--main-collection, .shopify-section--main-search) .collection-load-more { text-align: center; } /* Espace autour du bouton : seulement sur la recherche, comme OFFICIEL (16 OCTOBRE) (collections sans marge). */ .shopify-section--main-search .collection-load-more { margin-block-start: var(--spacing-10); margin-block-end: var(--spacing-12); } :is(.shopify-section--main-collection, .shopify-section--main-search) .collection-load-more__count { margin-bottom: 18px; font-size: 14px; font-weight: 600; } :is(.shopify-section--main-collection, .shopify-section--main-search) .collection-load-more__button { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; min-height: 48px; padding: 0 32px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; background: #000; border: 1px solid #000; border-radius: 4px; } :is(.shopify-section--main-collection, .shopify-section--main-search) .collection-load-more__button:hover { background: #333; border-color: #333; } :is(.shopify-section--main-collection, .shopify-section--main-search) .collection-load-more__done { margin-top: 18px; font-size: 14px; font-weight: 600; } /* Centrer le compteur et le bouton « Voir plus de produits locaux » */ .collection-load-more.collection__pagination { grid-column: 1 / -1 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .collection-load-more__button { margin-inline: auto !important; background-color: #2C4A3E !important; color: #ffffff !important; border-color: #2C4A3E !important; } .collection-load-more__button:hover { background-color: #233b32 !important; border-color: #233b32 !important; } /* Page de recherche : aligner le bouton avec la grille de produits */ @media screen and (min-width: 1000px) { .shopify-section--main-search .collection--filters-sidebar .collection-load-more.collection__pagination { grid-column: 2 / -1 !important; } } /* Grille des pages de collection */ .shopify-section--main-collection .main-collection-grid-settings { --product-list-gap: var(--main-collection-mobile-gap); --product-list-items-per-row: var(--main-collection-mobile-columns); --product-list-grid: auto-flow dense / repeat(var(--product-list-items-per-row), minmax(0, 1fr)); --product-list-promo-grid-column: span var(--main-collection-mobile-promo-span); --content-over-media-gap: var(--spacing-8); } @media screen and (min-width: 700px) { .shopify-section--main-collection .main-collection-grid-settings { --product-list-gap: var(--product-list-row-gap) var(--product-list-column-gap); --product-list-items-per-row: 2; --product-list-promo-grid-column: span 1; } } @media screen and (min-width: 1000px) { .shopify-section--main-collection .main-collection-grid-settings { --product-list-items-per-row: var(--main-collection-columns-1000); --product-list-promo-grid-column: span 2; } } @media screen and (min-width: 1200px) { .shopify-section--main-collection .main-collection-grid-settings { --product-list-items-per-row: var(--main-collection-columns-1200); } } @media screen and (min-width: 1400px) { .shopify-section--main-collection .main-collection-grid-settings { --product-list-items-per-row: var(--main-collection-columns-1400); } } /* Blocs promotionnels dans la grille de collection */ @media screen and (min-width: 1400px) { .shopify-section--main-collection .product-list__promo--span-1 { --product-list-promo-grid-column: span 1; } .shopify-section--main-collection .product-list__promo--span-2 { --product-list-promo-grid-column: span 2; --content-over-media-column-gap: var(--spacing-12); } } /* Sous-collections (menu en carrousel) */ .subcollection-menu { position: relative; z-index: 1; padding-top: var(--subcollection-padding-top); padding-bottom: var(--subcollection-padding-bottom); overflow: hidden; color: var(--subcollection-text); background: var(--subcollection-background); } .subcollection-menu .subcollection-menu__heading { margin: 0 0 24px; color: inherit; text-align: center; } .subcollection-menu .subcollection-menu__carousel { position: relative; min-width: 0; } .subcollection-menu .subcollection-menu__viewport { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .subcollection-menu .subcollection-menu__viewport::-webkit-scrollbar { display: none; } .subcollection-menu .subcollection-menu__track { display: flex; align-items: flex-start; gap: var(--subcollection-gap); width: max-content; min-width: 100%; padding-inline: 4px; } .subcollection-menu .subcollection-menu__card { display: flex; flex: 0 0 var(--subcollection-card-width); flex-direction: column; align-items: center; gap: 12px; width: var(--subcollection-card-width); color: inherit; text-align: center; text-decoration: none; scroll-snap-align: start; } .subcollection-menu .subcollection-menu__media { display: flex; align-items: center; justify-content: center; width: var(--subcollection-card-width); height: var(--subcollection-card-width); padding: 4px; overflow: hidden; background: var(--subcollection-border); transition: transform 200ms ease, box-shadow 200ms ease; } .subcollection-menu .subcollection-menu__media--circle { border-radius: 50%; } .subcollection-menu .subcollection-menu__media--rounded { border-radius: 22px; } .subcollection-menu .subcollection-menu__media--square { border-radius: 0; } .subcollection-menu .subcollection-menu__media--hexagon { clip-path: polygon( 25% 4%, 75% 4%, 100% 25%, 100% 75%, 75% 96%, 25% 96%, 0 75%, 0 25% ); } .subcollection-menu .subcollection-menu__image, .subcollection-menu .subcollection-menu__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--subcollection-image-background); } .subcollection-menu .subcollection-menu__media--circle .subcollection-menu__image, .subcollection-menu .subcollection-menu__media--circle .subcollection-menu__placeholder { border-radius: 50%; } .subcollection-menu .subcollection-menu__media--rounded .subcollection-menu__image, .subcollection-menu .subcollection-menu__media--rounded .subcollection-menu__placeholder { border-radius: 18px; } .subcollection-menu .subcollection-menu__media--hexagon .subcollection-menu__image, .subcollection-menu .subcollection-menu__media--hexagon .subcollection-menu__placeholder { clip-path: inherit; } .subcollection-menu .subcollection-menu__title { display: -webkit-box; min-height: 2.6em; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .subcollection-menu .subcollection-menu__card:hover .subcollection-menu__media { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / 14%); } .subcollection-menu .subcollection-menu__arrow { position: absolute; top: calc(var(--subcollection-card-width) / 2); z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; color: var(--subcollection-text); cursor: pointer; background: rgb(255 255 255 / 85%); border: 0; border-radius: 50%; box-shadow: 0 3px 12px rgb(0 0 0 / 16%); transform: translateY(-50%); } .subcollection-menu .subcollection-menu__arrow--previous { left: -18px; } .subcollection-menu .subcollection-menu__arrow--next { right: -18px; } .subcollection-menu .subcollection-menu__arrow:disabled { visibility: hidden; opacity: 0; pointer-events: none; } .subcollection-menu .subcollection-menu__arrow[hidden] { display: none; } @media screen and (max-width: 999px) { .subcollection-menu .subcollection-menu__arrow { display: none; } } @media screen and (max-width: 699px) { .subcollection-menu .subcollection-menu__track { gap: 14px; padding-inline: 16px; } .subcollection-menu .subcollection-menu__card { flex-basis: var(--subcollection-mobile-card-width); width: var(--subcollection-mobile-card-width); gap: 9px; } .subcollection-menu .subcollection-menu__media { width: var(--subcollection-mobile-card-width); height: var(--subcollection-mobile-card-width); } .subcollection-menu .subcollection-menu__title { font-size: 13px; } .subcollection-menu .subcollection-menu__heading { margin-bottom: 18px; } .subcollection-menu .subcollection-menu__container { padding-inline: 0; } } /* Pages « produits certifiés » : bannières sans ombre ni filtre */ body[class*="produits-certifies"] .content-over-media, body[class*="produits-certifies"] .content-over-media img, body[class*="produits-certifies"] .collection-banner, body[class*="produits-certifies"] .collection-banner img, body[class*="produits-certifies"] .collection__image, body[class*="produits-certifies"] .collection__image img, body[class*="produits-certifies"] .rte img, body[class*="produits-certifies"] .prose img { box-shadow: none !important; filter: none !important; } body[class*="produits-certifies"] .content-over-media::before, body[class*="produits-certifies"] .content-over-media::after, body[class*="produits-certifies"] .collection-banner::before, body[class*="produits-certifies"] .collection-banner::after, body[class*="produits-certifies"] .collection__image::before, body[class*="produits-certifies"] .collection__image::after { box-shadow: none !important; filter: none !important; background: transparent !important; background-image: none !important; } /* ========================================================================== 5. PRODUIT ========================================================================== */ /* -------------------------------------------------------------------------- 5.1 Informations produit -------------------------------------------------------------------------- */ /* * PRODUCT */ .product-info__title { margin-bottom: -1rem; font-size: 1.75rem !important; } .product-info__price .rating-with-text { margin-top:-1rem; } @media screen and (min-width: 1000px) { .product-gallery--desktop-grid .product-gallery__zoom { transition: opacity .2s ease-in-out, transform .2s ease-in-out; } } .product__media-wrapper { padding-left: 2%; } /* -------------------------------------------------------------------------- 5.2 Cartes produit et badges -------------------------------------------------------------------------- */ .badge--on-sale { font-size: 12px; } .badge--collective { font-weight: 400 !important; letter-spacing: 0.5px; text-align: center; line-height: 1.2; padding: 5px 10px!important; border-color: var(--primary-badge-background); background-color: rgba(241,241,241,0.8); color: var(--primary-badge-background); } .non-taxable-badge { display: inline-flex; align-items: center; justify-content: center; background-color: #2b4735; color: #ffffff; /*font-family: Roboto, sans-serif;*/ font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 10px; border-radius: 4px; margin-left: 8px; margin-top: 0; vertical-align: middle; width: fit-content; transform: translateY(-4px); } .product-card-price-with-badge { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .non-taxable-badge--card { font-size: 10px; padding: 3px 7px; border-radius: 3px; margin-left: 0; margin-top: 0; transform: translateY(-1px); } .lpdq-certification-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; background: #f4f0e8; color: #3f3a34; white-space: nowrap; vertical-align: middle; } @media screen and (max-width: 699px) { .lpdq-certification-badge { margin-left: 6px; font-size: 11px; } } /* -------------------------------------------------------------------------- 5.3 Variantes, quantité et paiement -------------------------------------------------------------------------- */ /* Logos de paiement et « Paiements 100% sécurisés » sous les boutons d'achat (snippets/sl-paiements-icones.liquid). Collés aux boutons comme dans OFFICIEL (16 OCTOBRE), où ils faisaient partie du bloc des boutons. */ .product-info__block-item:has(+ .product-info__block-item .sl-paiements-icones) { margin-block-end: 0; } .product-info__block-item:has(.sl-paiements-icones) { margin-block-start: 0; } .sl-paiements-icones__logos { margin-top: 12px; justify-content: center; } .sl-paiements-icones__texte { display: block; font-size: 14px; text-align: center; } /* Boutons « Ajouter au panier » et d'achat de la fiche en 0,95 rem, comme OFFICIEL (16 OCTOBRE) (règle reprise de snippets/sl-recherche-synonymes.liquid du thème en ligne). Sans elle, ils prendraient les 22 px de .button--xl. */ .buy-buttons button { font-size: 0.95rem; } .quantity-selector__input { -webkit-appearance: none; appearance: none; } .variant-picker { margin-top:-1rem; margin-bottom:-1rem; } /* masquer le titre de la variante vp 2026-10-28 */ .variant-picker__option-info { display:none; } .shopify-payment-button__button--branded.shopify-payment-button__button--branded:focus-within { outline: 2px solid Highlight; outline: 5px auto -webkit-focus-ring-color; } .shopify-payment-button__button--branded.shopify-payment-button__button--branded [role="button"] { line-height: inherit !important; padding: var(--shopify-payment-button-padding, var(--spacing-4) var(--spacing-8)) !important; } .shopify-payment-button__more-options[aria-hidden="true"] { display: none; } .shopify-payment-button__more-options { text-underline-position: under !important; text-align: center !important; margin-top: .5em !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; } /* -------------------------------------------------------------------------- 5.4 Barre d'achat rapide (quick add) -------------------------------------------------------------------------- */ .product-quick-add { z-index: 999; padding: 1.25rem; top: 0; bottom: auto; left: 0; right: 0; } @media screen and (max-width: 999px) { .product-quick-add { top: 0 !important; bottom: auto !important; left: 0; right: 0; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; background: #ffffff !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-top: none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* .product-info buy-buttons:not(.product-quick-add__mobile-button) { display: none !important; } 3 nov. 2026, Claude, demande de Dawei : règle désactivée. Elle cachait le bouton « Ajouter au panier » de la fiche produit sur cellulaire ; seule la barre collante du haut le montrait. */ .product-quick-add__mobile { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; } .product-quick-add__details { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .product-quick-add__top-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .product-quick-add__title { min-width: 0; flex: 1 1 auto; font-size: 0.95rem; font-weight: 700; line-height: 1.2; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-quick-add__mobile-price { flex: 0 0 auto; margin-top: 0 !important; display: flex; align-items: baseline; white-space: nowrap; font-weight: 600; font-size: 0.95rem; line-height: 1.2; color: #111111; } .product-quick-add__variant { margin-top: 0; font-size: 0.82rem; line-height: 1.2; color: rgba(17, 17, 17, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-quick-add__mobile-button { min-width: 0; width: auto; } .product-quick-add__mobile-button .button, .product-quick-add__mobile-button button { width: auto; min-width: 160px; } } @media screen and (min-width: 1000px) { .product-quick-add { top: 0; bottom: auto; left: 0; right: 0; width: 100%; max-width: none; box-sizing: border-box; padding: 16px 24px; background: #ffffff; border-top: none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .product-quick-add__mobile { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%; } .product-quick-add__details { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .product-quick-add__top-row { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .product-quick-add__title { min-width: 0; flex: 1 1 auto; font-size: 1rem; font-weight: 700; line-height: 1.2; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-quick-add__mobile-price { flex: 0 0 auto; margin-top: 0 !important; display: flex; align-items: baseline; white-space: nowrap; font-weight: 600; font-size: 1rem; line-height: 1.2; color: #111111; } .product-quick-add__variant { margin-top: 0; font-size: 0.95rem; line-height: 1.2; color: rgba(17, 17, 17, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-quick-add__mobile-button { min-width: 0; width: auto; } .product-quick-add__mobile-button .button, .product-quick-add__mobile-button button { width: auto; min-width: 190px; } } @media screen and (min-width: 1000px) { .product-quick-add { top: 0; bottom: auto; left: 0; right: 0; width: 100%; max-width: none; box-sizing: border-box; padding: 16px 24px; background: #ffffff; border-top: none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .product-quick-add__mobile { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%; max-width: 1400px; margin-inline: auto; } .product-quick-add__title-wrap { display: flex; flex-direction: column; min-width: 0; } .product-quick-add__title { font-size: 1rem; font-weight: 700; line-height: 1.2; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-quick-add__actions { display: flex; align-items: center; gap: 20px; min-width: 0; } .product-quick-add__mobile-price { margin-top: 4px !important; display: flex; align-items: center; white-space: nowrap; font-weight: 600; line-height: 1; color: #111111; } .product-quick-add__variant { margin-top: 0; font-size: 0.95rem; line-height: 1.2; color: rgba(17, 17, 17, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-quick-add__mobile-button { min-width: 0; width: auto; } .product-quick-add__mobile-button .button, .product-quick-add__mobile-button button { width: auto; min-width: 190px; } } /* ATTENTION : bloc ci-dessous conservé EXACTEMENT tel quel, y compris les « } » en trop. Il contient deux accolades fermantes orphelines qui, dans l'original, invalident la règle qui les suit (.product-quick-add__mobile > * et .athena-gift-icon-wrap). Ne pas réorganiser l'intérieur de ce bloc. */ .product-quick-add__title-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .product-quick-add__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .product-quick-add__title, .product-quick-add__mobile-price, .product-quick-add__variant { text-align: center; justify-content: center; width: auto; margin: 0; } .product-quick-add__mobile-button { width: auto; min-width: 180px; } } .product-quick-add__mobile > * { display: flex; align-items: center; gap: 12px; } .product-quick-add__title-wrap, .product-quick-add__actions { display: contents; } .product-quick-add__title, .product-quick-add__mobile-price, .product-quick-add__variant { white-space: nowrap; margin: 0; } .product-quick-add__mobile-button { width: auto; min-width: 150px; } } .athena-gift-icon-wrap { flex: 0 0 24px; width: 24px; display: flex; justify-content: center; align-items: center; line-height: 0; } /* -------------------------------------------------------------------------- 5.5 Réassurance / Athena -------------------------------------------------------------------------- */ .product-reassurance-item { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; } .product-reassurance-icon { width: 20px; height: 20px; display: flex; justify-content: center; } .product-reassurance-icon svg { width: 16px; height: 16px; position: relative; top: 0px; } .product-reassurance-title { font-weight: 700; font-size: 13px; line-height: 1.25; } .product-reassurance-text { font-size: 12px; line-height: 1.35; opacity: 0.85; margin-top: 2px; } .athena-shipping-card { background: #edf7e8; color: #4e6b3a; border: 1px solid #c8ddb7; border-radius: 10px; padding: 14px 16px; } .athena-reassurance-stack { background: #FBFBF8; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 10px; overflow: hidden; } .athena-reassurance-divider { height: 1px; background: rgba(0, 0, 0, 0.10); } .athena-reassurance-card { padding: 16px; } .athena-gift-card { background: #6a3417; color: #ffffff; border: 0; border-radius: 10px; padding: 16px 18px; } .athena-reassurance-cards { display: grid; gap: 12px; margin-top: 14px; } .athena-reassurance-row { display: flex; align-items: flex-start; gap: 12px; } .athena-reassurance-icon-wrap { flex: 0 0 22px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: flex-start; line-height: 0; padding-top: 0; } .athena-reassurance-icon-wrap { flex: 0 0 22px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: flex-start; line-height: 0; padding-top: 0; } .athena-reassurance-icon-wrap svg { display: block; width: 18px; height: 18px; position: relative; top: -2px; } .athena-reassurance-text-wrap { min-width: 0; padding-top: 0; } .athena-reassurance-title-sm { font-weight: 700; font-size: 13px; line-height: 1.25; margin: 0; } .athena-reassurance-text-sm { font-size: 12px; line-height: 1.35; opacity: 0.8; margin-top: 2px; } .athena-pickup-trigger { background: none; border: none; cursor: pointer; padding: 0; text-align: left; } .athena-pickup-trigger__label { color: #2d6a4f; font-weight: 700; text-decoration: underline; } .athena-pickup-list { list-style: none; padding: 0; margin: 0; } .athena-pickup-item { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .athena-pickup-drawer-header { font-weight: 700; font-size: 1.1rem; } .athena-pickup-unavailable { display: flex; flex-direction: row; gap: 10px; } .athena-pickup-item-status { font-size: 0.85rem; opacity: 0.7; } .athena-pickup-item-location { font-weight: 700; } .athena-reassurance-row-center { display: flex; align-items: center; gap: 12px; } .athena-gift-text-wrap { min-width: 0; } .athena-gift-title { font-weight: 700; font-size: 13px; line-height: 1.3; } .athena-inline-link { color: inherit; text-decoration: underline; } /* 3 nov. 2026, Claude, demande de Dawei : bulle brune « Inclut le coffret cadeau tel qu'illustré (valeur de 7 $) » retirée des fiches produit. Son balisage reste dans snippets/sl-product-reassurance-card.liquid ; pour la remettre, effacer cette règle. */ .athena-gift-card { display: none !important; } /* -------------------------------------------------------------------------- 5.6 Galerie (zoom au survol) -------------------------------------------------------------------------- */ /* Hover Zoom Styles */ .product-gallery__hover-zoom-container { position: relative; } /* Allow pinch zoom on mobile - only apply overflow hidden on desktop */ @media screen and (min-width: 1000px) { .product-gallery__hover-zoom-container { overflow: hidden; } } /* Enable pinch zoom and carousel swipe on mobile for images */ @media screen and (max-width: 999px) { .product-gallery__ar-wrapper, .product-gallery__media-list-wrapper, .product-gallery__media-list, media-carousel.product-gallery__media-list, .product-gallery__media, .product-gallery__hover-zoom-container, .product-gallery__hover-zoom-container img { touch-action: pan-x pan-y pinch-zoom; -ms-touch-action: pan-x pan-y pinch-zoom; } media-carousel.product-gallery__media-list { -webkit-overflow-scrolling: touch; } } @media screen and (min-width: 1000px) { .product-gallery__hover-zoom-container--active { cursor: zoom-in; } .product-gallery__hover-zoom-container--active.is-click-zoomed { cursor: zoom-out; } .product-gallery__media-list-wrapper:has(.product-gallery__hover-zoom-container--active) .product-gallery__cursor { display: none !important; visibility: hidden !important; opacity: 0 !important; } .product-gallery__hover-zoom-container--active img { transition: transform 0.1s ease-out; will-change: transform; } .product-gallery__hover-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255, 255, 255, 0.7); border: none; width: 50px; height: 50px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .product-gallery__hover-zoom-container--active:hover .product-gallery__hover-zoom-nav[style*="flex"] { opacity: 1; pointer-events: auto; } .product-gallery__hover-zoom-nav:hover { background: rgba(255, 255, 255, 0.9); } .product-gallery__hover-zoom-nav--prev { left: 16px; } .product-gallery__hover-zoom-nav--next { right: 16px; } .product-gallery__hover-zoom-nav svg { width: 26px; height: 26px; stroke: currentColor; fill: none; } } /* -------------------------------------------------------------------------- 5.7 Disponibilité en magasin (pickup) -------------------------------------------------------------------------- */ /* Pickup availability drawer */ .pickup-availability-list-item { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .pickup-availability-list-content { display: flex; align-items: center; gap: 8px; width: 100%; } .pickup-availability-list-text { display: flex; flex-direction: column; } .pickup-availability-list-location { font-weight: bold; } .pickup-availability-list-status { font-size: 0.85rem; opacity: 0.7; } .pickup-availability-list-qty { margin-left: auto; color: #000000; font-weight: 600; flex-shrink: 0; } /* -------------------------------------------------------------------------- 5.8 Produits similaires -------------------------------------------------------------------------- */ /* Produits similaires */ .similar-products-tags { padding-block: 48px; --product-list-gap: var(--product-list-row-gap) var(--spacing-2); --product-list-items-per-row: var(--similar-products-mobile-columns); --product-list-grid: auto-flow dense / repeat( var(--product-list-items-per-row), minmax(0, 1fr) ); } .similar-products-tags__heading { margin: 0 0 24px; text-align: left; } @media screen and (min-width: 700px) { .similar-products-tags { --product-list-gap: var(--product-list-row-gap) var(--product-list-column-gap); --product-list-items-per-row: 2; } } @media screen and (min-width: 1000px) { .similar-products-tags { --product-list-items-per-row: 3; } } @media screen and (min-width: 1200px) { .similar-products-tags { --product-list-items-per-row: var(--similar-products-desktop-columns); } } @media screen and (max-width: 699px) { .similar-products-tags { padding-block: 32px; } } /* -------------------------------------------------------------------------- 5.9 Produits certifiés -------------------------------------------------------------------------- */ .lpdq-certified-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.12); } .lpdq-certified-title { margin: 0 0 12px; font-size: inherit !important; line-height: inherit !important; font-weight: 700 !important; font-style: italic !important; color: inherit; } .lpdq-certified-title strong, .lpdq-certified-title em { font-size: inherit !important; line-height: inherit !important; font-weight: 700 !important; font-style: italic !important; } .lpdq-certified-logo { display: block; max-width: 86px; width: 86px; height: auto; } /* ========================================================================== 6. PANIER ========================================================================== */ /* -------------------------------------------------------------------------- 6.0 Page panier : case « commande cadeau » (déplacé de sections/main-cart.liquid le 16 oct. 2026) -------------------------------------------------------------------------- */ #gift_order_note_container { transition: height 0.2s; } /* 3 nov. 2026, Claude : règle désactivée, elle visait le libellé de l'ancienne case (voir la nouvelle case juste en dessous). label[for="gift_order_yes"] { font-weight: 600; letter-spacing: 0.5px; font-size: 16px; margin: 10px 0; } */ /* 3 nov. 2026, Claude, demande de Dawei : nouvelle case « commande cadeau » (snippets/sl-cadeau-panier.liquid, design B). Carte blanche à filet gris ; cochée, elle passe au vert sapin et ouvre le message pour le destinataire, avec un compteur sur 250 caractères. Case à cocher dessinée en CSS (au lieu de la case bleue du navigateur). */ .sl-cadeau { margin-block-end: var(--spacing-6); text-align: start; background: #ffffff; border: 1px solid #e6e6e6; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; } .sl-cadeau.is-on { background: rgb(43 71 53 / .03); border-color: #2b4735; box-shadow: 0 0 0 1px #2b4735; } .sl-cadeau .sl-cadeau__tete { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; cursor: pointer; } .sl-cadeau .sl-cadeau__case { appearance: none; -webkit-appearance: none; flex: 0 0 22px; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; background: #ffffff; border: 1.5px solid #8a8a8a; border-radius: 6px; cursor: pointer; } .sl-cadeau .sl-cadeau__case:checked { background: #2b4735; border-color: #2b4735; } .sl-cadeau .sl-cadeau__case:checked::after { content: ""; width: 6px; height: 11px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .sl-cadeau .sl-cadeau__case:focus-visible { outline: 2px solid #2b4735; outline-offset: 2px; } .sl-cadeau__textes { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } html body .sl-cadeau .sl-cadeau__titre { font-size: 16px; /* fin de journée : 15 px et #1a1a1a avant, voir 6.4 */ font-weight: 600 !important; color: rgb(var(--text-primary)); } .sl-cadeau .sl-cadeau__sous { font-size: 14px; /* fin de journée : 13 px et #6b6b6b avant */ line-height: 1.4; color: rgb(var(--text-primary) / .7); } .sl-cadeau__champ { padding: 0 16px 16px; } .sl-cadeau__champ[hidden] { display: none; } html body .sl-cadeau .sl-cadeau__lab { display: block; margin: 2px 0 8px; font-size: 14px; /* fin de journée : 13 px et #1a1a1a avant */ font-weight: 600 !important; color: rgb(var(--text-primary)); } .sl-cadeau .sl-cadeau__txt { width: 100%; min-height: 104px; padding: 12px 14px; font-family: var(--text-font-family); font-size: 16px; /* fin de journée : 15 px avant */ line-height: 1.5; background: #ffffff; border: 1px solid #cfcfcf; border-radius: 8px; outline: none; resize: vertical; } .sl-cadeau .sl-cadeau__txt:focus { border-color: #2b4735; box-shadow: 0 0 0 3px rgb(43 71 53 / .15); } .sl-cadeau__bas { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 12px; line-height: 1.4; color: rgb(var(--text-primary) / .7); /* fin de journée : #6b6b6b avant */ } .sl-cadeau .sl-cadeau__compte { order: 1; margin-inline-start: auto; white-space: nowrap; } .sl-cadeau .sl-cadeau__aide { order: 2; flex-basis: 100%; } .shopify-section--main-cart button[name="checkout"] { font-size: 18px; /* 3 nov. 2026 (fin de journée), Claude : 20 px avant, le texte passait sur deux lignes */ white-space: nowrap; } /* -------------------------------------------------------------------------- 6.0b Page « Créez votre boîte-cadeau personnalisée » (sections/sl-boite-cadeau.liquid) -------------------------------------------------------------------------- */ .sl-boite-cadeau .tab-content > * + * { margin-block-start: var(--spacing-6); } .sl-boite-cadeau .sl-boite-cadeau__produits .product-list { --product-list-items-per-row: 2; --product-list-grid: auto / repeat(var(--product-list-items-per-row), minmax(0, 1fr)); text-align: start; } @media screen and (min-width: 1000px) { .sl-boite-cadeau .sl-boite-cadeau__produits .product-list { --product-list-items-per-row: 4; } } .sl-message-cadeau { text-align: start; } .sl-message-cadeau textarea { width: 100%; height: 100px; padding: 10px; } .sl-message-cadeau__etat { margin-block: 8px; color: rgb(var(--success-text, 0 128 0)); } /* -------------------------------------------------------------------------- 6.0c Tiroir du panier : 2 colonnes sur grand écran, emballages et produits recommandés (repris du thème en ligne le 16 oct. 2026 : assets/theme.css et assets/sl-cart-drawer.css ; balisage dans sections/cart-drawer.liquid et snippets/sl-tiroir-recommandations.liquid) -------------------------------------------------------------------------- */ /* Bouton Ajouter : recommandations dans le panier */ #cart-drawer cart-recommendations .horizontal-product__cta .button { --button-background: var(--button-background-primary) / 1 !important; --button-text-color: var(--button-text-primary) !important; --button-outline-color: var(--button-background-primary) !important; border-radius: var(--rounded-button); font-weight: 600; padding: 10px 18px; } /* Léger effet au survol */ @media screen and (pointer: fine) { #cart-drawer cart-recommendations .horizontal-product__cta .button:hover { --button-background-opacity: 0.88; } } /* ========================================================= PANIER : RECOMMANDATIONS DANS UN PANNEAU LATÉRAL ========================================================= */ /* SL : recommandations du panier sur toute la hauteur du drawer */ @media screen and (min-width: 1100px) { #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) )::part(body) { overflow: visible !important; } #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) ) .sl-cart-drawer__layout { position: relative; } #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) ) .sl-cart-drawer__aside { /* Le drawer a une largeur maximale de 1100px, dont 680px pour le panier. Aligner la colonne sur son bord droit, jamais sur le bord de la fenêtre. Position: fixed évite le clipping par le body du tiroir, plus court lorsque le footer du panier occupe une partie de sa hauteur. */ position: fixed; inset-block-start: 0; inset-block-end: 0; inset-inline-start: auto; inset-inline-end: 680px; width: calc(min(1100px, 100vw - 16px) - 680px); height: 100dvh; max-height: 100dvh; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; z-index: 2; } } /* Emballages en grille de 3 et liste de recommandations compacte (sl-cart-drawer.css du thème en ligne) */ @media screen and (min-width: 1100px) { /* Gift boxes: image on top, title/price below, add button last. */ #cart-drawer button[aria-controls="cart-drawer-recommendations"] { display: none !important; } #cart-drawer-recommendations { overflow: visible !important; } #cart-drawer-recommendations .horizontal-product-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 0.75rem !important; width: 100% !important; border: 0 !important; } #cart-drawer-recommendations .horizontal-product { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.65rem !important; min-width: 0; height: 100%; padding: 0.85rem !important; border: none !important; border-radius: var(--rounded-xs); background: #ffffff !important; } #cart-drawer-recommendations .horizontal-product__image { width: 170px !important; height: 170px !important; max-width: 100% !important; margin-inline: auto !important; object-fit: contain !important; } #cart-drawer-recommendations .horizontal-product__info { display: flex !important; flex: 1 1 auto; flex-direction: column !important; align-items: stretch !important; gap: 0.35rem !important; min-width: 0; } #cart-drawer-recommendations .horizontal-product__info > .v-stack { flex: 1 1 auto; gap: 0.2rem !important; } #cart-drawer-recommendations .horizontal-product__info a, #cart-drawer-recommendations .horizontal-product__info .text-sm { text-align: left; } #cart-drawer-recommendations .horizontal-product__cta { width: 100% !important; margin: 0 !important; margin-top: auto !important; } #cart-drawer-recommendations .horizontal-product__cta form, #cart-drawer-recommendations .horizontal-product__cta .button { width: 100% !important; } #cart-drawer-recommendations .horizontal-product__cta .button { min-height: 38px; padding-inline: 0.75rem; } /* SL — recommandations : occuper toute la hauteur puis défiler si nécessaire. Ne pas fixer six rangées : elles tronquaient la liste en laissant du vide. */ #cart-drawer .sl-cart-drawer__aside { padding: 1.25rem !important; overflow-x: hidden !important; overflow-y: auto !important; } #cart-drawer .sl-cart-drawer__aside cart-recommendations { display: block; min-height: 100%; height: auto; } #cart-drawer .sl-cart-drawer__aside cart-recommendations > .v-stack { display: flex !important; flex-direction: column; height: auto; min-height: 100%; gap: 0.75rem !important; } /* Conteneur vertical réel (sans élément scroll-carousel) sur ordinateur. */ #cart-drawer .sl-cart-drawer__aside .sl-cart-recommendations-vertical { display: block; width: 100%; height: auto; min-height: 0; overflow: visible; } #cart-drawer .sl-cart-drawer__aside .horizontal-product-list { overflow: visible !important; max-height: none !important; } #cart-drawer .sl-cart-drawer__aside .horizontal-product-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: minmax(105px, auto) !important; grid-auto-flow: row !important; gap: 0 !important; width: 100% !important; height: auto !important; } #cart-drawer .sl-cart-drawer__aside .horizontal-product { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) auto !important; align-items: center !important; gap: 0.8rem !important; min-width: 0; min-height: 105px; height: auto !important; padding: 0.45rem 0.25rem !important; background: #ffffff !important; border: 0 !important; border-block-end: none !important; } #cart-drawer .sl-cart-drawer__aside .horizontal-product__image { width: 68px !important; height: 68px !important; max-width: 68px !important; margin: 0 auto; object-fit: contain; } #cart-drawer .sl-cart-drawer__aside .horizontal-product__info { display: contents !important; } #cart-drawer .sl-cart-drawer__aside .horizontal-product__info > .v-stack { min-width: 0; gap: 0.15rem !important; } #cart-drawer .sl-cart-drawer__aside .horizontal-product__cta { width: auto; margin: 0 !important; align-self: center; } #cart-drawer .sl-cart-drawer__aside .horizontal-product__cta form, #cart-drawer .sl-cart-drawer__aside .horizontal-product__cta .button { width: auto; } #cart-drawer .sl-cart-drawer__aside .horizontal-product__cta .button { min-height: 38px; padding-inline: 1rem; white-space: nowrap; } #cart-drawer .sl-cart-drawer__aside [data-recommendation-controls] { display: none !important; } } /* SL : Retirer le cadre des recommandations du panier */ #cart-drawer .cart-drawer__recommendations #cart-drawer-dynamic-recommendations { border: none !important; outline: none !important; box-shadow: none !important; } #cart-drawer .cart-drawer__recommendations #cart-drawer-dynamic-recommendations .horizontal-product-list { border: none !important; outline: none !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- 6.1 Barre de livraison gratuite -------------------------------------------------------------------------- */ /* SHIPPING BAR BLACK FRIDAY */ .free-shipping-bar { position: relative; padding: 1rem 0; } .progress-bar-container { position: relative; margin-top: 0.5rem; } /* Dans le thème en ligne, cette règle était au début de theme.css : la règle .progress-bar d'Impact, plus loin, remettait la hauteur (4 px), l'arrondi et la couleur de fond. On garde donc seulement le reste, pour le même rendu. */ .progress-bar { width: 100%; overflow: hidden; position: relative; display:block; } /*.progress-bar::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--progress) * 100%); background: linear-gradient(90deg, #ff6b6b,rgb(0, 0, 0)); transition: width 0.3s ease; }*/ .progress-bar__milestones { position: relative; height: 20px; margin-top: 8px; } .progress-bar__milestone { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; min-width:50%; } .progress-bar__milestone:last-child { transform: translate(0) !important; text-align: right; right: 0; left: auto !important; align-items: flex-end; } .progress-bar__milestone::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #ddd; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: absolute; top: -18px; } .progress-bar__milestone--reached::before { background:rgb(0, 0, 0); } .progress-bar__milestone-label { font-size: 0.8rem; /*white-space: nowrap;*/ color: #666; margin-top: 4px; max-width: 55%; } .progress-bar__milestone--reached .progress-bar__milestone-label { color:rgb(0, 0, 0); } .free-shipping-bar__message { text-align: center; font-size: 0.875rem; margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- 6.2 Tiroir panier et recommandations -------------------------------------------------------------------------- */ /* Bouton Ajouter — recommandations dans le panier */ #cart-drawer cart-recommendations .horizontal-product__cta .button { --button-background: var(--button-background-primary) / 1 !important; --button-text-color: var(--button-text-primary) !important; --button-outline-color: var(--button-background-primary) !important; border-radius: var(--rounded-button); font-weight: 600; padding: 10px 18px; } /* Léger effet au survol */ @media screen and (pointer: fine) { #cart-drawer cart-recommendations .horizontal-product__cta .button:hover { --button-background-opacity: 0.88; } } /* ========================================================= PANIER — RECOMMANDATIONS DANS UN PANNEAU LATÉRAL ========================================================= */ /* Ne pas conserver un espace vide s'il n'y a aucune recommandation */ .sl-cart-drawer__aside:not(:has(cart-recommendations:not([hidden]))) { display: none; } /* Sur mobile/tablette, on conserve l'affichage normal sous le panier */ .sl-cart-drawer__aside { margin-block-start: var(--spacing-6); } @media screen and (min-width: 1100px) { /* Élargir le tiroir uniquement lorsque les recommandations existent */ #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) ) { width: min(1100px, calc(100vw - 16px)) !important; max-width: none !important; } /* * Le padding est maintenant géré séparément * par la colonne recommandations et la colonne panier. */ #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) )::part(body) { padding: 0 !important; overflow: hidden !important; align-items: stretch !important; min-height: 0; /* 3 nov. 2026, Claude, demande de Dawei : la rangée prend la hauteur du tiroir, pour que la colonne du panier (.sl-cart-drawer__main, overflow-y: auto) défile. Avant, son contenu dépassait sous le total et restait caché par overflow: hidden : sur un portable, les boutons « + Ajouter » des emballages étaient inatteignables. */ grid-template-rows: minmax(0, 1fr); } /* * Le footer reste sous la partie panier, * et non sous les recommandations. */ #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) )::part(footer) { width: 680px; max-width: 64%; margin-inline-start: auto; box-sizing: border-box; border-block-start: 0 !important; } #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) ) .sl-cart-drawer__layout { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 680px); } /* PANIER PRINCIPAL — colonne de droite */ #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) ) .sl-cart-drawer__main { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; padding: 2rem 2.5rem; overflow-y: auto; } /* RECOMMANDATIONS — colonne de gauche */ #cart-drawer:has( .sl-cart-drawer__aside cart-recommendations:not([hidden]) ) .sl-cart-drawer__aside { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; margin: 0; padding: 2rem 1.5rem; overflow-y: auto; border-inline-end: 0; background: rgb(var(--dialog-background)); } /* * Dans le panneau latéral, les recommandations * deviennent une liste verticale. */ #cart-drawer .sl-cart-drawer__aside .horizontal-product-list { grid-template-columns: 1fr !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; width: 100%; } #cart-drawer .sl-cart-drawer__aside .horizontal-product { width: 100%; padding: 1rem 0; } #cart-drawer .sl-cart-drawer__aside .horizontal-product + .horizontal-product { border-block-start: 1px solid rgb(var(--border-color)); } /* * Le "bleed" du carrousel n'est pas souhaitable * dans le panneau latéral. */ #cart-drawer .sl-cart-drawer__aside .bleed { margin-inline: 0 !important; padding-inline: 0 !important; scroll-padding-inline: 0 !important; } /* * Comme les quatre produits sont visibles verticalement, * les flèches ne sont plus nécessaires sur ordinateur. */ #cart-drawer .sl-cart-drawer__aside [data-recommendation-controls] { display: none !important; } } /* -------------------------------------------------------------------------- 6.3 Page panier : « Saviez-vous que... » (snippets/sl-panier-statistique.liquid) 3 nov. 2026, Claude, demande de Dawei : la statistique du MAPAQ en deux chiffres, dans une carte blanche à filet gris (design B choisi par Dawei). Les montants sont en Jost, comme les autres prix du site. -------------------------------------------------------------------------- */ .sl-sv { max-width: 920px; margin-inline: auto; padding: 56px 48px; text-align: center; background: #ffffff; border: 1px solid #e6e6e6; border-radius: 16px; } .sl-sv p { margin: 0; } .sl-sv .sl-sv__sur { margin-bottom: 20px; font-family: var(--text-font-family) !important; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--text-primary) / .7); /* fin de journée : #6b6b6b avant, voir 6.4 */ } .sl-sv__duo { display: flex; align-items: center; justify-content: center; gap: 40px; } .sl-sv .sl-sv__chiffre { display: flex; flex-direction: column; align-items: center; max-width: 380px; } .sl-sv .sl-sv__nb { font-family: var(--text-font-family) !important; font-size: 60px; line-height: 1; white-space: nowrap; color: #2b4735; } .sl-sv .sl-sv__leg { margin-top: 12px; font-family: var(--text-font-family) !important; font-size: 14px; /* fin de journée : 15 px et #3a3a3a avant */ line-height: 1.45; color: rgb(var(--text-primary) / .7); } .sl-sv__fleche { flex: 0 0 48px; width: 48px; color: #2b4735; } .sl-sv .sl-sv__src { margin-top: 22px; font-family: var(--text-font-family) !important; font-size: 12px; color: rgb(var(--text-primary) / .7); /* fin de journée : #6b6b6b avant */ } @media screen and (max-width: 699px) { .sl-sv { padding: 36px 22px; border-radius: 12px; } .sl-sv__duo { flex-direction: column; gap: 18px; } .sl-sv__fleche { transform: rotate(90deg); } .sl-sv .sl-sv__nb { font-size: 46px; } } /* -------------------------------------------------------------------------- 6.4 Page panier : typographie uniformisée 3 nov. 2026 (fin de journée), Claude, demande de Dawei : la page /cart avait 10 tailles de texte, 7 couleurs et 3 graisses. Système retenu : PP Eiko seulement pour le titre de la page et les titres de section ; tout le reste en Jost, en 3 tailles (16 px texte, 14 px texte secondaire, 12 px mentions), 2 couleurs (texte, et texte atténué à 70 %) et 2 graisses (400, et 600 pour ce qui doit ressortir). Voir aussi 1.2 (ligne du total), 6.0 (case cadeau, bouton) et 6.3 (statistique). -------------------------------------------------------------------------- */ /* En-têtes du tableau (Produit, Quantité, Total) : 16 px en 700 avant */ .shopify-section--main-cart .order-summary__header th { font-size: 14px; font-weight: 600; } /* Jalons de la barre de livraison (page panier et tiroir) : 12,8 px, noir pur ou gris #666 avant */ .progress-bar__milestone-label { font-size: 12px; color: rgb(var(--text-primary) / .7); } .progress-bar__milestone--reached .progress-bar__milestone-label { color: rgb(var(--text-primary)); } /* Ligne du total (page panier et tiroir) : 22 px avant ; 18 px sur cellulaire, comme avant */ .cart-form .h-stack.justify-between > .h5, #cart-drawer [slot="footer"] .h-stack.justify-between > .h5 { font-size: 20px; } /* Compteur de la note de commande : gris #666 avant (assets/sl-cart-note-counter.css, chargé après ce fichier, d'où le sélecteur plus précis). L'avertissement en rouge ne change pas. */ .form-control .sl-cart-note-counter:not(.sl-cart-note-counter--warning) { color: rgb(var(--text-primary) / .7); } @media screen and (max-width: 699px) { .cart-form .h-stack.justify-between > .h5, #cart-drawer [slot="footer"] .h-stack.justify-between > .h5 { font-size: 18px; } /* « Supprimer », « Nous acceptons », « Retours faciles » : 11 px avant sur cellulaire */ .shopify-section--main-cart .text-xs { font-size: 12px; } /* « Ajoutez un emballage cadeau » : 30 px avant, plus gros que le titre « Panier » (28 px) sur cellulaire */ #featured_collection_gift .section-header .h2 { font-size: 24px; } /* Jalons de la barre de livraison : sur cellulaire, « Soutenez un organisme d'ici (100,00 $) » tient sur trois lignes et chevauchait le premier produit du panier. On laisse la place sous la barre. */ .shopify-section--main-cart free-shipping-bar { padding-bottom: 36px; } /* Case cadeau sur cellulaire : mêmes tailles que les produits du panier (14 px texte, 12 px secondaire) */ html body .sl-cadeau .sl-cadeau__titre { font-size: 14px; } .sl-cadeau .sl-cadeau__sous, html body .sl-cadeau .sl-cadeau__lab { font-size: 12px; } } /* ========================================================================== 7. AVIS JUDGE.ME ========================================================================== */ /* --- Étoiles (police) --- */ .jdgm-star { font-family: 'JudgemeStar'!important; } /* Judge.me - correction des étoiles corrompues sur Chrome/Edge */ .jdgm-star, .jdgm-star:before, .jdgm-star::before, .jm-star-rating__font-icon { font-family: 'JudgemeStar' !important; } /* --- En-têtes alignés à gauche --- */ .jdgm-header { text-align: left !important; justify-content: flex-start !important; } .jdgm-title { text-align: left !important; } .jdgm-header-info { justify-content: flex-start !important; text-align: left !important; } .jdgm-average-rating { justify-content: flex-start !important; } /* --- Titre des avis de la page d'accueil --- */ /* Judge.me — titre de la page d’accueil */ [id*="1782851204451af3fc"] .jdgm-header { text-align: left !important; justify-content: flex-start !important; } [id*="1782851204451af3fc"] h2 { margin: 0 !important; font-size: 28px !important; line-height: 1.2 !important; text-align: left !important; transform: none !important; } /* --- Page produit : étoiles --- */ /* Correctif fiable pour les étoiles Judge.me */ #judgeme_product_reviews .jdgm-star { font-family: Arial, Helvetica, sans-serif !important; font-size: 0 !important; } #judgeme_product_reviews .jdgm-star::before { font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; line-height: 1 !important; } /* Étoile pleine */ #judgeme_product_reviews .jdgm-star.jdgm--on::before { content: "★" !important; } /* Étoile vide */ #judgeme_product_reviews .jdgm-star.jdgm--off::before { content: "☆" !important; } /* Demi-étoile */ #judgeme_product_reviews .jdgm-star.jdgm--half::before { content: "★" !important; color: transparent !important; background: linear-gradient( 90deg, var(--jdgm-star-color, #f5a623) 50%, #d9d9d9 50% ); -webkit-background-clip: text; background-clip: text; } /* --- Carrousel de cartes (accueil) --- */ /* ========================= Judge.me - Cards Carousel Style plus proche du modèle ========================= */ .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card { background: #ffffff !important; border: 1px solid #eee7db !important; border-radius: 4px !important; box-shadow: none !important; padding: 28px 28px 24px !important; min-height: 340px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-text { width: 100%; margin-bottom: 20px !important; flex: 1 1 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-text p { margin: 0 !important; text-align: left !important; font-size: 17px !important; line-height: 1.55 !important; color: #111111 !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-rating-section { width: 100%; margin-top: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-stars { margin: 0 !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-star { color: #b79a67 !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-reviewer-info { margin: 0 !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-reviewer-name { font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #111111 !important; } /* Ajustement de la hauteur et de la typographie des cartes Judge.me */ .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card { box-sizing: border-box !important; height: 380px !important; min-height: 380px !important; max-height: 380px !important; padding: 26px 28px 22px !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-text { margin-bottom: 16px !important; -webkit-line-clamp: 7 !important; } .jdgm-card.jdgm-media-card.jdgm-carousel-item.jdgm-text-card .jdgm-text p { font-size: 16px !important; line-height: 1.45 !important; } /* Fond et espacement de toute la section Judge.me */ .jdgm-widget.jdgm-cards-carousel { background-color: #eee3d1 !important; padding-top: 70px !important; padding-bottom: 80px !important; } /* Titre */ .jdgm-widget.jdgm-cards-carousel .jdgm-title { margin: 0 !important; text-align: left !important; color: #193127 !important; } /* Aligner l’en-tête avec le contenu du carrousel */ .jdgm-widget.jdgm-cards-carousel .jdgm-header { box-sizing: border-box !important; width: 100% !important; max-width: 1600px !important; margin: 0 auto 42px !important; padding-left: 160px !important; padding-right: 160px !important; } .jdgm-widget.jdgm-cards-carousel .jdgm-title { position: static !important; left: auto !important; right: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Petit libellé au-dessus du titre Judge.me */ .jdgm-widget.jdgm-cards-carousel .jdgm-header::before { content: "— AVIS"; display: block; margin-bottom: 14px; color: #b79a67; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; } /* Titre principal du carrousel */ .jdgm-widget.jdgm-cards-carousel .jdgm-title { font-size: 42px !important; line-height: 1.1 !important; } @media screen and (max-width: 699px) { .jdgm-widget.jdgm-cards-carousel .jdgm-title { font-size: 28px !important; } } /* Carrousel Judge.me sur toute la largeur de l’écran */ .jdgm-widget.jdgm-cards-carousel { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* ========================================================================== 8. BLOG ========================================================================== */ .blog-filter-list { --filter-list-item-padding: var(--spacing-2-5) var(--spacing-5); white-space: nowrap; } .blog-filter-list [aria-selected="true"] { background-color: rgb(var(--background-primary)); color: rgb(var(--text-primary)); } .blog-filter-list [aria-selected="false"] { opacity: .5; transition: opacity .2s ease-in-out; } @media screen and (pointer: fine) { .blog-filter-list [aria-selected="false"]:hover { opacity: 1; } } .blog-filter-list a { padding: var(--filter-list-item-padding); display: block; } /* 3 nov. 2026, Claude (trouvé pendant le tour du site demandé par Dawei) : sur cellulaire, le fil d'Ariane des articles (dernier élément = titre complet de l'article, sans retour à la ligne) élargissait la colonne de l'article jusqu'à 500 à 690 px sur un écran de 390 px. Comme html et body cachent ce qui dépasse, la fin des lignes du texte était coupée. Le titre dans le fil d'Ariane est maintenant tronqué avec « ... » et la colonne garde la largeur de l'écran. */ .article .breadcrumb { min-width: 0; max-width: 100%; } .article .breadcrumb__item[aria-current] { min-width: 0; } .article .breadcrumb__current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== 9. FOOTER ========================================================================== */ /* * FOOTER */ .app-badge { width: 135px; display: block; margin: 0; padding: 0; position: relative; height: 50px; } .app-badge svg { position: absolute; width: 100%; height: 100%; object-fit: contain; } .sl-app-badge img.sl-app-badge-image, .sl-app-badge img.sl-google-play-badge-image { position: absolute; width: 100%; height: 100%; object-fit: contain; } .sl-app-badge img.sl-google-play-badge-image { transform: scale(1.28); transform-origin: center; } /* ========================================================================== 10. SYSTÈME TYPOGRAPHIQUE DU SITE 3 nov. 2026 (soir), Claude, demande de Dawei : moins de polices, de tailles, de couleurs et de graisses sur tout le site (« plein de fontes différentes, ça fait un bazar pour les yeux »). Mesuré avant sur 15 pages à 1440 px : 4 polices (Jost, PP Eiko, Helvetica Neue sur la page corpo, Arial), 16 tailles en Jost, 15 en PP Eiko, 23 couleurs de texte et 4 graisses (400, 500, 600, 700). Règle : - PP Eiko seulement pour les titres, à 6 tailles (variables --text-h0 à --text-h6 ci-dessous). - Tout le reste en Jost, à 12, 14, 16 ou 18 px (22 px pour le prix d'une fiche produit et le total du panier). - Texte en rgb(var(--text-primary)), ou atténué à 70 % ; vert sapin #2b4735 pour les accents. - Graisses 400 et 600 seulement. Cette section est la dernière du fichier exprès : elle remplace les tailles données plus haut (1.2, 2.4, 2.6, 5.1, 5.2, 5.4, 5.5, 6.4) et dans les pages qui ont leur propre CSS (cadeaux corporatifs, magasins, contact). Pour revenir en arrière, effacer cette section au complet. ========================================================================== */ /* 10.1 Échelle des titres : variables d'Impact (cellulaire, 700 px et plus, 1400 px et plus). Avant : h0 44 / 56 / 72, h1 32 / 40 / 56, h2 28 / 32 / 44, h3 22 / 26 / 32, h6 16 / 16 / 20. Après : h0 36 / 48 / 56, h1 30 / 36 / 44, h2 24 / 30 / 36, h3 22 / 26 / 28, h4 et h5 inchangés, h6 16 / 16 / 18. --text-xs passe de 11 à 12 px sur cellulaire. */ html:root { --text-h0: 2.25rem; --text-h1: 1.875rem; --text-h2: 1.5rem; --text-h3: 1.375rem; --text-xs: .75rem; } @media screen and (min-width: 700px) { html:root { --text-h0: 3rem; --text-h1: 2.25rem; --text-h2: 1.875rem; --text-h3: 1.625rem; } } @media screen and (min-width: 1400px) { html:root { --text-h0: 3.5rem; --text-h1: 2.75rem; --text-h2: 2.25rem; --text-h3: 1.75rem; --text-h6: 1.125rem; } } /* 10.2 Titres qui avaient leur propre taille */ /* Titres de section : 30 px sur l'accueil (2.4) mais 44 px sur la fiche produit; maintenant --text-h2 partout. */ html body .shopify-section .section-header .h2, html body .shopify-section .mm-heading, html body #shopify-section-ef04bdae-d146-4b3f-98a1-8e17ecc1a415 .h2 { font-size: var(--text-h2) !important; line-height: 1.2 !important; } /* Nom du produit : 28 px avant (5.1), plus petit que les titres de section. */ html body .product-info__title { font-size: var(--text-h2) !important; } /* Titres de la bannière vidéo de l'accueil : 32 px / 20 px avant. Lignes équilibrées : sur cellulaire, le titre passe sur deux lignes et « locaux. » restait seul sur la deuxième. */ html body [class*="video-banner-heading-"], html body [class*="video-banner-heading-"] * { font-size: var(--text-h3) !important; text-wrap: balance; } /* « La différence locale signée » : 24 px avant. */ html body .signe-local-difference__title { font-size: var(--text-h5) !important; } /* Tuiles photo du méga menu (Salé, Sucré, Breuvages...) : Jost 28 px avant, PP Eiko comme les tuiles de l'accueil. */ html body .shopify-section--header .text-custom > p.bold { font-family: var(--heading-font-family) !important; font-size: var(--text-h4) !important; font-weight: 400 !important; } /* Note des avis de l'accueil (4,8) : 42 px / 26 px avant. */ html body .sl-avis .sl-avis__chiffre { font-size: var(--text-h1); } /* Titre « L'envers du décor » (app Instagram) : 30 px en noir pur avant. */ html body .gfa-content__text h3 { font-size: var(--text-h2) !important; color: rgb(var(--text-primary)) !important; } /* Titre « Avis Clients » de Judge.me sur la fiche : Jost 20 px en noir pur avant. */ html body .jm-review-widget-minimal-header__title { font-family: var(--heading-font-family) !important; font-size: var(--text-h5) !important; color: rgb(var(--text-primary)) !important; } /* Pages Magasins et Contact (CSS dans la page) : 54 et 56 px pour le titre, 26 et 18 px pour les sous-titres avant. */ html body :is(.ns-hero__title, .cn-hero__title) { font-size: var(--text-h0) !important; } html body .ns-store__body h2 { font-size: var(--text-h3) !important; } html body .cn-card h3 { font-size: var(--text-h5) !important; } /* Page cadeaux corporatifs (CSS dans la page) : mêmes titres, à l'échelle du site. */ html body .sl-page :is(.sl-h1, .sl-h2) { font-size: var(--text-h2) !important; } html body .sl-page h3 { font-size: var(--text-h5) !important; } /* 10.3 Une seule police pour le texte : Jost Page cadeaux corporatifs (et autres pages .sl-page) : le texte était en Helvetica Neue. */ html body .sl-page :is(p, span, a, li, div, button, label, input, select, textarea, summary, figcaption, small, td, th, b, strong, em, blockquote) { font-family: var(--text-font-family) !important; } html body .sl-page :is(h1, h2, h3, h4, .sl-h1, .sl-h2) { font-family: var(--heading-font-family) !important; } /* Citations des avis de l'accueil : PP Eiko 13,5 px avant, c'est du texte. */ html body .sl-avis .sl-avis__q { font-family: var(--text-font-family) !important; font-size: 14px; color: rgb(var(--text-primary)); } /* 10.4 Tailles du texte : 12, 14, 16, 18 px */ /* 9,5 à 11 px avant : étoiles, noms et lieux des avis de l'accueil, source, pastilles des cartes produit. */ html body .sl-avis :is(.sl-avis__et, .sl-avis__etoiles) { font-size: 12px; color: rgb(var(--text-primary)); } html body .sl-avis .sl-avis__qui, html body .sl-avis .sl-avis__src { font-size: 12px; } html body .sl-avis .sl-avis__qui b { font-weight: 600 !important; letter-spacing: .08em; } html body .sl-avis :is(.sl-avis__qui span, .sl-avis__src, .sl-avis__src span, .sl-avis__sur) { color: rgb(var(--text-primary) / .7); } html body .sl-avis .sl-avis__titre { font-size: 12px; letter-spacing: .16em; font-weight: 400 !important; color: rgb(var(--text-primary) / .7); } html body .non-taxable-badge--card, html body .badge--collective { font-size: 12px; letter-spacing: 0; } /* 13 px en 700 avant : titres des cartes de réassurance de la fiche produit. */ html body :is(.athena-reassurance-title-sm, .product-reassurance-title) { font-size: 14px; font-weight: 600 !important; } /* 15 px avant : liens de premier niveau du méga menu, sur ordinateur. */ @media screen and (min-width: 1000px) { html body .mega-menu__nav > li > a.h5, html body .mega-menu__nav > li > a.h5 span { font-size: 14px !important; } } /* 13 et 15,2 px avant : barre d'achat collante de la fiche (5.4). */ html body :is(.product-quick-add__title, .product-quick-add__subtotal, .product-quick-add__mobile-price, .product-quick-add__variant) { font-size: 14px !important; } html body .product-quick-add__title { font-weight: 600 !important; } html body :is(.product-quick-add__title, .product-quick-add__subtotal, .product-quick-add__mobile-price) { color: rgb(var(--text-primary)); } html body .product-quick-add__variant { color: rgb(var(--text-primary) / .7); } /* Prix en solde des cartes : 18 px avant, plus gros que les autres prix. */ html body .product-card sale-price.text-on-sale { font-size: var(--text-base); } /* Pages Magasins et Contact : 13, 15 et 17 px avant. */ html body :is(.ns-hero__kicker, .cn-hero__kicker) { font-size: 18px !important; } html body :is(.ns-cta p, .ns-cta a, .ns-store__address, .ns-store__address em, .ns-btn, .cn-card__link) { font-size: 16px !important; } html body .ns-store__city { font-size: 12px !important; letter-spacing: .16em !important; } /* Page cadeaux corporatifs : 13 px avant (surtitre, légendes, formulaire), citations à 22 px. */ html body .sl-page :is(.sl-eyebrow, .slq-who, .slq-who b, .cf-label, .cf-label .opt, .cf-section-label, .cf-reassure, .cf-tel-prefix, .slx-s, .slx-s a, figcaption .n) { font-size: 14px !important; } html body .sl-page .slq-txt { font-size: 18px !important; } /* 10.5 Boutons : 16 px, et 18 px pour les grands boutons (button--xl), sans majuscules forcées */ /* Avant : 13 px en majuscules (« Voir plus de produits », boutons de la page corpo), 15,2 px (« Ajouter au panier »), 22 px (« Voir les idées cadeaux »). */ html body .button--xl, html body .button--xl * { font-size: 18px !important; } /* « Voir notre Instagram » (.gfa-content__button) : 18 px comme button--xl depuis le 4 nov. 2026, voir la fin de la section 10. */ html body :is(.collection-load-more__button, .sl-page .sl-cta, .sl-page .cf-submit) { font-size: 16px !important; text-transform: none !important; letter-spacing: 0 !important; } /* 10.6 Montants vedettes : 22 px (total du panier et du tiroir), 18 px sur cellulaire */ html body .cart-form .h-stack.justify-between > .h5, html body #cart-drawer [slot="footer"] .h-stack.justify-between > .h5 { font-size: 22px; } @media screen and (max-width: 699px) { html body .cart-form .h-stack.justify-between > .h5, html body #cart-drawer [slot="footer"] .h-stack.justify-between > .h5 { font-size: 18px; } } /* Chiffres du bloc « Saviez-vous que... » : 60 px / 46 px avant, à la taille --text-h0. */ html body .sl-sv .sl-sv__nb { font-size: var(--text-h0); } /* 10.7 Couleurs et graisses : noir du thème ou atténué, vert sapin, 400 ou 600 */ /* Vert #4e6b3a et #2d6a4f avant (livraison accélérée, ramassage) : vert sapin. */ html body .product-reassurance-card--shipping :is(.product-reassurance-title, .product-reassurance-text, .product-reassurance-text span), html body .athena-pickup-trigger__label { color: #2b4735; } /* Gris #616161 (Instagram), #7b7b7b (Judge.me), #444, #555, #666, #888 et #9a9288 (page corpo) avant. */ html body :is(.gfa-content__text span, .jm-location), html body .sl-page :is(.sl-eyebrow, .slx-s, figcaption, figcaption p, figcaption .n, details > div) { color: rgb(var(--text-primary) / .7) !important; } html body .jm-text:not(.jm-location) { color: rgb(var(--text-primary)); } /* 500 avant : pastilles « Non taxable » (1.2), menu du haut, tableau des heures des magasins. */ html body .non-taxable-badge { font-weight: 600 !important; } html body .shopify-section--header :is(summary.text-with-icon, a.bold) { font-weight: 400 !important; } html body .ns-store td { font-weight: 600 !important; } /* 10.8 Derniers écarts, mesurés après le premier passage (règles plus précises que celles qui gagnaient) */ /* Titres de section de l'accueil : 30 px (24 px sur cellulaire) avant, fixés par un style dans la page (main#main h2.h2.h2.h2). */ html body main#main :is(h2, h3).h2.h2.h2.h2, html body main#main h2.sl-rv__title.sl-rv__title.sl-rv__title { font-size: var(--text-h2) !important; } /* Titre dans la description des collections (« Vitrine du fait au Québec ») : 32 px avant. */ html body .shopify-section--main-collection p.h2 { font-size: var(--text-h2) !important; } /* Page cadeaux corporatifs : titre du haut à 28 px sur cellulaire avant (règle .slx-hero plus précise que 10.2), bouton de la barre collante à 13 px, étapes du formulaire à 13 px. */ html body .sl-page .slx-hero .sl-h1 { font-size: var(--text-h2) !important; } html body .sl-page .slx-stick a { font-size: 16px !important; } html body .sl-page :is(.cf-count, .cf-hint) { font-size: 14px !important; } /* Pastille « +5 » des variantes de couleur sur les cartes produit : 10 px avant. */ html body .color-swatch__view-more { font-size: 12px; } /* Judge.me sur la fiche : note moyenne (5.0) à 20 px, textes en #000, #333 et #7b7b7b avant. */ html body .jm-average-rating-display p.jm-text { font-size: 18px !important; } /* Chaque avis (.jm-review-item) redonne ses propres couleurs dans son attribut style : elles sont remplacées aussi. */ html body :is(.jm-review-widget, .jm-review-widget [style*="--jm-review-widget-"]) { --jm-review-widget-text-color: rgb(var(--text-primary)) !important; --jm-review-widget-form-text-color: rgb(var(--text-primary)) !important; --jm-review-widget-lighter-text-color: rgb(var(--text-primary) / .7) !important; } /* Menu principal : 500 avant (3.4, « aussi gras que le menu du haut »). Le menu du haut est à 400 depuis 10.7, les deux restent pareils. Jost 500 n'est plus utilisé nulle part. */ html body store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > a, html body store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > details > summary, html body store-header.header .header__main-nav nav.header__link-list.wrap > ul.contents > li > button { font-weight: 400 !important; } /* 700 avant : pastille « Économisez » des cartes, « Certifié Fabriqué au Québec » des produits Collective. */ html body .badge { font-weight: 600; } html body .lpdq-certified-title :is(strong, em) { font-weight: 600 !important; } /* Avis de l'accueil : #111 avant. */ html body .sl-avis { color: rgb(var(--text-primary)); } /* Blocs « image et texte » réglés en noir pur (#000) dans l'éditeur, comme sur la page À propos : noir du thème. */ html body [style*="--text-color: 0 0 0;"] { --text-color: var(--text-primary) !important; } /* Page cadeaux corporatifs : #333, #444 et #555 pour les paragraphes, #666, #888 et #999 dans le formulaire avant. */ html body .sl-page { color: rgb(var(--text-primary)); } html body .sl-page :is(.slx-hero p:not([class]), .sl-lede, .slx-appel p, .sl-why-list p, .cf-section-label, .cf-reassure, .cf-label .opt, .cf-tel-prefix, .cf-count, .cf-hint) { color: rgb(var(--text-primary) / .7) !important; } /* Prix en solde : 18 px partout avant (.text-on-sale, 1.2), même là où les autres prix sont à 14 px (tiroir du panier) ou à 22 px (fiche produit). Il prend maintenant la taille des prix voisins. */ html body sale-price.text-on-sale.text-lg { font-size: 22px; } html body sale-price.text-on-sale.text-sm { font-size: var(--text-sm); } /* Recherches populaires du tiroir de recherche : PP Eiko 22 px avant. La règle de 1.2 vise .search-drawer__featured-links, qui n'existe plus dans la nouvelle version d'Impact. Mot cherché en noir pur avant. */ html body :is(search-drawer, #search-drawer) li > a:is(.h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--text-font-family) !important; font-size: 16px !important; font-weight: 400 !important; } html body :is(search-drawer, #search-drawer) mark { color: inherit; } /* Lien « Mon compte » du menu cellulaire (composant shopify-account de Shopify) : Arial avant. */ html body shopify-account, html body shopify-account * { font-family: var(--text-font-family) !important; } /* Barre d'annonce sur cellulaire : reste à 11 px, comme avant. À 12 px, « Livraison accélérée gratuite pour commande de 50 $ et plus » passe sur deux lignes. Seule exception à l'échelle. */ @media screen and (max-width: 699px) { html body .shopify-section--announcement-bar :is(p, a, span) { font-size: 11px !important; } } /* 10.9 Sous-titre de la bannière vidéo de l'accueil : lignes équilibrées (3 nov. 2026, soir), comme son titre (10.2). Sur cellulaire, « toit. » restait seul sur la deuxième ligne. Pas appliqué à tous les titres du site : en français, l'espace avant « : » ou « ? » est souvent une espace normale, et l'équilibrage envoyait le deux-points au début de la ligne suivante (titre de l'article des Fêtes 2026). */ html body [class*="video-banner-text-"] p { text-wrap: balance; } /* 3 nov. 2026 (nuit), demande de Dawei : « Voir notre Instagram » avait des coins carrés sur cellulaire (réglage de l'app Instagram). Mêmes coins arrondis que les autres boutons du thème, partout. Son relief est dans la règle des boutons pleins de la section 1.3. 4 nov. 2026, demande de Dawei : même taille que « Voir les idées cadeaux » (.button--xl d'Impact) : texte de 18 px, rembourrage de .button--xl (16 px et 32 px sous 700 px, 17,2 px et 40 px au-delà). Avant : 16 px, et le rembourrage de l'app (14 px et 32 px sur cellulaire, 16 px et 48 px sur ordinateur). */ html body .gfa-content__button { border-radius: var(--rounded-button) !important; font-size: 18px !important; text-transform: none !important; letter-spacing: 0 !important; padding: var(--spacing-4) var(--spacing-8) !important; } @media screen and (min-width: 700px) { html body .gfa-content__button { padding: 1.075rem var(--spacing-10) !important; } } /* ========================================================================== 11. FORMULAIRES KLAVIYO ========================================================================== */ /* 3 nov. 2026 (nuit), demande de Dawei : sur cellulaire, l'onglet collant de Klaviyo (« Obtenir 5$ de bienvenue », la languette qui rouvre le formulaire de bienvenue une fois fermé) prenait trop de place à l'écran. Caché sous 700 px. Le formulaire lui-même s'affiche toujours. Sur ordinateur et tablette, l'onglet reste. Pour l'enlever proprement, ou pour le remettre : réglage « Teaser » du formulaire dans Klaviyo, puis effacer ce bloc. 4 nov. 2026 (soir), correction : avec display: none, Klaviyo ne finissait pas la fermeture du pop-up (il le transforme en onglet) et sa fenêtre restait sur le bas de l'écran, invisible et au-dessus de tout : chaque toucher dans le tiroir du panier le fermait et le bouton Passer à la caisse était inaccessible. L'onglet est maintenant invisible et intouchable, mais garde sa place. Le sélecteur avec * est nécessaire : sans lui, l'intérieur de l'onglet reste touchable. */ @media screen and (max-width: 699px) { html body .needsclick[class*="kl-teaser-"], html body .needsclick[class*="kl-teaser-"] * { visibility: hidden !important; pointer-events: none !important; } } /* 4 nov. 2026, demande de Dawei : boutons des pop-ups de bienvenue et onglet « Obtenir 5$ de bienvenue » pareils aux boutons du site. Dans Klaviyo (formulaires « 2026 | 5$ BIENVENUE », cellulaire XhRKsq et ordinateur QVJ2Y9) : vert 2B4735, texte blanc en Jost 400, coins de 8 px, survol 4B6353 (le vert du site à 85 %, comme le survol des boutons du thème) ; onglet vert en Jost 16 px. Klaviyo ne sait pas faire le relief (ombres intérieures) : il est ici, identique à celui des boutons pleins de la section 1.3. Seulement dans les pop-ups (modal-form-container) : les formulaires intégrés aux pages (membres, corporatif) ne changent pas. */ html body [data-testid="modal-form-container"] .klaviyo-form-button { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px rgb(43 71 53 / .6) !important; } /* Onglet : Klaviyo le colle au bas de l'écran (coins du bas carrés) avec une ombre floue. Décollé de 20 px (même écart qu'à gauche) pour qu'il ait l'air d'un bouton : quatre coins arrondis et le relief des boutons. */ html body .needsclick[class*="kl-teaser-"] { bottom: 20px !important; filter: none !important; } html body .needsclick[class*="kl-teaser-"] [role="button"] { border-radius: var(--rounded-button) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px rgb(43 71 53 / .6) !important; transition: background-color .15s ease-in-out; } html body .needsclick[class*="kl-teaser-"] [role="button"]:hover { background-color: #4b6353 !important; } /* Klaviyo met le focus sur l'onglet quand on ferme le pop-up (même à la souris) : le navigateur l'entourait de son anneau par défaut (bleu sur Mac). Même contour vert que les boutons de la bannière de cookies (section 12). */ html body .needsclick[class*="kl-teaser-"] [role="button"]:focus-visible { outline: 2px solid rgb(43 71 53) !important; outline-offset: 3px !important; } /* ========================================================================== 12. BANNIÈRE DE COOKIES (SHOPIFY) ========================================================================== */ /* 4 nov. 2026, demande de Dawei : les boutons de la bannière de cookies de Shopify (« Accepter », « Refuser ») et de sa fenêtre « Gérer les préférences » (« Tout accepter », « Tout refuser », « Enregistrer mes choix ») étaient carrés et plats. Mêmes que les boutons pleins du site : vert 2B4735, texte blanc, coins de 8 px, relief de la section 1.3, survol plus clair. Avant : coins de 2 px, contour blanc de 1 px, 37 à 41 px de haut. « Gérer les préférences » reste un lien souligné. Shopify écrit ces styles dans la page (couleurs réglées dans Paramètres > Confidentialité des clients) ; s'il change les identifiants #shopify-pc__..., ces règles ne trouvent plus rien et les boutons reviennent à l'original, sans rien briser. */ html body #shopify-pc__banner :is(#shopify-pc__banner__btn-accept, #shopify-pc__banner__btn-decline), html body #shopify-pc__prefs :is(#shopify-pc__prefs__header-accept, #shopify-pc__prefs__header-decline, #shopify-pc__prefs__header-save) { border: 0 !important; border-radius: var(--rounded-button) !important; background: rgb(43 71 53) !important; color: #fff !important; font-weight: 400 !important; line-height: 1.6 !important; padding: var(--spacing-3) var(--spacing-6) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px rgb(43 71 53 / .6) !important; transition: background-color .15s ease-in-out; } html body #shopify-pc__banner :is(#shopify-pc__banner__btn-accept, #shopify-pc__banner__btn-decline):hover, html body #shopify-pc__prefs :is(#shopify-pc__prefs__header-accept, #shopify-pc__prefs__header-decline, #shopify-pc__prefs__header-save):hover { background: #4b6353 !important; } /* Shopify marquait le focus clavier par une ombre bleue, remplacée ci-dessus par le relief : contour vert à la place. */ html body #shopify-pc__banner :is(#shopify-pc__banner__btn-accept, #shopify-pc__banner__btn-decline):focus-visible, html body #shopify-pc__prefs :is(#shopify-pc__prefs__header-accept, #shopify-pc__prefs__header-decline, #shopify-pc__prefs__header-save):focus-visible { outline: 2px solid rgb(43 71 53) !important; outline-offset: 3px !important; } /* ========================================================================== 13. CELLULAIRE : PARCOURS D'ACHAT 4 nov. 2026, Claude, demande de Dawei (audit cellulaire, priorité 1). Sur 90 jours, 70 % des visites viennent du cellulaire, mais 0,45 % y finissent en commande, contre 2,3 % sur ordinateur. ========================================================================== */ /* 13.1 Barre de recherche collante (sections/header.liquid) : une fois la page défilée, le menu et le panier disparaissaient ; seule la barre de recherche restait. Le menu (à gauche) et le panier avec son nombre d'articles (à droite) s'y ajoutent, seulement quand la barre est collée en haut, sous 700 px. */ .mobile-sticky-search__btn { display: none; } @media screen and (max-width: 699px) { html body .mobile-sticky-search.is-fixed { display: flex; align-items: center; gap: 4px; padding: 10px 8px; } html body .mobile-sticky-search.is-fixed .mobile-sticky-search__form { flex: 1 1 auto; min-width: 0; width: auto; } html body .mobile-sticky-search.is-fixed .mobile-sticky-search__btn { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 46px; margin: 0; padding: 0; border: 0; background: transparent; color: rgb(var(--text-color)); cursor: pointer; } .mobile-sticky-search__btn--panier .count-bubble { position: absolute; top: 4px; right: 2px; } } /* 13.2 Tiroir du panier (sections/cart-drawer.liquid) : « Passer la commande » en bouton principal, « Voir le panier » en lien dessous, et la case cadeau au-dessus (snippets/sl-cadeau-tiroir.liquid, mêmes styles que la page panier, section 6.0, un peu plus serrés). */ .sl-tiroir-caisse { display: grid; gap: 12px; } .sl-tiroir-caisse .sl-cadeau--tiroir { margin: 0; } .sl-cadeau--tiroir .sl-cadeau__tete { padding: 12px 14px; } .sl-cadeau--tiroir .sl-cadeau__champ { padding: 0 14px 14px; } .sl-cadeau--tiroir .sl-cadeau__txt { min-height: 80px; } .sl-tiroir-caisse__panier { justify-self: center; padding: 6px 12px; font-size: 15px; } /* Fiche produit sur cellulaire : la barre d'achat rapide collée en haut et le tiroir du panier étaient tous deux à z-index 999, et la barre passait devant le tiroir : elle cachait le titre et le X de fermeture du panier après un ajout. Elle passe juste en dessous du tiroir et du menu (999). */ .product-quick-add { z-index: 998; } /* 13.3 Page panier sur cellulaire et tablette : barre collée en bas avec le total et « Passer la commande » (assets/sl-theme.js, bloc « Page panier : barre de caisse »). Le bouton de la page était à environ 1 600 px du haut (2,4 écrans). La barre disparaît quand le vrai bouton est à l'écran ; l'onglet Klaviyo remonte au-dessus. */ .sl-panier-barre { display: none; } @media screen and (max-width: 999px) { .sl-panier-barre:not([hidden]) { position: fixed; right: 0; bottom: 0; left: 0; z-index: 80; display: flex; align-items: center; gap: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08); } .sl-panier-barre__total { display: flex; flex: 0 0 auto; flex-direction: column; line-height: 1.25; } .sl-panier-barre__lib { font-size: 13px; color: rgb(var(--text-color) / .65); } .sl-panier-barre__montant { font-size: 17px; font-weight: 600; white-space: nowrap; } .sl-panier-barre__bouton { flex: 1 1 auto; } body.sl-panier-barre-active { padding-bottom: 84px; } html body.sl-panier-barre-active .needsclick[class*="kl-teaser-"] { bottom: 100px !important; } } /* 13.4 Collections (sections/main-collection.liquid) : sur cellulaire, le texte « La différence Signé Local » passe sous la grille ; les produits sont visibles dès le premier écran. 4 nov. 2026 (soir), demande de Dawei (audit ordinateur, priorité 1) : même chose sur tablette et ordinateur. Sur un portable de 768 px de haut, ce texte (150 px) poussait les coffrets sous le bas de l'écran. Avant : en haut à partir de 700 px. */ .sl-diff-haut { display: none; } .sl-diff-bas { margin-top: var(--spacing-10); } /* 13.5 Menu cellulaire (snippets/navigation-panel.liquid) : Coffrets cadeaux, Service corporatif et Magasins en haut, séparés des catégories par un filet. */ .sl-menu-raccourcis { padding-bottom: var(--spacing-6); border-bottom: 1px solid rgb(var(--text-color) / .12); } /* ========================================================================== 14. CELLULAIRE : FICHE PRODUIT, CARTES ET ACCUEIL 4 nov. 2026, Claude, demande de Dawei (audit cellulaire, priorité 2). ========================================================================== */ /* 14.1 Fiche produit */ /* Barre d'achat rapide (section 5.4) : sous 1000 px, elle était forcée visible dès l'arrivée sur la fiche. Collée en haut, elle cachait la bannière d'annonce et le haut du logo, et doublait le bouton « Ajouter au panier » de la fiche (de nouveau visible depuis le 3 nov.). Elle reprend le comportement d'Impact : elle apparaît une fois le bouton de la fiche passé, et disparaît en arrivant au pied de page (classe is-visible posée par le thème). */ @media screen and (max-width: 999px) { html body .product-quick-add:not(.is-visible) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-100%) !important; } } /* « La différence locale signée » (sections/main-product.liquid, coffrets seulement) : sous la fiche au lieu d'entre le fil d'Ariane et la photo. D'abord sous 1000 px (priorité 2 de l'audit cellulaire), puis à toutes les largeurs le 4 nov. 2026 au soir (audit ordinateur, priorité 1) : sur un portable de 768 px de haut, le bloc (130 px) poussait le bouton « Ajouter au panier » des coffrets sous le bas de l'écran (765 px). */ .sl-diff-produit-haut { display: none; } .sl-diff-produit-bas .signe-local-difference { margin: var(--spacing-8) 0 0; } /* 14.2 Cartes produit */ /* Badge « Envoyé directement par [marque] » (snippets/product-badges.liquid) : il restait sur une ligne et dépassait de la carte (215 px pour une carte de 171 px sur iPhone, coupé ou par-dessus la carte voisine). Il passe à la ligne. */ .product-card__badge-list { max-width: calc(100% - 16px); grid-template-columns: minmax(0, 1fr); justify-items: start; } .product-card .badge--collective { max-width: 100%; white-space: normal; text-align: start; line-height: 1.3; } /* Badge « Économisez » : vert vif 00A341 (réglage du thème, Couleurs) au lieu du vert du site 2B4735. Seul le badge change ; le vert des messages de stock (--success-text) reste. */ html:root { --on-sale-badge-background: 43 71 53; } /* 14.3 Accueil */ /* Carrousels de produits (sections Collection en vedette non empilées) : Impact fixe la carte à 74 % de l'écran sur cellulaire, une seule carte visible à la fois, quel que soit le réglage « produits par rangée ». Deux cartes par écran, avec le début de la troisième pour montrer qu'on peut glisser. Texte des cartes sans retrait, comme dans les collections. */ @media screen and (max-width: 699px) { html body .shopify-section--featured-collection .product-list { --product-list-carousel-item-width: 42vw !important; } html body .shopify-section--featured-collection .product-card__info { padding: .75rem 0 0 !important; } } /* Tuiles « Pour les célébrations », « Pour le bas de Noël », « Pour les gourmets » : titres en PP Eiko 18 px, blancs et fins, peu lisibles sur les photos. Plus grands, avec une ombre douce. */ @media screen and (max-width: 699px) { html body [id$="__17b0b266-1793-4f98-b144-30405f25e87e"] .content-over-media .h4 { font-size: 26px; line-height: 1.15; text-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 2px 18px rgb(0 0 0 / .55); } } /* Bannière vidéo (sections/ss-video-banner-pro.liquid) : les boutons à contour blanc deviennent les boutons pleins du site : vert 2B4735, texte blanc en Jost 400, relief de la section 1.3, survol 4B6353. D'abord sous 1024 px (priorité 2 de l'audit cellulaire), puis à toutes les largeurs le 4 nov. 2026 au soir (audit ordinateur, priorité 3 : boutons uniformes partout, demande de Dawei). Taille et rembourrage d'ordinateur inchangés à partir de 1024 px. */ html body [class*="video-banner-first-button-"], html body [class*="video-banner-second-button-"] { background-color: rgb(43 71 53); border: 1px solid transparent; color: #ffffff; font-weight: 400; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px rgb(43 71 53 / .6); } html body [class*="video-banner-first-button-"]:hover, html body [class*="video-banner-second-button-"]:hover { background-color: #4b6353; border-color: transparent; color: #ffffff; } @media screen and (max-width: 1023px) { html body [class*="video-banner-first-button-"], html body [class*="video-banner-second-button-"] { font-size: 15px; padding: 14px 20px; } } /* « Ce que disent les médias » (templates/index.json, custom_liquid_gcw3km) : sur cellulaire, les logos-boutons faisaient 18 à 28 px de haut. Zone de toucher agrandie à 40 à 50 px de haut ; les logos restent sur trois rangées (rangées 22 px au lieu de 16, colonnes 22 px comme avant). */ @media screen and (max-width: 699px) { html body .mmv-logos { gap: 0 22px; } html body button.mmv-logo { padding: 11px 0; } } /* ========================================================================== 15. PRIORITÉ 3 DE L'AUDIT CELLULAIRE 4 nov. 2026, Claude, demande de Dawei. ========================================================================== */ /* 15.1 Fiche produit sans avis Judge.me (snippets/sl-judgeme-etoiles.liquid) : la note de Signé Local sur Google (4,8/5, la même que dans « Ce que disent nos clients » de l'accueil), présentée comme celle de la boutique. Mêmes étoiles jaunes que Judge.me. */ .sl-note-boutique { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 13px; line-height: 1.4; color: rgb(var(--text-color) / .75); } .sl-note-boutique__etoiles { color: rgb(255 193 7); font-size: 15px; letter-spacing: 2px; } .sl-note-boutique__note { color: rgb(var(--text-color)); font-weight: 600; } /* 15.2 Page « Nos magasins » : fond gris pâle à la place d'une carte pas encore chargée (assets/sl-theme.js). */ .ns-store__map iframe[data-sl-carte]:not([src]) { background: #f1f1f1; } /* ========================================================================== 16. CELLULAIRE : TIROIR DU PANIER ET SUPERPOSITIONS 4 nov. 2026, Claude, demande de Dawei (suite de l'audit cellulaire, points 1 à 4). Sur cellulaire, 28 derniers jours : 290 visites avec un ajout au panier, mais 109 seulement rendues au paiement ; une fois au paiement, la moitié achète. On donne plus de place aux produits dans le tiroir et on enlève ce qui cache les boutons. ========================================================================== */ /* 16.1 Tiroir du panier sur cellulaire (sections/cart-drawer.liquid). Sur un iPhone 13, le haut du tiroir (titre et barre de livraison gratuite) prenait 235 px et le bas 313 px : il restait environ 80 px pour voir les produits. Les deux sont resserrés. La case cadeau tient sur une ligne ; son explication s'affiche quand on la coche. Le bas du tiroir, avec « Passer la commande », reste fixe comme avant. */ @media screen and (max-width: 699px) { html body #cart-drawer::part(body) { padding-top: 14px; } html body #cart-drawer::part(footer) { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); } html body .cart-drawer__top { padding-bottom: 14px; } html body .cart-drawer__top .free-shipping-bar { padding: 10px 0 0; gap: 6px; } html body .cart-drawer__top .free-shipping-bar__message { font-size: 13px; line-height: 1.35; } html body .cart-drawer__top .progress-bar__milestone-label { font-size: 11px; line-height: 1.25; } /* Les étiquettes des paliers débordent sous la barre (position absolue) : on leur garde leur place, sinon elles chevauchent le premier produit. */ html body .cart-drawer__top .progress-bar-container { margin-bottom: 20px; } html body #cart-drawer [slot="footer"] { gap: 10px; } html body .sl-tiroir-caisse { gap: 8px; } html body .sl-cadeau--tiroir .sl-cadeau__tete { align-items: center; padding: 9px 12px; } html body .sl-cadeau--tiroir:not(.is-on) .sl-cadeau__sous { display: none; } html body .sl-tiroir-caisse > .button { padding-block: 13px; font-size: 17px; } html body .sl-tiroir-caisse__panier { padding: 2px 12px; font-size: 14px; } } /* 16.2 Bouton de clavardage Shopify Inbox, sur ordinateur : il couvrait le bout droit du bouton « Passer la commande » du tiroir. Caché tant que le tiroir du panier est ouvert. Sur cellulaire, Inbox ne l'affiche pas (ses réglages). */ html:has(#cart-drawer[open]) shopify-chat { display: none !important; } /* 16.3 Bandeau des témoins (cookies) de Shopify sur cellulaire : à la première visite, il couvrait 63 % de l'écran d'un iPhone 13 (416 px sur 664). Il devient une barre collée au bas de l'écran. Accepter et Refuser restent côte à côte, de même taille et de même couleur : aucun choix n'est mis en avant. Les textes ne changent pas (ils se règlent dans l'admin Shopify, Paramètres > Confidentialité des clients). */ @media screen and (max-width: 699px) { html body #shopify-pc__banner.shopify-pc__banner__dialog { right: 0; bottom: 0; left: 0; width: 100%; max-height: 70%; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 18px rgb(0 0 0 / .14); } html body #shopify-pc__banner h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.25; } html body #shopify-pc__banner .shopify-pc__banner__body { margin-bottom: 10px; } html body #shopify-pc__banner .shopify-pc__banner__body p { font-size: 12.5px; line-height: 1.4; } html body #shopify-pc__banner .shopify-pc__banner__btns { flex-direction: row; flex-wrap: wrap; gap: 8px; } html body #shopify-pc__banner :is(#shopify-pc__banner__btn-accept, #shopify-pc__banner__btn-decline) { flex: 1 1 0; margin: 0; padding: 10px 8px !important; } html body #shopify-pc__banner #shopify-pc__banner__btn-manage-prefs { flex: 1 0 100%; order: 3; margin: 0; padding: 4px; font-size: 13px; } } /* 16.4 Fiche produit, cellulaire et tablette : une fois la page défilée, la barre d'ajout rapide (en haut de l'écran) se posait par-dessus la barre collante (menu, recherche, panier ; section 13.1). Elle se place maintenant juste dessous. 67 px = hauteur de .mobile-sticky-search.is-fixed (10 + 46 + 10 px et la bordure). À partir de 1150 px, la barre collante n'existe pas : rien ne change. */ @media screen and (max-width: 1149px) { html:has(.mobile-sticky-search.is-fixed) body .product-quick-add { top: 67px !important; } } @media screen and (max-width: 999px) { html:has(.mobile-sticky-search.is-fixed) body .product-quick-add { padding-top: 10px !important; } } /* 16.5 Boutons « + Ajouter » du tiroir du panier (emballages cadeaux et « Vous pourriez aussi aimer »). 4 nov. 2026, Claude, demande de Dawei : les emballages gardaient le bouton gris atténué d'Impact (button--subdued), et les recommandations étaient vertes (section 6.0c) mais plates, parce que le relief des boutons pleins (en haut du fichier) exclut button--subdued. Tous deviennent des boutons pleins du site : vert 2B4735, texte blanc, même relief, mêmes dimensions. */ html body #cart-drawer .horizontal-product .button { --button-background: var(--button-background-primary) / 1 !important; --button-text-color: var(--button-text-primary) !important; --button-outline-color: var(--button-background-primary) !important; border-radius: var(--rounded-button); padding: 10px 18px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -6px rgb(43 71 53 / .6); } @media screen and (pointer: fine) { html body #cart-drawer .horizontal-product .button:hover { --button-background-opacity: .88; } } /* ========================================================================== 17. ORDINATEUR : AUDIT DU 4 NOV. 2026 4 nov. 2026 (soir), Claude, demande de Dawei (audit ordinateur, priorités 1 à 3). Mesuré à 1366 x 768 (portable courant) et 1440 x 900. Voir aussi les sections 13.4 et 14.1 (« La différence ») et 14.3 (boutons de la bannière). ========================================================================== */ /* 17.1 Collections : sur un portable de 768 px de haut, aucun nom ni prix de produit n'était visible sans défiler (Coffrets cadeaux : premier prix à 977 px). Titre de la collection : 28 px au-dessus et 20 px dessous au lieu de 64 et 64 ; 24 px au lieu de 48 avant les filtres. */ @media screen and (min-width: 1000px) { html body .shopify-section--collection-banner .collection-header { margin-block: 28px 20px; } html body .shopify-section--main-collection .collection { margin-top: 24px; } } /* 17.2 Page panier (templates/cart.json, sections/main-cart.liquid) : « Passer la commande » était à 1 062 px du haut, sous le bas de l'écran sur tous les ordinateurs. - La section de texte vide en haut du gabarit (80 px de marges, aucun contenu) n'est plus affichée. - 24 px au lieu de 64 au-dessus du titre « Panier », message de livraison gratuite en 13 px. - Colonne de droite : case cadeau sur une ligne (son explication s'affiche quand on la coche), puis le total, le bouton, et la note de commande en dernier (avant : sous le total, au-dessus du bouton). */ @media screen and (min-width: 1000px) { html body main:has(.shopify-section--main-cart) > .shopify-section--rich-text:has(.rich-text .prose:empty) { display: none; } html body .shopify-section--main-cart .page-spacer { margin-top: 24px; } html body .shopify-section--main-cart .free-shipping-bar__message { font-size: 13px; line-height: 1.4; } html body .shopify-section--main-cart .cart-form { padding-block: 28px; row-gap: 20px; } html body .cart-form > .sl-cadeau { order: 1; } html body .cart-form > .cart-form__totals { order: 2; } html body .cart-form > .button { order: 3; } html body .cart-form > cart-note { order: 4; } html body .cart-form > .sl-cadeau .sl-cadeau__tete { align-items: center; padding-block: 10px; } html body .cart-form > .sl-cadeau:not(.is-on) .sl-cadeau__sous { display: none; } } /* 17.3 Pastille Klaviyo « Obtenir 5 $ de bienvenue » (formulaire QVJ2Y9), sur ordinateur : collée en bas à gauche, elle cachait les noms et les prix des produits des collections et des carrousels. Elle devient un onglet vertical contre le bord gauche, dans la marge de la page (48 px), et ne couvre plus les produits. Le texte, le lien et le popup ne changent pas (réglés dans Klaviyo). Si Klaviyo renomme ses classes, la règle cesse simplement de s'appliquer. */ @media screen and (min-width: 1000px) { html body .needsclick[class*="kl-teaser-"] { left: 0 !important; bottom: 30% !important; width: auto !important; margin: 0 !important; transform: rotate(-90deg) translateY(100%); transform-origin: 0 100%; } html body .needsclick[class*="kl-teaser-"] [data-testid="animated-teaser"] > [role="button"] { min-height: 0 !important; padding: 8px 16px !important; border-radius: 0 0 8px 8px !important; } html body .needsclick[class*="kl-teaser-"] p, html body .needsclick[class*="kl-teaser-"] p span { white-space: nowrap; font-size: 15px !important; line-height: 1.2 !important; } } /* 18. Dates limites pour recevoir sa commande avant Noël (snippets/sl-noel-livraison.liquid), 4 nov. 2026, demande de Dawei : sous les boutons d'achat de la fiche produit et sous le total du tiroir du panier. Trait vert à gauche, sans fond, pour rester discret. Le message disparaît tout seul après le 16 décembre 2026. */ .sl-noel { margin: 12px 0 0; padding: 4px 0 4px 12px; border-left: 3px solid #2b4735; font-size: 13px; line-height: 1.45; } .sl-noel strong { font-weight: 700; } .sl-noel--tiroir { margin-top: 6px; font-size: 12px; } /* Tiroir : sous les articles sur cellulaire (le pied du tiroir reste compact), sous le total à partir de 700 px. */ .sl-noel--corps { margin-top: 0; } @media screen and (max-width: 699px) { #cart-drawer .sl-noel--pied { display: none; } } @media screen and (min-width: 700px) { #cart-drawer .sl-noel--corps { display: none; } } /* ========================================================================== 19. TIROIR DU PANIER : PLEIN ÉCRAN SUR CELLULAIRE, PAGE BLOQUÉE, POP-UP KLAVIYO EN ATTENTE, CASE CADEAU 5 nov. 2026, Claude, demande de Dawei (vidéo iPhone du 5 nov. ; modèle : le tiroir « Ajouté au sac » de Lululemon, plein écran avec un petit X en haut). Script : sl-theme.js, bloc « Tiroir du panier (5 nov. 2026) ». ========================================================================== */ /* 19.1 Page bloquée pendant qu'un tiroir est ouvert, sous 750 px. La règle de la section 1.4 (overflow-y: auto !important sur html et body) annulait le blocage d'Impact (classe lock) : sur iPhone, le doigt faisait défiler la page derrière le tiroir. On ne bloque que pendant qu'un tiroir est vraiment ouvert (attribut open) : une classe lock restée par erreur ne peut pas figer la page. La règle 1.4 reste pour tout le reste. */ @media screen and (max-width: 749px) { html:has(.drawer[open]), html:has(.drawer[open]) body { overflow: hidden !important; } } /* 19.2 Pop-up Klaviyo (5 $ de bienvenue, cellulaire et ordinateur) en attente pendant qu'un tiroir est ouvert. Impact ferme le tiroir au premier toucher hors du tiroir et ce toucher n'atteignait pas le pop-up : le X du pop-up fermait le tiroir, puis il fallait le toucher une 2e fois. Le pop-up (et, sur ordinateur, son voile sombre : c'est le même élément role="dialog") reste invisible et intouchable tant qu'un tiroir est ouvert, puis réapparaît à la fermeture. Les pseudo-éléments ::before et ::after sont visés aussi : sur cellulaire, Klaviyo prolonge le fond crème du pop-up par un ::before de 301 px, déclaré visible et touchable ; sans eux, il couvrait « Passer la commande » (testé). */ html:has(.drawer[open]) .needsclick[role="dialog"], html:has(.drawer[open]) .needsclick[role="dialog"]::before, html:has(.drawer[open]) .needsclick[role="dialog"]::after, html:has(.drawer[open]) .needsclick[role="dialog"] *, html:has(.drawer[open]) .needsclick[role="dialog"] *::before, html:has(.drawer[open]) .needsclick[role="dialog"] *::after { visibility: hidden !important; pointer-events: none !important; } /* 19.3 Sous 700 px : tiroir du panier plein écran (avant : carte à 8 px des bords, coins arrondis), ouvert en fondu (l'animation de découpe clip-path d'Impact est retirée), et petit X rond en haut à droite, qui reste visible quand on fait défiler le tiroir. */ @media screen and (max-width: 699px) { html body #cart-drawer { padding: 0 !important; width: 100% !important; max-width: none !important; } html body #cart-drawer::part(content) { border-radius: 0 !important; clip-path: none !important; } html body #cart-drawer .cart-drawer__top .drawer__close-icon { position: fixed; top: 10px; right: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; color: #111; } html body #cart-drawer .cart-drawer__top .drawer__close-icon svg { width: 14px; height: 14px; } html body #cart-drawer .cart-drawer__top .drawer__close-icon:focus:not(:focus-visible) { outline: none; } } /* 19.4 Case cadeau dans le corps du tiroir, sous les articles (avant : dans le bas du tiroir, au-dessus de « Passer la commande »). Cochée : le mot pour le destinataire ; les emballages s'affichent dans la zone voisine (19.5). */ html body #cart-drawer .sl-cadeau--tiroir { margin: 0; } /* 19.5 « Choix d'emballage cadeau » (5 nov. 2026, demande de Dawei). Quand la case « C'est pour un cadeau ! » est cochée, la zone des produits recommandés (« Vous pourriez aussi aimer », snippets/sl-tiroir-recommandations.liquid) montre les emballages cadeaux à la place : sous le panier sur cellulaire et tablette, dans la colonne de gauche à partir de 1100 px. Décochée : les recommandations reviennent. Sans case cadeau (panier avec un produit Shopify Collective) : jamais d'emballages. Si les recommandations ne sont pas encore chargées, la zone s'affiche quand même pour les emballages. Le carrousel des emballages a changé d'identifiant (sl-tiroir-emballages-carrousel) : les règles #cart-drawer-recommendations de la section 6.0c (grille de 3 sur ordinateur) ne le visent plus, il prend la présentation des recommandations. */ #cart-drawer .sl-tiroir-emballages { display: none; } #cart-drawer .sl-cart-drawer__layout:has([data-sl-cadeau-case]:checked) .sl-cart-drawer__aside:has(.sl-tiroir-emballages), #cart-drawer .sl-cart-drawer__layout:has([data-sl-cadeau-case]:checked) .sl-tiroir-emballages { display: block; } #cart-drawer .sl-cart-drawer__layout:has([data-sl-cadeau-case]:checked) .sl-cart-drawer__aside:has(.sl-tiroir-emballages) cart-recommendations { display: none !important; } /* Même présentation que les recommandations : sans le cadre autour du carrousel (règle « Retirer le cadre des recommandations du panier », section 6.0c). */ #cart-drawer .sl-tiroir-emballages #sl-tiroir-emballages-carrousel, #cart-drawer .sl-tiroir-emballages #sl-tiroir-emballages-carrousel .horizontal-product-list { border: none !important; outline: none !important; box-shadow: none !important; } /* 19.6 Bas du tiroir (5 nov. 2026, demandes de Dawei) : sous « Passer la commande », les boutons de paiement express de Shopify (Shop Pay, Apple Pay, Google Pay, selon l'appareil), sur une rangée quand ils tiennent, à la hauteur et à l'arrondi des boutons du site ; puis « Continuer à magasiner », bouton gris pâle qui ferme le tiroir (comme le X). « Voir le panier » est caché sous 700 px ; il reste sur tablette et ordinateur. */ html body #cart-drawer .sl-tiroir-caisse__express shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 44px; --shopify-accelerated-checkout-button-inline-size: 44px; --shopify-accelerated-checkout-button-border-radius: 8px; --shopify-accelerated-checkout-row-gap: 8px; } html body #cart-drawer .sl-tiroir-caisse > .sl-tiroir-caisse__continuer { --button-background: 242 242 242 / 1; --button-text-color: 17 17 17; --button-outline-color: 242 242 242; padding-block: 10px; font-size: 15px !important; /* la règle « html body .button--xl » met tous les grands boutons à 18 px !important */ } @media screen and (max-width: 699px) { html body #cart-drawer .sl-tiroir-caisse__panier { display: none; } /* Rangée qui glisse quand Shopify empilerait les boutons (sl-theme.js, bloc « Tiroir du panier, cellulaire : boutons de paiement express ») : elle va jusqu'aux bords de l'écran, sans barre de défilement. */ html body #cart-drawer .sl-tiroir-caisse__express.sl-express-glisse { margin-inline: -20px; padding-inline: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; } html body #cart-drawer .sl-tiroir-caisse__express.sl-express-glisse::-webkit-scrollbar { display: none; } html body #cart-drawer .sl-tiroir-caisse__express.sl-express-glisse shopify-accelerated-checkout-cart { display: block; } } /* 19.7 Page panier (5 nov. 2026, demandes de Dawei) : boutons de paiement express (bloc « Accelerated buttons » ajouté dans templates/cart.json) juste sous « Passer la commande ». Sur ordinateur, la colonne de droite est réordonnée (17.2) : sans ordre, les boutons montaient tout en haut, au-dessus de la case cadeau. Même arrondi que les boutons du site. Les icônes « Nous acceptons », la ligne « Retours faciles » qui les suivait et le bloc « Saviez-vous que... » sont retirés par les réglages du gabarit (show_payment_icons, section sl_panier_statistique désactivée). */ html body .cart-form > .additional-checkout-buttons shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-border-radius: 8px; } @media screen and (min-width: 1000px) { html body .cart-form > .additional-checkout-buttons { order: 3; } } /* 19.8 Barre de livraison gratuite : un seul palier, 50 $ (décision de Dawei, 5 nov. 2026). Le palier « 3 $ à un organisme d'ici » à 100 $ est retiré par le réglage show_milestone_2 (config/settings_data.json). Sans étiquettes de paliers sous la barre, l'espace qui leur était gardé sur cellulaire (16.1) n'a plus lieu d'être. */ @media screen and (max-width: 699px) { html body .cart-drawer__top .free-shipping-bar:not(.free-shipping-bar--with-milestones) .progress-bar-container { margin-bottom: 0; } }