/* =============================================================
   JASP · Pages de contenu, collection, quiz, blog, panier
   Même grammaire que la home : fonds gris 60, cartes blanches 60,
   pilules, labels bleus espacés, accents vert citron, échelle --u.
   ============================================================= */

/* ---------- En-tête de page ---------- */
.j-phero__panel { min-height: calc(560 * var(--u)); }
.j-phero__content { position: relative; z-index: 1; padding: calc(90 * var(--u)) 0 calc(96 * var(--u)) calc(95.8 * var(--u)); }
.j-phero__title { width: calc(900 * var(--u)); margin-top: calc(48 * var(--u)); }
.j-phero__text { width: calc(620 * var(--u)); margin-top: calc(40 * var(--u)); }
.j-phero__buttons { margin-top: calc(56 * var(--u)); }
.j-phero--plain .j-phero__panel { min-height: 0; }
.j-phero--plain .j-phero__title { width: calc(1300 * var(--u)); }
.j-phero--plain .j-phero__text { width: calc(860 * var(--u)); }
.j-phero__visual { position: absolute; top: 0; right: 0; bottom: 0; left: calc(980 * var(--u)); overflow: hidden; border-radius: var(--j-radius-section); }
.j-phero__visual img { position: absolute; max-width: none; left: -18%; top: -20%; width: 150%; height: auto; }

/* ---------- Image + texte ---------- */
.j-mt { display: grid; grid-template-columns: calc(760 * var(--u)) 1fr; gap: calc(96 * var(--u)); align-items: center; }
.j-mt--reverse { grid-template-columns: 1fr calc(760 * var(--u)); }
.j-mt--reverse .j-mt__visual { order: 2; }
.j-mt--panel { padding: calc(56 * var(--u)); margin-inline: var(--j-side); }
.j-mt__visual { position: relative; height: calc(620 * var(--u)); border-radius: var(--j-radius-section); background: #eaeaea; overflow: hidden; }
.j-mt__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.j-mt__bottles--a { transform: scale(1.1); }
.j-mt__bottles--b { transform: scale(1.9); object-position: 72% 60%; }
.j-mt__bottles--c { transform: scale(2.2); object-position: 70% 18%; }
.j-mt__content { padding-right: calc(40 * var(--u)); }
.j-mt--reverse .j-mt__content { padding: 0 0 0 calc(56 * var(--u)); }
.j-mt__content .j-title-2 { margin-top: calc(24 * var(--u)); }
.j-mt__content > .j-text { margin-top: calc(32 * var(--u)); max-width: calc(620 * var(--u)); }
.j-mt__points { display: grid; gap: calc(14 * var(--u)); margin-top: calc(32 * var(--u)); list-style: none; }
.j-mt__points li { display: flex; align-items: flex-start; gap: calc(16 * var(--u)); font-size: max(15px, calc(24 * var(--u))); line-height: 1.3; color: var(--j-ink); }
.j-mt__points li::before { content: ''; flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: .35em; border-radius: 50%; background: #d4ff5f; box-shadow: 0 0 0 calc(5 * var(--u)) rgba(212, 255, 95, .35); }
.j-mt__content .j-btn { margin-top: calc(40 * var(--u)); gap: calc(10 * var(--u)); }

/* ---------- Appel à l'action ---------- */
.j-cta { padding: calc(105.75 * var(--u)) calc(95.8 * var(--u)) calc(96 * var(--u)); text-align: center; }
.j-cta .j-title-2 { width: calc(1000 * var(--u)); margin: calc(24 * var(--u)) auto 0; }
.j-cta .j-text { width: calc(720 * var(--u)); margin: calc(32 * var(--u)) auto 0; }
.j-cta__buttons { display: flex; justify-content: center; gap: calc(20 * var(--u)); margin-top: calc(48 * var(--u)); }
.j-cta--ink { background: var(--j-ink); }
.j-cta--ink .j-label { color: #d4ff5f; }
.j-cta--ink .j-title-2 { color: var(--j-white); }
.j-cta--ink .j-text { color: rgba(255, 255, 255, .7); }
.j-cta--ink .j-cta__ghost { border: 2px solid rgba(255, 255, 255, .4); color: var(--j-white); }
.j-cta--lime { background: #d4ff5f; }
.j-cta--lime .j-text { color: var(--j-ink); }
.j-cta--lime .j-cta__ghost { border: 2px solid var(--j-ink); color: var(--j-ink); }

/* ---------- Pages légales / simples ---------- */
.j-legal__panel { display: grid; grid-template-columns: calc(460 * var(--u)) 1fr; gap: calc(80 * var(--u)); align-items: start; padding: calc(96 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u)) calc(95.8 * var(--u)); }
.j-legal__head { position: sticky; top: calc(24 * var(--u)); }
.j-legal__head .j-title-2 { margin-top: calc(24 * var(--u)); }
.j-legal__nav { display: grid; gap: calc(8 * var(--u)); margin-top: calc(48 * var(--u)); }
.j-legal__nav a { display: block; padding: calc(16 * var(--u)) calc(24 * var(--u)); border-radius: var(--j-radius-pill); font-size: max(14px, calc(22 * var(--u))); color: var(--j-grey-nav); transition: background-color .2s ease, color .2s ease; }
.j-legal__nav a:hover, .j-legal__nav a[aria-current] { background: var(--j-white); color: var(--j-ink); }
.j-prose { padding: calc(64 * var(--u)) calc(72 * var(--u)); border-radius: var(--j-radius-section); background: var(--j-white); font-size: max(15px, calc(22 * var(--u))); line-height: 1.6; color: var(--j-grey-nav); }
.j-prose > :first-child { margin-top: 0 !important; }
.j-prose h2 { margin: calc(56 * var(--u)) 0 calc(16 * var(--u)); font-weight: 600; font-size: max(20px, calc(32 * var(--u))); line-height: 1.1; letter-spacing: -0.02em; color: var(--j-ink); }
.j-prose h3 { margin: calc(36 * var(--u)) 0 calc(12 * var(--u)); font-weight: 600; font-size: max(17px, calc(26 * var(--u))); line-height: 1.2; color: var(--j-ink); }
.j-prose p { margin: 0 0 calc(18 * var(--u)); }
.j-prose ul, .j-prose ol { margin: 0 0 calc(18 * var(--u)); padding-left: 1.2em; }
.j-prose li { margin-bottom: calc(8 * var(--u)); }
.j-prose a { color: var(--j-blue); text-decoration: underline; text-underline-offset: .15em; }
.j-prose strong { color: var(--j-ink); font-weight: 600; }
.j-prose img { max-width: 100%; height: auto; border-radius: calc(30 * var(--u)); }
.j-prose blockquote { margin: calc(40 * var(--u)) 0; padding-left: calc(28 * var(--u)); border-left: 4px solid #d4ff5f; font-size: max(18px, calc(30 * var(--u))); line-height: 1.3; letter-spacing: -0.02em; color: var(--j-ink); }

/* ---------- Collection ---------- */
.j-coll { margin-top: calc(24 * var(--u)); }
.j-coll__panel { padding: calc(72 * var(--u)) 0 calc(85.95 * var(--u)); }
.j-coll__bar { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); width: calc(1549.54 * var(--u)); margin: 0 auto calc(48 * var(--u)); }
.j-coll__filters { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.j-filter {
  height: calc(56 * var(--u)); padding: 0 calc(28 * var(--u)); border: 2px solid #e2e2e2; border-radius: var(--j-radius-pill);
  background: var(--j-white); cursor: pointer; font-family: var(--j-font); font-size: max(14px, calc(22 * var(--u))); color: var(--j-black);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.j-filter:hover { border-color: var(--j-ink); }
.j-filter.is-active { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-white); }
.j-coll__count { font-size: max(14px, calc(22 * var(--u))); color: var(--j-grey-text); white-space: nowrap; }
.j-coll__grid { width: calc(1549.54 * var(--u)); margin: 0 auto; list-style: none; }
.j-product[hidden] { display: none; }
.j-product--soon .j-product__media { background: repeating-linear-gradient(135deg, #eaeaea 0 calc(18 * var(--u)), #e3e3e3 calc(18 * var(--u)) calc(36 * var(--u))); }
.j-product__cta--soon { background: var(--j-grey-bg); }
.j-coll__empty { width: calc(1549.54 * var(--u)); margin: 0 auto; padding: calc(48 * var(--u)); border-radius: var(--j-radius-section); background: var(--j-white); text-align: center; font-size: max(15px, calc(24 * var(--u))); color: var(--j-grey-nav); }
.j-coll__nudge { width: calc(1549.54 * var(--u)); margin: calc(56 * var(--u)) auto 0; }

/* =============================================================
   Écrans étroits
   ============================================================= */
@media (max-width: 989px) {
  .j-phero__panel { display: flex; flex-direction: column-reverse; min-height: 0; }
  .j-phero__visual { position: relative; left: 0; height: 240px; border-radius: 24px; }
  .j-phero__visual img { left: -15%; top: -20%; width: 130%; }
  .j-phero__content { padding: 28px 22px 32px; }
  .j-phero__title, .j-phero__text, .j-phero--plain .j-phero__title, .j-phero--plain .j-phero__text { width: auto; }
  .j-phero__title { margin-top: 18px; }
  .j-phero__text { margin-top: 16px; }
  .j-phero__buttons { margin-top: 22px; }

  .j-mt, .j-mt--reverse { grid-template-columns: 1fr; gap: 24px; margin-inline: 12px; }
  .j-mt--reverse .j-mt__visual { order: 0; }
  .j-mt--panel { padding: 12px 12px 28px; margin-inline: 12px; }
  .j-mt__visual { height: 280px; border-radius: 24px; }
  .j-mt__content, .j-mt--reverse .j-mt__content { padding: 0 10px; }
  .j-mt__content > .j-text { max-width: none; }

  .j-cta { padding: 40px 22px; }
  .j-cta .j-title-2, .j-cta .j-text { width: auto; }
  .j-cta__buttons { flex-wrap: wrap; }

  .j-legal__panel { grid-template-columns: 1fr; gap: 20px; padding: 28px 12px 12px; }
  .j-legal__head { position: static; padding: 0 10px; }
  .j-legal__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
  .j-legal__nav a { padding: 8px 14px; background: var(--j-white); }
  .j-prose { padding: 24px 20px; border-radius: 24px; }

  .j-coll__panel { padding: 22px 0 28px; }
  .j-coll__bar, .j-coll__grid, .j-coll__empty, .j-coll__nudge { width: auto; margin-inline: 10px; }
  .j-coll__bar { flex-direction: column; align-items: flex-start; margin-bottom: 18px; }
  .j-coll__filters { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .j-filter { flex: none; height: 40px; padding: 0 16px; }
}

/* ---------- Diagnostic ---------- */
.j-quiz { margin-top: calc(24 * var(--u)); }
.j-quiz__panel { padding: calc(72 * var(--u)) calc(95.8 * var(--u)) calc(80 * var(--u)); }
.j-quiz__top { display: flex; align-items: center; gap: calc(32 * var(--u)); }
.j-quiz__top .j-label { flex: none; }
.j-quiz__progress { flex: 1; height: calc(10 * var(--u)); min-height: 6px; border-radius: 10px; background: #e2e2e2; overflow: hidden; }
.j-quiz__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--j-ink); transition: width .4s ease; }
.j-quiz__step { margin: 0; padding: calc(56 * var(--u)) 0 0; border: 0; min-width: 0; }
.j-quiz__result { padding-top: calc(56 * var(--u)); }
.j-quiz__question { display: block; float: none; width: calc(1100 * var(--u)); margin: 0; padding: 0; }
.j-quiz__help { width: calc(860 * var(--u)); margin-top: calc(24 * var(--u)); }
.j-quiz__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(48 * var(--u)); }
.j-quiz__answer {
  position: relative; display: flex; align-items: center; gap: calc(20 * var(--u)); min-height: calc(110 * var(--u)); padding: calc(24 * var(--u)) calc(32 * var(--u));
  border: 2px solid transparent; border-radius: calc(36 * var(--u)); background: var(--j-white); cursor: pointer;
  font-size: max(16px, calc(26 * var(--u))); line-height: 1.15; letter-spacing: -0.01em; color: var(--j-ink); transition: border-color .2s ease, transform .2s ease;
}
.j-quiz__answer:hover { border-color: #d6d6d6; transform: translateY(-1px); }
.j-quiz__answer input { position: absolute; opacity: 0; pointer-events: none; }
.j-quiz__answer .j-option__radio { flex: none; }
.j-quiz__answer:has(input:checked) { border-color: var(--j-ink); }
.j-quiz__answer:has(input:checked) .j-option__radio { border-color: var(--j-ink); }
.j-quiz__answer:has(input:checked) .j-option__radio::after { transform: scale(1); }
.j-quiz__answer:has(input:focus-visible) { outline: 2px solid var(--j-blue); outline-offset: 3px; }
.j-quiz__back { margin-top: calc(32 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--j-font); font-size: max(14px, calc(21 * var(--u))); color: var(--j-grey-nav); text-decoration: underline; text-underline-offset: .2em; }
.j-quiz__back:hover { color: var(--j-ink); }
.j-quiz__result { outline: none; }
.j-quiz__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(48 * var(--u)); list-style: none; }
.j-quiz__card { position: relative; display: flex; flex-direction: column; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u)); border-radius: calc(44 * var(--u)); background: var(--j-white); }
.j-quiz__card.is-top { box-shadow: inset 0 0 0 2px var(--j-ink); }
.j-quiz__badge { position: absolute; top: calc(36 * var(--u)); left: calc(36 * var(--u)); z-index: 1; }
.j-quiz__media { position: relative; display: block; height: calc(300 * var(--u)); min-height: 180px; border-radius: calc(30 * var(--u)); background: var(--j-grey-bg); overflow: hidden; }
.j-quiz__media img { position: absolute; left: -12%; top: -18%; width: 124%; height: auto; max-width: none; }
.j-quiz__type { margin: calc(28 * var(--u)) calc(16 * var(--u)) 0; font-size: max(12px, calc(18 * var(--u))); }
.j-quiz__name { display: block; margin: calc(12 * var(--u)) calc(16 * var(--u)) 0; }
.j-quiz__desc { margin: calc(12 * var(--u)) calc(16 * var(--u)) 0; font-size: max(14px, calc(20 * var(--u))); }
.j-quiz__actions { display: flex; align-items: center; gap: calc(24 * var(--u)); margin: auto calc(16 * var(--u)) 0; padding-top: calc(28 * var(--u)); }
.j-quiz__actions .j-btn { border: 0; cursor: pointer; font-family: var(--j-font); }
.j-quiz__more { font-size: max(14px, calc(20 * var(--u))); color: var(--j-ink); text-decoration: underline; text-underline-offset: .2em; }
.j-quiz__routine { margin-top: calc(32 * var(--u)); }
.j-quiz__routine[hidden] { display: none; }
.j-quiz__care { max-width: calc(1100 * var(--u)); margin-top: calc(40 * var(--u)); padding: calc(20 * var(--u)) calc(28 * var(--u)); border-left: 4px solid #d4ff5f; font-size: max(13px, calc(19 * var(--u))); line-height: 1.4; color: var(--j-grey-nav); }

@media (max-width: 989px) {
  .j-quiz__panel { padding: 24px 14px 28px; }
  .j-quiz__top { gap: 14px; padding: 0 8px; }
  .j-quiz__question, .j-quiz__help { width: auto; padding: 0 8px; }
  .j-quiz__step, .j-quiz__result { padding-top: 22px; }
  .j-quiz__answers { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .j-quiz__answer { min-height: 64px; padding: 14px 18px; border-radius: 22px; }
  .j-quiz__back { margin: 18px 8px 0; }
  .j-quiz__products { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .j-quiz__card { padding: 10px 10px 20px; border-radius: 26px; }
  .j-quiz__badge { top: 20px; left: 20px; }
  .j-quiz__media { border-radius: 18px; }
  .j-quiz__type, .j-quiz__name, .j-quiz__desc { margin-inline: 10px; }
  .j-quiz__actions { margin-inline: 10px; padding-top: 16px; }
  .j-quiz__care { max-width: none; margin: 22px 8px 0; padding: 12px 16px; }
}

/* ---------- Blog ---------- */
.j-blog { margin-top: calc(24 * var(--u)); }
.j-blog__panel { padding: calc(72 * var(--u)) 0 calc(85.95 * var(--u)); }
.j-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); width: calc(1549.54 * var(--u)); margin: 0 auto; list-style: none; }
.j-post { display: flex; flex-direction: column; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(36 * var(--u)); border-radius: calc(44 * var(--u)); background: var(--j-white); }
.j-post[hidden] { display: none; }
.j-post__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: calc(32 * var(--u)); background: #2682a4; overflow: hidden; }
.j-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.j-post__motif { object-position: 30% 40%; transform: scale(1.4); }
.j-post__theme { position: absolute; left: calc(28 * var(--u)); bottom: calc(28 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)); border-radius: var(--j-radius-pill); background: #d4ff5f; font-weight: 600; font-size: max(13px, calc(20 * var(--u))); color: var(--j-ink); }
.j-post__body { display: flex; flex-direction: column; flex: 1; padding: calc(28 * var(--u)) calc(20 * var(--u)) 0; }
.j-post__label { font-size: max(12px, calc(18 * var(--u))); }
.j-post__title { margin-top: calc(14 * var(--u)); }
.j-post__title a:hover { text-decoration: underline; text-underline-offset: .15em; }
.j-post__excerpt { margin-top: calc(14 * var(--u)); font-size: max(14px, calc(21 * var(--u))); }
.j-post--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(40 * var(--u)); align-items: center; padding: calc(16 * var(--u)); }
.j-post--featured .j-post__media { aspect-ratio: auto; height: calc(560 * var(--u)); }
.j-post--featured .j-post__body { padding: calc(40 * var(--u)) calc(56 * var(--u)) calc(40 * var(--u)) 0; }
.j-post--featured .j-post__title { font-weight: 400; font-size: max(28px, calc(64 * var(--u))); line-height: .95; letter-spacing: -0.04em; }
.j-post--featured .j-post__excerpt { margin-top: calc(28 * var(--u)); font-size: max(15px, calc(24 * var(--u))); }
.j-post__cta { align-self: flex-start; margin-top: calc(40 * var(--u)); }
.j-blog.is-filtered .j-post--featured { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(36 * var(--u)); }
.j-blog.is-filtered .j-post--featured .j-post__media { height: auto; aspect-ratio: 4 / 3; }
.j-blog.is-filtered .j-post--featured .j-post__body { padding: calc(28 * var(--u)) calc(20 * var(--u)) 0; }
.j-blog.is-filtered .j-post--featured .j-post__title { font-weight: 600; font-size: max(18px, calc(32 * var(--u))); line-height: 1; letter-spacing: -0.02em; }
.j-blog.is-filtered .j-post__cta { display: none; }
.j-blog__pages { display: flex; justify-content: center; gap: calc(16 * var(--u)); margin-top: calc(48 * var(--u)); }

/* ---------- Article ---------- */
.j-article__head { display: grid; grid-template-columns: minmax(0, 1fr) calc(760 * var(--u)); gap: calc(56 * var(--u)); align-items: center; padding: calc(56 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u)) calc(95.8 * var(--u)); }
.j-article__title { margin-top: calc(40 * var(--u)); font-size: max(34px, calc(84 * var(--u))); }
.j-article__lead { margin-top: calc(32 * var(--u)); max-width: calc(760 * var(--u)); }
.j-article__meta { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(40 * var(--u)) !important; }
.j-article__meta span { padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: var(--j-radius-pill); background: var(--j-white); font-size: max(13px, calc(19 * var(--u))); color: var(--j-grey-nav); }
.j-article__cover { position: relative; height: calc(560 * var(--u)); border-radius: var(--j-radius-section); background: #2682a4; overflow: hidden; }
.j-article__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.j-article__layout { display: grid; grid-template-columns: calc(400 * var(--u)) minmax(0, calc(1000 * var(--u))); gap: calc(80 * var(--u)); justify-content: center; margin-top: calc(80 * var(--u)); padding-inline: var(--j-side); }
.j-article__side { position: sticky; top: calc(24 * var(--u)); align-self: start; display: grid; gap: calc(16 * var(--u)); }
.j-toc { padding: calc(32 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--j-grey-bg); }
.j-toc ol { display: grid; gap: calc(4 * var(--u)); margin-top: calc(20 * var(--u)); list-style: none; }
.j-toc a { display: flex; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); font-size: max(14px, calc(20 * var(--u))); line-height: 1.25; color: var(--j-grey-nav); transition: background-color .2s ease, color .2s ease; }
.j-toc a span { flex: none; color: var(--j-blue); font-weight: 600; }
.j-toc a:hover, .j-toc a[aria-current] { background: var(--j-white); color: var(--j-ink); }
.j-callout { padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--j-ink); }
.j-callout .j-label { color: #d4ff5f; }
.j-callout__media { position: relative; display: block; height: calc(220 * var(--u)); min-height: 130px; margin-top: calc(20 * var(--u)); border-radius: calc(28 * var(--u)); background: rgba(255, 255, 255, .08); overflow: hidden; }
.j-callout__media img { position: absolute; left: -10%; top: -20%; width: 120%; height: auto; max-width: none; }
.j-callout__name { margin-top: calc(20 * var(--u)); color: var(--j-white); }
.j-callout__price { margin-top: calc(6 * var(--u)) !important; font-size: max(14px, calc(21 * var(--u))); color: rgba(255, 255, 255, .7); }
.j-callout__btn { width: 100%; margin-top: calc(24 * var(--u)); background: #d4ff5f; color: var(--j-ink); }
.j-callout__btn:hover { background: #c5f24a; }
.j-article__body { padding: 0; background: none; font-size: max(16px, calc(24 * var(--u))); }
.j-article__body h2 { scroll-margin-top: calc(40 * var(--u)); font-weight: 400; font-size: max(26px, calc(48 * var(--u))); line-height: .95; letter-spacing: -0.04em; margin-top: calc(72 * var(--u)); }
.j-article__body strong { background: linear-gradient(transparent 55%, rgba(212, 255, 95, .85) 55%); padding: 0 .1em; }
.j-callout--end { display: none; }
.j-article__care { margin-top: calc(56 * var(--u)) !important; padding: calc(24 * var(--u)) calc(32 * var(--u)); border-radius: calc(28 * var(--u)); background: var(--j-grey-bg); font-size: max(13px, calc(19 * var(--u))); line-height: 1.45; color: var(--j-grey-nav); }
.j-related__panel { padding: calc(105.75 * var(--u)) 0 calc(85.95 * var(--u)); }
.j-related__panel > .j-label, .j-related__title { width: calc(1549.54 * var(--u)); margin-inline: auto; }
.j-related__title { margin-top: calc(24 * var(--u)); margin-bottom: calc(56 * var(--u)); }

@media (max-width: 989px) {
  .j-blog__panel, .j-related__panel { padding: 22px 0 28px; }
  .j-blog__grid { grid-template-columns: 1fr; gap: 10px; width: auto; margin-inline: 10px; }
  .j-post, .j-blog.is-filtered .j-post--featured { padding: 8px 8px 20px; border-radius: 26px; }
  .j-post__media { border-radius: 20px; }
  .j-post__body, .j-blog.is-filtered .j-post--featured .j-post__body { padding: 16px 10px 0; }
  .j-post--featured { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .j-post--featured .j-post__media { height: auto; aspect-ratio: 4 / 3; }
  .j-post--featured .j-post__body { padding: 16px 10px 0; }
  .j-post__theme { left: 14px; bottom: 14px; padding: 6px 14px; }
  .j-blog__bar { margin-inline: 10px; }

  .j-article__head { grid-template-columns: 1fr; gap: 20px; padding: 28px 12px 12px; }
  .j-article__intro { padding: 0 10px; }
  .j-article__lead { max-width: none; }
  .j-article__cover { height: 220px; border-radius: 24px; }
  .j-article__meta span { padding: 6px 12px; }
  .j-article__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; padding-inline: 22px; }
  .j-article__side { position: static; }
  .j-article__side .j-callout { order: 2; }
  .j-toc { padding: 18px; border-radius: 22px; }
  .j-article__side .j-callout { display: none; }
  .j-callout--end { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; padding: 20px; border-radius: 24px; }
  .j-callout--end .j-callout__name { margin-top: 0; }
  .j-callout--end .j-callout__btn { margin-top: 8px; }
  .j-article__body h2 { margin-top: 36px; }
  .j-article__care { padding: 14px 18px; border-radius: 18px; }
  .j-related__panel > .j-label, .j-related__title { width: auto; margin-inline: 20px; }
  .j-related__title { margin-bottom: 18px; }
}

/* ---------- Contact ---------- */
.j-contact { margin-top: calc(24 * var(--u)); }
.j-contact__panel { display: grid; grid-template-columns: calc(520 * var(--u)) minmax(0, 1fr); gap: calc(24 * var(--u)); align-items: start; padding: calc(56 * var(--u)); }
.j-contact__cards { display: grid; gap: calc(16 * var(--u)); }
.j-contact__card { padding: calc(36 * var(--u)) calc(40 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--j-white); }
.j-contact__value { margin-top: calc(14 * var(--u)); }
.j-contact__text { margin-top: calc(10 * var(--u)); font-size: max(14px, calc(20 * var(--u))); }
.j-contact__link { display: inline-block; margin-top: calc(16 * var(--u)); font-weight: 600; font-size: max(14px, calc(20 * var(--u))); color: var(--j-blue); }
.j-contact__form-wrap { padding: calc(56 * var(--u)) calc(64 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--j-white); }
.j-contact__title { margin-top: calc(24 * var(--u)); }
.j-contact__form { display: grid; gap: calc(20 * var(--u)); margin-top: calc(48 * var(--u)); }
.j-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.j-field { display: grid; gap: calc(10 * var(--u)); font-size: max(13px, calc(19 * var(--u))); color: var(--j-grey-nav); }
.j-field input, .j-field select, .j-field textarea {
  width: 100%; min-height: calc(68 * var(--u)); padding: calc(16 * var(--u)) calc(26 * var(--u)); border: 2px solid transparent; border-radius: calc(26 * var(--u));
  background: var(--j-grey-bg); font-family: var(--j-font); font-size: max(16px, calc(22 * var(--u))); color: var(--j-ink); outline: none; transition: border-color .2s ease, background-color .2s ease;
}
.j-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--j-ink) 50%), linear-gradient(135deg, var(--j-ink) 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.j-field textarea { resize: vertical; line-height: 1.4; }
.j-field input:focus, .j-field select:focus, .j-field textarea:focus { border-color: var(--j-ink); background: var(--j-white); }
.j-contact__note { font-size: max(13px, calc(18 * var(--u))); line-height: 1.4; color: var(--j-grey-text); }
.j-contact__submit { justify-self: start; border: 0; cursor: pointer; font-family: var(--j-font); }
.j-contact__ok, .j-contact__error { padding: calc(18 * var(--u)) calc(26 * var(--u)); border-radius: calc(22 * var(--u)); font-size: max(14px, calc(20 * var(--u))); color: var(--j-ink); }
.j-contact__ok { background: #d4ff5f; }
.j-contact__error { background: #ffe1e1; }

@media (max-width: 989px) {
  .j-contact__panel { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .j-contact__cards { grid-template-columns: 1fr; gap: 10px; }
  .j-contact__card { padding: 20px; border-radius: 24px; }
  .j-contact__form-wrap { padding: 24px 18px; border-radius: 24px; }
  .j-contact__form { gap: 14px; margin-top: 22px; }
  .j-contact__row { grid-template-columns: 1fr; gap: 14px; }
  .j-field input, .j-field select, .j-field textarea { min-height: 50px; padding: 12px 16px; border-radius: 16px; }
}

/* ---------- Recherche ---------- */
.j-search__head { padding: calc(90 * var(--u)) calc(95.8 * var(--u)) calc(72 * var(--u)); }
.j-search__title { width: calc(1400 * var(--u)); margin-top: calc(40 * var(--u)); font-size: max(32px, calc(84 * var(--u))); overflow-wrap: anywhere; }
.j-search__form { display: flex; align-items: center; gap: calc(20 * var(--u)); width: calc(1100 * var(--u)); height: calc(84 * var(--u)); min-height: 52px; margin-top: calc(48 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(32 * var(--u)); border-radius: var(--j-radius-pill); background: var(--j-white); }
.j-search__form:focus-within { box-shadow: 0 0 0 2px var(--j-ink); }
.j-search__form .j-icon { flex: none; width: calc(28 * var(--u)); min-width: 18px; height: auto; }
.j-search__form input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: var(--j-font); font-size: max(16px, calc(26 * var(--u))); color: var(--j-ink); }
.j-search__form .j-btn { flex: none; border: 0; cursor: pointer; font-family: var(--j-font); }
.j-search__chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(28 * var(--u)); }
.j-search__chips > span { margin-right: calc(6 * var(--u)); font-size: max(14px, calc(20 * var(--u))); color: var(--j-grey-nav); }
.j-search__chips .j-filter { display: inline-flex; align-items: center; height: calc(48 * var(--u)); min-height: 36px; font-size: max(14px, calc(20 * var(--u))); }
.j-search__group { margin-top: calc(16 * var(--u)); padding: calc(64 * var(--u)) calc(95.8 * var(--u)) calc(72 * var(--u)); }
.j-search__products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(32 * var(--u)); list-style: none; }
.j-scard { display: flex; flex-direction: column; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--j-white); }
.j-scard__media { position: relative; display: block; aspect-ratio: 1; border-radius: calc(28 * var(--u)); background: var(--j-grey-bg); overflow: hidden; }
.j-scard__media img { position: absolute; left: -18%; top: -18%; width: 136%; max-width: none; height: auto; }
.j-scard__type { margin: calc(24 * var(--u)) calc(12 * var(--u)) 0; font-size: max(12px, calc(17 * var(--u))); }
.j-scard__title { margin: calc(10 * var(--u)) calc(12 * var(--u)) 0; }
.j-scard__title a:hover { text-decoration: underline; text-underline-offset: .15em; }
.j-scard__desc { margin: calc(10 * var(--u)) calc(12 * var(--u)) 0; font-size: max(14px, calc(19 * var(--u))); }
.j-scard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto calc(12 * var(--u)) 0; padding-top: calc(24 * var(--u)); }
.j-scard__price { font-weight: 600; font-size: max(16px, calc(26 * var(--u))); color: var(--j-ink); }
.j-scard__btn { height: calc(52 * var(--u)); min-height: 40px; padding-inline: calc(30 * var(--u)); }
.j-search__list { display: grid; gap: calc(10 * var(--u)); margin-top: calc(32 * var(--u)); list-style: none; }
.j-search__list a { display: grid; gap: calc(8 * var(--u)); padding: calc(28 * var(--u)) calc(36 * var(--u)); border-radius: calc(32 * var(--u)); background: var(--j-white); transition: transform .2s ease; }
.j-search__list a:hover { transform: translateY(-1px); }
.j-search__kind { font-weight: 700; font-size: max(11px, calc(16 * var(--u))); letter-spacing: .3em; text-transform: uppercase; color: var(--j-blue); }
.j-search__list strong { font-weight: 600; font-size: max(18px, calc(30 * var(--u))); letter-spacing: -0.02em; color: var(--j-ink); }
.j-search__excerpt { font-size: max(14px, calc(20 * var(--u))); line-height: 1.35; color: var(--j-grey-nav); }
.j-search__nudge { margin-top: calc(40 * var(--u)); }

@media (max-width: 989px) {
  .j-search__head { padding: 28px 20px 26px; }
  .j-search__title, .j-search__form { width: auto; }
  .j-search__title { margin-top: 18px; }
  .j-search__form { margin-top: 22px; padding: 0 6px 0 18px; }
  .j-search__form .j-btn { padding-inline: 16px; height: 40px; }
  .j-search__chips { gap: 8px; margin-top: 16px; }
  .j-search__group { margin-top: 10px; padding: 24px 12px 14px; }
  .j-search__group > .j-label { margin-left: 10px; }
  .j-search__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .j-scard { padding: 6px 6px 14px; border-radius: 22px; }
  .j-scard__media { border-radius: 17px; }
  .j-scard__type, .j-scard__title, .j-scard__desc, .j-scard__foot { margin-inline: 6px; }
  .j-scard__desc { display: none; }
  .j-scard__foot { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; }
  .j-scard__btn { width: 100%; }
  .j-search__list { margin-top: 16px; gap: 8px; }
  .j-search__list a { padding: 16px 18px; border-radius: 20px; }
}