/** Shopify CDN: Minification failed
Line 2245:28 Unexpected "("
**/
/* Speedfly License — Premium features control */
[data-speedfly-status="inactive"] .speedfly-premium {
display: none !important;
}
[data-speedfly-status="inactive"] .speedfly-premium-blur {
filter: blur(5px);
pointer-events: none;
user-select: none;
}
/* ==========================================
TITRES PRODUIT — Système 2 lignes
Ligne 1 : contexte (medium 500, plus petit)
Ligne 2 : nom produit (extrabold 800, plus grand)
Police : Plus Jakarta Sans
========================================== */
/* Page produit */
.first-line-title { font-weight: 500; text-transform: capitalize; font-size: 20px; display: block; color: #555; }
.second-line-title { font-weight: 800; text-transform: capitalize; font-size: 28px; letter-spacing: -0.015em; }
/* Grille collection + accueil */
.first-line-title-grid { font-weight: 500; text-transform: capitalize; font-size: 16px; display: block; color: #555; }
.second-line-title-grid { font-weight: 800; text-transform: capitalize; font-size: 20px; letter-spacing: -0.01em; }
/* Section produit featured */
.first-line-title-featured { font-weight: 500; text-transform: capitalize; font-size: 18px; display: block; color: #555; }
.second-line-title-featured { font-weight: 800; text-transform: capitalize; font-size: 20px; letter-spacing: -0.01em; }
/* Produits associés (blogs) */
.first-line-title-associated { font-weight: 500; text-transform: capitalize; font-size: 18px; display: block; color: #555; }
.second-line-title-associated { font-weight: 800; text-transform: capitalize; font-size: 24px; letter-spacing: -0.01em; }
/* Produits recommandés (page produit + blog) */
.first-line-title-related { font-weight: 500; text-transform: capitalize; font-size: 16px; display: block; color: #555; }
.second-line-title-related { font-weight: 800; text-transform: capitalize; font-size: 18px; letter-spacing: -0.01em; }
/* Mobile */
@media screen and (max-width: 767px) {
.first-line-title { font-size: 18px; }
.second-line-title { font-size: 26px; }
.first-line-title-grid { font-size: 15px; }
.second-line-title-grid { font-size: 19px; }
.first-line-title-featured { font-size: 16px; }
.second-line-title-featured { font-size: 18px; }
.first-line-title-associated { font-size: 16px; }
.second-line-title-associated { font-size: 22px; }
.first-line-title-related { font-size: 14px; }
.second-line-title-related { font-size: 16px; }
/* Centrer titre + prix sur mobile */
.block-title.block-block-title { text-align: center; }
.product-meta li { justify-content: center; }
}
/* ==========================================================================
HOLOGRABME — DIRECTION LO-FI
Typo + effets visuels uniquement.
⚠️ AUCUNE couleur hardcodée ici — les couleurs sont gérées via :
Theme Editor → Couleurs → Génériques + Boutons + Footer.
Seules les opacités du halo (rgba) sont fixées car non exposées en setting.
========================================================================== */
/* --- Imports Google Fonts (DEAD CODE — vérifié cross-model 2026-05-16) ----
Cet @import était ignoré par les browsers (CSS spec : @import doit précéder
toute autre règle, or il vient après les rules Speedfly lignes 1-67). Fraunces
est désormais chargée via dans layout/theme.liquid. Inter est chargée
par le thème Speedfly. Si Zen Maru/JetBrains/Caveat sont nécessaires ailleurs,
les déclarer via dans theme.liquid (PAS via @import ici).
--------------------------------------------------------------------------- */
/* --- Tokens Lo-fi (point unique de vérité — palette + typos) ------------
Tous les snippets custom (top-trust-bar, delivery-badge, wib-claude,
collection-reassurance, lf-* helpers) référencent ces variables.
→ Pour changer la palette globale, modifier UNIQUEMENT ces lignes.
Les rgb space-separated (--lf-*-rgb) permettent d'utiliser une teinte
avec n'importe quelle alpha via rgb(var(--lf-*-rgb) / 0.XX). */
:root {
/* Couleurs */
--lf-accent: #b884d6;
--lf-accent-rgb: 184 132 214;
--lf-accent-hover: #a570c8;
--lf-accent-ink: #161226;
--lf-bg-deep: #161226;
--lf-bg-surface: #1f1838;
--lf-text-warm: #f3eedb;
--lf-text-warm-rgb: 243 238 219;
--lf-text-muted: #b8b0c8;
--lf-text-dim: #6e6688;
--lf-border-subtle: rgb(var(--lf-text-warm-rgb) / 0.08);
--lf-border-strong: rgb(var(--lf-text-warm-rgb) / 0.16);
/* Typos — 2026-06-01 (Killian) : General Sans (Fontshare) remplace Inter PARTOUT (corps/UI/nav/boutons). Inter reste fallback. */
--font-display-lofi: 'Fraunces', Georgia, serif;
--font-body-lofi: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* Surcharge des stacks Speedfly (css-variables.liquid charge AVANT surcharge.css L156 → ceci gagne) : body + nav + boutons en General Sans */
--bodyFontStack: 'General Sans', 'Inter', sans-serif;
--accentFontStack: 'General Sans', 'Inter', sans-serif;
/* Tokens mono/jp/script (JetBrains Mono / Zen Maru / Caveat) retirés 2026-06-04 :
webfonts non chargées + 0 usage (thème + 34 articles + 18 pages). Refonte = 2 polices. */
}
/* --- Titres en Fraunces italic ----------------------------------------- */
.h1.title-primary,
.second-line-title,
.second-line-title-grid,
.second-line-title-featured,
.second-line-title-associated,
.second-line-title-related {
font-family: var(--font-display-lofi);
font-style: italic;
font-weight: 600;
letter-spacing: -0.01em;
text-transform: none;
}
/* Ligne 1 (contexte produit) en Inter — 2026-05-31 (Killian) : Zen Maru retirée → DA 2 polices Fraunces+Inter */
.first-line-title,
.first-line-title-grid,
.first-line-title-featured,
.first-line-title-associated,
.first-line-title-related {
font-family: var(--font-body-lofi);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Section headings + H2/H3 éditoriaux */
.section-title,
section h2.section-heading,
.product-template-tabs-content h2 {
font-family: var(--font-display-lofi);
font-style: italic;
font-weight: 500;
}
/* --- Prix : chiffres alignés, police de corps (D14 — General Sans, plus de mono) --- */
[id^="ProductPrice"],
[id^="comparePrice"],
.product-meta-info .price,
.sale-tag {
font-family: var(--font-body-lofi);
font-feature-settings: "tnum" on, "lnum" on;
letter-spacing: -0.01em;
}
/* --- B1 (2026-05-29) — Prix PDP lisible sur fond sombre ----------------
La couleur du prix vient du setting Theme Editor --colorPrice (#333 par
défaut) → contraste 1,27 sur le deep purple #161226 = quasi invisible.
On force le cream Lo-fi. Même sélecteur que theme.css (.product-meta .h1),
surcharge.css chargé après → override propre, sans !important. */
.product-meta .h1 {
color: var(--lf-text-warm);
font-family: var(--font-body-lofi); /* D14 (2026-05-31) — prix PDP en Inter (unifié avec cards/ATC/sticky), plus Fraunces */
font-size: 18px; /* réduit de 21px → 18px (Inter paraissait trop gros), aligné sur le prix du bouton ATC */
}
/* --- B2 (2026-05-31) — Prix lisible sur les cards (collection + cross-sell) -
Le prix des cards (.product-item--sale-price) était gris peu lisible sur le
fond sombre (même souci que le prix PDP avant le fix). On le passe en cream.
Scopé .product-grid-item (cards) ; le prix PDP reste géré par .product-meta .h1. */
.product-grid-item .product-item--sale-price {
color: var(--lf-text-warm);
}
/* --- B1 2b (2026-05-29) — Avis inline + prix sur une même ligne (PDP) ----
rating-inline est rendu comme 1er
de .product-meta, le prix suit.
.product-meta passe en flex row centré pour aligner avis + prix sur une
ligne. Séparateur vertical avant le prix. Avis sans pill ni avatars (cadre 1,
le pill imitait les pills de variantes = anti-pattern). */
.product-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 8px;
}
.product-meta > li { margin: 0; }
.product-meta > li:empty { display: none; }
.rating-inline {
display: inline-flex;
align-items: center;
gap: 5px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
line-height: 1;
}
.rating-inline__stars { display: inline-flex; align-items: center; gap: 1px; }
.rating-inline__stars svg { width: 11px; height: 11px; }
.rating-inline__score { font-weight: 700; font-size: 12px; color: var(--lf-text-warm); }
.rating-inline__sep { color: var(--lf-text-dim); }
.rating-inline__count { font-size: 11px; color: var(--lf-text-muted); white-space: nowrap; }
/* séparateur vertical avant le prix quand l'avis le précède */
.product-meta--rating + li {
padding-left: 12px;
border-left: 1px solid var(--lf-border-strong);
}
/* --- Badge promo « -13% » (2026-06-09) — pilule DA Lo-fi collée au prix (cf Boku) ----
Le % (.price-saving-percent, injecté par Speedfly dans .sale-tag) était en style brut
+ écarté du prix par le gap flex. On le passe en pilule plum/deep, resserré au prix.
Killian 2026-06-09 : choix « -13% » (pas « Économisez 5€ », masqué via show-saved-amount-false). */
.sale-tag.large .price-saving-percent {
display: inline-block;
background: var(--lf-accent);
color: var(--lf-bg-deep);
font-family: var(--font-body-lofi);
font-weight: 700;
font-size: 12px;
line-height: 1;
padding: 4px 7px;
border-radius: 6px;
letter-spacing: 0;
vertical-align: middle;
}
.sale-tag.large .price-saving-percent .parentheses { display: none; }
/* masque le
« prix unitaire » fantôme : le wrapper .product-price-unit est rendu
même sans prix au litre/kg → le
n'est jamais :empty (whitespace du template) →
il s'intercalait entre prix et badge en bouffant 2 gaps flex. Les lampes n'ont pas de
prix unitaire → on masque le li quand .product-price-unit n'est pas --available. */
.product-meta > li:has(.product-price-unit:not(.product-price-unit--available)) { display: none; }
/* rapproche le badge du prix (entre-deux : ni collé ni écarté) — annule une partie du
gap flex + le whitespace résiduel de la .h1. Killian 2026-06-09 (viser ~17px). */
.product-meta li.show-saved-percent-true { margin-left: -8px; }
/* Mobile : tout sur UNE ligne (note + prix + badge « -13% » à droite, comme sur desktop).
À 390px l'espace dispo (~338px) est juste trop court (note+prix+badge ≈ 388px) → on
compacte étoiles / gaps / badge pour faire tenir le -13% à droite sans retour à la ligne.
Killian VEUT le -13% visible sur mobile. 2026-06-09. */
@media (max-width: 749px) {
.product-meta { gap: 4px 5px; }
.product-meta--rating + li { padding-left: 6px; }
.rating-inline { gap: 4px; }
.rating-inline__stars { gap: 0; }
.rating-inline__stars svg { width: 8px; height: 8px; }
.rating-inline__score { font-size: 11px; }
.rating-inline__count { font-size: 10px; }
.sale-tag.large .price-saving-percent { font-size: 10px; padding: 3px 5px; }
.product-meta li.show-saved-percent-true { margin-left: -5px; }
.product-meta .h1 { font-size: 16px; } /* -2px pour faire tenir prix + badge même sur 360px */
}
/* --- Prix barré (compare-at) dans le bouton ATC principal + le sticky (2026-06-09) ------
Affiche « Ajouter au panier · 39,90 (barré) 34,90 € » : le compare-at barré + atténué,
puis le prix réel. Couleur héritée du bouton (texte deep sur plum), on baisse l'opacité. */
.atc-compare, .lf-cta-compare {
text-decoration: line-through;
opacity: 0.5;
font-weight: 500;
margin-right: 3px;
}
/* D-20 (2026-06-10, RÉVISÉ — Killian veut GARDER le prix barré dans le bouton, mobile inclus)
Le wrap sur 2 lignes venait du libellé « Ajouter au panier » qui se coupait entre les mots
quand le barré l'a rallongé. Fix SANS rien retirer : on empêche la coupure du libellé
(white-space:nowrap) + on compacte un poil (gap + taille prix) → « Ajouter au panier ·
39,90€ 34,90€ » tient sur UNE ligne, barré conservé. */
@media (max-width: 767px) {
.btn-atc--with-price { gap: 5px; }
.btn-atc--with-price [class*="addToCartText"] { white-space: nowrap; }
.btn-atc--with-price .atc-price,
.btn-atc--with-price .atc-compare { font-size: 0.92em; }
}
/* --- Panier (page + à venir mini-cart) : prix barré atténué AVANT le prix réel (style Boku)
+ pastille « Vous économisez X€ » plum cohérente avec le badge -13%. 2026-06-10. */
.cart-item-3 .h5 s,
.cart-item .h5 s {
opacity: 0.5;
font-weight: 500;
margin-right: 6px;
font-size: 0.82em;
}
.lf-cart-savings {
display: inline-block;
margin-top: 5px;
color: var(--lf-bg-deep);
background: var(--lf-accent);
font-weight: 700;
font-size: 12px;
padding: 3px 8px;
border-radius: 6px;
}
/* Mini-cart (drawer = fond CREAM) : prix barré compare-at injecté en JS, avant le prix réel.
⚠️ La règle D-19 `s .money` force cream 0.5 !important (pensée pour la PDP SOMBRE) → sur le
drawer cream les chiffres deviennent invisibles (cream/cream), on ne voyait que le trait.
On force le compare en DEEP (lisible sur cream), atténué via opacity. */
.mini-cart-compare { opacity: 0.5; font-weight: 500; margin-right: 5px; font-size: 0.85em; color: var(--lf-bg-deep); }
.mini-cart-compare s { text-decoration: line-through; }
.mini-cart-compare s .money { color: var(--lf-bg-deep) !important; }
/* D-20b (2026-06-10) — FIX régression mobile drawer : le barré injecté AVANT le prix
réel, en flux inline, élargissait .mini-cart__item-prices (colonne étroite, width:20%)
→ le couple « 39,90€ 34,90€ » débordait SOUS la croix de suppression (×). On empile
le barré AU-DESSUS du prix réel (chacun sur sa ligne, la colonne reste étroite). */
.mini-cart-compare { display: block; margin-right: 0; line-height: 1.15; }
.mini-cart__item-prices { white-space: nowrap; }
/* Police Ryviu retiree 2026-06-22 (bascule Judge.me, plus de .r--* sur le site). */
/* --- B1 2b — pills variantes côte à côte (2 colonnes) sur la PDP ----------
Défaut thème : chaque .swatch-element fait ~185px (min-width du label) → 2 ne
tiennent pas dans les 345px → elles s'empilent. Fix robuste = CSS grid 2 col
(1fr ≈ 168px chacune, "télécommande" rentre). min-width:0 casse le min-width
du label. Scopé .form-primary (pas les cards collection). */
.form-primary .swatch .swatch-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
}
.form-primary .swatch .swatch-element {
margin: 0;
min-width: 0;
max-width: none;
}
.form-primary .swatch-element label {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-width: 0;
box-sizing: border-box;
white-space: normal;
overflow: visible;
line-height: 1.15;
padding: 7px 10px;
font-size: 12px; /* compact : "Sans télécommande" tient sur 1 ligne */
border-radius: 10px;
}
/* --- Halo lumineux sur la photo produit -------------------------------- */
/* Effet "lampe allumée" via overlay screen-blend.
Opacités/positions fixées car non exposables en settings.
La teinte ambre reste minoritaire ; si on veut la changer, c'est ici. */
.product-photo-container.frame {
position: relative;
overflow: hidden;
}
.product-photo-container.frame::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(70% 55% at 50% 60%, rgb(var(--lf-accent-rgb) / 0.22), transparent 65%);
mix-blend-mode: screen;
opacity: 0.85;
transition: opacity 0.3s ease;
}
.product-photo-container.frame:hover::after {
opacity: 1;
}
/* --- Helpers utilitaires pour snippets custom à venir ------------------ */
/* Trust pills row (ligne d'icônes + texte sous le prix) */
.lf-trust-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0;
padding: 12px 16px;
border: 1px solid currentColor;
border-radius: 12px;
font-size: 0.85rem;
opacity: 0.85;
}
.lf-trust-pills > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lf-trust-pills > span + span::before {
content: "·";
margin-right: 4px;
opacity: 0.4;
}
/* Utilitaires typo lf-stat / lf-caption / lf-jp / lf-mono RETIRÉS le 2026-06-04 :
code mort (stats_row supprimé en Phase 1 ; classes inutilisées = 0 usage thème
+ 34 articles + 18 pages vérifiés API ; webfonts JetBrains/Zen Maru/Caveat jamais
chargées). Refonte = 2 polices uniquement : Fraunces + General Sans. */
/* Card avec halo bas — réutilisable pour objections / variantes / cross-sell */
.lf-halo-card {
position: relative;
border: 1px solid var(--lf-border-subtle);
border-radius: 12px;
padding: 20px;
overflow: hidden;
}
.lf-halo-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(60% 50% at 50% 90%, var(--lf-card-halo, rgb(var(--lf-accent-rgb) / 0.12)), transparent 70%);
mix-blend-mode: screen;
}
/* --- AMBIANCE LO-FI — halos diagonaux + grain SVG ----------------------
Repris de Claude Design V3 (palette D Lo-fi 4am).
Halo : violet top-left + orange bottom-right, screen blend, page entière.
Grain : feTurbulence SVG en overlay blend, dosable via --lofi-grain.
z-index bas pour ne JAMAIS passer au-dessus du header/modal/popups.
-------------------------------------------------------------------- */
:root {
--lofi-halo: 1;
--lofi-grain: 1;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 55% 45% at 15% 5%, rgb(var(--lf-accent-rgb) / 0.28), transparent 60%),
radial-gradient(ellipse 65% 50% at 95% 100%, rgba(244, 144, 108, 0.22), transparent 60%);
mix-blend-mode: screen;
opacity: var(--lofi-halo, 1);
transition: opacity 0.3s ease;
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: calc(0.14 * var(--lofi-grain, 1));
mix-blend-mode: overlay;
transition: opacity 0.3s ease;
}
/* --- D-15 (2026-06-09) — Télécommande INCLUSE 34,90 (batch 390 lampes 3D taggées 'tc-incluse').
"Avec télécommande" passée à 34,90 + position 1 (défaut soumis) via API → les 2 variantes
valent 34,90, le sélecteur Sans/Avec est redondant : on le masque. PAS de note buy-box : la
bulle galerie .lf-tc-bubble "Télécommande 16 couleurs offerte · valeur 5€" le dit déjà
(sinon doublon avec le bonus en haut, Killian 2026-06-09). Le form soumet le défaut (Avec). */
/* D-15b (2026-06-09) — cacher UNIQUEMENT l'option télécommande (label + swatches), garder
les autres options (Nombre de personnes / Formes / Feutres sur les lampes perso multi-options).
:has() cible le bloc swatch contenant .avec-telecommande + son label (container précédent). */
body.tc-incluse .swatch.variant-images:has(.avec-telecommande) { display: none !important; }
body.tc-incluse .cont-selector.swatch-container { display: none !important; }
/* D-15c (2026-06-09) URGENT — le STICKY rendait ses propres pills variantes (.lf-sticky-pills)
→ sur un produit tc-incluse on pouvait re-choisir « Sans télécommande » alors que le sélecteur
de la fiche est masqué (D-15b). Même logique : on masque les pills du sticky. Le sticky soumet
la variante par défaut (« Avec », 34,90). Le label reste masqué via .lf-sticky-d--has-pills. */
body.tc-incluse .sticky-atc .lf-sticky-pills { display: none !important; }
/* D-19 (2026-06-09) — prix barré (compare-at) LISIBLE : Speedfly le rend en #333, quasi
invisible sur le fond sombre #161226. On le passe en cream atténué (PDP + cards). */
.product-meta s, .product-meta del,
.product-item--price s, .product-item--price del,
s .money, del .money { color: rgba(243, 238, 219, 0.5) !important; }
/* Avis = Judge.me depuis 2026-06-22. */
/* --- Top trust bar : cachée quand le header devient sticky (scroll) ------
Speedfly ajoute .header-scroll-on sur .cont-header au scroll. La
top-trust-bar (rating + pills) se cache au scroll → header sticky
compact. Comportement matchant CD V3 (visible au repos, hidden au scroll).
⚠️ 2026-05-21 — on NE cache PLUS .topheader au scroll.
Le bandeau .topheader (message statique "Livraison Offerte") est visible
en mobile. Le masquer au scroll changeait la hauteur du header en plein
scroll → désync avec le calage du header sticky → un rectangle sombre
vide ("gros carré") apparaissait au scroll. Bug mobile-only : en desktop
≥768px .topheader est déjà display:none en permanence, donc aucune
variation de hauteur, aucun bug. On garde donc le bandeau visible en
continu (message Livraison Offerte permanent en mobile). Killian 2026-05-21.
La trust-bar (section {% section 'top-trust-bar' %}) garde son hide au
scroll : c'est un flex div propre, aucun glitch, et ça garde le header
sticky compact en desktop. :has() cible la section depuis l'état sticky. */
body:has(.cont-header.header-scroll-on) .shopify-section--top-trust-bar {
display: none;
}
/* --- Header transparent à scroll 0, opaque au scroll ---------------------
⚠️ REVERT COMPLET 2026-05-28 → état d'avant ce matin. Killian a dit "REVIENS
COMME C'ÉTAIT AVANT QUE TU FASSES DE LA MERDE". Scope restauré
body:not(.template-index) : la home garde son système header transparent
natif Speedfly, les autres pages utilisent notre toggle .lf-header-solid.
Éléments à fond #161226 ciblés : .cont-header (conteneur) + .nav-bar
(le bloc menu — sinon il reste un rectangle noir en mode transparent).
────────────────────────────────────────────────────────────────────────── */
body:not(.template-index) .header-section .cont-header,
body:not(.template-index) .header-section .cont-header .nav-bar,
body:not(.template-index) .header-section .cont-header .header-grid__logo img {
transition: background-color 280ms ease, filter 280ms ease;
}
body:not(.template-index) .header-section .cont-header:not(.lf-header-solid),
body:not(.template-index) .header-section .cont-header:not(.lf-header-solid) .nav-bar {
background-color: transparent;
}
body:not(.template-index) .header-section .cont-header .header-grid__logo img {
filter: none; /* logo Holograbme 9c déjà cream/plum — ne PAS inverser en blanc plat */
}
/* Logo 9c — forcer le ratio du PNG (1530x456) : neutralise les width/height attrs
hérités de l'ancien logo (1200x300) pour éviter toute déformation. */
.header-grid__logo .logo-header,
.header-grid__logo .logo-header-transparent,
.mobile-link-logo img {
aspect-ratio: 1530 / 456;
height: auto;
object-fit: contain;
}
body:not(.template-index) .header-section .cont-header.lf-header-solid,
body:not(.template-index) .header-section .cont-header.lf-header-solid .nav-bar {
background-color: #161226;
}
/* --- Drawer mobile menu OPAQUE en permanence (2026-05-28 — fix v2)
v1 spécificité (0,3,0) loose contre revert (0,5,0) qui force transparent →
drawer restait transparent. v2 match la spécificité 5-classes + source order. */
@media (max-width: 767px) {
body:not(.template-index) .header-section .cont-header:not(.lf-header-solid) .nav-bar,
body:not(.template-index) .header-section .cont-header.lf-header-solid .nav-bar,
body.template-index .header-section .cont-header .nav-bar {
background-color: #161226;
}
}
/* --- Top trust bar : forcer le wrapper Speedfly à prendre full width ----
`.topheader__wrapper` est en `display: flex` sans `flex: 1` quand il n'y
a pas de liens quick-access. Résultat : il shrinke à la taille intrinsèque
du contenu et se centre. On force flex:1 pour qu'il occupe la largeur
complète et que `space-between` (rating gauche / pills droite) fonctionne.
Conservé en filet de sécurité si free-shipping bar ou quick-access
sont réactivés depuis Theme Editor. */
.topheader .topheader__wrapper {
flex: 1;
}
/* --- PDP sticky gallery -------------------------------------------------
Galerie photo collée pendant le scroll des infos produit (desktop ≥1024px).
3 préreqs critiques :
1. `.wrapper1` a `overflow:hidden` dans theme.css → tue position:sticky
sur tous ses descendants. On override `overflow:visible` UNIQUEMENT
sur la PDP (clear:both inutile : .grid-content est en flex).
2. La classe `.pdp-gallery-block` remplace l'inline style hérité
(`flex:1 0 100%`) qui forçait la galerie en pleine largeur même
dans un grid_open 50%.
3. CRITIQUE : on laisse `.grid-content` au défaut flex `align-items: stretch`
pour que les 2 colonnes (grid_open_1 et grid_open_2) aient la même
hauteur. Sinon grid_open_1 (parent direct de la galerie) se limite
à la hauteur intrinsèque de la galerie (~791px) et le sticky n'a
pas de range. Avec stretch, grid_open_1 prend la hauteur de
grid_open_2 (~5000px). La galerie reste en haut grâce à
`align-self: flex-start`.
Top offset = 90px (couvre la majorité des configs header Speedfly).
Si le header change de hauteur via Theme Editor, le merchant peut
override via la variable CSS `--pdp-sticky-top` dans :root.
TOGGLE Theme Editor (block images → "Galerie sticky pendant le scroll") :
• Activé (default) : ajoute la classe `.pdp-gallery-block--sticky`
• Désactivé : la galerie défile normalement avec le reste
Les overrides wrapper1 + margin-inline restent inconditionnels (pas d'effet
visible si pas de sticky, juste un overflow:visible inoffensif). */
.section-product-single .wrapper1 {
overflow: visible;
}
.pdp-gallery-block {
margin-inline: auto;
}
@media screen and (min-width: 1024px) {
/* Spécificité doublée (.pdp-gallery-block.pdp-gallery-block--sticky = 0,2,0) pour
battre `.lf-bubble-anchor { position: relative }` (0,1,0, déclaré plus bas L~1697,
ajouté en Phase 1 pour ancrer la bulle). Sans ce bump, `position:relative` gagnait
par ordre source → sticky cassé ET `top:90px` poussait l'image 90px trop bas.
Un élément sticky ancre tout aussi bien la bulle absolue. */
.pdp-gallery-block.pdp-gallery-block--sticky {
position: sticky;
top: var(--pdp-sticky-top, 90px);
align-self: flex-start;
}
/* Sticky OFF : on ne stretch PAS les colonnes — sinon grid_open_1 stretch
à la hauteur de grid_open_2 (~5000px) et crée un grand espace vide sous
la galerie. Avec :has() négatif, on cible le cas où il n'y a pas de
.pdp-gallery-block--sticky dans .grid-content. */
.section-product-single .grid-content:not(:has(.pdp-gallery-block--sticky)) {
align-items: flex-start;
}
}
/* --- PDP galerie refondue (Phase 2, Plan 02-03) -------------------------
Port du CSS validé aux mockups (mobile carousel peek + dots, desktop vue
éclatée). Tokens --lf-* uniquement, no !important, logical properties.
⚠️ overflow-x UNIQUEMENT sur .pdp-carousel (scroller interne) ; jamais sur
.pdp-gallery-block (ancre de la bulle D-10, doit rester overflow visible),
ni sur .pdp-gallery. Le bloc sticky desktop (variante A) ci-dessus = INTACT. */
/* A. CAROUSEL MOBILE — peek ~48px de l'image suivante (slide = 100% - inset, gap 8px).
Killian (2026-06-05) : montrer PLUS de la photo d'après, cible entre Boku (peu) et Horace (bcp). */
.pdp-gallery {
position: relative;
--pdp-slide-inset: 56px; /* largeur retirée à chaque slide → peek = inset - gap(8) = 48px */
}
.pdp-carousel {
display: flex;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pdp-carousel::-webkit-scrollbar { display: none; }
.pdp-carousel__slide {
flex: 0 0 calc(100% - var(--pdp-slide-inset));
scroll-snap-align: start;
}
.pdp-carousel__slide img {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 14px;
background: var(--lf-bg-surface);
}
.pdp-single img {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: 14px;
background: var(--lf-bg-surface);
}
/* B. DOTS (D-02) — overlay EN BAS de l'image (comme Boku/Horace), pas sous l'image.
Killian (2026-06-05) : les anciens dots #6e6688 sur fond sombre = invisibles.
Fix : posés sur l'image (gain above-the-fold) + cream translucide + ombre portée
(lisibles sur image claire OU sombre), dot actif plum. Hit-area ≥44px via ::after transparent.
Centrés sur l'image active : le conteneur s'arrête à --pdp-slide-inset (largeur d'un slide). */
.pdp-dots {
position: absolute;
inset-block-end: 12px;
inset-inline: 0 var(--pdp-slide-inset);
z-index: 2;
display: flex;
justify-content: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
pointer-events: none; /* le swipe traverse, seuls les dots captent le tap */
}
.pdp-dots li { display: flex; pointer-events: auto; }
.pdp-dot {
position: relative;
inline-size: 9px;
block-size: 9px;
border-radius: 50%;
border: none;
background: rgb(var(--lf-text-warm-rgb) / 0.6); /* cream translucide */
box-shadow: 0 1px 3px rgb(0 0 0 / 0.5); /* tient sur n'importe quelle image */
padding: 0;
cursor: pointer;
transition: background-color 250ms ease, transform 250ms ease;
}
.pdp-dot::after { /* hit-area transparente ~45px sans agrandir le point visuel */
content: "";
position: absolute;
inset: -18px -10px;
}
.pdp-dot.is-active {
background: var(--lf-accent); /* plum #b884d6 */
transform: scale(1.18);
}
.pdp-dot:focus-visible {
outline: 2px solid var(--lf-accent);
outline-offset: 3px;
}
/* C. VUE ÉCLATÉE DESKTOP (≥1024px) : grille de vignettes, dots masqués, hero seul */
@media screen and (max-width: 1023px) {
.pdp-exploded__grid { display: none; }
}
@media screen and (min-width: 1024px) {
.pdp-dots { display: none; }
.pdp-carousel {
display: block;
overflow: visible;
}
.pdp-carousel__slide:not(.is-hero) { display: none; }
/* Hero desktop PLEIN CADRE (look Boku). Killian (2026-06-05) : object-fit:contain + cap
letterboxait l'image carrée → barres latérales façon 4:3. Fix = cover, carré, pleine
largeur de colonne, AUCUNE barre. La grille 2-col compacte passe juste dessous. */
.pdp-carousel__slide.is-hero img {
inline-size: 100%;
aspect-ratio: 1;
max-block-size: none;
object-fit: cover;
border-radius: 16px;
}
/* Grille vignettes : 2 par rangée (look Boku « 2 en dessous puis 2 »), vignettes plus grandes.
Killian (2026-06-05) : avant repeat(4) = 4 mini-vignettes en une rangée, trop petites. */
.pdp-exploded__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
list-style: none;
margin: 16px 0 0;
padding: 0;
}
.pdp-exploded__grid li { display: flex; }
.pdp-thumb {
aspect-ratio: 1;
inline-size: 100%;
border: 1px solid var(--lf-border-subtle);
background: var(--lf-bg-surface);
padding: 0;
cursor: pointer;
overflow: hidden;
border-radius: 10px;
transition: border-color 250ms ease;
}
.pdp-thumb img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.pdp-thumb:hover { border-color: var(--lf-border-strong); }
.pdp-thumb.is-active { border: 2px solid var(--lf-accent); }
.pdp-thumb:focus-visible {
outline: 2px solid var(--lf-accent);
outline-offset: 3px;
}
}
/* Mode "pleine largeur description" (drag-and-drop dans Theme Editor) :
pour revenir au layout classique (galerie + infos en 2 cols, puis
description + tabs en full-width sous), le merchant déplace les blocs
Description et Onglets HORS de Grille-Ouverture #2 via Theme Editor.
Aucun CSS dédié nécessaire — Speedfly gère naturellement le rendu. */
/* --- Prix dans bouton ATC -----------------------------------------------
Pattern CRO 2026 (Stripe / Shopify Dawn / top stores) : le prix s'affiche
dans le bouton "Ajouter au panier" après le texte, séparé par un point.
Toggle Theme Editor : block "Formulaire d'achat" → "Afficher le prix dans
le bouton Ajouter au panier" (default ON).
Le prix s'update automatiquement au changement de variant (snippet
`atc-price-update.liquid` qui écoute le hidden