/* ==========================================================================
   Homepage — front-page sections below the hero (Animaux · Accessoires · Avis)
   ========================================================================== */

/* Sections own their vertical rhythm — drop Storefront's content-wrapper margin. */
.home #primary,
.home #main { margin-bottom: 0; }

.jl-section { margin: 4.5em 0; scroll-margin-top: 24px; }
.jl-section:first-of-type { margin-top: 3.5em; }

/* --- Section header (title left, "Voir tout" right; no rule beneath) --- */
.jl-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.jl-section__title {
  margin: 0;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--jl-ink);
}
/* Golden "Nouveau" pill (with sparkle), inline beside the section title */
.jl-section__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin-left: 14px;
  transform: translateY(-2px); /* optically centre against the large serif title */
  padding: 5px 12px;
  border-radius: var(--jl-r-pill);
  background: var(--jl-brass);
  color: var(--jl-ink);
  font: 600 11px/1 var(--jl-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.jl-section__all {
  flex: none;
  font-size: 13px;
  color: var(--jl-bordeaux);
  white-space: nowrap;
  text-decoration: none;
}
.jl-section__all::after { content: " \2192"; }
.jl-section__all:hover { color: var(--jl-bordeaux-dark); }

/* The category grid is WooCommerce [products] output (styled by the products
   feature). Storefront's column layout doesn't apply to a shortcode grid on a
   plain page, so lay it out ourselves as a 4-up grid. */
.jl-section .woocommerce { margin: 0; }
.jl-section .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
}
/* WooCommerce's clearfix ::before/::after become phantom grid cells — drop them */
.jl-section .woocommerce ul.products::before,
.jl-section .woocommerce ul.products::after { content: none; display: none; }
.jl-section .woocommerce ul.products li.product {
  /* Now that the homepage renders inside #main, WooCommerce's float-grid rule
     (.storefront-full-width-content .site-main ul.products.columns-4 li.product,
     width:21.7%; float:left) out-specifies us and collapses each card to ~53px
     inside its grid cell. Force the grid-cell fill — plugin-enforced layout,
     hence !important (same exception as the archive grid). */
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* --- Éditions limitées featured band --- */
.jl-edition {
  display: grid;
  grid-template-columns: .4fr 1fr;
  gap: 36px;
  align-items: stretch;
  padding: 18px;
  background: linear-gradient(120deg, var(--jl-cream-tint) 0%, var(--jl-cream) 100%);
  border-radius: 22px;
  overflow: hidden;
}
.jl-edition__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--jl-cream-pale);
}
.jl-edition__media-link { display: block; width: 100%; height: 100%; }
.jl-edition__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.jl-edition__media:hover img { transform: scale(1.05); }
.jl-edition__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  background: rgba(243, 233, 219, .9);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(110, 28, 47, .16);
  border-radius: var(--jl-r-pill);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--jl-bordeaux);
}
.jl-edition__text {
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.jl-edition__eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jl-bordeaux);
}
.jl-edition__title {
  margin: 0 0 12px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
}
.jl-edition__lead {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--jl-text-70);
}
.jl-edition__buy { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.jl-edition__price {
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 34px);
  color: var(--jl-bordeaux);
  line-height: 1;
}
.jl-edition__price .amount,
.jl-edition__price bdi { color: var(--jl-bordeaux); }

/* --- Atelier dark band --- */
.jl-atelier {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  margin: 5.5em 0;
  padding: clamp(36px, 5vw, 72px);
  background: var(--jl-ink);
  color: var(--jl-cream);
  border-radius: 22px;
  overflow: hidden;
}
.jl-atelier__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jl-brass);
}
.jl-atelier__title {
  margin: 0 0 20px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  color: var(--jl-cream);
}
.jl-atelier__title em { color: var(--jl-brass); font-style: italic; }
.jl-atelier__lead {
  max-width: 480px;
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(243, 233, 219, .72);
}
.hentry .entry-content a.jl-atelier__cta,
.jl-atelier__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 26px;
  border: 1px solid rgba(181, 144, 77, .45);
  border-radius: var(--jl-r-pill);
  color: var(--jl-brass);
  text-decoration: none;
  font: 500 14px/1 var(--jl-sans);
  transition: background .2s ease;
}
.jl-atelier__cta:hover { background: rgba(181, 144, 77, .12); color: var(--jl-brass); }
/* Single mascot bursting out of the dark band — its cut-out (transparent) art
   is scaled larger than its column and spills past the band's edges, so the
   mascot reads as popping out of the card rather than sitting inside it.
   overflow:visible lets it escape; the band's own rounded background still
   clips itself, so only the mascot overflows. */
.jl-atelier { overflow: visible; }
.jl-atelier__mascots {
  align-self: end;
  justify-self: center;
  position: relative;
  min-width: 0;
  text-align: center;
  transform: translateX(clamp(-56px, -4vw, -24px)); /* nudge the mascot leftward */
}
.jl-atelier__mascot {
  display: block;
  width: clamp(320px, 40vw, 520px);
  max-width: 118%;
  height: auto;
  margin-inline: auto;
  /* negative margins pull the art beyond the band top and well below its base */
  margin-top: clamp(-72px, -5vw, -36px);
  margin-bottom: clamp(-140px, -9vw, -76px);
  transform: translateY(28px) scale(1.03); /* sit a little lower in the band */
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45));
}

/* --- Avis clients — full-bleed cream band (breaks out of the content column) --- */
.jl-social {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--jl-cream-tint);
}
.jl-social__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 84px 40px;
}
.jl-social__head { text-align: center; margin-bottom: 48px; }
.jl-social__title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
  color: var(--jl-ink);
}
.jl-social__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.jl-social__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(27, 21, 18, .08);
  border-radius: 16px;
}
.jl-social__stars {
  color: var(--jl-brass);
  letter-spacing: .1em;
  font-size: 14px;
  margin-bottom: 16px;
}
.jl-social__quote {
  flex: 1; /* fill the card so footers line up across a row */
  margin: 0 0 22px;
  padding: 0; /* drop Storefront's blockquote padding... */
  border: 0; /* ...and its grey left-border bar */
  font-family: var(--jl-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--jl-ink);
}
.jl-social__quote::before { content: "\201C"; }
.jl-social__quote::after  { content: "\201D"; }
/* Footer: bordeaux initial medallion + handle */
.jl-social__foot {
  display: flex;
  align-items: center;
  gap: 11px;
}
.jl-social__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--jl-r-pill);
  background: var(--jl-bordeaux);
  color: var(--jl-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.jl-social__name {
  min-width: 0;
  font-size: 12.5px;
  color: var(--jl-text-50);
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .jl-section { margin: 3em 0; }
  .jl-section__head { flex-direction: column; align-items: flex-start; }
  .jl-section .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .jl-social__inner { padding: 56px 24px; }
  .jl-social__grid { grid-template-columns: 1fr; gap: 16px; }
  .jl-atelier { grid-template-columns: 1fr; gap: 24px; }
  .jl-atelier__mascots { transform: none; } /* centered on mobile — drop the leftward nudge */
  .jl-atelier__mascot {
    width: clamp(240px, 68vw, 340px);
    margin-top: 0;
    margin-bottom: clamp(-88px, -16vw, -56px);
  }
  .jl-edition { grid-template-columns: 1fr; }
  .jl-edition__media { aspect-ratio: auto; height: 220px; }
  .jl-edition__text { padding-right: 0; }
}