/* ==========================================================================
   Boutique « studio » — boutique-studio.css
   Mise en page propre à la Boutique : l'étal (hero), la barre collante, la grille FLIP (cartes d'app.js enveloppées),
   la vue rapide, l'état vide, la rassurance, la passerelle vers l'Atelier.
   Vocabulaire : tokens --st-* (studio.css) + variables de main.css (--header-h, --radius…). Seuls transform / opacity /
   clip-path / filter sont animés. Charger APRÈS main.css et studio.css.
   ========================================================================== */

/* ---------- Éléments masqués par l'attribut hidden : rien ne doit les réafficher (display des composants) ---------- */
.bq-clear[hidden], .bq-empty[hidden], .bq-hero-note[hidden], .bq-facet-toggle[hidden], .facet-count[hidden], .active-filters[hidden], #loadMore[hidden], #pubBanner[hidden] { display: none !important; }

/* ---------- Chorégraphie du hero : état initial (JS + GSAP actifs), tout visible sinon ---------- */
html.lfn-js .bq-hero .h-in { opacity: 0; will-change: transform, opacity; animation: bq-safety 1ms 3s forwards; }
html.lfn-js .bq-hero .etal-item { opacity: 0; animation: bq-safety 1ms 3s forwards; }
html.lfn-js.lfn-rm .bq-hero .h-in, html.lfn-js.bq-nogsap .bq-hero .h-in,
html.lfn-js.lfn-rm .bq-hero .etal-item, html.lfn-js.bq-nogsap .bq-hero .etal-item { opacity: 1; animation: none; }
/* le titre reste invisible tant qu'il n'est pas découpé (évite le flash en police de secours) ; garde-fou si le JS n'aboutit pas */
html.lfn-js:not(.lfn-rm):not(.bq-nogsap) #bqTitle:not(.is-split) { opacity: 0; animation: bq-safety 1ms 2.5s forwards; }
@keyframes bq-safety { to { opacity: 1; } }

/* ---------- Hero : l'étal ---------- */
.bq-hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); overflow: hidden; }
.bq-hero::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(60% 60% at 70% 40%, rgba(243,237,249,.9), transparent 70%); pointer-events: none; }
.bq-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.bq-hero-copy { display: grid; gap: 18px; align-content: center; }
.bq-title { max-width: 15ch; margin: 2px 0 0; font-size: clamp(2.4rem, 1.3rem + 3.5vw, 4.4rem); }
.bq-hero .st-lead { max-width: 46ch; margin: 0; }
.bq-univers { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.bq-univers .st-chip { background: transparent; }
.bq-univers .st-chip:hover { background: #fff; }
.bq-univers .st-chip[aria-pressed="true"], .bq-univers .st-chip[aria-pressed="true"]:hover { background: var(--st-violet); border-color: var(--st-violet); color: #fff; }
.bq-hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--st-fs-1); color: var(--st-ink-soft); margin: 6px 0 0; }

.bq-etal { position: relative; height: clamp(420px, 44vw, 560px); }
.etal-item { position: absolute; left: var(--l, auto); right: var(--r, auto); top: var(--t, auto); bottom: var(--b, auto); width: var(--w, 200px); will-change: transform; }
.etal-fan { will-change: transform, opacity; }
.etal-item .st-pola { --ar: 1 / 1; }
.etal-item .st-pola figcaption { font-size: 1.25rem; }
.etal-tag { position: absolute; left: 0; top: 0; z-index: 3; }
@media (max-width: 1100px) { .bq-etal { height: clamp(380px, 40vw, 480px); } .etal-item { width: calc(var(--w, 200px) * .86); } }
@media (max-width: 900px) {
  .bq-hero-grid { grid-template-columns: 1fr; }
  .bq-etal { height: auto; display: flex; justify-content: center; align-items: flex-start; gap: 4%; padding: 24px 2% 10px; }
  .etal-item { position: static; width: 31%; }
  .etal-item:nth-child(2) { margin-top: 26px; } .etal-item:nth-child(3) { margin-top: 10px; }
  .etal-lg { display: none; }
  .etal-tag { position: absolute; left: -2px; top: 2px; }
  .etal-item .st-pola figcaption { font-size: 1.05rem; }
  .etal-item .st-pola { padding: 7px 7px 30px; }
}
@media (max-width: 480px) { .bq-hero { padding-top: 20px; } .bq-title { max-width: none; } .etal-tag { font-size: .72rem; } }

/* ---------- Affiche pub (main.css .pub-banner) : alignée sur la boutique ---------- */
.bq-shop { position: relative; }
.bq-shop .pub-banner { margin: 0 0 18px; }

/* ---------- Barre collante sous l'en-tête d'app.js (#siteHeader, sticky à 0) : recherche, univers, filtres, tri ---------- */
.bq-bar-sentinel { height: 1px; margin-top: -1px; }
.bq-bar { position: sticky; top: var(--bq-bar-top, 0px); z-index: 60; padding: 12px 0; }
.bq-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250,247,242,.9); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(230,218,242,.7); opacity: 0; transition: opacity var(--st-d-short) var(--st-ease-out); }
.bq-bar.is-stuck::before { opacity: 1; }
body.lfn-layer-open .bq-bar, body.lfn-film-playing .bq-bar { z-index: 10; }
.bq-bar-in { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) auto auto; grid-template-areas: "search filters toggle sort"; gap: 12px 14px; align-items: center; }
.bq-search { grid-area: search; } .bq-filters { grid-area: filters; } .bq-facet-toggle { grid-area: toggle; } .bq-sort { grid-area: sort; }
.bq-search { position: relative; display: flex; align-items: center; margin: 0; }
.bq-search svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--st-ink-soft); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.bq-search-input { width: 100%; min-height: 44px; padding: 0 76px 0 42px; background: #fff; border: 1.5px solid var(--st-line); border-radius: var(--st-r-pill); font: inherit; font-size: var(--st-fs-1); color: var(--st-ink); appearance: none; -webkit-appearance: none; transition: border-color var(--st-d-micro); }
.bq-search-input::placeholder { color: #9b8fb0; }
.bq-search-input::-webkit-search-cancel-button { display: none; }
.bq-search-input:hover { border-color: #cdbddf; }
.bq-search-input:focus-visible { outline: none; border-color: var(--st-violet); box-shadow: 0 0 0 4px rgba(91,63,122,.14); border-radius: var(--st-r-pill); }
.bq-kbd { position: absolute; right: 14px; font: 700 .72rem var(--st-font-title); color: var(--st-ink-soft); padding: 2px 7px; border: 1px solid var(--st-line); border-bottom-width: 2px; border-radius: 5px; background: var(--st-cream); pointer-events: none; transition: opacity var(--st-d-micro); }
.bq-search.is-typing .bq-kbd { opacity: 0; }
.bq-clear { position: absolute; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--st-ink); background: var(--st-lavender); cursor: pointer; }
.bq-clear:hover { background: var(--st-line); }
.bq-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; -webkit-overflow-scrolling: touch; }
.bq-filters::-webkit-scrollbar { display: none; }
.bq-filters .st-chip { flex: none; min-height: 38px; padding: 0 12px; font-size: .84rem; }
.bq-filters.is-scroll { mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.st-chip .n:empty { display: none; }
.bq-facet-toggle { min-height: 38px; padding: 0 12px; font-size: .84rem; }
.bq-facet-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bq-facet-toggle[hidden] { display: none; }
.bq-sort { position: relative; display: inline-flex; align-items: center; }
.bq-sort select { appearance: none; -webkit-appearance: none; min-height: 38px; padding: 0 34px 0 14px; border-radius: var(--st-r-pill); border: 1.5px solid var(--st-line); background: #fff; font-family: var(--st-font-title); font-weight: 700; font-size: .86rem; color: var(--st-ink); cursor: pointer; transition: border-color var(--st-d-micro); }
.bq-sort select:hover, .bq-sort select:focus-visible { border-color: var(--st-violet); }
.bq-sort select:focus-visible { outline: none; box-shadow: var(--st-sh-focus); border-radius: var(--st-r-pill); }
.bq-sort svg { position: absolute; right: 14px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 900px) {
  .bq-bar-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search sort" "filters toggle"; gap: 10px; }
  .bq-facet-toggle { flex: none; }
}
@media (max-width: 480px) {
  .bq-bar { padding: 10px 0; }
  .bq-bar-in { gap: 10px; }
  .bq-search-input { padding-right: 44px; font-size: .9rem; }
  .bq-kbd { display: none; }
  .bq-sort select { padding: 0 30px 0 10px; font-size: .82rem; }
  .bq-facet-toggle { padding: 0 10px; }
}
/* facettes (main.css .facets-panel) : juste sous la barre, dans le flux */
#facetsWrap .facets-panel.open { margin-top: 6px; }

/* ---------- Catalogue ---------- */
.bq-catalogue { padding: clamp(18px, 3vw, 32px) 0 clamp(48px, 6vw, 80px); }
.bq-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 20px; }
.bq-cat-head h2 { margin: 0; }
.bq-cat-head #catLabel { display: inline-block; will-change: transform, opacity; }
.bq-count { font-family: var(--st-font-text); font-weight: 600; font-size: var(--st-fs-1); letter-spacing: 0; margin: 0; }
.bq-hint { max-width: 48ch; margin: 0; }
.bq-hint .if-touch { display: none; }
@media (hover: none) { .bq-kbd { display: none; } .bq-hint .if-hover { display: none; } .bq-hint .if-touch { display: inline; } }
html.bq-touch .bq-kbd, html.bq-touch .bq-hint .if-hover { display: none; } html.bq-touch .bq-hint .if-touch { display: inline; }
.bq-grid[aria-busy="true"] { min-height: 50vh; }
/* la grille FLIP garde les colonnes de main.css (.product-grid 4 / 3 / 2) ; les enveloppes portent le mouvement, pas les cartes */
.bq-grid.st-flip-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1080px) { .bq-grid.st-flip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1050px) { .bq-grid.st-flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bq-grid.st-flip-grid { grid-template-columns: 1fr 1fr; gap: 13px; } }
.bq-item { position: relative; border-radius: var(--radius); will-change: auto; outline-offset: 4px; }
.bq-item:focus:not(:focus-visible) { outline: none; }
.bq-item > .product-card { height: 100%; }
.bq-item .st-tilt-glare { border-radius: var(--radius); }
/* survol : l'inclinaison 3D (enveloppe) remplace la levée de main.css quand le curseur studio est là ; ailleurs, levée douce */
html.lfn-has-cursor .bq-item .product-card:hover { transform: none; }
.bq-item .product-card:hover { transform: translateY(-4px); }
.bq-item .product-thumb { cursor: pointer; }
/* verso au survol (image_back) et fondu des pastilles */
.bq-item .product-thumb .bq-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out); z-index: 1; }
.bq-item .product-thumb > img:not(.bq-alt) { transition: opacity var(--st-d-mid) var(--st-ease-out), transform 0.7s var(--ease-out); }
.bq-item .product-card:hover .product-thumb.has-alt .bq-alt, .bq-item .product-thumb.is-swapping .bq-alt { opacity: 1; }
.bq-item .product-card:hover .product-thumb.has-alt > img:not(.bq-alt), .bq-item .product-thumb.is-swapping > img:not(.bq-alt) { opacity: 0; }
.bq-item .product-thumb .product-badge, .bq-item .product-thumb .stock-badge, .bq-item .product-thumb .op-badge, .bq-item .wish-btn { z-index: 2; }
.bq-badge-solid { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: .35em; background: var(--st-ink); color: #fff; font-family: var(--st-font-title); font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1; padding: 6px 11px; border-radius: 100px; }
.bq-badge-solid::first-letter { color: var(--st-coral); }
.product-thumb .product-badge ~ .bq-badge-solid { top: 48px; }
.bq-item.is-out .product-thumb > img { filter: grayscale(.7); opacity: .6; }
@media (max-width: 540px) { .bq-item .product-cta { display: none; } }   /* téléphone : « Ajouter / Choisir » et « Vue rapide » suffisent, la carte reste courte */
.bq-item .product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bq-swatches { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.bq-swatches .more { font-size: .72rem; font-weight: 700; color: var(--st-ink-soft); margin-left: 2px; }
.bq-actions { display: flex; gap: 8px; margin-top: 10px; }
.bq-actions .btn { flex: 1; min-height: 40px; padding: .5em .7em; font-size: .88rem; white-space: nowrap; }
.bq-actions .btn[disabled] { opacity: .5; }
@media (max-width: 760px) {
  .bq-item .product-body { padding: 10px 10px 12px; gap: 4px; }
  .bq-item .product-name { font-size: .92rem; }
  .bq-item .product-price { font-size: 1rem; }
  .bq-actions { flex-direction: column; gap: 6px; }
  .bq-actions .btn { min-height: 36px; font-size: .84rem; padding: .5em .6em; }
  .bq-badge-solid { top: 8px; left: 8px; padding: 4px 8px; font-size: .64rem; }
  .product-thumb .product-badge ~ .bq-badge-solid { top: 38px; }
}
.bq-more { text-align: center; margin: 24px 0 10px; }
/* intertitre entre les pièces déjà décorées et les pièces neutres (tri « Nos suggestions ») : une rangée entière de la grille */
.bq-sep[hidden] { display: none !important; }
.bq-sep { grid-column: 1 / -1; display: grid; justify-items: start; gap: 8px; margin: clamp(10px, 2vw, 26px) 0 0; padding: clamp(20px, 2.6vw, 30px) 0 4px; border-top: 1px solid var(--st-line); }
.bq-sep-title { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.bq-sep-text { max-width: 90ch; margin: 0; text-wrap: balance; }   /* une ligne sur ordinateur, deux lignes équilibrées ailleurs */
@media (max-width: 540px) { .bq-sep { padding-top: 16px; gap: 6px; } }

/* ---------- État vide ---------- */
.bq-empty { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px) 0; }
.bq-empty .st-pola { max-width: 300px; justify-self: center; }
.bq-empty-copy { display: grid; gap: 14px; }
.bq-empty-copy h3 { max-width: 20ch; margin: 0; }
.bq-empty-copy .st-lead { margin: 0; }
.bq-empty-copy .st-cluster { margin-top: 8px; }
@media (max-width: 760px) { .bq-empty { grid-template-columns: 1fr; } .bq-empty .st-pola { max-width: 220px; } }

/* ---------- Rassurance ---------- */
.bq-trust { padding: 0 0 clamp(40px, 6vw, 72px); }
.bq-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bq-trust-grid li { display: grid; gap: 4px; padding: 20px 22px; background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-m); box-shadow: var(--st-sh-1); font-size: var(--st-fs-1); }
.bq-trust-grid li b { font-family: var(--st-font-title); font-size: 1.02rem; color: var(--st-ink); }
.bq-trust-grid .ico { display: flex; align-items: center; height: 28px; font-size: 1.25rem; line-height: 1; margin-bottom: 4px; color: var(--st-coral-text); }
@media (max-width: 900px) { .bq-trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bq-trust-grid { grid-template-columns: 1fr; gap: 10px; } .bq-trust-grid li { padding: 16px 18px; } }

/* ---------- Passerelle vers l'Atelier ---------- */
.bq-atelier-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.bq-atelier-media { position: relative; }
.bq-atelier-media img { width: 100%; aspect-ratio: 1200 / 775; object-fit: cover; border-radius: var(--st-r-l); box-shadow: var(--st-sh-2); }
.bq-atelier-media .st-tag { position: absolute; left: -10px; bottom: 26px; }
.bq-atelier-copy { display: grid; gap: 16px; }
.bq-atelier-copy h2 { max-width: 14ch; margin: 0; }
.bq-atelier-copy .st-lead { margin: 0; }
@media (max-width: 900px) { .bq-atelier-grid { grid-template-columns: 1fr; } .bq-atelier-media { order: 2; } .bq-atelier-media .st-tag { left: 10px; } }

/* ---------- Vue rapide (calque du socle .lfn-layer) ---------- */
.bq-qv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 460px; }
.bq-qv .zoom-media { aspect-ratio: 1; }
.bq-qv .zoom-media img { transition: opacity var(--st-d-short) var(--st-ease-out); }
.bq-qv .zoom-media .img-alt { position: absolute; inset: 0; opacity: 0; }
.bq-qv .zoom-media.is-swapping .img-main { opacity: 0; } .bq-qv .zoom-media.is-swapping .img-alt { opacity: 1; }
.bq-qv-badge { position: absolute; right: 14px; top: 14px; z-index: 2; }
.bq-qv-thumbs { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
.bq-qv-thumbs button { width: 54px; height: 54px; padding: 0; border: 2px solid #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--st-sh-1); background: var(--st-cream-2); cursor: pointer; transition: transform var(--st-d-micro) var(--st-ease-out); }
.bq-qv-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.bq-qv-thumbs button:hover { transform: translateY(-2px); }
.bq-qv-thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--st-violet), var(--st-sh-1); }
.bq-qv-body { padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; align-content: start; }
.bq-qv-body .cat { font-size: var(--st-fs-0); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-soft); }
.bq-qv-body h2 { padding-right: 44px; margin: 0; }
.bq-qv-price { font-family: var(--st-font-title); font-weight: 800; font-size: 1.7rem; color: var(--st-violet); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bq-qv-price .price-old { display: inline; font-size: 1rem; }
.bq-qv-price .from { display: block; width: 100%; }
.bq-qv-body .desc { color: var(--st-ink-soft); font-size: var(--st-fs-1); line-height: 1.5; margin: 0; }
.bq-qv-row { display: grid; gap: 8px; }
.bq-qv-row .lbl { font-family: var(--st-font-title); font-weight: 700; font-size: var(--st-fs-0); letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-soft); display: flex; gap: 8px; align-items: baseline; }
.bq-qv-row .lbl output { text-transform: none; letter-spacing: 0; font-family: var(--st-font-text); font-weight: 600; color: var(--st-ink); }
.bq-qv-row .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-qv-row .st-swatch { width: 24px; height: 24px; }
.bq-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-size { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1.5px solid var(--st-line); border-radius: 8px; font-family: var(--st-font-title); font-weight: 700; font-size: .84rem; color: var(--st-ink); background: #fff; }
.bq-size.is-out { color: var(--st-ink-soft); text-decoration: line-through; opacity: .6; }
.bq-qv-note { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--st-fs-0); color: var(--st-ink-soft); }
.bq-qv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* studio.css remet à zéro tous les <button> du calque : on redonne aux boutons de la vue rapide leur habit de main.css */
.bq-qv button.btn { padding: 15px 30px; border: 2px solid transparent; border-radius: 100px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: normal; }
.bq-qv button.btn-primary { background: var(--corail-cta); color: #fff; box-shadow: 0 8px 24px rgba(201, 75, 58, 0.38); }
.bq-qv button.btn-primary:hover { background: var(--corail-text); }
.bq-qv button.btn-ghost { border-color: var(--violet); color: var(--violet); background: transparent; }
.bq-qv button.btn[disabled] { opacity: .5; pointer-events: none; }
@media (max-width: 760px) {
  .bq-qv { grid-template-columns: 1fr; min-height: 0; }
  .bq-qv .zoom-media { aspect-ratio: 4 / 3; }
  .bq-qv-body { padding: 18px 18px 24px; gap: 12px; }
  .bq-qv-price { font-size: 1.4rem; }
  .bq-qv-actions .btn { flex: 1 1 100%; }
}

/* ---------- Mouvement réduit : rien ne bouge, tout se lit ---------- */
@media (prefers-reduced-motion: reduce) {
  .bq-item .product-card:hover, .bq-qv-thumbs button:hover { transform: none; }
  .bq-item .product-thumb .bq-alt, .bq-item .product-thumb > img, .bq-qv .zoom-media img { transition: none; }
}