/* ==========================================================================
   BH² Group — Finition visuelle : barre de progression, halo de souris, inclinaison 3D des cartes,
   boutons magnétiques, ondulation au clic, titres animés. Les effets liés à la souris ne s'activent que
   sur un appareil à pointeur fin (js/motion.js) ; tout s'éteint avec prefers-reduced-motion.
   ========================================================================== */

/* Barre de progression de lecture */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
  background: linear-gradient(90deg, var(--color-violet-medium), var(--color-orange-primary));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* Halo qui suit la souris (très discret) */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: 1;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(250, 150, 0, 0.13) 0%, rgba(0, 160, 50, 0.07) 38%, transparent 70%);
  transition: opacity 0.4s ease; will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

/* En-tête : ombre douce quand on a défilé */
.site-header { transition: box-shadow 0.3s var(--ease-standard), background-color 0.3s var(--ease-standard); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 40, 10, 0.22); }

/* Inclinaison 3D + reflet lumineux (variables posées par motion.js) */
.has-tilt { transform-style: preserve-3d; }
.has-tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px) scale(1.015) !important;
  transition: transform 90ms linear, box-shadow 0.3s var(--ease-standard) !important;
}
.has-tilt::before {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 0%), rgba(255, 255, 255, 0.38), transparent 55%);
  transition: opacity 0.3s ease;
}
.has-tilt.is-tilting::before { opacity: 1; }

/* Boutons : magnétisme + ondulation */
.is-magnetic { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s var(--ease-standard), background-color 0.25s; will-change: transform; }
.btn { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: rgba(255, 255, 255, 0.45); animation: btn-ripple 0.6s ease-out forwards;
}
@keyframes btn-ripple { to { transform: scale(1); opacity: 0; } }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(250, 150, 0, 0.4); }

/* Texte d'accroche : reflet lumineux qui traverse le mot mis en valeur (le dégradé de marque reste dessous) */
.hero__title em {
  background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%), var(--gradient-brand);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: title-shine 5.5s ease-in-out 1.2s infinite;
}
@keyframes title-shine { 0%, 50% { background-position: 130% 0, 0 0; } 100% { background-position: -130% 0, 0 0; } }

/* Titres de section : trait qui se dessine à l'apparition */
.section-heading h2 { position: relative; padding-bottom: 0.6rem; }
.section-heading h2::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--color-violet-medium), var(--color-orange-primary));
  transform: translateX(-50%) scaleX(0); transition: transform 0.7s 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-heading.is-visible h2::after { transform: translateX(-50%) scaleX(1); }

/* Apparition plus fluide (remplace le rebond) */
.js [data-reveal] { transform: translateY(34px) scale(0.97); filter: blur(4px); }
.js [data-reveal].is-visible { filter: blur(0); transform: none; }
.js [data-reveal] { transition: opacity 600ms var(--ease-standard), transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms ease; }

/* Parallaxe du visuel d'accueil (variables posées par motion.js) */
.hero-slider { transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

/* Images : zoom doux, jamais saccadé */
.category-card__photo, .product-card__media-img { will-change: transform; }

/* Focus clavier net */
:focus-visible { outline: 3px solid var(--color-orange-primary); outline-offset: 2px; border-radius: 6px; }

@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .cursor-glow, .btn-ripple { display: none; }
  .hero__title em { animation: none; }
  .js [data-reveal] { filter: none; }
  .has-tilt.is-tilting { transform: none !important; }
  .hero-slider { transform: none; }
  .section-heading h2::after { transition: none; transform: translateX(-50%) scaleX(1); }
}

/* ===== Fiche produit ===== */
@media (min-width: 900px) {
  .product-info { padding-right: 3.4rem; } /* laisse la place aux boutons flottants à droite */
}
.product-info__name { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.12; overflow-wrap: anywhere; }
.product-info__price { display: inline-block; background: linear-gradient(100deg, var(--color-violet-deep-1), var(--color-violet-medium)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.product-gallery__main { position: relative; cursor: zoom-in; box-shadow: var(--shadow-rest); }
.product-gallery__main img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
.product-gallery__main:hover img { transform: scale(1.7); }
.product-gallery__thumb { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s; }
.product-gallery__thumb:hover { transform: translateY(-3px); }
.product-tabs__tab { position: relative; transition: color 0.25s; }
.product-tabs__panel:not([hidden]) { animation: panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== Panier (tiroir) ===== */
.cart-drawer { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s; }
.cart-drawer.is-open { box-shadow: -24px 0 60px rgba(0, 30, 10, 0.28); }
.cart-drawer.is-open .cart-item { animation: cart-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cart-drawer.is-open .cart-item:nth-child(2) { animation-delay: 60ms; }
.cart-drawer.is-open .cart-item:nth-child(3) { animation-delay: 120ms; }
.cart-drawer.is-open .cart-item:nth-child(n+4) { animation-delay: 180ms; }
@keyframes cart-item-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.cart-badge.is-bumped { animation: badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ===== Accueil : entrée en cascade du texte d'accroche ===== */
.hero__eyebrow, .hero__text, .hero__trust { animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__eyebrow { animation-delay: 0.05s; }
.hero__text { animation-delay: 0.3s; }
.hero__trust { animation-delay: 0.5s; }
.hero__trust-item { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.hero__trust-item:hover { transform: translateY(-3px); }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .product-gallery__main:hover img { transform: none; }
  .product-tabs__panel:not([hidden]), .cart-drawer.is-open .cart-item, .hero__eyebrow, .hero__text, .hero__trust { animation: none; }
}

/* Le message « ajouté au panier » et l'aide du panier s'effacent quand le tiroir est ouvert */
body:has(.cart-drawer.is-open) .cart-toast,
body:has(.cart-drawer.is-open) .cart-hint,
body:has(.cart-drawer.is-open) .cart-bar { display: none; }

/* ===== Boutique : cartes alignées, filtres, chargement ===== */
.product-card__body { flex: 1; }
.product-card__add { margin-top: auto; }
.product-card__media { background: linear-gradient(100deg, var(--color-grey-200) 30%, #f4f4f4 50%, var(--color-grey-200) 70%); background-size: 220% 100%; animation: skeleton 1.4s linear infinite; }
@keyframes skeleton { to { background-position: -120% 0; } }
.filter-option { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s; }
.filter-option:hover { transform: translateX(4px); color: var(--color-violet-deep-1); }
.filters-sidebar { transition: box-shadow 0.3s var(--ease-standard); }
.filters-sidebar:hover { box-shadow: var(--shadow-hover); }

/* ===== Pages d'information : questions fréquentes ===== */
.faq-item { transition: background-color 0.25s; border-radius: 10px; }
.faq-item summary { transition: color 0.2s, padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item summary:hover { padding-left: 6px; color: var(--color-violet-medium); }
.faq-item[open] > :not(summary) { animation: panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* ===== Entrée de page en fondu ===== */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in 0.45s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .product-card__media { animation: none; }
  .faq-item[open] > :not(summary), body { animation: none; }
}

/* ===== Pages d'information : blocs numérotés ===== */
.legal-block {
  position: relative; margin: var(--space-md) 0; padding: var(--space-md) var(--space-md) var(--space-md) 4.2rem;
  background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest);
  transition: box-shadow 0.3s var(--ease-standard), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.legal-block:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.legal-block::before {
  content: var(--legal-n); position: absolute; left: var(--space-md); top: var(--space-md);
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.5rem; line-height: 1.2;
  background: linear-gradient(135deg, var(--color-violet-medium), var(--color-orange-primary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.legal-block > h2 { margin-top: 0; }
.legal-block > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .legal-block { padding-left: var(--space-md); padding-top: 3.2rem; } }

/* ===== Mon compte (tableau de bord) ===== */
.account-header { position: relative; padding: var(--space-md) var(--space-md) var(--space-md) 5rem; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }
.account-header::before {
  content: '\1F464'; position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem;
  background: linear-gradient(135deg, var(--color-violet-medium), var(--color-orange-primary)); color: #fff;
  box-shadow: 0 6px 16px rgba(0, 120, 40, 0.3);
}
.account-section { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); padding: var(--space-md); transition: box-shadow 0.3s var(--ease-standard); }
.account-section:hover { box-shadow: var(--shadow-hover); }
.account-section h2 { position: relative; padding-left: 0.9rem; }
.account-section h2::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--color-violet-medium), var(--color-orange-primary)); }
.auth-order { border-left: 4px solid var(--color-grey-300); background: var(--color-white); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; }
.auth-order:hover { transform: translateX(4px); box-shadow: var(--shadow-rest); }
.auth-order:has([data-status="paid"]) { border-left-color: #1f9d55; }
.auth-order:has([data-status="pending"]), .auth-order:has([data-status="pending_payment"]) { border-left-color: var(--color-orange-primary); }
.auth-order:has([data-status="failed"]), .auth-order:has([data-status="cancelled"]) { border-left-color: #c0392b; }
.tag--status { background: var(--color-grey-200); color: var(--color-ink); }
.tag--status[data-status="paid"] { background: #dff5e7; color: #17753f; }
.tag--status[data-status="pending"], .tag--status[data-status="pending_payment"] { background: #fff0d6; color: #9a5b00; }
.tag--status[data-status="failed"], .tag--status[data-status="cancelled"] { background: #fde3df; color: #a02c20; }
.checkout-invoice-link { display: inline-block; margin-top: 0.3rem; font-weight: 700; transition: transform 0.2s; }
.checkout-invoice-link:hover { transform: translateX(3px); }
.account-header h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }

/* ===== Administration ===== */
body:has(.admin-header) h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.admin-tab { position: relative; transition: color 0.2s, background-color 0.25s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 8px; }
.admin-tab:hover { transform: translateY(-1px); background-color: rgba(0, 160, 50, 0.08); }
.admin-chart-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s; }
.admin-chart-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.admin-table tbody tr { transition: background-color 0.18s; }
.admin-table tbody tr:hover { background-color: rgba(0, 160, 50, 0.06); }
[data-admin-panel]:not([hidden]) { animation: panel-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.admin-header { box-shadow: 0 4px 18px rgba(0, 40, 10, 0.2); position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { [data-admin-panel]:not([hidden]) { animation: none; } .admin-chart-card:hover, .admin-tab:hover { transform: none; } }

/* ===== Logo omniprésent =====
   L'adresse du logo vient de la variable --bh2-logo-url, posée sur <html> par
   js/logo-cache.js (et mise à jour par js/site-settings.js si l'admin change
   le logo) : pas de balise <img> à ajouter dans chaque fenêtre. Le logo a un
   fond blanc : on le pose sur des surfaces blanches ou dans une pastille
   blanche, jamais directement sur une couleur. */

/* Tiroir du panier */
.cart-drawer__header h2 { display: flex; align-items: center; gap: 0.65rem; }
.cart-drawer__header h2::before { content: ""; flex-shrink: 0; width: 68px; height: 34px; background: var(--bh2-logo-url) center / contain no-repeat; }

/* Pastille de logo : aperçu rapide (coin de la photo), pop-up « flash », message « ajouté au panier » */
.quickview-modal::after,
.flash-popup::after,
.cart-toast::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 10px;
  background: var(--bh2-logo-url) center / 86% auto no-repeat #fff;
  box-shadow: 0 4px 14px rgba(43, 15, 73, 0.22);
}
.quickview-modal::after { top: 12px; left: 12px; width: 78px; height: 36px; }
.flash-popup::after,
.cart-toast::after { top: -13px; left: 14px; width: 66px; height: 28px; }

/* Pop-up « produits locaux » : dans son en-tête (la carte rogne ce qui dépasse) */
.local-popup__head::before { content: ""; flex-shrink: 0; width: 66px; height: 30px; background: var(--bh2-logo-url) center / contain no-repeat; }

/* Fenêtre « Mon compte » */
.auth-modal::before { content: ""; display: block; width: 130px; height: 56px; margin: 0 auto var(--space-sm); background: var(--bh2-logo-url) center / contain no-repeat; }

/* Boutons flottants : pastille de marque au-dessus de la colonne */
.social-float { align-items: center; }
.social-float::before {
  content: "";
  width: 66px;
  height: 32px;
  margin-bottom: 0.15rem;
  border-radius: 10px;
  background: var(--bh2-logo-url) center / 86% auto no-repeat #fff;
  box-shadow: var(--shadow-hover);
}

/* Barre « Panier » (mobile) */
.cart-bar::before { content: ""; flex-shrink: 0; width: 54px; height: 30px; border-radius: 8px; background: var(--bh2-logo-url) center / 86% auto no-repeat #fff; }

/* Menu mobile : le logo en haut, en face du bouton de fermeture */
.mobile-nav::before { content: ""; position: absolute; top: var(--space-lg); left: var(--space-md); width: 112px; height: 46px; background: var(--bh2-logo-url) center / contain no-repeat; }

/* ===== Écran de chargement (js/splash.js) ===== */
.bh2-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; background: #fff; opacity: 1; transition: opacity 0.45s ease, visibility 0.45s; }
.bh2-splash--late { opacity: 0; animation: bh2-splash-in 0.3s ease 0.25s forwards; }
.bh2-splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
.bh2-splash__logo { width: min(280px, 62vw); height: auto; display: block; animation: bh2-splash-pulse 1.6s ease-in-out infinite; }
.bh2-splash__bar { width: min(180px, 44vw); height: 4px; border-radius: 999px; background: rgba(107, 47, 160, 0.14); overflow: hidden; }
.bh2-splash__bar::before { content: ""; display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6b2fa0, #c13f91); animation: bh2-splash-bar 1.2s ease-in-out infinite; }
@keyframes bh2-splash-in { to { opacity: 1; } }
@keyframes bh2-splash-pulse { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.045); opacity: 1; } }
@keyframes bh2-splash-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) {
  .bh2-splash { transition: none; }
  .bh2-splash__logo, .bh2-splash__bar::before { animation: none; }
  .bh2-splash__bar::before { width: 100%; }
}

/* Boutons de fermeture du menu mobile et du panier : ils héritaient du blanc de .btn-icon et disparaissaient sur le fond blanc. */
.mobile-nav .mobile-nav__close,
.cart-drawer__header .mobile-nav__close { color: var(--color-violet-deep-1); display: flex; margin-left: auto; }

/* ==========================================================================
   Passe « site vivant » : aucun débordement, mise en page tenue à toutes les largeurs, mouvement discret
   ========================================================================== */

/* Le bouton du menu mobile restait affiché hors écran sur ordinateur (.btn-icon, chargé plus tard, l'emportait). */
.btn-icon.nav-toggle { display: none; }
@media (max-width: 960px) { .btn-icon.nav-toggle { display: inline-flex; } }

/* Le texte d'un bouton ne déborde jamais : il se resserre puis passe à la ligne au lieu d'être coupé. */
.btn { max-width: 100%; }
.product-card__add { padding-inline: 0.6rem; white-space: normal; line-height: 1.2; text-wrap: balance; }
@media (max-width: 420px) { .product-card__add { font-size: 0.78rem; padding-block: 0.6rem; } }

/* Bandes qui défilent : bords fondus au lieu d'une coupure nette. */
.reassurance-bar, .discount-tiles, .image-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* Accueil : reflets qui dérivent lentement derrière l'accroche, et visuel qui flotte. */
.hero::before, .hero::after {
  content: ''; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(46px);
  will-change: transform;
}
.hero::before { width: 380px; height: 380px; left: -120px; top: -80px; background: rgba(126, 217, 87, 0.28); animation: hero-derive-a 16s ease-in-out infinite alternate; }
.hero::after { width: 320px; height: 320px; right: -90px; bottom: -90px; background: rgba(250, 150, 0, 0.20); animation: hero-derive-b 19s ease-in-out infinite alternate; }
.hero .container { position: relative; z-index: 1; }
@keyframes hero-derive-a { to { transform: translate(120px, 70px) scale(1.2); } }
@keyframes hero-derive-b { to { transform: translate(-110px, -60px) scale(1.15); } }
.hero-slider { animation: hero-flotte 7s ease-in-out infinite; }
@keyframes hero-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* Pastille de l'assistant : un souffle pour rappeler qu'il est là. */
.ai-assistant-fab { animation: fab-souffle 3.2s ease-in-out 6s infinite; }
@keyframes fab-souffle { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.12); } 16% { transform: scale(1); } 24% { transform: scale(1.08); } 32% { transform: scale(1); } }

/* Titres de section : le trait se dessine quand la section apparaît. */
.section-header h2, .section-title { position: relative; }
.js [data-reveal] .section-title::after, .js [data-reveal].section-header h2::after { transition: transform 700ms var(--ease-standard) 250ms; }

/* Envol d'un produit vers le panier (js/motion.js) */
.fly-to-cart {
  position: fixed; z-index: 1300; pointer-events: none; border-radius: 14px; object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 60, 24, 0.35);
  transition: transform 750ms cubic-bezier(0.5, -0.1, 0.7, 1), opacity 750ms ease-in, width 750ms ease-in, height 750ms ease-in;
}
[data-cart-toggle].is-receiving { animation: panier-secoue 520ms ease-out; }
@keyframes panier-secoue { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.12); } 55% { transform: rotate(9deg) scale(1.08); } 80% { transform: rotate(-4deg); } }

/* Entrée en cascade des cartes d'une grille déjà à l'écran */
.product-card { transition: box-shadow 0.3s var(--ease-standard), transform 0.3s var(--ease-standard); }
.product-card:hover { box-shadow: var(--shadow-hover); }

/* Quand le chat est ouvert, l'annonce « produits locaux » se range pour ne rien superposer. */
body.has-ai-open .local-popup { opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  .hero::before, .hero::after { filter: blur(34px); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero-slider, .ai-assistant-fab, [data-cart-toggle].is-receiving { animation: none; }
  .fly-to-cart { display: none; }
}

/* Onglets « Bonnes affaires » centrés sous leur titre centré. */
.product-tabs__nav { justify-content: center; }
.product-tabs__btn { transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.product-tabs__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 120, 45, 0.18); }

/* Les boutons flottants s'effacent pendant le défilement (js/motion.js) pour ne plus masquer les cartes en bord d'écran. */
.social-float { transition: top 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease; }
.social-float.is-scrolling { opacity: 0.18; }
.social-float.is-scrolling:hover { opacity: 1; }

/* Boutique : fil d'Ariane sans numéros (liste ordonnée), filtres qui défilent dans leur propre cadre. */
.breadcrumb ol { list-style: none; margin: 0; padding: 0; }
@media (min-width: 901px) {
  .filters-sidebar {
    max-height: calc(100vh - var(--header-height) - 2 * var(--space-md));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-grey-300) transparent;
  }
}

/* Petit écran : les boutons flottants rétrécissent et le bouton « Filtres » ne passe plus dessous. */
@media (max-width: 600px) {
  .social-float { right: 6px; gap: 0.45rem; }
  .social-float__item { width: 36px; height: 36px; }
  .social-float__item--whatsapp { width: 42px; height: 42px; }
  .social-float__item svg { width: 17px; height: 17px; }
  .shop-header { padding-right: 44px; }
}
.breadcrumb li:has(+ li[hidden])::after { content: none; }
@media (max-width: 420px) { .search-bar input, .site-search input, input[type="search"] { font-size: 0.9rem; text-overflow: ellipsis; } }

/* Admin : gestionnaire des bannières d'accueil */
.admin-banners { display: grid; gap: 0.9rem; }
.admin-banners__intro { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.admin-banner-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 0.9rem; border: 1px solid var(--color-grey-200); border-radius: 12px; background: var(--color-white); }
.admin-banner-row__thumb { aspect-ratio: 8 / 3; border-radius: 8px; overflow: hidden; background: var(--color-grey-100); display: grid; place-items: center; font-size: 0.8rem; color: var(--color-ink-soft); text-align: center; }
.admin-banner-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-banner-row__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.8rem; }
.admin-banner-row__fields label { display: grid; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; }
.admin-banner-row__fields label:first-child { grid-column: 1 / -1; }
.admin-banner-row__actions { display: grid; gap: 0.4rem; justify-items: stretch; }
.admin-banner-row__visible { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem; }
.admin-banner-row__btn { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
@media (max-width: 860px) {
  .admin-banner-row { grid-template-columns: 1fr; }
  .admin-banner-row__fields { grid-template-columns: 1fr; }
  .admin-banner-row__actions { grid-auto-flow: column; justify-content: start; align-items: center; }
}

/* ===== Écran de chargement complet : le logo se forme lettre par lettre, puis la boutique s'ouvre (js/splash.js) ===== */
.bh2-splash--full { background: transparent; transition: none; flex-direction: column; gap: 1.2rem; }
/* Deux volets blancs : ils portent le fond et s'écartent à la fermeture */
.bh2-splash--full::before, .bh2-splash--full::after {
  content: ''; position: absolute; left: 0; right: 0; background: #fff; z-index: 0;
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.18, 1);
}
.bh2-splash--full::before { top: 0; height: 50.5%; }
.bh2-splash--full::after { bottom: 0; height: 50.5%; }
.bh2-splash--full .bh2-splash__stage { position: relative; z-index: 1; display: grid; place-items: center; transition: opacity 0.35s ease, transform 0.7s cubic-bezier(0.5, 0, 0.75, 0); }
.bh2-splash--full.is-leaving { opacity: 1; visibility: visible; pointer-events: none; }
.bh2-splash--full.is-leaving::before { transform: translateY(-101%); }
.bh2-splash--full.is-leaving::after { transform: translateY(101%); }
.bh2-splash--full.is-leaving .bh2-splash__stage { opacity: 0; transform: scale(1.18); }

.bh2-splash__logo-wrap { position: relative; width: min(560px, 86vw); aspect-ratio: 2 / 1; }
.bh2-splash__piece { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: bh2-piece-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* Une lettre découpée par calque : B, o, O, K, e, t, puis la signature (découpes en % du dessin du logo) */
.bh2-splash__piece--1 { clip-path: inset(0 66.8% 0 0);        transform-origin: 17% 50%;  animation-delay: 0.20s; }
.bh2-splash__piece--2 { clip-path: inset(0 56.1% 26.6% 33.2%); transform-origin: 38% 55%;  animation-delay: 0.58s; }
.bh2-splash__piece--3 { clip-path: inset(0 43.6% 26.6% 43.9%); transform-origin: 50% 55%;  animation-delay: 0.96s; }
.bh2-splash__piece--4 { clip-path: inset(0 29.3% 26.6% 56.4%); transform-origin: 63% 55%;  animation-delay: 1.34s; }
.bh2-splash__piece--5 { clip-path: inset(0 19.5% 26.6% 70.7%); transform-origin: 75% 55%;  animation-delay: 1.72s; }
.bh2-splash__piece--6 { clip-path: inset(0 0 26.6% 80.5%);     transform-origin: 90% 50%;  animation-delay: 2.10s; }
.bh2-splash__piece--7 { clip-path: inset(73.4% 0 0 33.2%);     transform-origin: 66% 90%;  animation-delay: 2.55s; animation-name: bh2-piece-rise; animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bh2-piece-pop {
  0% { opacity: 0; transform: translateY(48px) scale(0.3) rotate(-12deg); }
  55% { opacity: 1; transform: translateY(-10px) scale(1.14) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes bh2-piece-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Petit éclat de fin, quand tout est en place */
.bh2-splash__logo-wrap { animation: bh2-logo-eclat 0.9s ease-out 3.05s both; }
@keyframes bh2-logo-eclat { 0% { filter: brightness(1); } 40% { filter: brightness(1.12) drop-shadow(0 0 14px rgba(250, 150, 0, 0.45)); } 100% { filter: brightness(1); } }

/* Variante « mot » (si le logo a été remplacé par un autre dessin) */
.bh2-splash__word { display: flex; align-items: baseline; font-family: var(--font-title, Georgia, serif); font-weight: 700; font-size: clamp(3.6rem, 16vw, 8rem); line-height: 1; color: var(--color-violet-deep-2, #00782D); }
.bh2-splash__letter { display: inline-block; opacity: 0; animation: bh2-piece-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.bh2-splash__letter--3 { color: var(--color-orange-primary, #FA9600); }
.bh2-splash__letter--1 { animation-delay: 0.20s; } .bh2-splash__letter--2 { animation-delay: 0.58s; }
.bh2-splash__letter--3 { animation-delay: 0.96s; } .bh2-splash__letter--4 { animation-delay: 1.34s; }
.bh2-splash__letter--5 { animation-delay: 1.72s; } .bh2-splash__letter--6 { animation-delay: 2.10s; }

@media (prefers-reduced-motion: reduce) {
  .bh2-splash__piece, .bh2-splash__letter { animation: none; opacity: 1; }
  .bh2-splash__logo-wrap { animation: none; }
  .bh2-splash--full::before, .bh2-splash--full::after, .bh2-splash--full .bh2-splash__stage { transition: none; }
}
.bh2-splash__piece { mix-blend-mode: multiply; }
/* Logo actuel (v2, 3840 × 2160) : mêmes lettres, autres découpes. Le calque 7 (signature) part sous les lettres. */
.bh2-splash__logo-wrap--v2 { aspect-ratio: 16 / 9; width: min(620px, 90vw); }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--1 { clip-path: inset(0 62.4% 0 0);         transform-origin: 19% 50%; }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--2 { clip-path: inset(0 52.1% 27.8% 37.6%); transform-origin: 43% 48%; }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--3 { clip-path: inset(0 40.8% 27.8% 47.9%); transform-origin: 53% 48%; }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--4 { clip-path: inset(0 26.7% 27.8% 59.2%); transform-origin: 66% 48%; }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--5 { clip-path: inset(0 16.4% 27.8% 73.3%); transform-origin: 78% 48%; }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--6 { clip-path: inset(0 0 27.8% 83.6%);     transform-origin: 92% 42%; }
.bh2-splash__logo-wrap--v2 .bh2-splash__piece--7 { clip-path: inset(72.2% 0 0 37.6%);     transform-origin: 68% 88%; }
.admin-banner-row__thumb--flyer { aspect-ratio: auto; min-height: 90px; max-height: 220px; }
.admin-banner-row__thumb--flyer img { width: auto; max-width: 100%; height: auto; max-height: 220px; object-fit: contain; }

/* Les morceaux du logo DÉFILENT de la gauche vers la droite, en cadence régulière : chaque lettre (B, o, O, K, e, t) glisse un court instant depuis
   la gauche vers sa place, avec le même mouvement, la même durée et le même écart entre deux lettres ; la signature
   « Family Hub » se dévoile en dernier de gauche à droite. Aucun rebond : une seule courbe douce, pour une harmonie parfaite. */
.bh2-splash__piece { animation-name: bh2-piece-defile; animation-duration: 0.95s; animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); animation-fill-mode: both; }
.bh2-splash__piece--1 { animation-delay: 0.20s; } .bh2-splash__piece--2 { animation-delay: 0.56s; } .bh2-splash__piece--3 { animation-delay: 0.92s; }
.bh2-splash__piece--4 { animation-delay: 1.28s; } .bh2-splash__piece--5 { animation-delay: 1.64s; } .bh2-splash__piece--6 { animation-delay: 2.00s; }
.bh2-splash__piece--7 { animation-name: bh2-piece-devoile; animation-duration: 0.9s; animation-delay: 2.45s; animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }
@keyframes bh2-piece-defile {
  0% { opacity: 0; transform: translateX(-7%); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes bh2-piece-devoile {
  0% { opacity: 0; transform: translateX(-10%); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bh2-splash__piece { animation: none; opacity: 1; } }