/* GS — corrections CSS post-migration (chargées APRÈS le thème ; !important pour gagner). Cible des bugs dont le JS thème ne s'initialise pas correctement en statique. */ /* ------------------------------------------------------------------ * * GARDE-FOU OVERFLOW HORIZONTAL (règle universelle, tous stores) * En statique, des composants (marquee width:max-content, carrousels, sections 100vw) débordent et * rendent la page scrollable latéralement (bande vide à droite). * ⚠️ PIÈGE SAFARI (bug scroll vertical bloqué — cf. capture user) : NE PAS mettre `overflow-x: clip` sur * `html`/`body`. Par la spec CSS, quand un axe vaut `clip` et l'autre `visible`, le `visible` est calculé en * `clip` AUSSI → Safari clippe alors l'overflow VERTICAL de la racine = la page ne scrolle plus jusqu'au footer. * (Chromium a un quirk sur l'élément racine → « ça marche en headless » mais casse en Safari.) On borne donc la * largeur avec `max-width` seulement, et on SCELLE chaque élément large avec `contain: paint` (ci-dessous), ce * qui empêche le débordement horizontal SANS toucher au scroll vertical de la racine. * ------------------------------------------------------------------ */ html, body { max-width: 100% !important; } /* ★ Le thème pose `body{overflow:hidden}` en dur. Sur iOS/Safari le body est souvent LE scroller → ce * `overflow:hidden` peut BLOQUER le scroll vertical (footer inatteignable) alors que Chromium/desktop * scrollent quand même via . On garantit la scrollabilité verticale du body, et on ne (RE)verrouille * QUE sur les états d'ouverture réels (menu/recherche/tiroir) — sinon un overlay ouvert laisserait le fond * défiler. NB : ne PAS utiliser `overflow-x:clip` sur body (un axe `clip` force l'autre à `clip` → re-piège * Safari). Le débordement horizontal est déjà scellé par `contain:paint` sur les éléments larges. */ html { overflow-y: auto !important; } body { overflow: visible !important; } /* On ne (re)verrouille QUE via NOTRE classe `.gs-drawer-lock` (posée/retirée de façon fiable par cart-drawer.js). * On NE se base PAS sur les classes du thème (`o-searchBox`, etc.) : si l'une reste collée après fermeture (JS * thème absent en statique), body resterait `overflow:hidden` = SCROLL BLOQUÉ (le bug). Fond qui défile derrière * un overlay = souci mineur ; page bloquée = souci majeur → on privilégie toujours la scrollabilité. */ body.gs-drawer-lock { overflow: hidden !important; } /* filet : aucune section ne dépasse la largeur de l'écran */ .marquee, .logo-list.scrolling, media-gallery, slider-component, section, footer, component-loader { max-width: 100vw; } /* ROOT FIX robuste (marche même si le navigateur ignore overflow-x:clip, ex. Safari < 16) : `contain: paint` SCELLE le débordement interne → il ne fuit PLUS dans la largeur du document. (overflow:hidden ne suffit PAS ; contain:paint OUI — testé. Et il faut le poser sur l'ÉLÉMENT large lui-même — bullet-marquee — pas seulement sur son parent .marquee.) */ .marquee, .logo-list.scrolling, media-gallery, slider-component { overflow-x: clip; contain: paint; } /* sliders horizontaux (marquee, rangées produits scroll-snap) : sceller SANS bloquer le scroll interne → contain:paint seul (pas d'overflow:clip qui tuerait le carrousel). */ bullet-marquee, .product-grid, [class*="scroll-snap"] { contain: paint; } /* ------------------------------------------------------------------ * * MARQUEE / bandeaux défilants (bullet-marquee) * En statique, le custom-element est bien enregistré mais son JS n'anime rien * (display:inline, transform:none) → les .projectile (display:block) s'empilent verticalement. * On force le défilement horizontal infini en CSS. Le contenu étant dupliqué à l'identique * (N copies), translateX(-50%) boucle de façon transparente. * ------------------------------------------------------------------ */ .marquee, .logo-list.scrolling { overflow: hidden !important; } .marquee bullet-marquee, .logo-list.scrolling bullet-marquee { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: max-content !important; white-space: nowrap !important; animation: gs-marquee var(--gs-marquee-dur, 35s) linear infinite; } .logo-list.scrolling bullet-marquee { --gs-marquee-dur: 22s; } .marquee bullet-marquee:hover, .logo-list.scrolling bullet-marquee:hover { animation-play-state: paused; } .marquee .projectile, .logo-list.scrolling .projectile { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; align-items: center !important; } .marquee .projectile > span, .marquee x-flex, .marquee x-cell { display: inline-flex !important; white-space: nowrap !important; } .logo-list.scrolling .projectile span, .logo-list.scrolling picture, .logo-list.scrolling img { display: inline-flex !important; flex: 0 0 auto; } /* espacement entre répétitions du texte + taille des logos */ .marquee x-cell { padding-inline: calc(var(--marqueeLateralSpace, 3rem) / 2) !important; } .logo-list.scrolling img, .logo-list.scrolling picture img { max-height: 48px !important; width: auto !important; height: auto !important; } @keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------------ * * BOUTON AJOUTER AU PANIER — l'état "Adding..." (.loading__spinner) reste affiché car le JS * d'état du thème ne bascule pas en statique → libellés superposés ("ADD TO CART" + "Adding..."). * On masque le spinner par défaut : le panier-shim ajoute instantanément (pas d'état loading). * ------------------------------------------------------------------ */ .loading__spinner, .cartLoading, .cartAdded, .cartError, .cartSuccess, [class*="Loading"].cartLoading { display: none !important; } /* espace entre le prix et le libellé quand ils cohabitent dans le bouton */ .cartDefault { margin-inline-start: .45em; } /* Boutons de checkout accéléré Shopify (Buy it now / Shop Pay) : vides + court-circuitent notre * panier indépendant → masqués (cf. indépendance §3, dynamic_checkout). */ .shopify-payment-button, [class*="shopify-payment-button"], .installment { display: none !important; } /* ------------------------------------------------------------------ * * QUICK-BUY popover (assets/js/quickbuy.js) — le custom-element du thème charge son contenu via un * fetch section-render Shopify (indispo en statique) → on reconstruit le popover (variante + add). * ------------------------------------------------------------------ */ .gs-qb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .gs-qb { background: #111; color: #fff; border-radius: 16px; padding: 22px; width: min(420px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.5); position: relative; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .gs-qb-x { position: absolute; top: 8px; right: 14px; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: .7; } .gs-qb-x:hover { opacity: 1; } .gs-qb-title { font-weight: 700; font-size: 15px; margin: 0 0 16px; padding-right: 24px; letter-spacing: .3px; } .gs-qb-select { width: 100%; padding: 14px 44px 14px 18px; border-radius: 999px; border: 2px solid #3b82f6; background: #111; color: #fff; font-size: 16px; font-weight: 600; -webkit-appearance: none; appearance: none; margin-bottom: 12px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 18px center; } .gs-qb-add { width: 100%; padding: 14px 20px; border-radius: 999px; border: 0; background: #fff; color: #111; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 16px; } .gs-qb-add[disabled] { opacity: .5; cursor: not-allowed; } .gs-qb-price { font-weight: 700; } /* ------------------------------------------------------------------ * * MARGES DE PAGE PRODUIT (padding latéral) * En statique, le mécanisme de padding de page du thème ne s'applique pas → le contenu de la fiche * (média + infos) est collé aux bords. On restaure le padding horizontal du thème (var(--padding)=1.6rem). * `product-info` se calcule en display:inline en statique → on le repasse en block. * ------------------------------------------------------------------ */ product-info.product-page { display: block !important; padding-inline: var(--padding, 1.6rem) !important; } product-info.product-page > x-grid { padding-inline: 0 !important; } /* pas de double padding sur la grille interne */ /* ------------------------------------------------------------------ * * GUTTER DE PAGE UNIQUE (règle UX universelle, tous stores) * En statique, plusieurs conteneurs pleine largeur (header, menu mobile, grille) sont collés aux bords * gauche/droite → parcours client "à l'étroit" + désalignement (le logo touche le bord alors que la * grille avait déjà 12px). On définit UN gutter unique et on l'applique aux conteneurs pleine largeur * pour que TOUT s'aligne sur la même marge latérale (logo ↔ 1er produit ↔ items du menu). * ⚠️ EXCEPTION : les médias HERO / bannières pleine largeur restent EDGE-TO-EDGE (aucun gutter) — * on ne cible QUE la grille/header/menu ci-dessous, jamais les sections hero (elles doivent bleeder). * ------------------------------------------------------------------ */ :root { --gs-gutter: 12px; } /* grille produit (homepage + collections) : respiration latérale + séparation des colonnes */ .product-grid { padding-inline: var(--gs-gutter) !important; column-gap: var(--gs-gutter) !important; } /* header : logo / Menu / Search étaient collés aux bords (padding 0) → aligne sur le gutter */ #headerGrid { padding-inline: var(--gs-gutter) !important; box-sizing: border-box !important; } /* menu mobile (panneau ouvert au tap sur "Menu") : liens collés aux bords → même gutter */ #mobmenu { padding-inline: var(--gs-gutter) !important; box-sizing: border-box !important; } /* PANNEAU DE RECHERCHE : en statique le du thème est mal dimensionné (margin-left:74px, largeur * bridée) → la barre + les résultats flottent au milieu, désalignés du header "SEARCH". On force le dialog * pleine largeur (inset 0, margin 0) + le gutter de page, et on rend les conteneurs internes fullwidth. */ #searchBox dialog { inset-inline: 0 !important; left: 0 !important; right: 0 !important; margin-inline: 0 !important; width: 100% !important; max-width: 100% !important; padding-inline: var(--gs-gutter) !important; box-sizing: border-box !important; } #searchBox search-engine, #searchBox predictive-search, #searchBox main-search, #searchBox form.search, #searchBox .search-section, #searchBox .search-input-stack, #searchBox .s-input { width: 100% !important; max-width: 100% !important; } #searchBox .search-input-stack { padding-inline: 0 !important; } /* Espacement vertical entre les blocs d'info (vendor/titre/sous-titre/desc/prix/taille/boutons). * Le thème l'applique via `product-content > product-content section{padding-block:var(--margin)}` — * sélecteur qui exige un IMBRIQUÉ, absent du DOM statique → gap:0 (contenu tassé). * On l'applique sur la vraie structure (un seul product-content) : ~24px entre blocs. */ product-content > section { padding-block: var(--mardding, 1.2rem) !important; } /* Produits similaires (assets/js/related.js) — le du thème est vide en statique * (fetch /recommendations mort). Grille reconstruite depuis catalog.json. */ .related.products { display: block !important; } .gs-rel { padding: 40px var(--padding, 16px); border-top: var(--globalBorder, 1px solid #222); } .gs-rel-h { font-size: 18px; font-weight: 700; margin: 0 0 20px; text-transform: uppercase; letter-spacing: .5px; } /* desktop : grille 4 colonnes ; mobile (≤777px) : carrousel horizontal swipe (scroll-snap). */ .gs-rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 777px) { .gs-rel-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; contain: paint; /* pas de fuite dans la largeur du doc (§18.5) */ scroll-padding-inline: var(--padding, 16px); } .gs-rel-grid::-webkit-scrollbar { display: none; } .gs-rel-card { flex: 0 0 62% !important; scroll-snap-align: start; } } .gs-rel-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .gs-rel-img { display: block; aspect-ratio: 1 / 1; background: #f2f2f2; border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .gs-rel-img img { width: 100%; height: 100%; object-fit: cover; } .gs-rel-title { font-size: 13px; font-weight: 600; line-height: 1.3; } .gs-rel-price { font-size: 12px; opacity: .8; margin-top: 2px; } /* Prix barré des recommandations : même hiérarchie que les cartes de collection — le prix payé reste lisible, le régulier passe en retrait. Le `` n'est rendu que si le produit est réellement soldé. */ .gs-rel-price-reg { margin-left: 6px; opacity: .55; text-decoration: line-through; } /* ------------------------------------------------------------------ * * FICHE PRODUIT — bouton "ajouter au panier" en DOUBLON * Le thème rend 2 CTA (#add2cart-cta "SELECT OPTION" + #ProductSubmitButton "ADD TO CART"). * On masque le doublon "SELECT OPTION" et on garde/stylise le vrai submit (pastille claire, comme la réf). * ------------------------------------------------------------------ */ .product-page #add2cart-cta { display: none !important; } .product-page #ProductSubmitButton, .product-page .cartButton.is-outline { background: #fff !important; color: #111 !important; border: 0 !important; } /* ------------------------------------------------------------------ * * PANIER TIROIR (assets/js/cart-drawer.js) — slide-out, identité du site (sombre), responsive. * ------------------------------------------------------------------ */ /* THÈME du tiroir : SOMBRE par défaut. Pour un store à fond clair → ajouter la classe .gs-drawer--light (piloté par config.js : GS_CONFIG.drawer.theme="light"). Un seul flag à changer par store. */ .gs-drawer { --dr-bg:#0d0d0d; --dr-fg:#fff; --dr-muted:#999; --dr-faint:#888; --dr-line:#222; --dr-line-soft:#1c1c1c; --dr-qty-border:#333; --dr-qty-bg:#1a1a1a; --dr-qty-fg:#fff; --dr-thumb:#f2f2f2; --dr-cta-bg:#fff; --dr-cta-fg:#111; --dr-viewcart:#aaa; --dr-shadow:rgba(0,0,0,.5); } .gs-drawer.gs-drawer--light { --dr-bg:#fff; --dr-fg:#111; --dr-muted:#666; --dr-faint:#888; --dr-line:#e8e8e8; --dr-line-soft:#eee; --dr-qty-border:#ddd; --dr-qty-bg:#f4f4f4; --dr-qty-fg:#111; --dr-thumb:#f2f2f2; --dr-cta-bg:#111; --dr-cta-fg:#fff; --dr-viewcart:#666; --dr-shadow:rgba(0,0,0,.18); } .gs-drawer-lock { overflow: hidden; } .gs-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 100000; } .gs-drawer-overlay.on { opacity: 1; visibility: visible; } .gs-drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(400px, 92vw); background: var(--dr-bg); color: var(--dr-fg); z-index: 100001; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px var(--dr-shadow); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .gs-drawer.on { transform: translateX(0); } .gs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--dr-line); } .gs-drawer-title { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; } .gs-drawer-x { background: none; border: 0; color: var(--dr-fg); font-size: 28px; line-height: 1; cursor: pointer; opacity: .7; } .gs-drawer-x:hover { opacity: 1; } .gs-drawer-empty { padding: 60px 20px; text-align: center; color: var(--dr-muted); } .gs-drawer-empty a { color: var(--dr-fg); } .gs-drawer-items { flex: 1; overflow-y: auto; padding: 8px 20px; } .gs-drawer-row { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--dr-line-soft); align-items: flex-start; } .gs-drawer-thumb { flex: 0 0 64px; } .gs-drawer-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--dr-thumb); } .gs-drawer-info { flex: 1; min-width: 0; } .gs-drawer-name { color: var(--dr-fg); text-decoration: none; font-weight: 600; font-size: 13px; display: block; } .gs-drawer-vt { color: var(--dr-muted); font-size: 12px; margin-top: 2px; } .gs-drawer-ctl { display: flex; align-items: center; gap: 14px; margin-top: 8px; } .gs-drawer-qty { display: inline-flex; align-items: center; border: 1px solid var(--dr-qty-border); border-radius: 6px; overflow: hidden; } .gs-drawer-qty button { background: var(--dr-qty-bg); color: var(--dr-qty-fg); border: 0; width: 28px; height: 28px; font-size: 15px; cursor: pointer; } .gs-drawer-qty b { min-width: 26px; text-align: center; font-weight: 600; font-size: 13px; } .gs-drawer-rm { background: none; border: 0; color: var(--dr-faint); font-size: 12px; text-decoration: underline; cursor: pointer; } .gs-drawer-price { font-weight: 700; font-size: 13px; white-space: nowrap; } .gs-drawer-foot { padding: 20px; border-top: 1px solid var(--dr-line); } .gs-drawer-sub { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; margin-bottom: 14px; } .gs-drawer-checkout { width: 100%; padding: 15px; border: 0; border-radius: 999px; background: var(--dr-cta-bg); color: var(--dr-cta-fg); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; } .gs-drawer-viewcart { display: block; text-align: center; margin-top: 12px; color: var(--dr-viewcart); font-size: 13px; text-decoration: underline; } /* Carte produit (grille) : le bouton quick-buy affiche "SELECT OPTION" en BLANC sur pastille BLANCHE * → texte invisible (bouton qui paraît vide). Convention du site = pastille claire + texte foncé * (comme "ADD TO CART" en fiche). On force un libellé lisible. (Cf. règle §18.1 : texte sur tous les boutons.) */ coretex-quickbuy, coretex-quickbuy .clipper, coretex-quickbuy .cartPriceAdd, coretex-quickbuy span, coretex-quickbuy summary { color: #111 !important; } /* Le bouton quick-buy ("SELECT OPTION") débordait à DROITE de sa cellule. Cause réelle (mesurée) : * le est une grille dont le thème pose `grid-template-columns: minmax(200px, 1fr)` * (via x-grid[columns="fit"]). Dans une cellule < 200px, ce minmax(200px,…) IMPOSE une piste de 200px * → l'enfant .cartSelect fait 200px et fuit hors du viewport. max-width sur le ne suffit PAS : * il borne la boîte mais pas la piste interne. Fix = forcer la piste à minmax(0,1fr) + min-width:0 partout * pour que les enfants aient le droit de rétrécir sous leur largeur de contenu. */ coretex-quickbuy, coretex-quickbuy > details, coretex-quickbuy summary, coretex-quickbuy .button { max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; } coretex-quickbuy summary[x-grid] { grid-template-columns: minmax(0, 1fr) !important; } coretex-quickbuy summary > x-flex, coretex-quickbuy .cartSelect, coretex-quickbuy .cardButton, coretex-quickbuy .clipper { min-width: 0 !important; max-width: 100% !important; overflow: hidden; } /* HAUTEUR DU BOUTON « SELECT OPTION » : le padding était DOUBLÉ — le .button (12px haut/bas) ET * le x-flex.cartSelect.button INTERNE (12px haut/bas) empilaient leurs paddings → pill de ~66px, trop épaisse * (mauvaise UX, cf. capture user). Le padding vertical de la pastille vient du ; l'enfant .cartSelect * n'a PAS besoin du sien → on l'annule. Résultat ~40px, aligné sur la hauteur d'un bouton "ADD TO CART" normal. */ coretex-quickbuy .cartSelect, coretex-quickbuy .cardButton { padding-block: 0 !important; } /* ------------------------------------------------------------------ * * GALERIE PRODUIT MOBILE = CARROUSEL (règle UX appliquée à tous les stores) * Le / a une piste ; le JS slider ne * s'initialise pas en statique → les images s'EMPILENT verticalement en mobile. On force un carrousel * horizontal swipe + scroll-snap sous le breakpoint mobile du thème (777px). * ------------------------------------------------------------------ */ @media (max-width: 777px) { /* la galerie et ses parents restent bornés au viewport (sinon la piste flex s'étale = page 2× large) */ media-gallery, media-gallery slider-component { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: clip !important; } media-gallery [id^="Slider-Gallery"], media-gallery x-flex[direction="column"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* clé : empêche le flex-item de s'étaler à la taille du contenu */ overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } media-gallery [id^="Slider-Gallery"]::-webkit-scrollbar, media-gallery x-flex[direction="column"]::-webkit-scrollbar { display: none; } media-gallery .slider__slide { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; scroll-snap-align: center !important; } media-gallery .slider__slide img, media-gallery .slider__slide picture { width: 100% !important; height: auto; } } @media (prefers-reduced-motion: reduce) { .marquee bullet-marquee, .logo-list.scrolling bullet-marquee { animation: none !important; } } /* ── Minimog : la rangée de grille collection `.m-collection-products` porte margin:-8px de chaque côté * (gouttière) MAIS les colonnes `.m-product-item` ont perdu leur padding compensatoire à l'aspiration * -> la rangée fait W+16 et déborde de 8px à droite (scroll H mobile). On annule la marge négative et on * réinjecte une petite gouttière inter-carte via le padding des items. No-op sur Coretex. */ .m-collection-products { margin-left: 0 !important; margin-right: 0 !important; } .m-collection-products > .m-product-item { padding-left: 6px !important; padding-right: 6px !important; } /* ── Minimog PDP : le slider Swiper du thème NE S'INITIALISE PAS en statique (window.Swiper jamais appelé). * ★ CAUSE RACINE de la galerie BLANCHE : le thème pose `.swiper-container{opacity:0}` et compte sur l'init JS * pour la repasser à 1 -> sans init, TOUTE la galerie reste invisible (le bitmap EST chargé mais jamais peint, * d'où « l'image existe — canvas la lit — mais on voit blanc »). Fallback SANS JS, MINIMAL (ne PAS toucher au * layout flex/absolute natif des slides, sinon `responsive-image` casse) : on rétablit juste l'opacité et on * rend le conteneur scrollable horizontalement au doigt (scroll-snap) → la 1re image s'affiche et on peut * swiper les autres. Pagination masquée (non fonctionnelle sans JS). No-op si init. No-op Coretex. */ [class*="m-product-media--"] .swiper-container:not(.swiper-initialized) { opacity: 1 !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } [class*="m-product-media--"] .swiper-container:not(.swiper-initialized) .swiper-slide { scroll-snap-align: center; } [class*="m-product-media--"] .swiper-container:not(.swiper-initialized) ~ * .swiper-pagination, [class*="m-product-media--"] .swiper-container:not(.swiper-initialized) .swiper-pagination { display: none !important; }