/* 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