/*
 * Panstellar Custom — shared base CSS
 * Extracted from the shared 'chrome' inlined on all 28 source pages
 * (nav, footer, design tokens, base layout, responsive).
 * ~449 of 999 CSS rules are common to ALL pages (see 08_REPORTS/01_html_audit.md).
 * Page-specific CSS (product pages, home hero/particles) is added per-page in Phase 4 (Elementor).
 * Source: 01_HTML_SOURCE/site-wordpress/ — do not hand-edit blindly; re-extract if source changes.
 */

/* =================================================================
   GLOBAL TOKENS
   ================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bone: #F5F1E8;
  --stone: #ECE6D7;
  --ink: #1A1816;
  --ink-soft: rgba(26, 24, 22, 0.65);
  --gold: #C9A84C;
  --gold-bright: #E5C56C;
  --gold-deep: #6B5320;
  --green-deep: #1F2D26;
  --green-darker: #14201A;
  --green-darkest: #0E1612;
  --obsidian: #0A0A0A;
  --obsidian-2: #141414;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}
button { background: none; border: none; font-family: inherit; color: inherit; cursor: pointer; padding: 0; font-size: inherit; }
sup.tm { font-size: 0.5em; vertical-align: super; }

.italic-serif {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

/* =================================================================
   PROMO MARQUEE (announcement bar)
   ================================================================= */
.promo-marquee {
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.promo-marquee__track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}

.promo-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 60px;
}

.promo-marquee__item::after {
  content: '●';
  color: var(--gold);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =================================================================
   NAV (adapted from dev's Prestige bundle)
   ================================================================= */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid rgba(26, 24, 22, 0.06);
  transition: transform 0.4s var(--ease);
}

.nav-bar.is-hidden { transform: translateY(-100%); }

.nav-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 32px;
}

.nav-logo {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
  justify-self: center;
}

.nav-list {
  display: flex;
  gap: 36px;
  list-style: none;
  justify-self: start;
  align-items: center;
}

.nav-item { position: relative; }

.nav-link {
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 0;
}

.nav-link:hover { color: var(--gold); }
.nav-link::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 4px;
  opacity: 0.5;
}
.nav-link.no-arrow::after { display: none; }

.nav-right {
  display: flex;
  gap: 12px;
  justify-self: end;
  align-items: center;
}

.nav-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(26, 24, 22, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.nav-icon:hover { border-color: var(--gold); color: var(--gold); }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.nav-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gold);
  color: var(--ink);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-burger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.nav-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* DROPDOWN PANELS */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bone);
  border: 1px solid rgba(26, 24, 22, 0.08);
  border-radius: 14px;
  padding: 24px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 50;
  box-shadow: 0 20px 60px rgba(26, 24, 22, 0.1);
  pointer-events: none;
}

/* Hover only reveals a panel where hovering is real. This rule used to be
   unscoped, so on a phone the panel could only appear as an emulated sticky
   hover after a tap — the tap that was meant to expand it. Below 1024px the
   mobile accordion (panstellar-ui.js + the max-width:1023px block) owns this
   entirely. .is-open stays unscoped: it is the click/tap-driven state and is
   the single convention shared by both layouts. */
@media (min-width: 1024px) and (hover: hover) {
  .nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-dropdown ul { list-style: none; }
.nav-dropdown li { margin-bottom: 4px; }
.nav-dropdown li:last-child { margin-bottom: 0; }

.nav-dropdown a {
  display: block;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.nav-dropdown a:hover { background: var(--stone); color: var(--ink); }

.nav-dropdown-title {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 12px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(26, 24, 22, 0.08);
  text-decoration: none;
  font-weight: 500;
}

.nav-dropdown-title:hover { color: var(--gold-deep); }

/* SCIENCE DROPDOWN with hover images (PC only) */
.nav-dropdown-science {
  display: grid;
  grid-template-columns: 200px 220px;
  gap: 24px;
  min-width: 460px;
  padding: 28px;
}

.science-items ul { display: flex; flex-direction: column; gap: 2px; }

.science-image-panel {
  position: relative;
  background: var(--stone);
  border-radius: 10px;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.science-image {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--obsidian) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(245, 241, 232, 0.4);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.science-image.visible { opacity: 1; }
.science-image[data-key="default"] { opacity: 1; }

/* PRODUCTS MEGA MENU */
.nav-dropdown-products {
  min-width: 540px;
  padding: 28px;
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.product-mini-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease;
}

.product-mini-card:hover { transform: translateY(-3px); }

.product-mini-img {
  width: 100%;
  aspect-ratio: 1/1.1;
  background: linear-gradient(135deg, var(--stone) 0%, #C8BFAA 100%);
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  font-size: 8px;
  color: rgba(26, 24, 22, 0.35);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
}

.product-mini-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.product-mini-sub {
  font-size: 11px;
  color: var(--ink-soft);
}

.product-coming-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 8px;
  padding: 3px 8px;
  background: rgba(245, 241, 232, 0.9);
  border-radius: 999px;
  letter-spacing: 0.15em;
  color: var(--gold-deep);
  font-weight: 500;
}

/* MOBILE OVERLAY MENU */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--bone);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-overlay.is-open { transform: translateX(0); }

.mobile-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(26, 24, 22, 0.08);
}

.mobile-overlay__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-overlay__close svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.5; }

.mobile-overlay__nav {
  flex: 1;
  padding: 20px;
}

.mobile-accordion-item { border-bottom: 1px solid rgba(26, 24, 22, 0.08); }
.mobile-accordion-item summary {
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
}
.mobile-accordion-item summary::-webkit-details-marker { display: none; }
.mobile-accordion-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  transition: transform 0.3s ease;
}
.mobile-accordion-item[open] summary::after { transform: rotate(45deg); }

.mobile-accordion-content {
  padding: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-accordion-content a {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}

.mobile-accordion-content a:hover { color: var(--ink); }

.mobile-overlay__cta {
  padding: 20px;
  border-top: 1px solid rgba(26, 24, 22, 0.08);
}

.mobile-overlay__cta-btn {
  display: block;
  text-align: center;
  background: var(--ink);
  color: var(--bone);
  padding: 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* =================================================================
   BLOCK 1: HERO
   ================================================================= */
.hero {
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 120px;
  background: var(--bone);
  position: relative;
  text-align: center;
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(10px);
  animation: hero-fade 0.9s 0.1s var(--ease) forwards;
}

.hero-tagline {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade 1.1s 0.3s var(--ease) forwards;
}

.hero-visual {
  width: clamp(240px, 26vw, 340px);
  height: clamp(280px, 28vw, 380px);
  position: relative;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade 1.1s 0.6s var(--ease) forwards;
}

.hero-bottle {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(184, 154, 64, 0.04) 0%, rgba(26, 24, 22, 0.12) 100%);
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 28px;
  box-shadow: 0 24px 60px rgba(26, 24, 22, 0.12), inset 0 0 0 1px rgba(184, 154, 64, 0.1);
}

.hero-bottle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 18%;
  background: linear-gradient(180deg, #4a4035 0%, #2a241d 100%);
  border-radius: 6px 6px 4px 4px;
}

.hero-bottle-label {
  background: var(--bone);
  width: 80%;
  padding: 20px 18px;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.18em;
  font-size: 9px;
  text-transform: uppercase;
  border: 1px solid rgba(26, 24, 22, 0.08);
}

.hero-bottle-label .brand { font-size: 11px; letter-spacing: 0.32em; color: var(--gold); margin-bottom: 4px; font-weight: 500; }
.hero-bottle-label .product { font-size: 13px; letter-spacing: 0.1em; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.hero-bottle-label .meta { font-size: 8px; letter-spacing: 0.15em; color: rgba(26, 24, 22, 0.5); }

.hero-cta {
  display: inline-block;
  padding: 18px 48px;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade 1.1s 0.9s var(--ease) forwards;
}

.hero-cta:hover { background: var(--gold); transform: translateY(-2px); }

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: hero-fade 1.1s 1.5s var(--ease) forwards;
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: rgba(26, 24, 22, 0.3);
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
}

@keyframes hero-fade {
  to { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   BLOCK 2: OUTCOMES v4 (museum aesthetic)
   ================================================================= */
.outcomes-section {
  padding: 100px 32px;
  background: var(--bone);
}

.outcomes-header { text-align: center; max-width: 760px; margin: 0 auto 64px; }

.outcomes-eyebrow {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 22px;
}

.outcomes-title {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 16px;
}

.outcomes-sub { font-size: 16px; color: var(--ink-soft); }

.outcomes-carousel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  padding: 4px 0;
}

.outcomes-track {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.6s var(--ease);
}

.outcome-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background: linear-gradient(180deg, var(--obsidian-2) 0%, var(--obsidian) 100%);
  border: 1px solid rgba(201, 168, 76, 0.08);
  transition: width 0.6s var(--ease), flex-basis 0.6s var(--ease), border-color 0.4s var(--ease), aspect-ratio 0.6s var(--ease), min-height 0.6s var(--ease);
  isolation: isolate;
}

.outcome-card:hover { border-color: rgba(201, 168, 76, 0.16); }

.outcome-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.outcome-visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.outcome-halo {
  position: absolute;
  top: 28%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.05) 40%, transparent 70%);
  border-radius: 50%;
}

.outcome-capsule {
  position: absolute;
  top: 28%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 80px;
}

.outcome-cap-top {
  position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 35%;
  background: linear-gradient(135deg, #D9B860 0%, var(--gold-deep) 100%);
  border-radius: 999px 999px 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.outcome-cap-bottom {
  position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 60%;
  background: linear-gradient(135deg, #EAE3D2 0%, #C8BFAA 100%);
  border-radius: 4px 4px 999px 999px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-top: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.15);
}

.outcome-particles { position: absolute; inset: 0; }

.outcome-particles span {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.5);
}

/* Particle compositional variation per card */
.outcome-card[data-idx="0"] .outcome-particles span:nth-child(1) { top: 14%; left: 28%; opacity: 0.8; }
.outcome-card[data-idx="0"] .outcome-particles span:nth-child(2) { top: 20%; right: 30%; opacity: 0.6; }
.outcome-card[data-idx="0"] .outcome-particles span:nth-child(3) { top: 8%; left: 50%; opacity: 0.5; width: 3px; height: 3px; }
.outcome-card[data-idx="0"] .outcome-particles span:nth-child(4) { top: 36%; right: 24%; opacity: 0.4; width: 3px; height: 3px; }
.outcome-card[data-idx="0"] .outcome-particles span:nth-child(5) { top: 18%; left: 16%; opacity: 0.35; width: 3px; height: 3px; }

.outcome-card[data-idx="1"] .outcome-particles span:nth-child(1) { top: 18%; right: 24%; opacity: 0.8; }
.outcome-card[data-idx="1"] .outcome-particles span:nth-child(2) { top: 32%; right: 18%; opacity: 0.5; }
.outcome-card[data-idx="1"] .outcome-particles span:nth-child(3) { top: 12%; right: 38%; opacity: 0.4; width: 3px; height: 3px; }
.outcome-card[data-idx="1"] .outcome-particles span:nth-child(4) { top: 28%; left: 24%; opacity: 0.6; }
.outcome-card[data-idx="1"] .outcome-particles span:nth-child(5) { top: 16%; left: 38%; opacity: 0.4; width: 3px; height: 3px; }

.outcome-card[data-idx="2"] .outcome-particles span:nth-child(1) { top: 14%; left: 30%; opacity: 0.7; }
.outcome-card[data-idx="2"] .outcome-particles span:nth-child(2) { top: 30%; left: 18%; opacity: 0.4; }
.outcome-card[data-idx="2"] .outcome-particles span:nth-child(3) { top: 18%; right: 28%; opacity: 0.6; }
.outcome-card[data-idx="2"] .outcome-particles span:nth-child(4) { top: 30%; right: 22%; opacity: 0.5; }
.outcome-card[data-idx="2"] .outcome-particles span:nth-child(5) { top: 8%; left: 45%; opacity: 0.3; width: 3px; height: 3px; }

.outcome-card[data-idx="3"] .outcome-particles span:nth-child(1) { top: 16%; left: 35%; opacity: 0.6; }
.outcome-card[data-idx="3"] .outcome-particles span:nth-child(2) { top: 24%; right: 30%; opacity: 0.5; }
.outcome-card[data-idx="3"] .outcome-particles span:nth-child(3) { top: 32%; left: 25%; opacity: 0.4; width: 3px; height: 3px; }
.outcome-card[data-idx="3"] .outcome-particles span:nth-child(4) { top: 10%; right: 42%; opacity: 0.35; width: 3px; height: 3px; }
.outcome-card[data-idx="3"] .outcome-particles span:nth-child(5) { top: 22%; left: 20%; opacity: 0.3; width: 3px; height: 3px; }

.outcome-card[data-idx="4"] .outcome-particles span:nth-child(1) { top: 28%; left: 28%; opacity: 0.7; }
.outcome-card[data-idx="4"] .outcome-particles span:nth-child(2) { top: 18%; left: 38%; opacity: 0.6; }
.outcome-card[data-idx="4"] .outcome-particles span:nth-child(3) { top: 10%; right: 32%; opacity: 0.5; }
.outcome-card[data-idx="4"] .outcome-particles span:nth-child(4) { top: 32%; right: 26%; opacity: 0.4; width: 3px; height: 3px; }
.outcome-card[data-idx="4"] .outcome-particles span:nth-child(5) { top: 22%; right: 18%; opacity: 0.4; width: 3px; height: 3px; }

.outcome-card[data-idx="5"] .outcome-particles span:nth-child(1) { top: 14%; left: 24%; opacity: 0.7; }
.outcome-card[data-idx="5"] .outcome-particles span:nth-child(2) { top: 14%; right: 24%; opacity: 0.7; }
.outcome-card[data-idx="5"] .outcome-particles span:nth-child(3) { top: 28%; left: 38%; opacity: 0.5; }
.outcome-card[data-idx="5"] .outcome-particles span:nth-child(4) { top: 32%; left: 18%; opacity: 0.4; width: 3px; height: 3px; }
.outcome-card[data-idx="5"] .outcome-particles span:nth-child(5) { top: 32%; right: 18%; opacity: 0.4; width: 3px; height: 3px; }

.outcome-content {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: var(--bone);
}

.outcome-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: auto;
}

.outcome-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(245, 241, 232, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 241, 232, 0.12);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone);
  font-weight: 400;
}

.outcome-pill svg { width: 12px; height: 12px; }

.outcome-action-btn {
  width: 32px; height: 32px;
  background: var(--bone);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 18px;
  font-weight: 300;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.outcome-action-btn:hover { transform: scale(1.08); }

.outcome-action-btn .plus-icon { display: block; }
.outcome-action-btn .close-icon { display: none; }
.outcome-card.is-open .outcome-action-btn .plus-icon { display: none; }
.outcome-card.is-open .outcome-action-btn .close-icon { display: block; }

.outcome-tagline {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin-top: 24px;
}

.outcome-tagline .italic-serif {
  display: block;
  font-size: 24px;
  margin-top: 2px;
  color: var(--gold-bright);
}

.outcome-extended {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.6s var(--ease);
}

.outcome-card.is-open .outcome-extended {
  opacity: 1;
  max-height: 800px;
  transition: opacity 0.5s ease 0.2s, max-height 0.6s var(--ease);
}

.outcome-sub-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.7);
}

.outcome-testimonial {
  background: rgba(245, 241, 232, 0.05);
  border: 1px solid rgba(245, 241, 232, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
}

.outcome-t-name { font-size: 13px; font-weight: 500; color: var(--bone); margin-bottom: 2px; }
.outcome-t-role { font-size: 11px; color: rgba(245, 241, 232, 0.5); letter-spacing: 0.02em; margin-bottom: 10px; }
.outcome-t-quote {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245, 241, 232, 0.85);
}

.outcome-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 241, 232, 0.08);
}

.outcome-stat-num {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  color: var(--gold-bright);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.outcome-stat-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.6);
  font-weight: 500;
}

.outcome-learn {
  background: var(--bone);
  color: var(--ink);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.outcome-learn:hover { background: var(--gold); }

.outcomes-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
}

.outcomes-arrow {
  width: 52px; height: 52px;
  border: 1px solid rgba(26, 24, 22, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.3s ease;
  background: var(--bone);
}

.outcomes-arrow:hover:not(:disabled) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.outcomes-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.outcomes-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.outcomes-shop-cta { text-align: center; margin-top: 48px; }

.outcomes-shop-btn {
  display: inline-block;
  padding: 16px 36px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.outcomes-shop-btn:hover { background: var(--gold); transform: translateY(-2px); }

/* OUTCOMES desktop */
@media (min-width: 1024px) {
  .outcome-card { width: calc((100% - 32px) / 3); aspect-ratio: 3 / 4; }
  .outcomes-carousel:has(.is-open) .outcome-card:not(.is-open) { width: calc((100% - 58% - 32px) / 2); }
  .outcome-card.is-open { width: 58%; aspect-ratio: 5 / 3; }
}

/* OUTCOMES tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .outcome-card { width: calc((100% - 16px) / 2); aspect-ratio: 3 / 4; }
  .outcomes-carousel:has(.is-open) .outcome-card:not(.is-open) { width: calc(100% - 75% - 16px); }
  .outcome-card.is-open { width: 75%; aspect-ratio: 5 / 3; }
}

/* =================================================================
   BLOCK 3: FORMULA v2 (mobile compact)
   ================================================================= */
.formula-section { background: var(--bone); padding: 130px 0; }

.formula-pill {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 60px;
}

.formula-pill::before { content: '●'; margin-right: 10px; color: var(--gold); }

.formula-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.formula-visual {
  background: var(--green-deep);
  border-radius: 28px;
  aspect-ratio: 1/1.1;
  position: relative;
  overflow: hidden;
  padding: 32px;
}

.formula-visual-title {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.02em;
  z-index: 3;
}

.formula-capsule-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1/1.4;
  background: linear-gradient(135deg, #C8BFAA 0%, #8B7F66 100%);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(201, 168, 76, 0.2);
  overflow: hidden;
}
.formula-capsule-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; mix-blend-mode: multiply; }

.formula-capsule-eyebrow {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 500;
  z-index: 3;
}

.formula-cards { display: flex; flex-direction: column; gap: 24px; }

.formula-card { background: var(--stone); border-radius: 22px; padding: 32px; position: relative; }
.formula-card.featured { background: linear-gradient(180deg, #ECE6D7 0%, #D9D2C0 100%); border: 1px solid rgba(201, 168, 76, 0.2); }

.formula-card-icon {
  width: 44px; height: 44px;
  background: var(--bone);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.formula-card-icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.formula-card-title { font-size: 22px; font-weight: 500; margin-bottom: 10px; letter-spacing: -0.015em; color: var(--ink); }

.formula-card-outcome {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.formula-card-badges { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.formula-badge {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 10px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 999px;
  font-weight: 500;
}

.formula-badge.star::before { content: '★ '; }

.formula-outcome-strip { margin-top: 56px; text-align: center; padding: 0 32px; }

.formula-outcome-strip p {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  letter-spacing: -0.015em;
  max-width: 760px;
  margin: 0 auto 28px;
  line-height: 1.3;
}

.formula-cta {
  display: inline-block;
  padding: 16px 36px;
  background: var(--bone);
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s ease;
}

.formula-cta:hover { background: var(--ink); color: var(--bone); }

/* =================================================================
   BLOCK 4: DELIVERY — NEW DIGESTIVE GSAP
   ================================================================= */
.delivery-section{position:relative;height:820vh;background:var(--bone);padding:clamp(42px,5vw,78px) 0}
.delivery-pin{height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:0;background:var(--bone)}
.visual-panel{position:relative;width:100vw;max-width:none;flex:none;aspect-ratio:2048/681;border-radius:0;overflow:hidden;box-shadow:none;border:0;background-color:#edf2f0;background-image:url('https://panstellar.pro/wp-content/uploads/2026/06/gsap_asset_01.jpg');background-size:cover;background-position:center;isolation:isolate}
.visual-panel::before{content:"";position:absolute;z-index:2;left:clamp(90px,13vw,245px);right:clamp(90px,13vw,245px);top:8.5%;bottom:8.5%;border-radius:clamp(20px,2vw,34px);background:rgba(245,241,232,.34);border:1px solid rgba(245,241,232,.32);box-shadow:0 28px 70px rgba(26,24,22,.08),inset 0 1px 0 rgba(255,255,255,.36);-webkit-backdrop-filter:blur(14px) saturate(1.02);backdrop-filter:blur(14px) saturate(1.02);pointer-events:none}
.delivery-left-copy{position:absolute;z-index:70;left:clamp(170px,17vw,340px);top:50%;transform:translateY(-50%);width:min(430px,34vw);color:var(--ink);text-align:left;pointer-events:none}
.delivery-left-eyebrow{font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:rgba(201,168,76,.94);font-weight:600;margin-bottom:18px;text-shadow:0 1px 10px rgba(245,241,232,.58)}
.delivery-left-copy h2{font-family:var(--e-global-typography-primary-font-family,'Newsreader'),Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(42px,4.4vw,72px);line-height:.93;letter-spacing:-.055em;margin:0 0 26px;color:var(--ink)}
.delivery-left-copy p:last-child{font-size:clamp(14px,1.05vw,18px);color:rgba(26,24,22,.62);line-height:1.45;max-width:340px;text-shadow:0 1px 10px rgba(245,241,232,.45)}
.digestive-wrap{position:absolute;left:69.45%;top:50.8%;width:29%;height:92%;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.digestive-img{position:absolute;left:50%;top:50%;height:100%!important;width:auto!important;max-width:none!important;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.22))}
.delivery-object{position:absolute;left:69.45%;top:8%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;user-select:none;will-change:top,opacity,transform}
.capsule-closed{width:19px;filter:drop-shadow(0 7px 10px rgba(0,0,0,.22))}
.capsule-open{width:46px;opacity:0;filter:drop-shadow(0 9px 12px rgba(0,0,0,.24))}
.powder-white{width:74px;opacity:0;filter:drop-shadow(0 7px 9px rgba(0,0,0,.16))}
.powder-beige{width:64px;opacity:0;filter:drop-shadow(0 7px 9px rgba(0,0,0,.22))}
.organ-glow{position:absolute;left:69.45%;transform:translate(-50%,-50%) scale(.72);pointer-events:none;z-index:10;opacity:0;border-radius:50%;mix-blend-mode:screen;filter:blur(14px);background:radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(255,255,255,.55) 28%, rgba(255,255,255,.17) 52%, rgba(255,255,255,0) 74%)}
.stomach-glow{top:38%;width:90px;height:70px}
.intestine-glow{top:71%;width:118px;height:74px}
.nav-arrow{position:absolute;z-index:45;width:48px;height:34px;pointer-events:none;user-select:none;filter:drop-shadow(0 3px 5px rgba(255,255,255,.35))}
.nav-arrow svg{width:100%;height:100%;display:block}
.nav-arrow.follow{left:calc(70.45% + 84px);top:40px;transform:translateY(-50%)}
.follow-text{position:absolute;left:calc(70.45% + 138px);top:40px;transform:translateY(-50%);z-index:46;pointer-events:none;opacity:0;font-weight:700;font-size:16px;line-height:1.25;letter-spacing:.01em;color:#111;width:140px;text-shadow:none}
.follow-text.big{font-weight:800;font-size:18px}
.follow-text .tb4-badge{display:inline-block;background:rgba(245,241,232,.94);color:#111;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 16px rgba(17,17,17,.10);text-shadow:none}
.follow-text .tb4-badge sup{font-size:8px;top:-.3em;position:relative}
@media(max-width:900px){
  .delivery-section{height:820vh;padding:28px 0}
  .delivery-pin{height:100vh;padding:0}
  .visual-panel{width:100vw;max-width:100vw;min-height:520px;aspect-ratio:auto}
  .visual-panel::before{left:16px;right:16px;top:9%;bottom:9%;border-radius:22px;background:rgba(245,241,232,.40)}
  .delivery-left-copy{left:44px;right:34px;top:43%;width:auto;max-width:330px}
  .delivery-left-eyebrow{font-size:8.5px;letter-spacing:.22em;margin-bottom:12px}
  .delivery-left-copy h2{font-size:clamp(26px,7.5vw,40px);margin-bottom:14px}
  .delivery-left-copy p:last-child{font-size:13px;max-width:260px}
  .capsule-closed{width:15px}
  .capsule-open{width:34px}
  .powder-white{width:56px}
  .powder-beige{width:48px}
  .nav-arrow.follow{left:calc(70.45% + 54px);width:34px;height:26px}
  .follow-text{left:calc(70.45% + 92px);width:110px;font-size:12px}
  .follow-text.big{font-size:14px}
  .follow-text .tb4-badge{font-size:10px;padding:4px 8px}
}
@media(max-width:520px){
  .visual-panel{min-height:560px}
  .delivery-left-copy{left:34px;right:28px;top:34%}
  .delivery-left-copy h2{font-size:clamp(22px,6.5vw,30px);line-height:.96;margin-bottom:12px}
  /* Fleche + texte deborderaient a droite sur ecrans < 520px — l animation reste lisible sans */
  .nav-arrow.follow,.follow-text{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .delivery-section{height:auto}
  .delivery-pin{height:auto;min-height:80vh;padding-top:60px;padding-bottom:60px}
}

/* =================================================================
   BLOCK 5: SCIENCE
   ================================================================= */
.science-section { background: var(--obsidian); color: var(--bone); padding: 130px 0; }

.science-eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  text-align: center; margin-bottom: 24px;
}

.science-title {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bone);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 70px;
}

.science-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.science-big-card {
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
}

.sci-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 18px;
}

.sci-card-title {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  color: var(--bone);
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}

.sci-card-sub { font-size: 14px; color: rgba(245, 241, 232, 0.6); line-height: 1.55; }

.sci-phases { display: flex; gap: 24px; margin-top: 32px; }

.sci-phase { flex: 1; }

.sci-phase-num {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 32px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.sci-phase-text { font-size: 13px; color: rgba(245, 241, 232, 0.75); }

.sci-phase-detail {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--gold-bright);
  margin-top: 4px;
  display: block;
}

.science-small-card {
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 24px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.science-small-visual {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 168, 76, 0.06);
  border-radius: 12px;
  font-size: 9px;
  color: rgba(201, 168, 76, 0.4);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.science-small-card h3 {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--bone);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.science-small-card p { font-size: 13px; color: rgba(245, 241, 232, 0.55); }

.science-trust-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 40px 32px 0;
  border-top: 1px solid rgba(245, 241, 232, 0.08);
}

.trust-cell { text-align: center; }

.trust-cell-num {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--gold-bright);
  margin-bottom: 6px;
}

.trust-cell-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.6);
  font-weight: 500;
}

/* =================================================================
   BLOCK 6: REVIEWS
   ================================================================= */
.reviews-section { background: var(--bone); padding: 130px 0; }

.reviews-eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  text-align: center; margin-bottom: 24px;
}

.reviews-title {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 60px;
}

.reviews-scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 32px 20px;
  scrollbar-width: thin;
}

.reviews-scroller::-webkit-scrollbar { height: 6px; }
.reviews-scroller::-webkit-scrollbar-track { background: transparent; }
.reviews-scroller::-webkit-scrollbar-thumb { background: rgba(26, 24, 22, 0.2); border-radius: 99px; }

.review-card {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 2px 14px rgba(26, 24, 22, 0.05);
  scroll-snap-align: start;
  transition: all 0.3s ease;
  position: relative;
}

.review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26, 24, 22, 0.08); }

.review-card.has-video::before {
  content: '';
  position: absolute;
  top: 36px;
  right: 36px;
  width: 36px;
  height: 36px;
  background: var(--ink);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='4 3 9 6 4 9' fill='%23F5F1E8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38%;
  z-index: 2;
}

.review-photo {
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--stone) 0%, #C8BFAA 100%);
  border-radius: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(26, 24, 22, 0.35);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.review-stars { display: inline-flex; gap: 2px; color: var(--gold); margin-bottom: 14px; }
.review-stars svg { width: 14px; height: 14px; fill: currentColor; }

.review-quote {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 18px;
}

.review-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 24, 22, 0.06);
}

.review-name { font-size: 12px; font-weight: 500; color: var(--ink); }
.review-duration { font-size: 11px; color: rgba(26, 24, 22, 0.5); }

/* =================================================================
   BLOCK 7: PRICE CARD
   ================================================================= */
.price-section { background: var(--stone); padding: 140px 0; }

.price-eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  text-align: center; margin-bottom: 24px;
}

.price-title {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 60px;
}

.price-card-wrap { max-width: 460px; margin: 0 auto; }

.price-card {
  background: var(--bone);
  border-radius: 28px;
  padding: 48px 40px;
  position: relative;
  text-align: center;
  box-shadow: 0 14px 50px rgba(26, 24, 22, 0.08);
  transition: all 0.4s var(--ease);
}

.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(26, 24, 22, 0.1), 0 0 70px rgba(201, 168, 76, 0.1);
}

.price-bestseller-pill {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--bone);
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.price-product-img {
  width: 180px;
  height: 220px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--stone) 0%, #C8BFAA 100%);
  border-radius: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  font-size: 9px;
  color: rgba(26, 24, 22, 0.35);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.price-product-name {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
}

.price-product-sub {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.price-amount {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
  font-style: italic;
  font-size: 56px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.price-period { font-size: 14px; color: var(--ink-soft); }

.price-cta {
  display: block;
  width: 100%;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
  margin-bottom: 16px;
}

.price-cta:hover { background: var(--gold); transform: translateY(-2px); }

.price-promises {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.price-promises span { display: inline-flex; align-items: center; gap: 5px; }
.price-promises span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.price-downgrade {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: var(--ink-soft);
}

.price-downgrade a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 24, 22, 0.3);
  padding-bottom: 1px;
  transition: all 0.2s ease;
}

.price-downgrade a:hover { color: var(--gold); border-color: var(--gold); }

/* =================================================================
   BLOCK 8: FOOTER (full)
   ================================================================= */
.footer-top { background: var(--bone); padding: 80px 0 70px; }

.footer-top-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.product-teaser {
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.4s var(--ease);
}

.product-teaser:hover { transform: translateY(-4px); }

.product-card {
  position: relative;
  background: transparent;
  border-radius: 18px;
  aspect-ratio: 1 / 0.9;
  overflow: hidden;
  margin-bottom: 16px;
}

.product-card-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.4);
  border: 1px dashed rgba(26, 24, 22, 0.2);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.7);
}

.product-badge {
  position: absolute;
  top: 16px; left: 16px;
  padding: 5px 11px;
  background: rgba(155, 200, 130, 0.18);
  border: 1px solid rgba(155, 200, 130, 0.5);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #6d9456;
  z-index: 2;
}

.product-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.product-name {
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.2;
  color: var(--ink);
}

.product-arrow { font-size: 16px; color: var(--ink); transition: transform 0.3s ease; }
.product-teaser:hover .product-arrow { transform: translateX(4px); color: var(--gold); }

.email-signup { text-align: center; padding: 0 12px; }

.email-signup h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
}

.signup-form-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 500;
}

.signup-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto 14px;
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(26, 24, 22, 0.08);
}

.signup-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.signup-form input::placeholder { color: rgba(26, 24, 22, 0.4); }

.signup-form button {
  background: var(--green-deep);
  color: var(--bone);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}

.signup-form button:hover { background: var(--ink); }

.signup-disclaimer { font-size: 11px; color: rgba(26, 24, 22, 0.5); }

.footer-trust { background: var(--bone); padding: 36px 0 56px; border-top: 1px solid rgba(26, 24, 22, 0.08); }

.footer-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.ftrust-item { display: flex; flex-direction: column; align-items: center; text-align: center; }

.ftrust-icon { width: 32px; height: 32px; color: var(--gold); margin-bottom: 12px; }
.ftrust-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.ftrust-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.ftrust-desc { font-size: 12px; color: var(--ink-soft); }

.footer-main {
  background: linear-gradient(180deg, var(--green-deep) 0%, var(--green-darker) 100%);
  color: var(--bone);
  padding: 70px 0 50px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-bright);
  margin-bottom: 18px;
  text-align: left;
}

.footer-col-chevron { display: none; width: 16px; height: 16px; position: relative; color: var(--bone); flex-shrink: 0; }
.footer-col-chevron::before, .footer-col-chevron::after { content: ''; position: absolute; background: currentColor; transition: transform 0.3s ease; }
.footer-col-chevron::before { width: 14px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.footer-col-chevron::after { width: 2px; height: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.footer-col.expanded .footer-col-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.footer-col li a {
  font-size: 14px;
  color: rgba(245, 241, 232, 0.78);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col li a:hover { color: var(--gold-bright); }

.footer-bottom { background: var(--green-darkest); color: rgba(245, 241, 232, 0.6); padding: 22px 0; font-size: 12px; }

.footer-bottom-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.legal-links { display: flex; gap: 22px; justify-content: center; }
.legal-links a { color: rgba(245, 241, 232, 0.6); text-decoration: none; transition: color 0.3s ease; }
.legal-links a:hover { color: var(--gold-bright); }

.social-links { display: flex; gap: 18px; justify-content: flex-end; }

.social-links a {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(245, 241, 232, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 232, 0.7);
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-links a:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.social-links svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.fda-disclaimer {
  background: var(--green-darkest);
  color: rgba(245, 241, 232, 0.4);
  padding: 16px 32px;
  font-size: 10px;
  font-style: italic;
  text-align: center;
  border-top: 1px solid rgba(245, 241, 232, 0.05);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1023px) {
  .nav-list { display: none; }
  /* Panneau plein ecran : .ps-mobile-menu-head (injecte par panstellar-ui.js)
     bave jusqu'au bord via margin:-20px/width:calc(100% + 40px), ce qui
     n'a de sens que si ce panneau a padding:20px — valeur reprise ici. */
  .nav-list.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* .nav-list is a .nav-row grid item with justify-self:start (base rule,
       never overridden for .mobile-open). Unlike flexbox, CSS Grid still
       applies justify-self/align-self to out-of-flow (fixed/absolute) grid
       children, sizing them to fit-content at the grid area's start edge —
       measured live as ~122px (content width) instead of filling the
       viewport, even with inset:0 and an explicit width. stretch neutralizes
       it at the source; width:100vw below is belt-and-suspenders. */
    justify-self: stretch;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 9995;
    background: var(--bone, #F5F1E8);
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
  }
  .nav-burger { display: flex; justify-self: start; }
  .nav-row { grid-template-columns: auto 1fr auto; padding: 14px 16px; }
  .nav-logo { font-size: 18px; letter-spacing: 0.26em; }

  .outcomes-section { padding: 80px 16px; }
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .formula-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }
  .formula-visual { aspect-ratio: 16/10; max-height: 380px; }

  /* delivery v8 tablet — rien à overrider, le layout flex s'adapte naturellement */
  .outcome-mobile { display: block; }

  .science-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .science-trust-row { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px 16px 0; }

  .reviews-scroller { padding: 0 16px 20px; }

  .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 16px; }
  .email-signup { grid-column: 1 / -1; order: -1; padding: 0; }
  .footer-trust-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }

  .footer-columns { grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
  .footer-col { border-bottom: 1px solid rgba(245, 241, 232, 0.12); }
  .footer-col-header {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--bone);
    margin-bottom: 0;
    padding: 22px 4px;
    cursor: pointer;
    user-select: none;
  }
  .footer-col-chevron { display: block; }
  .footer-col ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
    padding: 0;
  }
  .footer-col.expanded ul { max-height: 500px; padding: 0 0 22px; }

  .footer-bottom-grid { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 0 16px; }
  .legal-links, .social-links { justify-content: center; }
}

@media (max-width: 767px) {
  .hero { padding: 60px 16px 100px; }
  .hero-tagline { font-size: clamp(38px, 11vw, 60px); margin-bottom: 40px; }
  .hero-visual { margin-bottom: 40px; }

  .outcomes-section, .reviews-section, .price-section { padding: 80px 0; }
  .outcomes-section, .formula-section, .science-section { padding: 80px 0; }

  /* Outcomes mobile - carousel natif + ouverture en modal plein écran */
  .outcomes-carousel {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
    scrollbar-width: none;
  }
  .outcomes-carousel::-webkit-scrollbar { display: none; }
  .outcomes-track { gap: 12px; transition: none; transform: none !important; padding: 0 4px; }
  .outcome-card { width: calc(100vw - 48px); aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .outcome-content { padding: 20px; }
  .outcome-tagline { font-size: 19px; }
  .outcome-tagline .italic-serif { font-size: 21px; }
  .outcome-stat-num { font-size: 28px; }
  /* flèches visibles en mobile : pilotent le scroll natif (swipe), centrées sous le carousel */
  .outcomes-controls { display: flex; margin-top: 24px; gap: 16px; }
  .outcomes-arrow { width: 48px; height: 48px; }
  .outcomes-shop-cta { margin-top: 32px; padding: 0 16px; }

  /* Modal mobile : la carte ouverte sort du flux et remplit l'écran */
  .outcome-card.is-open {
    position: fixed !important;
    inset: 16px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    z-index: 9001 !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    flex-shrink: unset !important;
  }
  /* image en ARRIÈRE-PLAN PLEIN de toute la carte modal (le texte se superpose dessus) */
  .outcome-card.is-open .outcome-visual {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
    z-index: 1 !important;
  }
  .outcome-card.is-open .outcome-visual img { object-fit: cover !important; height: 100% !important; width: 100% !important; display: block !important; }
  /* gradient sombre du bas vers le haut → garantit la lisibilité du texte par-dessus l'image */
  .outcome-card.is-open .outcome-visual::after {
    display: block !important;
    background: linear-gradient(to top, rgba(10,10,12,.92) 0%, rgba(10,10,12,.75) 35%, rgba(10,10,12,.45) 70%, rgba(10,10,12,.25) 100%) !important;
  }
  .outcome-card.is-open .outcome-content {
    position: relative !important;
    z-index: 2 !important;
    min-height: 100%;
    padding: 22px 20px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  /* le header (pill) reste en haut, le reste du contenu poussé vers le bas sur l'image */
  .outcome-card.is-open .outcome-card-header { margin-bottom: auto !important; }
  .outcome-card.is-open .outcome-tagline { font-size: 22px; margin: 0; }
  .outcome-card.is-open .outcome-tagline .italic-serif { font-size: 24px; }
  .outcome-card.is-open .outcome-extended {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 4px !important;
  }
  .outcome-card.is-open .outcome-action-btn { position: absolute; top: 12px; right: 12px; z-index: 6; }
  /* Backdrop modal */
  .outcome-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,12,0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9000;
  }
  .outcome-modal-backdrop.active { display: block; }
  body.outcome-modal-open { overflow: hidden !important; }

  /* Formula mobile compact */
  .formula-section { padding: 60px 0; }
  .formula-pill { margin-bottom: 24px; font-size: 10px; }
  .formula-grid { display: flex; flex-direction: column; gap: 14px; padding: 0 16px; }
  .formula-visual { aspect-ratio: auto; height: 32vh; min-height: 220px; max-height: 280px; padding: 20px; border-radius: 20px; }
  .formula-visual-title { top: 20px; font-size: 22px; line-height: 1.05; }
  .formula-capsule-visual { width: auto !important; height: 75% !important; aspect-ratio: 1 / 2.2 !important; border-radius: 999px; }
  .formula-capsule-eyebrow { bottom: 16px; font-size: 8.5px; letter-spacing: 0.28em; }
  .formula-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .formula-card { padding: 16px 14px; border-radius: 14px; }
  .formula-card-icon { width: 30px; height: 30px; margin-bottom: 10px; }
  .formula-card-icon svg { width: 15px; height: 15px; }
  .formula-card-title { font-size: 15px; margin-bottom: 6px; line-height: 1.15; }
  .formula-card-outcome { font-size: 12px; line-height: 1.35; margin-bottom: 0; }
  .formula-card-badges { margin-top: 10px; gap: 4px; }
  .formula-badge { font-size: 8.5px; padding: 3px 7px; letter-spacing: 0.12em; }
  .formula-card.featured .formula-badge:not(.star) { display: none; }
  .formula-outcome-strip { margin-top: 20px; padding: 0 16px; }
  .formula-outcome-strip p { font-size: 17px; margin-bottom: 16px; line-height: 1.25; }
  .formula-cta { padding: 12px 24px; font-size: 11.5px; }

  /* Review mobile */
  .review-card { flex: 0 0 280px; padding: 24px; }

  /* Price mobile */
  .price-card { padding: 36px 28px; }
  .price-amount { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-tagline, .hero-visual, .hero-cta, .hero-scroll {
    opacity: 1; transform: none; animation: none;
  }
  .promo-marquee__track { animation: none; }
}

/* LEGAL PAGES */
.lp { padding:60px 32px 80px; max-width:780px; margin:0 auto; }
.lp-hero { text-align:center; padding:80px 32px 40px; max-width:680px; margin:0 auto; }
.lp-eyebrow { font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:12px; }
.lp-h1 { font-family:var(--e-global-typography-primary-font-family,'Newsreader'),Georgia,serif; font-style:italic; font-size:clamp(32px,4vw,46px); font-weight:500; letter-spacing:-0.02em; line-height:1.05; margin-bottom:14px; }
.lp-meta { font-size:12px; color:var(--ink-soft); letter-spacing:0.04em; }
.lp h2 { font-family:var(--e-global-typography-primary-font-family,'Newsreader'),Georgia,serif; font-style:italic; font-size:24px; font-weight:500; letter-spacing:-0.01em; margin:36px 0 14px; line-height:1.2; }
.lp h2:first-child { margin-top:8px; }
.lp h3 { font-size:15px; font-weight:700; margin:22px 0 8px; letter-spacing:-0.01em; }
.lp p { font-size:14px; line-height:1.7; color:var(--ink); margin-bottom:14px; }
.lp ul, .lp ol { margin:8px 0 14px 22px; }
.lp li { font-size:14px; line-height:1.7; color:var(--ink); margin-bottom:6px; }
.lp strong { font-weight:700; color:var(--ink); }
.lp a { color:var(--ink); border-bottom:1px solid var(--gold); text-decoration:none; }
.lp a:hover { color:var(--gold); }
.lp-callout { background:var(--stone); border-radius:14px; padding:22px 24px; margin:24px 0; font-size:13px; line-height:1.65; }
.lp-callout strong { display:block; margin-bottom:6px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-deep); }
.lp-divider { height:1px; background:rgba(26,24,22,0.08); margin:40px 0; }
.lp-contact-card { background:var(--stone); border-radius:14px; padding:24px; margin-top:32px; }
.lp-contact-card h4 { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; font-weight:700; }
.lp-contact-card p { font-size:13px; line-height:1.6; margin-bottom:4px; }

@media (max-width:780px) {
  .lp { padding:36px 18px 48px; }
  .lp-hero { padding:48px 18px 24px; }
  .lp h2 { font-size:20px; }
}

/* =========================================================
   Panstellar — Responsive image baseline + utilities
   Ajouté pour rendre toute image fluide (mobile + flex)
   sans redimensionnement manuel. Usage dans les widgets HTML :
   <img class="ps-img-fluid" ...> / .ps-img-cover / .ps-img-ratio
   ========================================================= */
img { max-width: 100%; height: auto; }
.ps-img-fluid { display: block; width: 100%; height: auto; }
.ps-img-cover { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ps-img-ratio { display: block; width: 100%; aspect-ratio: var(--ps-ratio, 1 / 1); object-fit: cover; }
/* sécurité flex : empêche une image de déborder dans une rangée flex */
.ps-flex-min0 > * { min-width: 0; }

/* =========================================================
   Panstellar — Hero avec image de fond (art-direction mobile)
   URL de l'image posée en style inline sur <section class="hero hero--bg">
   Mobile : cadrage ancré à droite pour garder la bouteille visible.
   ========================================================= */
.hero--bg {
  background-size: cover;
  background-position: center;      /* desktop : paysage complet */
  background-repeat: no-repeat;
  align-items: flex-start;          /* texte à gauche */
  text-align: left;
}
.hero--bg::before {                 /* voile gauche pour lisibilité du texte */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(10,10,10,.60), rgba(10,10,10,.20) 42%, transparent 62%);
}
.hero--bg .hero-inner { position: relative; z-index: 1; max-width: 600px; }
.hero--bg .hero-tagline { color: var(--bone); }
.hero--bg .hero-eyebrow { color: var(--gold-bright); }
@media (max-width: 768px) {
  .hero--bg { background-position: right center; }   /* 📱 bouteille (droite) visible */
  .hero--bg::before { background: linear-gradient(to bottom, rgba(10,10,10,.55), rgba(10,10,10,.15) 50%, transparent); }
}

/* Photos de review : l'image remplit le carré (coins arrondis conservés) */
.review-photo { overflow: hidden; padding: 0; }
.review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cartes Outcomes : visuel image en fond (remplace la capsule animée) */
.outcome-visual { position: absolute !important; inset: 0 !important; overflow: hidden; z-index: 1; pointer-events: none; }
.outcome-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.outcome-visual::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,12,.95), rgba(10,10,12,.50) 55%, rgba(10,10,12,.10)); }

/* Formula : image de fond de la carte visuelle (engineered-for-repair) */
.formula-visual { background-size: cover; background-position: center; }
/* Science : visuels des petites cartes (studies / reviewed) */
.science-small-visual { overflow: hidden; padding: 0; }
.science-small-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   FIX chrome global (header/footer) — 2026-06
   ========================================================= */
/* Header/footer Theme Builder en pleine largeur (supprime padding/fond autour du bloc).
   Elementor réapplique sa largeur de contenu globale (1240px) au conteneur racine
   du footer sur certaines pages secondaires : le fond doit néanmoins couvrir le viewport. */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con { padding: 0 !important; }
.elementor-location-footer > .e-con {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sticky fiable : c'est le wrapper de location qui colle (le parent direct de .nav-bar était trop court) */
.elementor-location-header { position: sticky; top: 0; z-index: 999; }
.nav-bar { position: relative; top: auto; }

/* Header translucide (style seed.com) */
.nav-bar {
  background: rgba(245, 241, 232, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

/* Neutralise les styles <button> par défaut de WP/thème qui polluent le chrome
   (fond coloré + padding + texte blanc) → rectangle au survol, carré burger, icône invisible */
.nav-bar .nav-link,
.nav-bar .nav-burger,
.nav-right .nav-icon,
.mobile-overlay button,
.footer-col-header {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.nav-bar .nav-link:hover { background: none !important; color: var(--gold) !important; }
.nav-burger { color: var(--ink) !important; }
.nav-burger svg, .nav-burger svg line { stroke: var(--ink) !important; }

/* Sous-menus (dropdowns) translucides, comme le header */
.nav-dropdown {
  background: rgba(245, 241, 232, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
}
/* Burger mobile : plus grand et plus lisible (était 20px, trait 1.5) */
.nav-burger { width: 44px; height: 44px; }
.nav-burger svg { width: 28px !important; height: 28px !important; stroke-width: 2.5 !important; }

/* Burger + bouton fermer mobile : agrandis pour la lisibilité tactile */
.nav-burger { width: 48px !important; height: 48px !important; }
.nav-burger svg { width: 34px !important; height: 34px !important; stroke-width: 2.5 !important; }
.mobile-overlay__close { width: 48px !important; height: 48px !important; }
.mobile-overlay__close svg { width: 32px !important; height: 32px !important; stroke-width: 2.5 !important; }

/* =========================================================
   FOOTER design — bouteilles réelles + formulaire newsletter
   ========================================================= */
/* Vraies bouteilles dans les 2 cartes produit du footer-top : la photo
   (qui a déjà son fond studio) remplit la carte, bouteille bien visible.
   Carte un peu moins haute que carrée + ancrage haut : rogne le sol/reflet
   crème en bas de la photo (la bouteille va de ~8% à ~88% de la hauteur). */

.product-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
}

/* Newsletter : un seul pill blanc propre.
   - input vraiment transparent (sinon thème/WooCommerce ajoute un fond + bordure
     mal alignés à l'intérieur du pill → effet "boîte dans la boîte")
   - espace horizontal entre le champ et le bouton */
.signup-form { gap: 6px; align-items: center; }
.signup-form input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* =========================================================
   WOOCOMMERCE — boutons harmonisés avec le style du site (.price-cta)
   (couvre fiche produit, boucle/shop, panier, checkout, blocs WC)
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.wc-block-components-button {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  color: var(--bone) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 26px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.wc-block-components-button:hover {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  transform: translateY(-2px);
}

/* CTA principaux pleine largeur + plus grands (add-to-cart fiche, checkout, place order) */
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: block;
  width: 100%;
  padding: 18px 24px;
  font-size: 13px;
  letter-spacing: 0.18em;
}

/* Boutons "ajouter au panier" dans la grille shop : inline, taille mesurée */
.woocommerce ul.products li.product .button.add_to_cart_button {
  display: inline-block;
  width: auto;
  padding: 11px 20px;
}

/* Mega-menu produits (header) : vraies bouteilles dans les cartes (au lieu des labels texte) */
.nav-row { position: relative; }
.product-mini-img { position: relative; overflow: hidden; }
.product-mini-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center !important; mix-blend-mode: multiply; }
.product-mini-img .product-coming-pill { position: absolute; top: 8px; left: 8px; z-index: 2; }
.science-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; }


/* ===== DROPDOWN VIEWPORT ANCHOR =====
   Products (1er item, gauche) : ancrer a gauche de l item pour eviter le debordement.
   About (dernier item, droite) : ancrer a droite. ================================================================= */
.nav-item:first-child { position: static !important; }
.nav-item:first-child .nav-dropdown { left: 32px !important; transform: none !important; right: auto !important; }
@media (max-width: 1024px) { .nav-item:first-child .nav-dropdown { left: 16px !important; } }
.nav-item:first-child:hover .nav-dropdown,
.nav-item:first-child.is-open .nav-dropdown { transform: none !important; }
.nav-item:last-child .nav-dropdown { left: auto !important; right: 0 !important; transform: none !important; }
.nav-item:last-child:hover .nav-dropdown,
.nav-item:last-child.is-open .nav-dropdown { transform: none !important; }


/* =================================================================
   REVEAL ANIMATIONS (IntersectionObserver fade-in)
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .ps-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(.22,.68,0,1.2), transform 0.65s cubic-bezier(.22,.68,0,1.2);
  }
  .ps-reveal.ps-visible {
    opacity: 1;
    transform: none;
  }
  /* stagger delays for grid children */
  .ps-stagger > .ps-reveal:nth-child(1) { transition-delay: 0s; }
  .ps-stagger > .ps-reveal:nth-child(2) { transition-delay: .10s; }
  .ps-stagger > .ps-reveal:nth-child(3) { transition-delay: .20s; }
  .ps-stagger > .ps-reveal:nth-child(4) { transition-delay: .30s; }
  .ps-stagger > .ps-reveal:nth-child(5) { transition-delay: .40s; }
  .ps-stagger > .ps-reveal:nth-child(6) { transition-delay: .50s; }
  /* section headers slide up slightly more */
  .ps-reveal-hdr {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .ps-reveal-hdr.ps-visible { opacity: 1; transform: none; }
}


/* =================================================================
   ÉTAPE 2 : TRANSITION DE PAGE
   ================================================================= */
#ps-page-veil {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bone);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
#ps-page-veil.ps-veil-in  { opacity: 1; pointer-events: all; }
#ps-page-veil.ps-veil-out { opacity: 0; pointer-events: none; }

/* =================================================================
   ÉTAPE 3 : HOVER CARDS ENRICHIS
   ================================================================= */
/* Formula cards */
.formula-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.1), box-shadow 0.35s ease;
}
.formula-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 16px 40px rgba(26,24,22,.10);
}

/* Science cards */
.science-big-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.science-big-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,168,76,.28);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
.science-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.1), border-color 0.35s ease;
}
.science-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,168,76,.22);
}

/* Outcome cards — enrichir le hover existant (border seule) */
.outcome-card {
  transition: width 0.6s var(--ease), flex-basis 0.6s var(--ease),
              border-color 0.4s var(--ease), aspect-ratio 0.6s var(--ease),
              min-height 0.6s var(--ease), box-shadow 0.4s ease;
}
.outcome-card:hover {
  border-color: rgba(201,168,76,.22);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

/* Review cards — augmenter l'effet existant */
.review-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.1), box-shadow 0.35s ease;
}
.review-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(26,24,22,.11); }

/* =================================================================
   ÉTAPE 5 : HERO WORD REVEAL
   ================================================================= */
.hero-tagline .ps-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,.68,0,1.15);
}
.hero-tagline .ps-word.ps-visible {
  opacity: 1;
  transform: none;
}
.hero-eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
}
.hero-eyebrow.ps-visible { opacity: 1; transform: none; }
.hero-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero-cta.ps-visible { opacity: 1; transform: none; }


/* =================================================================
   HOVER CARDS — PAGES PRODUIT / SCIENCE / CONDITIONS
   ================================================================= */
.pp-rv-card {
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.pp-rv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(26,24,22,.1);
  border-color: rgba(201,168,76,.25);
}
.pp-bf-cell {
  transition: transform 0.3s cubic-bezier(.22,.68,0,1.1);
}
.pp-bf-cell:hover { transform: translateY(-6px); }

/* infl-cards (science page) */
.infl-card {
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.1), box-shadow 0.32s ease;
}
.infl-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(26,24,22,.09); }

/* trial cards */
.trial-card {
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.1), box-shadow 0.32s ease;
}
.trial-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }

/* researcher cards */
.researcher {
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.1);
}
.researcher:hover { transform: translateY(-3px); }

/* cond-stat */
.cond-stat {
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.1), box-shadow 0.32s ease;
}
.cond-stat:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(26,24,22,.08); }

/* about values */
.ab-val {
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.1);
}
.ab-val:hover { transform: translateY(-4px); }


/* =================================================================
   MENU MOBILE — stagger items au slide-in
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .mobile-overlay .mobile-accordion-item,
  .mobile-overlay .mobile-overlay__cta {
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity 0.32s ease, transform 0.32s ease;
  }
  .mobile-overlay.is-open .mobile-accordion-item { opacity: 1; transform: none; }
  .mobile-overlay.is-open .mobile-accordion-item:nth-child(1) { transition-delay: 0.18s; }
  .mobile-overlay.is-open .mobile-accordion-item:nth-child(2) { transition-delay: 0.25s; }
  .mobile-overlay.is-open .mobile-accordion-item:nth-child(3) { transition-delay: 0.32s; }
  .mobile-overlay.is-open .mobile-accordion-item:nth-child(4) { transition-delay: 0.39s; }
  .mobile-overlay.is-open .mobile-accordion-item:nth-child(5) { transition-delay: 0.46s; }
  .mobile-overlay.is-open .mobile-overlay__cta { opacity: 1; transform: none; transition-delay: 0.52s; }
  /* Reset instantané à la fermeture pour ne pas bloquer la réouverture */
  .mobile-overlay:not(.is-open) .mobile-accordion-item,
  .mobile-overlay:not(.is-open) .mobile-overlay__cta {
    transition: none;
  }
}

/* =================================================================
   HERO BOTTLE — float animation
   ================================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .hero-bottle {
    animation: ps-float 4.2s ease-in-out infinite;
  }
  @keyframes ps-float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-9px); }
    100% { transform: translateY(0px); }
  }
}

/* FIX mobile mega-menu Products : un <style> inline (dans le header, qu'on ne touche pas)
   force `.products-grid{display:flex !important}` à ≤991px → la grille 3 colonnes est
   cassée, chaque bouteille prend toute la largeur. On rétablit la grille 3 colonnes en
   mobile (comme le desktop : les 3 produits visibles sans scroll). Sélecteur renforcé
   (.nav-dropdown-products .products-grid) + !important pour battre le style inline. */
@media (max-width: 1023px) {
  .nav-dropdown-products .products-grid,
  .products-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
  }
  .nav-dropdown-products .product-mini-card { width: auto !important; }
  /* image bouteille compacte sur mobile (sinon aspect-ratio 1/1.1 reste haut) */
  .nav-dropdown-products .product-mini-img { aspect-ratio: 1 / 1.15; margin-bottom: 6px; }
  .nav-dropdown-products .product-mini-name { font-size: 12px; }
  .nav-dropdown-products .product-mini-sub { font-size: 10px; line-height: 1.25; }
}

@media (min-width: 1024px) and (max-width: 1250px) {
  .nav-dropdown-products {
    min-width: 440px;
    padding: 24px;
  }
  .products-grid {
    gap: 12px;
  }
}

/* =========================================================
   CART DRAWER (mini-panier slide-out) + barre livraison gratuite
   ========================================================= */
.ps-cart-overlay {
  position: fixed; inset: 0; background: rgba(10,10,12,0.45);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
  z-index: 9998; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.ps-cart-open .ps-cart-overlay { opacity: 1; visibility: visible; }

.ps-cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
  background: var(--bone, #F5F1E8); color: var(--ink, #1A1816);
  z-index: 10000; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: -18px 0 50px rgba(10,10,12,0.18);
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), sans-serif;
}
body.ps-cart-open .ps-cart-drawer { transform: translateX(0); }

.ps-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid rgba(26,24,22,0.1); flex-shrink: 0;
}
.ps-cart-title { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.ps-cart-close { background: none; border: 0; color: var(--ink); cursor: pointer; padding: 4px; line-height: 0; }
.ps-cart-close:hover { color: var(--gold, #C9A84C); }

.ps-cart-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Barre livraison gratuite */
.ps-cart-ship { padding: 16px 24px; background: var(--stone, #ECE6D7); flex-shrink: 0; }
.ps-cart-ship-msg { font-size: 12.5px; color: var(--ink); margin: 0 0 10px; line-height: 1.4; }
.ps-cart-ship.is-unlocked .ps-cart-ship-msg { color: #6d9456; }
.ps-cart-ship-bar { height: 5px; border-radius: 999px; background: rgba(26,24,22,0.12); overflow: hidden; }
.ps-cart-ship-bar span { display: block; height: 100%; background: var(--gold, #C9A84C); border-radius: 999px; transition: width .5s ease; }
.ps-cart-ship.is-unlocked .ps-cart-ship-bar span { background: #6d9456; }

/* Liste articles (scroll) */
.ps-cart-items { list-style: none; margin: 0; padding: 8px 24px; flex: 1; overflow-y: auto; }
.ps-cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(26,24,22,0.08); align-items: start; }
.ps-cart-item.is-loading { opacity: .58; }
.ps-cart-item.is-syncing-qty { opacity: .78; }
.ps-cart-item.is-loading .ps-cart-item-info,
.ps-cart-item.is-loading .ps-cart-remove { pointer-events: none; }
.ps-cart-item-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #fff; }
.ps-cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-cart-item-info { min-width: 0; }
.ps-cart-item-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ps-cart-item-meta { font-size: 11.5px; color: var(--ink-soft, #6b6760); margin-top: 2px; }
.ps-cart-item-meta p { margin: 0; }
.ps-cart-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ps-cart-item-price { font-size: 13.5px; font-weight: 600; }

.ps-cart-qty { display: inline-flex; align-items: center; border: 1px solid rgba(26,24,22,0.18); border-radius: 999px; }
.ps-cart-qty-btn { background: none; border: 0; width: 28px; height: 28px; cursor: pointer; font-size: 15px; color: var(--ink); line-height: 1; display: flex; align-items: center; justify-content: center; }
.ps-cart-qty-btn:hover { color: var(--gold, #C9A84C); }
.ps-cart-qty-btn:disabled { opacity: .45; cursor: wait; }
.ps-cart-qty-val { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }

.ps-cart-remove { background: none; border: 0; color: rgba(26,24,22,0.35); cursor: pointer; padding: 2px; line-height: 0; }
.ps-cart-remove:hover { color: #b3402f; }

/* Pied : sous-total + CTA */
.ps-cart-foot { padding: 18px 24px 24px; border-top: 1px solid rgba(26,24,22,0.1); flex-shrink: 0; }
.ps-cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.ps-cart-subtotal span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft, #6b6760); }
.ps-cart-subtotal strong { font-size: 20px; font-weight: 600; }
.ps-cart-subtotal.ps-cart-discount { margin-top: -6px; margin-bottom: 10px; }
.ps-cart-subtotal.ps-cart-discount span,
.ps-cart-subtotal.ps-cart-discount strong { color: var(--green, #09b29c); }
.ps-cart-subtotal.ps-cart-discount span { letter-spacing: .06em; }
.ps-cart-subtotal.ps-cart-discount strong { font-size: 15px; }
.ps-cart-subtotal.ps-cart-total { padding-top: 10px; border-top: 1px solid rgba(26,24,22,0.1); }
.ps-cart-subtotal.ps-cart-total strong { font-size: 20px; }
.ps-cart-coupon-remove {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; padding: 1px 6px !important; min-height: 20px;
  border-radius: 999px !important; background: rgba(9,178,156,0.1) !important;
  color: var(--green, #09b29c) !important; font-size: 10px !important;
  line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.ps-cart-coupon-remove:hover { background: rgba(9,178,156,0.18) !important; }
.ps-cart-coupon-form {
  margin: 2px 0 14px; padding: 12px; border: 1px solid rgba(26,24,22,0.1);
  border-radius: 12px; background: rgba(255,255,255,0.72);
}
.ps-cart-coupon-form label {
  display: block; margin: 0 0 7px; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft, #6b6760); font-weight: 700;
}
.ps-cart-coupon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.ps-cart-coupon-row input {
  width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid rgba(26,24,22,0.16);
  border-radius: 9px; background: #fff; color: var(--ink, #1A1816); font: inherit; font-size: 13px;
}
.ps-cart-coupon-row input:focus { outline: 2px solid rgba(201,168,76,0.35); border-color: var(--gold, #C9A84C); }
.ps-cart-coupon-row button {
  height: 42px; min-width: 76px; padding: 0 14px !important; border-radius: 999px !important;
  background: var(--ink, #1A1816) !important; color: var(--bone, #F5F1E8) !important;
  font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 700 !important;
}
.ps-cart-coupon-row button:hover { background: var(--gold, #C9A84C) !important; color: var(--ink, #1A1816) !important; }
.ps-cart-coupon-form.is-loading { opacity: .65; pointer-events: none; }
.ps-cart-coupon-message {
  min-height: 16px; margin-top: 7px; font-size: 11.5px; line-height: 1.35; color: var(--ink-soft, #6b6760);
}
.ps-cart-coupon-message[data-state="success"] { color: var(--green, #09b29c); }
.ps-cart-coupon-message[data-state="error"] { color: #9f2f25; }
.ps-cart-cta {
  display: block; width: 100%; text-align: center; padding: 16px 24px;
  background: var(--ink, #1A1816); color: var(--bone, #F5F1E8); text-decoration: none;
  border-radius: 999px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  transition: background .3s ease, transform .3s ease;
}
.ps-cart-cta:hover { background: var(--gold, #C9A84C); color: var(--ink, #1A1816); transform: translateY(-2px); }
.ps-cart-link { display: block; text-align: center; margin-top: 12px; font-size: 12px; color: var(--ink-soft, #6b6760); text-decoration: underline; text-underline-offset: 3px; }
.ps-cart-link:hover { color: var(--ink); }

/* État vide */
.ps-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 24px; text-align: center; }
.ps-cart-empty p { color: var(--ink-soft, #6b6760); font-size: 14px; }
.ps-cart-empty .ps-cart-cta { width: auto; padding: 14px 28px; }

@media (max-width: 480px) { .ps-cart-drawer { width: 100%; max-width: 100%; } }

/* =========================================================
   STICKY ADD-TO-CART (fiches produit) — barre fixe en bas
   ========================================================= */
.ps-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: rgba(245,241,232,0.92); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid rgba(26,24,22,0.1); box-shadow: 0 -8px 30px rgba(10,10,12,0.08);
  transform: translateY(110%); transition: transform .4s cubic-bezier(.4,0,.2,1);
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), sans-serif;
}
.ps-sticky-atc.is-visible { transform: translateY(0); }
.ps-sticky-atc__info { display: flex; flex-direction: column; min-width: 0; }
.ps-sticky-atc__name { font-size: 14px; font-weight: 600; color: var(--ink, #1A1816); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-sticky-atc__price { font-size: 13px; color: var(--ink-soft, #6b6760); }
.ps-sticky-atc__price .amount { color: var(--gold-deep, #9a7d2e); font-weight: 600; }
.ps-sticky-atc__btn {
  flex-shrink: 0; background: var(--ink, #1A1816); color: var(--bone, #F5F1E8); border: 0; cursor: pointer;
  padding: 14px 30px; border-radius: 999px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  transition: background .3s ease, transform .3s ease;
}
.ps-sticky-atc__btn:hover { background: var(--gold, #C9A84C); color: var(--ink, #1A1816); transform: translateY(-2px); }
@media (max-width: 600px) {
  .ps-sticky-atc { padding: 10px 16px; gap: 12px; }
  .ps-sticky-atc__btn { padding: 12px 20px; letter-spacing: .12em; }
}

/* =========================================================
   OPTION C — Cadrage du contenu des pages (hors home / produit / cart / checkout / account)
   Conteneurs e-con-full sans fond → plafond 1240px centré + gouttières responsive.
   Préserve les fonds pleine largeur (ces conteneurs n'en ont pas).
   ========================================================= */
body.page:not(.home):not(.page-id-15):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .elementor > .e-con.e-con-full {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* Sélecteurs de variante — sticky + drawer (style site, chevron custom) */
.ps-sticky-atc__variant,
.ps-cart-item-variant {
  -webkit-appearance: none; appearance: none; cursor: pointer; color: var(--ink, #1A1816);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1816' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), sans-serif;
}
.ps-sticky-atc__variant {
  flex-shrink: 0; border: 1px solid rgba(26,24,22,0.2); border-radius: 999px;
  padding: 11px 34px 11px 16px; font-size: 13px; font-weight: 600; max-width: 190px;
}
.ps-cart-item-variant {
  margin-top: 4px; width: 100%; max-width: 160px;
  border: 1px solid rgba(26,24,22,0.18); border-radius: 8px;
  padding: 5px 26px 5px 10px; font-size: 12px; font-weight: 500; color: var(--ink-soft, #6b6760);
}
.ps-cart-item-variant:hover, .ps-sticky-atc__variant:hover { border-color: var(--gold, #C9A84C); }
[data-ps-sticky-add].loading { opacity: .6; pointer-events: none; }
@media (max-width: 600px) {
  .ps-sticky-atc__variant { max-width: 120px; padding: 10px 28px 10px 12px; font-size: 12px; }
  .ps-sticky-atc__info .ps-sticky-atc__price { display: none; } /* gain de place mobile */
}

/* Pills de variante (sticky) — remplace le <select> (pas de popup natif) */
.ps-variant-pills { display: flex; gap: 6px; flex-shrink: 0; }
.ps-variant-pill {
  background: #fff; border: 1px solid rgba(26,24,22,0.2); border-radius: 999px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink, #1A1816); cursor: pointer;
  white-space: nowrap; transition: all .2s ease;
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), sans-serif; line-height: 1;
}
.ps-variant-pill:hover { border-color: var(--gold, #C9A84C); }
.ps-variant-pill.is-active { background: var(--ink, #1A1816); color: var(--bone, #F5F1E8); border-color: var(--ink, #1A1816); }
.ps-variant-pill:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* Sticky : 2 lignes sur mobile → titre+prix (haut) puis variantes+bouton (bas), titre jamais masqué */
@media (max-width: 600px) {
  .ps-sticky-atc { flex-wrap: wrap; row-gap: 10px; align-items: center; }
  .ps-sticky-atc__info { flex: 1 1 100%; }
  .ps-sticky-atc__info .ps-sticky-atc__price { display: inline; }
  .ps-variant-pills { flex: 1 1 auto; }
  .ps-sticky-atc__btn { flex: 0 0 auto; }
  .ps-variant-pill { padding: 9px 14px; font-size: 12px; }
}

/* Cart drawer : supprime les bordures/outlines parasites (roses) sur les boutons + focus sobre */
.ps-cart-drawer button,
.ps-cart-close, .ps-cart-qty-btn, .ps-cart-remove {
  border: 0 !important; outline: none !important; box-shadow: none !important;
  background: none !important; -webkit-appearance: none !important; appearance: none !important;
}
.ps-cart-drawer .ps-cart-coupon-row button {
  background: var(--ink, #1A1816) !important; color: var(--bone, #F5F1E8) !important;
}
.ps-cart-drawer .ps-cart-coupon-row button:hover {
  background: var(--gold, #C9A84C) !important; color: var(--ink, #1A1816) !important;
}
.ps-cart-qty { border: 1px solid rgba(26,24,22,0.18) !important; border-radius: 999px !important; overflow: hidden; }
.ps-cart-close:focus-visible, .ps-cart-qty-btn:focus-visible, .ps-cart-remove:focus-visible {
  outline: 2px solid var(--gold, #C9A84C) !important; outline-offset: 1px;
}

/* =========================================================
   CHECKOUT (bloc WooCommerce) : header masqué, barre minimale, réassurance + avis, habillage on-brand
   ========================================================= */
.woocommerce-checkout .elementor-location-header { display: none !important; }

/* Barre de checkout minimale (logo + secure) */
.ps-co-bar { background: var(--bone,#F5F1E8); border-bottom: 1px solid rgba(26,24,22,0.1); }
.ps-co-bar-in { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.ps-co-logo { font-family: var(--e-global-typography-secondary-font-family,'Newsreader'), serif; font-size: 22px; letter-spacing: .26em; text-transform: lowercase; color: var(--ink,#1A1816); text-decoration: none; }
.ps-co-secure { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft,#6b6760); }

/* Icônes (contour or) */
.ps-co-bar svg, .ps-co-trustbar svg, .ps-co-badge svg { fill: none; stroke: var(--gold-deep,#9a7d2e); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-co-secure svg { width: 15px; height: 15px; }

/* Bandeau réassurance haut */
.ps-co-trustbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; max-width: 1180px; margin: 16px auto 0; padding: 12px 24px; font-size: 12.5px; color: var(--ink-soft,#6b6760); }
.ps-co-trustbar span { display: inline-flex; align-items: center; gap: 7px; }
.ps-co-trustbar svg { width: 16px; height: 16px; }

/* Conteneur du bloc checkout centré */
.woocommerce-checkout .wc-block-checkout, .woocommerce-checkout .wp-block-woocommerce-checkout { max-width: 1180px; margin-inline: auto; }

/* Champs on-brand + focus or */
.wc-block-components-text-input input, .wc-block-components-text-input select,
.wc-block-components-select select, .wc-block-components-address-form input {
  border-radius: 10px !important; border-color: rgba(26,24,22,0.18) !important;
}
.wc-block-components-text-input input:focus, .wc-block-components-text-input.is-active input {
  border-color: var(--gold,#C9A84C) !important; box-shadow: 0 0 0 1px var(--gold,#C9A84C) !important;
}
.wc-block-components-checkout-step__title { font-family: var(--e-global-typography-secondary-font-family,'Newsreader'), serif; }

/* Colonne récap : carte */
.wc-block-checkout__sidebar .wc-block-components-sidebar { background: var(--bone,#F5F1E8); border: 1px solid rgba(26,24,22,0.1); border-radius: 16px; }

/* Bouton "Place order" : pilule ink → or */
.wc-block-components-checkout-place-order-button {
  background: var(--ink,#1A1816) !important; color: var(--bone,#F5F1E8) !important;
  border-radius: 999px !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 600 !important;
}
.wc-block-components-checkout-place-order-button:hover { background: var(--gold,#C9A84C) !important; color: var(--ink,#1A1816) !important; }

/* Bas : badges + avis (preuve sociale au moment du paiement) */
.ps-co-after { max-width: 1180px; margin: 8px auto 50px; padding: 0 24px; }
.ps-co-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 26px 0; border-top: 1px solid rgba(26,24,22,0.1); }
.ps-co-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink,#1A1816); }
.ps-co-badge svg { width: 22px; height: 22px; }
.ps-co-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps-co-review { background: var(--bone,#F5F1E8); border: 1px solid rgba(26,24,22,0.07); border-radius: 14px; padding: 20px 22px; }
.ps-co-stars { display: flex; gap: 2px; margin-bottom: 10px; }
.ps-co-stars svg { width: 15px; height: 15px; fill: var(--gold,#C9A84C); stroke: none; }
.ps-co-review p { font-size: 14px; line-height: 1.5; font-style: italic; color: var(--ink,#1A1816); margin: 0 0 10px; }
.ps-co-review-name { font-size: 12px; color: var(--ink-soft,#6b6760); }



@media (max-width: 720px) {
  .ps-co-reviews { grid-template-columns: 1fr; }
  .ps-co-trustbar { gap: 8px 18px; font-size: 11.5px; }
  .ps-co-logo { font-size: 19px; }
}

/* =========================================================
   CHECKOUT MOBILE — Prevent horizontal overflow / scroll
   Niveau html+body pour couper absolument tout débordement
   ========================================================= */
html:has(body.wfacp-checkout-page),
html:has(body.woocommerce-checkout) {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body.wfacp-checkout-page,
body.woocommerce-checkout {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Logo checkout : limiter à 100% de son conteneur */
.ps-co-bar-in img,
.ps-co-logo img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* Tout élément enfant du checkout ne peut pas dépasser la largeur viewport */
body.wfacp-checkout-page > *,
body.woocommerce-checkout > * {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* FunnelKit checkout wrapper containers */
.wfacp_main_form,
.wfacp_main_form .wfacp-sec-form-container,
.ps-checkout-wrap,
.wfacp_form_wrap,
.wfacp-embed-form,
.wfacp-product-switch-wrap,
.woocommerce-checkout-review-order-table,
.wfacp_mini_cart,
#wfacp-e-form {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  /* Tous les conteneurs Elementor dans la page checkout */
  body.wfacp-checkout-page .elementor-section,
  body.wfacp-checkout-page .elementor-container,
  body.wfacp-checkout-page .e-con,
  body.wfacp-checkout-page .e-con-inner,
  body.woocommerce-checkout .elementor-section,
  body.woocommerce-checkout .elementor-container,
  body.woocommerce-checkout .e-con,
  body.woocommerce-checkout .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Padding barre checkout */
  .ps-co-bar-in {
    padding: 14px 16px !important;
  }

  .ps-co-trustbar {
    padding: 12px 16px !important;
  }

  .ps-co-after {
    padding: 0 16px !important;
  }

  /* Tableau récap commande */
  .woocommerce-checkout-review-order-table,
  table.woocommerce-checkout-review-order-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  /* Inputs Square */
  #fkwcsq-card-element,
  .fkwcsq-card-wrap,
  .fkwcsq-smart-button-wrap {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   CHECKOUT MOBILE — Prevent horizontal overflow / scroll
   Cible à la fois le template FunnelKit (wfacp) et WooCommerce classic
   ========================================================= */
.wfacp-checkout-page,
.woocommerce-checkout {
  overflow-x: hidden !important;
}

.wfacp-checkout-page *,
.woocommerce-checkout * {
  max-width: 100%;
  box-sizing: border-box;
}

/* FunnelKit checkout wrapper containers */
.wfacp_main_form,
.wfacp_main_form .wfacp-sec-form-container,
.ps-checkout-wrap,
.wfacp_form_wrap,
.wfacp-embed-form,
.wfacp-product-switch-wrap,
.woocommerce-checkout-review-order-table,
.wfacp_mini_cart,
#wfacp-e-form {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  /* Conteneur global de la page */
  .wfacp-checkout-page .elementor-section,
  .wfacp-checkout-page .elementor-container,
  .wfacp-checkout-page .e-con,
  .wfacp-checkout-page .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Barre checkout minimale */
  .ps-co-bar-in {
    padding: 14px 16px !important;
  }

  /* Trustbar */
  .ps-co-trustbar {
    padding: 12px 16px !important;
  }

  /* Zone après checkout */
  .ps-co-after {
    padding: 0 16px !important;
  }

  /* Tableau récap commande */
  .woocommerce-checkout-review-order-table,
  table.woocommerce-checkout-review-order-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  /* Inputs Square / FK Square */
  #fkwcsq-card-element,
  .fkwcsq-card-wrap,
  .fkwcsq-smart-button-wrap {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   MY ACCOUNT (shortcode classique [woocommerce_my_account]) — habillage on-brand
   ========================================================= */
.woocommerce-account .woocommerce { max-width: 1040px; margin: 0 auto; padding: 8px 24px 60px; }

/* --- Déconnecté : carte(s) login / register centrées --- */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 900px; }
.woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.woocommerce-form-login, .woocommerce-form-register {
  background: var(--bone,#F5F1E8); border: 1px solid rgba(26,24,22,0.1); border-radius: 16px; padding: 30px 30px; margin: 0 auto; max-width: 460px;
}
.woocommerce-account h2 { font-family: var(--e-global-typography-secondary-font-family,'Newsreader'), serif; font-size: 23px; margin-bottom: 16px; }
.woocommerce-account form .form-row { margin-bottom: 14px; }
.woocommerce-account form .form-row input.input-text, .woocommerce-account form .form-row input[type=password] {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(26,24,22,0.18); border-radius: 10px; font-size: 14px; background: #fff;
}
.woocommerce-account form .form-row input.input-text:focus, .woocommerce-account form .form-row input[type=password]:focus {
  border-color: var(--gold,#C9A84C); outline: none; box-shadow: 0 0 0 1px var(--gold,#C9A84C);
}
.woocommerce-account label { font-size: 13px; color: var(--ink-soft,#6b6760); }
.woocommerce-account .woocommerce-button, .woocommerce-account button.button {
  background: var(--ink,#1A1816) !important; color: var(--bone,#F5F1E8) !important; border: 0 !important;
  border-radius: 999px !important; padding: 13px 30px !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; cursor: pointer; transition: background .25s ease;
}
.woocommerce-account .woocommerce-button:hover, .woocommerce-account button.button:hover { background: var(--gold,#C9A84C) !important; color: var(--ink,#1A1816) !important; }

/* --- Connecté : nav latérale + contenu --- */
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; }
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(26,24,22,0.1); border-radius: 14px; overflow: hidden; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 13px 18px; font-size: 13.5px; color: var(--ink,#1A1816); text-decoration: none; border-bottom: 1px solid rgba(26,24,22,0.07); transition: background .2s ease; }
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--stone,#ECE6D7); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--ink,#1A1816); color: var(--bone,#F5F1E8); font-weight: 600; }
.woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-content table th, .woocommerce-MyAccount-content table td { padding: 12px; border-bottom: 1px solid rgba(26,24,22,0.1); font-size: 13.5px; text-align: left; }

@media (max-width: 720px) {
  .woocommerce-account .u-columns, .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 22px; }
}

/* Checkout : masque le titre de page auto (doublon avec la barre minimale .ps-co-bar) */
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-title,
.woocommerce-checkout .elementor-page-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout header.entry-header,
.woocommerce-checkout .page-header { display: none !important; }

/* FIX My Account dashboard : nav + contenu côte à côte (override floats WooCommerce, sans dépendre du body class) */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: flex !important; gap: 40px; align-items: flex-start; flex-wrap: wrap; max-width: 1040px; margin: 0 auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important; width: 230px !important; flex: 0 0 230px !important; margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important; width: auto !important; flex: 1 1 0 !important; min-width: 0; margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }

/* =========================================================
   CART (bloc WooCommerce) — habillage on-brand
   ========================================================= */
body.woocommerce-cart { background: var(--bone, #F5F1E8); overflow-x: clip; }
.woocommerce-cart .site-main,
.woocommerce-cart main,
.woocommerce-cart .page-content,
.woocommerce-cart .entry-content {
  max-width: 1220px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px);
}
.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title {
  max-width: 1180px; margin: clamp(28px, 5vw, 54px) auto 12px;
  padding-inline: clamp(16px, 4vw, 32px);
  font-family: var(--e-global-typography-secondary-font-family,'Newsreader'), Georgia, serif;
  font-size: clamp(34px, 5vw, 56px); font-weight: 500; line-height: 1.02; letter-spacing: 0;
}
.woocommerce-cart .woocommerce,
.woocommerce-cart .wc-block-cart,
.woocommerce-cart .wp-block-woocommerce-cart {
  max-width: 1180px; margin: 0 auto clamp(48px, 8vw, 86px); color: var(--ink, #1A1816);
}
.ps-cart-trustbar {
  max-width: 1180px; margin: 4px auto 18px; border-radius: 12px;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(26,24,22,0.08);
}
.woocommerce-cart .wc-block-cart {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(18px, 3vw, 28px); align-items: start;
}
.woocommerce-cart .wc-block-cart__main,
.woocommerce-cart .wc-block-components-main,
.woocommerce-cart form.woocommerce-cart-form,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar {
  background: rgba(255,255,255,0.9); border: 1px solid rgba(26,24,22,0.1);
  border-radius: 14px; box-shadow: 0 18px 45px rgba(26,24,22,0.05);
}
.woocommerce-cart .wc-block-cart__main,
.woocommerce-cart .wc-block-components-main,
.woocommerce-cart form.woocommerce-cart-form { padding: clamp(14px, 2vw, 22px); min-width: 0; }
.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-cart .cart-collaterals .cart_totals { position: sticky; top: 92px; overflow: hidden; }
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.woocommerce-cart .cart-collaterals .cart_totals { padding: clamp(18px, 2.4vw, 24px); }
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .wc-block-cart-items__header {
  font-family: var(--e-global-typography-secondary-font-family,'Newsreader'), Georgia, serif;
  font-size: 24px; font-weight: 500; letter-spacing: 0; color: var(--ink, #1A1816);
}
.woocommerce-cart .wc-block-cart-items,
.woocommerce-cart table.shop_table {
  width: 100%; border: 0 !important; border-collapse: collapse; margin: 0;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-cart .wc-block-cart-items__row {
  border-color: rgba(26,24,22,0.08) !important;
}
.woocommerce-cart .wc-block-cart-items__row,
.woocommerce-cart table.shop_table tr.cart_item {
  min-width: 0; transition: background .2s ease;
}
.woocommerce-cart .wc-block-cart-items__row:hover,
.woocommerce-cart table.shop_table tr.cart_item:hover { background: rgba(245,241,232,0.5); }
.woocommerce-cart .wc-block-cart-item__image img,
.woocommerce-cart table.cart img {
  width: 76px; max-width: 76px; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; background: var(--stone, #ECE6D7);
}
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart table.cart .product-name a {
  color: var(--ink, #1A1816); font-weight: 700; text-decoration: none; line-height: 1.25;
}
.woocommerce-cart .wc-block-components-product-name:hover,
.woocommerce-cart table.cart .product-name a:hover { color: var(--gold-deep, #6B5320); }
.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .variation,
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
  color: var(--ink-soft, rgba(26,24,22,0.65)); font-size: 13px;
}
.woocommerce-cart .wc-block-components-quantity-selector,
.woocommerce-cart .quantity .qty {
  min-height: 38px; border-radius: 999px !important; border: 1px solid rgba(26,24,22,0.18) !important;
  background: #fff !important; box-shadow: none !important;
}
.woocommerce-cart .quantity .qty { width: 74px; padding-inline: 10px; text-align: center; }
.woocommerce-cart .wc-block-cart-item__remove-link,
.woocommerce-cart table.cart .product-remove a {
  color: rgba(26,24,22,0.5) !important; text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover,
.woocommerce-cart table.cart .product-remove a:hover { color: #9f2f25 !important; background: transparent !important; }
.woocommerce-cart .wc-block-components-totals-wrapper,
.woocommerce-cart .cart_totals table.shop_table tr {
  border-color: rgba(26,24,22,0.1) !important;
}
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals .cart-subtotal th {
  color: var(--ink-soft, rgba(26,24,22,0.65)); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
}
.woocommerce-cart .wc-block-components-totals-item__value,
.woocommerce-cart .cart_totals td {
  color: var(--ink, #1A1816); font-weight: 700;
}
.woocommerce-cart .wc-block-components-totals-discount,
.woocommerce-cart .cart-discount th,
.woocommerce-cart .cart-discount td,
.woocommerce-cart .cart-discount .amount {
  color: var(--green, #09b29c) !important;
}
.woocommerce-cart .wc-block-components-totals-footer-item,
.woocommerce-cart .order-total {
  padding-top: 14px !important; border-top: 1px solid rgba(26,24,22,0.12) !important;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .order-total th { color: var(--ink, #1A1816); font-size: 14px; letter-spacing: 0; text-transform: none; }
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-cart .order-total .amount { font-size: 24px; font-weight: 700; color: var(--ink, #1A1816); }
.woocommerce-cart .wc-block-components-totals-coupon,
.woocommerce-cart .coupon {
  margin-top: 14px; padding: 12px; border: 1px solid rgba(26,24,22,0.1);
  border-radius: 12px; background: var(--bone, #F5F1E8);
}
.woocommerce-cart .wc-block-components-totals-coupon__form,
.woocommerce-cart table.cart td.actions .coupon {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch;
}
.woocommerce-cart .wc-block-components-text-input input,
.woocommerce-cart .coupon .input-text {
  min-width: 0; min-height: 44px; border: 1px solid rgba(26,24,22,0.16) !important;
  border-radius: 10px !important; background: #fff !important; color: var(--ink, #1A1816) !important;
  box-shadow: none !important; font-size: 14px;
}
.woocommerce-cart .wc-block-components-text-input input:focus,
.woocommerce-cart .coupon .input-text:focus {
  outline: 2px solid rgba(201,168,76,0.35) !important; border-color: var(--gold, #C9A84C) !important;
}
.woocommerce-cart .wc-block-components-button,
.woocommerce-cart .button,
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button,
.woocommerce-cart .checkout-button {
  min-height: 48px; background: var(--ink,#1A1816) !important; color: var(--bone,#F5F1E8) !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
  text-transform: uppercase; letter-spacing: .12em; font-size: 12px !important; font-weight: 700 !important;
  text-decoration: none !important; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.woocommerce-cart .wc-block-components-button:hover,
.woocommerce-cart .button:hover,
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button:hover,
.woocommerce-cart .checkout-button:hover {
  background: var(--gold,#C9A84C) !important; color: var(--ink,#1A1816) !important; transform: translateY(-1px);
}
.woocommerce-cart .wc-block-components-button:disabled,
.woocommerce-cart .button:disabled,
.woocommerce-cart .button[disabled] { opacity: .48 !important; cursor: not-allowed; transform: none; }
.woocommerce-cart .wc-block-cart__submit-container,
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 16px; }
.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button,
.woocommerce-cart .checkout-button { width: 100%; justify-content: center; }
.woocommerce-cart .wc-block-cart a:hover { color: var(--gold-deep,#6B5320); }
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-block-cart__empty-cart__title {
  max-width: 680px; margin: 28px auto 14px; padding: 24px;
  border-radius: 14px; background: rgba(255,255,255,0.9); border: 1px solid rgba(26,24,22,0.1);
  text-align: center; color: var(--ink, #1A1816);
}
.woocommerce-cart .return-to-shop { text-align: center; }
@media (max-width: 980px) {
  .woocommerce-cart .wc-block-cart { grid-template-columns: 1fr; }
  .woocommerce-cart .wc-block-cart__sidebar,
  .woocommerce-cart .cart-collaterals .cart_totals { position: static; }
}
@media (max-width: 768px) {
  .woocommerce-cart .site-main,
  .woocommerce-cart main,
  .woocommerce-cart .page-content,
  .woocommerce-cart .entry-content { padding-inline: 14px; max-width: 100%; overflow-x: clip; }
  .woocommerce-cart .entry-title,
  .woocommerce-cart h1.entry-title { padding-inline: 14px; }
  .ps-cart-trustbar { margin-inline: 14px; }
  .woocommerce-cart .wc-block-cart__main,
  .woocommerce-cart .wc-block-components-main,
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals .cart_totals { border-radius: 12px; padding: 14px; }
  .woocommerce-cart .wc-block-cart-item__image img,
  .woocommerce-cart table.cart img { width: 62px; max-width: 62px; border-radius: 10px; }
  .woocommerce-cart table.shop_table_responsive tr.cart_item {
    display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px;
    padding: 14px 0; border-bottom: 1px solid rgba(26,24,22,0.08);
  }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td {
    display: block !important; text-align: left !important; border: 0 !important; padding: 0 !important;
  }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td::before { display: none !important; }
  .woocommerce-cart table.shop_table_responsive tr.cart_item .product-thumbnail { grid-row: span 4; }
  .woocommerce-cart table.shop_table_responsive tr.cart_item .product-remove { grid-column: 2; justify-self: start; }
  .woocommerce-cart table.cart td.actions .coupon,
  .woocommerce-cart .wc-block-components-totals-coupon__form { grid-template-columns: 1fr; }
  .woocommerce-cart .coupon .button,
  .woocommerce-cart .wc-block-components-totals-coupon__button { width: 100%; }
}

.lib-filter { color: var(--ink,#1A1816) !important; }
.lib-filter.active { color: var(--bone,#F5F1E8) !important; }

/* ===== Racine : neutralise le rose #c36 du thème Hello Elementor (liens + boutons par défaut) → charte ===== */
a { color: var(--gold-deep, #6B5320); }
a:hover { color: var(--gold, #C9A84C); }
button, [type="button"], [type="submit"], [type="reset"] { color: inherit; border-color: rgba(26,24,22,0.18); }
.anno { display: none !important; }

/* Home : header translucide en OVERLAY sur le hero → translucidité visible dès le landing
   (sinon, nav sticky en haut = rien derrière = paraît solide). Le hero remonte derrière le nav. */
body.home .elementor-location-header { position: fixed; left: 0; right: 0; top: 0; z-index: 999; }
body.home .hero.hero--bg { padding-top: 116px; }
@media (max-width: 767px) { body.home .hero.hero--bg { padding-top: 92px; } }

/* Header : forcer la police de marque + graisse sur les liens de nav (les <button> ne l'héritaient pas → trop fin) */
.nav-link, .nav-bar .nav-link, .nav-bar button.nav-link, .nav-cta {
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), sans-serif !important;
  font-weight: 500 !important;
}

/* ============================================================
   DÉFAUTS GLOBAUX = CHARTE GRAPHIQUE
   Tout élément sans style explicite hérite ces valeurs de marque
   (remplace les défauts Hello Elementor : police système fine sur button/input,
   liens & boutons en #c36). Les éléments stylés (classes) gardent leur style.
   ============================================================ */
body, button, input, select, textarea, optgroup {
  font-family: var(--e-global-typography-text-font-family, 'Manrope'), system-ui, sans-serif;
}
body { color: var(--ink, #1A1816); }
input, select, textarea { color: var(--ink, #1A1816); }
button, [type="button"], [type="submit"], [type="reset"] {
  color: inherit;
  border-color: rgba(26, 24, 22, 0.18);
}
a { color: var(--gold-deep, #6B5320); }
a:hover, a:focus { color: var(--gold, #C9A84C); }

/* Eyebrows (labels au-dessus des titres de section) sur fond CLAIR : agrandis + assombris (gold-deep)
   pour le contraste sur le bone. Exclus : ceux sur fond sombre/image (hero, delivery, panneaux sombres). */
.pp-eyebrow, .sp-eyebrow, .col-eyebrow, .lqp-cat, .lp-eyebrow, .stub-eyebrow, .pp-modal-eye,
.outcomes-eyebrow, .reviews-eyebrow, .price-eyebrow, .block-eyebrow, .eyebrow, .eyebrowNew {
  font-size: 13px !important;
  letter-spacing: 0.2em;
  color: var(--gold-deep, #6B5320) !important;
}

/* Home formula : réduit le gap haut (130px → 24px) + eyebrow .formula-pill ~5x plus grand */
.formula-section { padding-top: 24px !important; }
.formula-pill {
  font-size: clamp(30px, 5.2vw, 54px) !important;
  letter-spacing: 0.04em !important;
  color: var(--gold-deep, #6B5320) !important;
  margin-bottom: 22px !important;
  line-height: 1.05;
}

/* Home formula : « Stack 157™ » en vrai TITRE de section (Newsreader italic ink), plutôt qu'un eyebrow géant */
.formula-pill {
  font-family: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink, #1A1816) !important;
  line-height: 1.06;
  margin-bottom: 32px !important;
}

/* ====== Outcomes (home) — images désormais centrées (nouveaux visuels cadrés au centre) ====== */
.outcomes-track .outcome-visual img { object-position: center center !important; }

/* ====== Outcomes — carte OUVERTE en 2 colonnes (style Oura), desktop uniquement ======
   Gauche : label / titre / description / bouton — Droite : photo + témoignage (nom/avis) + chiffres */
@media (min-width: 1024px) {
  .outcome-card.is-open .outcome-visual { left: auto; right: 0; width: 45%; }
  .outcome-card.is-open .outcome-visual img { object-position: center !important; }
  .outcome-card.is-open .outcome-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.12) 40%); }

  .outcome-card.is-open .outcome-content {
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-areas:
      "label   review"
      "title   review"
      "desc    review"
      "button  stats";
    align-content: center;
    column-gap: 38px;
    row-gap: 10px;
    padding: 46px 44px;
  }
  .outcome-card.is-open .outcome-card-header,
  .outcome-card.is-open .outcome-extended { display: contents; }

  .outcome-card.is-open .outcome-pill      { grid-area: label; align-self: end; }
  .outcome-card.is-open .outcome-tagline   { grid-area: title; }
  .outcome-card.is-open .outcome-sub-text  { grid-area: desc; max-width: none; }
  .outcome-card.is-open .outcome-testimonial { grid-area: review; align-self: center; }
  /* bottom-row contient [stats <div>] + [<a.outcome-learn>]. On le « dissout »
     (display:contents) pour que ses 2 enfants se placent directement dans la grille
     parente : les chiffres en bas-droite (stats), le bouton learn en bas-gauche (button). */
  .outcome-card.is-open .outcome-bottom-row {
    display: contents;
  }
  .outcome-card.is-open .outcome-bottom-row > div { grid-area: stats; align-self: end; justify-self: end; text-align: right; }
  .outcome-card.is-open .outcome-bottom-row .outcome-learn {
    display: inline-flex !important;
    align-items: center;
    grid-area: button;
    justify-self: start;
    align-self: center;
  }
  .outcome-card.is-open .outcome-action-btn { position: absolute; top: 16px; right: 16px; z-index: 6; }
}

/* ====== Header : totalement TRANSPARENT + identique sur toutes les pages (overlay fixe comme la home) ====== */
.elementor-location-header { position: fixed !important; left: 0; right: 0; top: 0; }
.nav-bar {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
}

/* ====== Header : overlay sur la HOME (sur le hero), EN FLUX ailleurs (plus de chevauchement)
   + transparent en haut, TRANSLUCIDE au scroll (.scrolled posé par le JS) ====== */
body.home .elementor-location-header { position: fixed !important; }
body:not(.home) .elementor-location-header { position: sticky !important; }
.nav-bar {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom-color: transparent !important; box-shadow: none !important;
}
.nav-bar.scrolled {
  background: rgba(245,241,232,0.85) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  border-bottom: 1px solid rgba(26,24,22,0.06) !important;
}

/* Outcomes carte ouverte : label EN HAUT (plus centré) + 3x plus grand ; chiffres en bas */
@media (min-width: 1024px) {
  .outcome-card.is-open .outcome-content {
    grid-template-rows: auto auto auto 1fr auto !important;
    grid-template-areas:
      "label   review"
      "title   review"
      "desc    review"
      ".       ."
      "button  stats" !important;
    align-content: stretch !important;
    height: 100% !important;
  }
  .outcome-card.is-open .outcome-pill {
    align-self: start !important;
    justify-self: start !important;
    font-size: 30px !important;
    padding: 10px 20px !important;
    line-height: 1.1 !important;
  }
}

/* Outcomes carte ouverte (A) : grande image en FOND PLEIN derrière les 2 colonnes */
@media (min-width: 1024px) {
  .outcome-card.is-open .outcome-visual { left: 0 !important; right: auto !important; width: 100% !important; }
  .outcome-card.is-open .outcome-visual::after {
    background: linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.72) 42%, rgba(10,10,12,0.34) 100%) !important;
  }
}
/* Avatar reviewer (initiales) + layout témoignage : photo+nom en haut, avis dessous */
.outcome-t-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--gold-deep, #6B5320); color: var(--bone, #F5F1E8);
  font-family: var(--e-global-typography-secondary-font-family, 'Newsreader'), serif;
  font-size: 17px; font-weight: 600;
}
/* photo de profil réelle dans l'avatar (remplit le cercle) */
.outcome-t-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outcome-testimonial {
  display: grid; grid-template-columns: 46px 1fr;
  grid-template-areas: "av name" "av role" "quote quote";
  column-gap: 12px;
}
.outcome-testimonial .outcome-t-avatar { grid-area: av; align-self: center; }
.outcome-testimonial .outcome-t-name { grid-area: name; align-self: end; }
.outcome-testimonial .outcome-t-role { grid-area: role; align-self: start; }
.outcome-testimonial .outcome-t-quote { grid-area: quote; margin-top: 12px; }

/* Label outcome (.outcome-pill) plus grand aussi en version NON déroulée (collapsed) */
.outcome-pill { font-size: 16px !important; padding: 8px 16px !important; }

/* Bouton +/× des cartes outcomes : NOIR sur fond BLANC, plus aucun rose (bordure/outline/focus) */
.outcome-action-btn,
.outcome-action-btn:hover,
.outcome-action-btn:focus,
.outcome-action-btn:focus-visible,
.outcome-action-btn:active {
  background: #fff !important;
  color: var(--ink, #1A1816) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.outcome-action-btn .plus-icon,
.outcome-action-btn .close-icon { color: var(--ink, #1A1816) !important; }
.outcome-action-btn .close-icon, .outcome-action-btn .close-icon path { stroke: var(--ink, #1A1816) !important; }

/* Carte ouverte : l'icône × SVG ne s'affichait pas → on la remplace par un × CSS fiable (noir) */
.outcome-card.is-open .outcome-action-btn .close-icon,
.outcome-card.is-open .outcome-action-btn .plus-icon { display: none !important; }
.outcome-card.is-open .outcome-action-btn::after {
  content: "\00d7";
  font-size: 24px; line-height: 1; font-weight: 400;
  color: var(--ink, #1A1816);
}

/* Carte ouverte : MÊME HAUTEUR que les cartes fermées (s'étire à la rangée), seulement plus LARGE */
@media (min-width: 1024px) {
  .outcome-card.is-open {
    aspect-ratio: auto !important;
    height: auto !important;
    align-self: stretch !important;
    width: 62% !important;
  }
}

/* Carte ouverte : plus HAUTE + textes plus GRANDS (contenu bien visible) */
@media (min-width: 1024px) {
  .outcome-card.is-open {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 62vh !important;
    align-self: start !important;
    width: 64% !important;
  }
  .outcome-card.is-open .outcome-content { padding: 52px 48px !important; row-gap: 14px; }
  .outcome-card.is-open .outcome-tagline { font-size: 34px !important; line-height: 1.12 !important; }
  .outcome-card.is-open .outcome-tagline .italic-serif { font-size: 36px !important; }
  .outcome-card.is-open .outcome-sub-text { font-size: 17px !important; line-height: 1.6 !important; max-width: 92% !important; }
  .outcome-card.is-open .outcome-t-quote { font-size: 18px !important; line-height: 1.55 !important; }
  .outcome-card.is-open .outcome-t-name { font-size: 17px !important; }
  .outcome-card.is-open .outcome-t-role { font-size: 13px !important; }
  .outcome-card.is-open .outcome-t-avatar { width: 54px !important; height: 54px !important; font-size: 20px !important; }
  .outcome-card.is-open .outcome-stat-num { font-size: 46px !important; line-height: 1 !important; }
  .outcome-card.is-open .outcome-stat-label { font-size: 13px !important; }
  .outcome-card.is-open .outcome-learn { font-size: 14px !important; }
}

/* =================================================================
   KLAVIYO FORMS — correctifs minimaux
   Laisser Klaviyo gérer ses propres styles. Seul correctif :
   empêcher le reset global img d'écraser les images du popup.
   ================================================================= */


/* ══════════════════════════════════════════════════════════════════════
   PREVIEW MOCKUP (template #7829) — PHASE A : traitement couleurs/sections
   Scopé à .elementor-page-7829 → AUCUN impact sur la page live (106)
   ══════════════════════════════════════════════════════════════════════ */
.elementor-page-7829{ --ps-green:#1f3a2e; --ps-green-soft:rgba(245,241,232,.06); --ps-green-bd:rgba(245,241,232,.16); }

/* Fond global bone (sécurité) */
.elementor-page-7829 .ps-sp-hero,
.elementor-page-7829 .ps-sec-pp-acc,
.elementor-page-7829 .ps-sec-pp-cmp,
.elementor-page-7829 .ps-sec-pp-rng,
.elementor-page-7829 .ps-sec-pp-qa{ background:var(--bone,#F5F1E8) !important; }

/* ───── pp-bf : barre d'icônes → vert foncé ───── */
.elementor-page-7829 .ps-sec-pp-bf{ background:var(--ps-green) !important; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-label,
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-label *{ color:var(--bone,#F5F1E8) !important; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-grid{ border-color:rgba(245,241,232,.14) !important; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-ico svg{ stroke:var(--gold,#C9A84C) !important; color:var(--gold,#C9A84C) !important; }

/* ───── pp-dv : how it works → vert foncé ───── */
.elementor-page-7829 .ps-sec-pp-dv{ background:var(--ps-green) !important; }
.elementor-page-7829 .ps-sec-pp-dv .pp-dv-title,
.elementor-page-7829 .ps-sec-pp-dv .pp-dv-sub,
.elementor-page-7829 .ps-sec-pp-dv .pp-dv-step,
.elementor-page-7829 .ps-sec-pp-dv .pp-dv-step *{ color:var(--bone,#F5F1E8) !important; }
.elementor-page-7829 .ps-sec-pp-dv .pp-dv-step{ background:var(--ps-green-soft) !important; border-color:var(--ps-green-bd) !important; }

/* ───── pp-tg : testing → vert foncé ───── */
.elementor-page-7829 .ps-sec-pp-tg{ background:var(--ps-green) !important; }
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-title,
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-sub{ color:var(--bone,#F5F1E8) !important; }
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-cell{
  background:var(--ps-green-soft) !important; border-color:var(--ps-green-bd) !important; color:var(--bone,#F5F1E8) !important;
}
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-cell span,
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-cell{ color:var(--bone,#F5F1E8) !important; }
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-cell svg{ stroke:var(--gold,#C9A84C) !important; color:var(--gold,#C9A84C) !important; }
.elementor-page-7829 .ps-sec-pp-tg .pp-tg-cta{ color:var(--bone,#F5F1E8) !important; border-color:rgba(245,241,232,.4) !important; }

/* ═══ PREVIEW #7829 — PHASE A typo : titres serif DROITS (mockup n'est pas en italique) ═══ */
.elementor-page-7829 .pp-acc-title,
.elementor-page-7829 .pp-dv-title,
.elementor-page-7829 .pp-cmp-title,
.elementor-page-7829 .pp-rng-title,
.elementor-page-7829 .pp-rv-title,
.elementor-page-7829 .pp-tg-title,
.elementor-page-7829 .pp-bf-title,
.elementor-page-7829 .pp-pw-title,
.elementor-page-7829 .pp-qa-title,
.elementor-page-7829 .pp-ps-side-title,
.elementor-page-7829 .ps-sp-title,
.elementor-page-7829 .product_title,
.elementor-page-7829 .ps-sp-summary .product_title,
.elementor-page-7829 .pp-modal-title,
.elementor-page-7829 .ps-rv-section-title{ font-style:normal !important; }

/* ═══ PREVIEW #7829 — PHASE B : barre d'icônes (pp-bf) layout mockup ═══ */
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-grid{
  display:flex !important; flex-wrap:wrap; justify-content:space-around; align-items:center;
  gap:20px 32px; border:0 !important;
}
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-cell{
  flex-direction:row !important; align-items:center; gap:12px; text-align:left; transform:none !important;
}
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-ico{
  width:auto !important; height:auto !important; background:none !important; flex:0 0 auto;
}
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-ico::before{ display:none !important; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-ico svg{ width:30px !important; height:30px !important; stroke:var(--gold,#C9A84C) !important; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-label{ display:flex !important; flex-direction:column; line-height:1.2; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-label strong{ font-size:15px; font-weight:600; color:var(--bone,#F5F1E8); letter-spacing:.01em; }
.elementor-page-7829 .ps-sec-pp-bf .pp-bf-sub{ font-size:12px; color:rgba(245,241,232,.7); }
@media (max-width:600px){
  .elementor-page-7829 .ps-sec-pp-bf .pp-bf-grid{ gap:14px 18px; }
  .elementor-page-7829 .ps-sec-pp-bf .pp-bf-cell{ flex:0 0 45%; }
}

/* ═══ PREVIEW #7829 — PHASE B : section outcomes "Supports what moves you forward." ═══ */
.elementor-page-7829 .ps-sec-outcomes{ background:var(--bone,#F5F1E8) !important; padding:60px 24px; }
.elementor-page-7829 .ps-outcomes{ max-width:1120px; margin:0 auto; }
.elementor-page-7829 .ps-outcomes-title{
  font-family:'Söhne','Newsreader',Georgia,serif; font-style:normal; font-weight:500;
  font-size:clamp(26px,3.4vw,40px); letter-spacing:-0.02em; color:var(--ink,#1A1816);
  text-align:center; margin:0 0 36px;
}
.elementor-page-7829 .ps-outcomes-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.elementor-page-7829 .ps-outcome-card{ display:flex; flex-direction:column; align-items:center; }
.elementor-page-7829 .ps-outcome-media{
  position:relative; width:100%; aspect-ratio:1/1.12; border-radius:14px; overflow:hidden; background:#e9e3d6;
}
.elementor-page-7829 .ps-outcome-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.elementor-page-7829 .ps-outcome-ico{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  width:50px; height:50px; border-radius:50%; background:rgba(245,241,232,.95);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(26,24,22,.18);
}
.elementor-page-7829 .ps-outcome-ico svg{ width:24px; height:24px; stroke:var(--gold-deep,#9c7e2e); }
.elementor-page-7829 .ps-outcome-label{
  margin-top:14px; font-family:'Söhne','Newsreader',Georgia,serif; font-size:17px; color:var(--ink,#1A1816);
}
.elementor-page-7829 .ps-outcome-label sup{ font-size:.6em; color:var(--ink-soft,rgba(26,24,22,.5)); }
@media (max-width:780px){ .elementor-page-7829 .ps-outcomes-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* =========================================================
   KLAVIYO POPUPS - isolate from Panstellar/Hello global resets
   =========================================================
   Klaviyo injects onsite forms directly into the page DOM. Our global reset
   styles `button`, inputs, links and `*`, so the popup can inherit brand/theme
   styles instead of the layout configured in Klaviyo.
*/
.klaviyo-form,
.klaviyo-form *,
[class*="kl-private"],
[class*="kl-private"] *,
[class*="needsclick"],
[class*="needsclick"] * {
  box-sizing: border-box;
}

.klaviyo-form,
[class*="kl-private"],
[class*="needsclick"] {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.klaviyo-form button,
.klaviyo-form input,
.klaviyo-form select,
.klaviyo-form textarea,
[class*="kl-private"] button,
[class*="kl-private"] input,
[class*="kl-private"] select,
[class*="kl-private"] textarea,
[class*="needsclick"] button,
[class*="needsclick"] input,
[class*="needsclick"] select,
[class*="needsclick"] textarea {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.klaviyo-form button[aria-label*="Close" i],
.klaviyo-form [role="button"][aria-label*="Close" i],
[class*="kl-private"] button[aria-label*="Close" i],
[class*="kl-private"] [role="button"][aria-label*="Close" i],
[class*="needsclick"] button[aria-label*="Close" i],
[class*="needsclick"] [role="button"][aria-label*="Close" i] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  padding: 0 !important;
  text-transform: none !important;
  transform: none !important;
}

/* Marquee : désactivé sur mobile (repaint inutile, contenu lisible statique) */
@media (max-width: 767px) {
  .promo-marquee__track { animation: none; }
}

/* psh-fade-in (science hero section) : éléments immédiatement visibles sur mobile.
   Sur desktop l'IntersectionObserver les révèle au scroll — sur mobile on économise
   le JS d'observation + le repaint d'opacité. */
@media (max-width: 767px) {
  .psh-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Empêche le reset global img { height: auto } d'écraser les images du popup Klaviyo */
.klaviyo-form img,
[class*="kl-private"] img,
[class*="needsclick"] img {
  max-width: 100%;
}

/* Headline cleanup: keep the premium serif feel, but remove the overused italic
   treatment on primary headings so pages read cleaner and more modern. */
.hero-tagline,
.lp-h1,
.lp h2,
.delivery-left-copy h2,
.pp-hero-info h1,
.pp-acc-title,
.pp-modal-title,
.pp-ps-title,
.pp-ps-side-title,
.pp-dv-title,
.pp-cmp-title,
.pp-rng-title,
.pp-rv-title,
.pp-tg-title,
.pp-pw-title,
.pp-qa-left h2,
.sp-h1,
.sp-section h2,
.prac-hero h1,
.stub h1,
.cond-hero h1,
.lib-hero h1,
.sub-hero h1,
.s-h,
.col-h1,
.lqp-info h1,
.lqp-desc h2,
.lqp-reviews-title,
.lqp-faq h2 {
  font-style: normal !important;
}


/* ═══ 2026-07-29 — Menu mobile refermable + Products ouvert par défaut ═══ */
.ps-mobile-menu-head { display: none !important; }

/* 1023px, pas 991px : doit matcher .nav-list/.nav-burger (display:none/flex
   a 1023px, cf. plus haut) et le panneau plein ecran .nav-list.mobile-open
   (aussi 1023px). L'ecart 992-1023px laissait le panneau s'afficher sans
   verrou de scroll ni bouton fermer style/atteignable dans cette plage. */
@media (max-width: 1023px) {
  body.ps-mobile-menu-open,
  html.ps-mobile-menu-open {
    overflow: hidden !important;
  }

  .nav-list.mobile-open {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-list.mobile-open > .ps-mobile-menu-head {
    position: sticky;
    top: -20px;
    z-index: 4;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 40px) !important;
    margin: -20px -20px 4px !important;
    padding: 12px 16px 12px 20px !important;
    color: var(--ink, #1A1816);
    background: rgba(245,241,232,.96);
    border-bottom: 1px solid rgba(26,24,22,.10) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .ps-mobile-menu-head > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .ps-mobile-menu-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ink, #1A1816) !important;
    background: rgba(255,255,255,.64) !important;
    border: 1px solid rgba(26,24,22,.14) !important;
    border-radius: 999px !important;
    cursor: pointer;
  }

  .ps-mobile-menu-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .nav-burger svg line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease;
  }
  body.ps-mobile-menu-open .nav-burger svg line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  body.ps-mobile-menu-open .nav-burger svg line:nth-child(2) { opacity: 0; }
  body.ps-mobile-menu-open .nav-burger svg line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* ── Accordéon mobile ─────────────────────────────────────────────────
     Every submenu — Products, Science, Stack-157 — is an inline accordion
     panel here, opened by tapping its row (see panstellar-ui.js). This
     replaces a Products-only rule that keyed off .active and left the other
     panels with their desktop popup treatment on mobile. The desktop
     presentation (absolute + translateX(-50%), fixed min-width, the
     opacity/visibility transition) is dropped wholesale rather than patched
     property by property. */
  /* The base .nav-list gap (36px, for the horizontal desktop bar) becomes
     dead space between stacked rows; the row separators carry the rhythm. */
  .nav-list.mobile-open {
    gap: 0;
  }

  .nav-list.mobile-open > .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(26, 24, 22, 0.08);
  }

  /* Full-width row with a comfortable tap target and the chevron pushed to
     the trailing edge, instead of the inline desktop link. */
  .nav-list.mobile-open > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 12px 4px;
    font-size: 16px;
    text-align: left;
  }

  .nav-list.mobile-open > .nav-item > .nav-link::after {
    margin-left: auto;
    transition: transform 0.2s ease;
  }

  .nav-list.mobile-open > .nav-item.is-open > .nav-link::after {
    transform: rotate(-135deg) translateY(-2px);
  }

  .nav-list.mobile-open > .nav-item > .nav-dropdown {
    display: none;
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 0 0 4px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .nav-list.mobile-open > .nav-item.is-open > .nav-dropdown {
    display: block;
  }

  /* The three formula cards stay a fixed 3-up grid (a deliberate call, so
     all three bottles are visible without scrolling — see the products-grid
     rule further down). Left uncapped they scale with the panel, and on a
     tablet the aspect-ratio boxes grew to ~410px tall each and pushed the
     rest of the menu off screen. Capping the grid keeps the cards the same
     size they are on a phone; object-fit:contain still shows a whole bottle. */
  .nav-list.mobile-open .products-grid,
  .nav-list.mobile-open .stack-only-grid {
    max-width: 420px;
  }

  /* A row that expands cannot also navigate, so its own destination is
     injected here as the panel's first entry. */
  .ps-mobile-parent-link {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-deep, #8A6D1F);
    text-decoration: none;
  }
}

/* =========================================================
   ANTI-CLIPPING NAV FIX
========================================================= */
.nav-row, .nav-list, .nav-item { 
  contain: none !important; 
  overflow: visible !important; 
  clip-path: none !important; 
}

@media (min-width: 1024px) and (max-width: 1300px) {
  .nav-dropdown-products {
    min-width: 340px !important;
    width: max-content !important;
    max-width: 480px !important;
    padding: 16px !important;
  }
  .products-grid {
    gap: 8px !important;
  }
}

@media (min-width: 1024px) {
  .nav-list .nav-dropdown-products {
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    width: min(560px, calc(100vw - 64px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 64px) !important;
  }

  .nav-list .nav-dropdown-products .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   PRODUCTION — HEADER PLEINE LARGEUR COMME LE SITE DEV
   Ne pas ajouter sur dev.panstellar.pro
   ========================================================= */

@media (min-width: 1024px) {

  /* Supprime le conteneur boxed généré par Elementor */
  .elementor-location-header {
    width: 100% !important;
    max-width: none !important;
  }

  .elementor-location-header > .e-con,
  .elementor-location-header > .e-con > .e-con-inner {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    --container-max-width: 100% !important;
    --content-width: 100% !important;
  }

  /* La barre occupe toute la largeur disponible */
  .elementor-location-header .nav-bar {
    width: 100% !important;
    max-width: none !important;
  }

  /* Conserve exactement le positionnement du CSS dev */
  .elementor-location-header .nav-row {
    width: 100% !important;
    max-width: 1400px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 18px 32px !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   HEADER — EMPÊCHER LES SOUS-MENUS DE DISPARAÎTRE
   Production uniquement
   ========================================================= */

@media (min-width: 1024px) {

  /* Crée un pont invisible entre le lien et son sous-menu */
  .nav-list > .nav-item::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    height: 18px;
    background: transparent;
    pointer-events: auto;
  }

  /* Le sous-menu reste ouvert sur le lien, le pont et le panneau */
  .nav-list > .nav-item:hover > .nav-dropdown,
  .nav-list > .nav-item:focus-within > .nav-dropdown,
  .nav-list > .nav-item > .nav-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Products : conserve son ancrage à gauche */
  .nav-list > .nav-item:hover > .nav-dropdown-products,
  .nav-list > .nav-item:focus-within > .nav-dropdown-products,
  .nav-list > .nav-item > .nav-dropdown-products:hover {
    transform: none !important;
  }

  /* Science et autres sous-menus centrés */
  .nav-list > .nav-item:hover > .nav-dropdown:not(.nav-dropdown-products),
  .nav-list > .nav-item:focus-within > .nav-dropdown:not(.nav-dropdown-products),
  .nav-list > .nav-item > .nav-dropdown:not(.nav-dropdown-products):hover {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* =========================================================
   FORMULA STACK 157 — RESTAURER LA FORME SUR MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .formula-visual {
    width: 100% !important;

    height: clamp(320px, 88vw, 360px) !important;
    min-height: 320px !important;
    max-height: 360px !important;

    padding: 20px !important;
    border-radius: 20px !important;
  }

  .formula-capsule-visual {
    top: 50% !important;
    left: 50% !important;

    width: min(62vw, 230px) !important;
    height: auto !important;

    aspect-ratio: 1 / 1.4 !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% 50% 45% 45% !important;
  }

  .formula-capsule-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;
  }
}

/* =========================================================
   HOME — CARTE "START THE STACK"
   Preserved from GitHub main: keeps the title below the sticky header and
   displays the bottle without cropping.
   ========================================================= */
body.home .price-section {
  scroll-margin-top: 88px;
}

body.home .price-card .price-product-img {
  overflow: hidden !important;
}

body.home .price-card .price-product-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 767px) {
  body.home .price-section {
    padding-top: 96px !important;
  }

  body.home .price-title {
    margin-top: 0 !important;
    padding: 0.12em 16px 0 !important;
    line-height: 1.12 !important;
    overflow: visible !important;
  }
}
/* =========================================================
   THANK YOU PAGE (wffn_ty / post-7919) DESIGN & LAYOUT STYLES
========================================================= */
.wftp_html_canvas, .page-template-wftp-canvas {
  background-color: #FAFAFA !important;
}

/* Ensure SVG icons do not blow up to 100% width */
.wftp_html_canvas svg, 
.page-template-wftp-canvas svg,
.elementor-post-7919 svg,
.wffn-page-template svg {
  max-width: 48px !important;
  max-height: 48px !important;
  display: inline-block !important;
}

/* Fix Thank You Page Logo Width */
.elementor-post-7919 .elementor-widget-image img,
.wffn-page-template .elementor-widget-image img {
  max-width: 166px !important;
  width: 166px !important;
  height: auto !important;
}

/* Continue Shopping Button (Bottom Centered) */
#ps_continue_shopping_btn_bottom a,
#ps_continue_shopping_btn a,
.elementor-element-ps_continue_shopping_btn_bottom a {
  background-color: #ECE6D7 !important;
  color: #1A1816 !important;
  border-radius: 999px !important;
  padding: 14px 36px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

#ps_continue_shopping_btn_bottom a:hover,
#ps_continue_shopping_btn a:hover,
.elementor-element-ps_continue_shopping_btn_bottom a:hover {
  background-color: #DFD5BE !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
}


/* Hide unused Downloads & Subscriptions sections on Thank You Page */
.wfty-order-downloads,
.wfty-subscription-wrapper,
.wfty-downloads-wrapper,
.wfty-order-details-downloads,
.wfty-order-details-subscriptions {
  display: none !important;
}

/* FOOTER — AFFICHAGE PROPRE DES IMAGES PRODUITS */

.footer-top-grid .product-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: transparent !important;
}

.footer-top-grid .product-card img {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer — centrer le nom et la flèche sous les images */
.footer-top-grid .product-info {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

.footer-top-grid .product-name {
  text-align: center !important;
}

.footer-top-grid .product-arrow {
  position: static !important;
  display: inline-block !important;
}

/* HOME HERO — COUVRIR TOUT L’ÉCRAN */

body.home .hero.hero--bg {
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100svh !important;

  box-sizing: border-box !important;

  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;

  margin: 0 !important;
}

@media (max-width: 767px) {
  body.home .hero.hero--bg {
    min-height: 100svh !important;
    background-position: right center !important;
  }
}


/* =========================================================
   HEADER — DROPDOWN COMPACT STACK 157 UNIQUEMENT
   ========================================================= */

@media (min-width: 1024px) {

  /* Conteneur adapté à une seule carte */
  .nav-list .nav-item-stack-only > .stack-only-dropdown {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;

    padding: 18px !important;

    left: 0 !important;
    right: auto !important;
    transform: none !important;

    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  /* Une seule colonne au lieu des trois colonnes historiques */
  .nav-list .stack-only-dropdown .stack-only-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    gap: 0 !important;
  }

  .stack-only-dropdown .product-mini-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .stack-only-dropdown .product-mini-img {
    width: 100% !important;
    aspect-ratio: 1 / 1.05 !important;

    margin-bottom: 12px !important;
    padding-bottom: 0 !important;

    border-radius: 12px !important;
  }

  .stack-only-dropdown .product-mini-name {
    font-size: 15px !important;
    margin-bottom: 5px !important;
  }

  .stack-only-dropdown .product-mini-sub {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
}

/* Mobile : une seule carte sur toute la largeur disponible */
@media (max-width: 991px) {
  .stack-only-dropdown .stack-only-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .stack-only-dropdown .product-mini-card {
    width: 100% !important;
  }
}




/* ── Messages de validation d'adresse, sous le bouton Place Order ──────────
   Les proprietes de texte sont posees sur le CONTENEUR et heritees par le
   paragraphe enfant. La version staging ne les mettait que sur ".ps-address-message p" :
   si le message est rendu sans balise <p>, le texte perd taille, graisse et couleur.
   Cette version fonctionne dans les deux cas.
   Le keyframe garde un nom prefixe plutot que "slideDown", trop generique et
   susceptible d'entrer en collision avec un autre plugin.
   ------------------------------------------------------------------------- */
.ps-address-message {
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  animation: ps-address-message-in 0.3s ease-out;
}

.ps-address-message p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.ps-address-validation-error {
  background: rgba(159, 47, 37, 0.08);
  border: 1px solid rgba(159, 47, 37, 0.2);
  color: #9f2f25;
}

.ps-address-validation-success {
  background: rgba(9, 178, 156, 0.08);
  border: 1px solid rgba(9, 178, 156, 0.2);
  color: #09b29c;
}

@keyframes ps-address-message-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════ Checkout Coupon Form — version on-brand ════════ */
.ps-checkout-coupon-form {
  box-sizing: border-box;
  width: 100%;
  margin: 18px 0 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236,230,215,0.5) 0%, rgba(236,230,215,0.25) 100%);
}

.ps-checkout-coupon-form label {
  display: block;
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep, #6B5320);
  font-weight: 600;
}

.ps-checkout-coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.ps-checkout-coupon-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(26,24,22,0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #1A1816);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ps-checkout-coupon-row input::placeholder {
  color: rgba(26,24,22,0.4);
}

.ps-checkout-coupon-row input:focus {
  outline: none;
  border-color: var(--gold, #C9A84C);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

.ps-checkout-coupon-row button {
  height: 46px;
  min-width: 88px;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: var(--ink, #1A1816) !important;
  color: var(--bone, #F5F1E8) !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border: 0 !important;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.ps-checkout-coupon-row button:hover {
  background: var(--gold, #C9A84C) !important;
  color: var(--ink, #1A1816) !important;
  transform: translateY(-1px);
}

.ps-checkout-coupon-form.is-loading {
  opacity: .6;
  pointer-events: none;
}

.ps-checkout-coupon-message {
  min-height: 16px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft, #6b6760);
}

.ps-checkout-coupon-message[data-state="success"] {
  color: #4a7a3f;
  font-weight: 600;
}

.ps-checkout-coupon-message[data-state="error"] {
  color: #9f2f25;
  font-weight: 600;
}

/* ── Mobile : intégré dans l'accordéon résumé ── */
#ps-mobile-summary-body .ps-checkout-coupon-form {
  margin: 16px 0;
}

#ps-mobile-summary-body .ps-checkout-coupon-row input {
  font-size: 13.5px;
}

#ps-mobile-summary-body .ps-checkout-coupon-row button {
  min-width: 76px;
  font-size: 10.5px !important;
}



/* ===========================================================================
   FIX HERO MOBILE 2026-08-28 — la bouteille n'est plus masquee par le texte.
   ---------------------------------------------------------------------------
   SYMPTOME : sur mobile, le titre "Your recovery, upgraded." et le bouton
   "SHOP THE STACK" recouvrent l'etiquette de la bouteille (marque, STACK 157,
   BPC 157 + TB4 FRAG, dosage) — la partie la plus vendeuse de la photo.

   CAUSE, deux reglages qui se contredisent :
     1. ligne 471, .hero est en justify-content:center. Le bloc de texte se
        place donc au MILIEU de la hauteur, exactement sur l'etiquette.
     2. ligne 2093, le voile mobile est un degrade "to bottom" : il assombrit
        le HAUT de l'image et devient transparent en bas. Il protege une zone
        vide pendant que le texte, au milieu, se bat pour etre lisible.

   CORRECTIF : le contenu descend en bas, le voile descend avec lui. La moitie
   haute de la photo reste nette et sans filtre ; le texte se pose sur le corps
   sombre de la bouteille, ou il n'y a aucun detail a preserver.

   Place en fin de fichier a dessein : trois blocs touchent deja au hero
   (lignes 2091, 3257 et 4092). A specificite egale, la derniere regle gagne.

   Deux valeurs a ajuster si besoin : padding-bottom remonte le texte, et la
   position du "transparent 62%" change la taille de la zone assombrie.
   =========================================================================== */
@media (max-width: 767px) {

  /* 1. Texte et bouton descendent en bas du hero. */
  body.home .hero.hero--bg {
    justify-content: flex-end !important;
    padding-bottom: 56px !important;
  }

  /* 2. Le voile sombre passe en bas, sous le texte. Au-dessus de 62 % de la
        hauteur, la photo est vue sans aucun filtre. */
  body.home .hero.hero--bg::before {
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.72) 22%,
      rgba(10, 10, 10, 0.25) 45%,
      transparent 62%
    ) !important;
  }

  /* 3. Titre plus compact : la ligne 1905 montait jusqu'a 60px. Chaque pixel
        gagne ici est un pixel de photo degagee. */
  body.home .hero.hero--bg .hero-tagline {
    font-size: clamp(30px, 8.5vw, 44px) !important;
    margin-bottom: 20px !important;
  }

  body.home .hero.hero--bg .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ===========================================================================
   HERO ACCUEIL 2026-08-28 (v3) — remplace integralement le bloc v2.
   ---------------------------------------------------------------------------
   POURQUOI UNE v3 : la v2 traitait telephone et tablette avec UN SEUL jeu de
   valeurs, calibre pour le telephone. Deux consequences :
   1. Sur tablette, le titre plafonnait a 34px (clamp) et le bouton restait a
      14px/32px, quelle que soit la largeur. Trop petits sur un iPad.
   2. Sur telephone, "background-position: right center" collait le cadrage sur
      le bord droit de la photo et decentrait la bouteille.
   La v3 garde donc la STRUCTURE commune, puis separe les TAILLES en deux
   couches qui ne se recouvrent jamais : 767px et moins, 768px et plus.
   A RETENIR SUR LE CADRAGE MOBILE : sur un telephone en portrait, cover
   agrandit l'image jusqu'a remplir la HAUTEUR. L'image devient ~4x plus large
   que l'ecran. La position VERTICALE n'a donc plus aucun effet : seule la
   position horizontale decide de ce qu'on voit.
   =========================================================================== */

/* --- COUCHE 1 : STRUCTURE, commune telephone + tablette -------------------- */
@media (max-width: 1024px), (orientation: portrait) {
  /* Texte ancre en bas, sous la bouteille, au lieu du milieu (ligne 471). */
  body.home .hero.hero--bg {
    background-position: right center !important;
    justify-content: flex-end !important;
  }
  /* Le voile sombre passe en bas, la ou est le texte. Le haut de la photo
     reste vu sans aucun filtre. */
  body.home .hero.hero--bg::before {
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.68) 18%,
      rgba(10, 10, 10, 0.22) 40%,
      transparent 72%
    ) !important;
  }
  body.home .hero.hero--bg .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- COUCHE 2 : TELEPHONE, 767px et moins --------------------------------- */
/* Cadrage recentre + titre et bouton compacts. */
@media (max-width: 767px) {
  /* LA VALEUR A AJUSTER. 50% = centre exact de la photo, 65% = vers la droite,
     "right center" = ancien reglage, extreme droite. */
  body.home .hero.hero--bg {
    background-position: 94% center !important;
    background-size: cover !important;
    padding-bottom: 22px !important;
  }
  /* Voile raccourci : transparent des 55% au lieu de 72%, pour ne plus
     noircir le bas de la bouteille sur un ecran etroit. */
  body.home .hero.hero--bg::before {
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.90) 0%,
      rgba(10, 10, 10, 0.62) 14%,
      rgba(10, 10, 10, 0.16) 32%,
      transparent 55%
    ) !important;
  }
  body.home .hero.hero--bg .hero-tagline {
    font-size: clamp(23px, 6.6vw, 34px) !important;
    margin-bottom: 12px !important;
  }
  /* On garde 14px de padding VERTICAL : en dessous, la cible tactile passe
     sous les 44px recommandes et le bouton devient penible a viser au pouce.
     Pour le retrecir visuellement, reduire le padding HORIZONTAL. */
  body.home .hero.hero--bg .hero-cta {
    padding: 14px 32px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
  }
}

/* --- COUCHE 3 : TABLETTE, 768px et plus ----------------------------------- */
/* Cadrage a droite conserve (valide sur iPad), titre et bouton agrandis. */
@media (min-width: 768px) and (max-width: 1024px),
       (min-width: 768px) and (orientation: portrait) {
  body.home .hero.hero--bg {
      background-position: 100% center !important;
      background-size: auto 118% !important;
    padding-bottom: 64px !important;
  }
  body.home .hero.hero--bg .hero-tagline {
    font-size: clamp(38px, 5.4vw, 58px) !important;
    line-height: 1.06 !important;
    margin-bottom: 28px !important;
  }
  body.home .hero.hero--bg .hero-cta {
    padding: 18px 46px !important;
    font-size: 13.5px !important;
    letter-spacing: 0.12em !important;
  }
}