/* =============================================================
   JASP · Sections de la page d'accueil
   Cotes relevées sur Figma (02-home, 1920 px), exprimées en --u.
   ============================================================= */

.j-wrap { max-width: 1920px; margin-inline: auto; }
.j-row { width: calc(1549.54 * var(--u)); margin-inline: auto; } /* rangée centrée des cartes */
.j-dot { /* pastille bleue à halo (surtitres) */
  position: relative; flex: none; display: inline-block;
  width: calc(32.65 * var(--u)); height: calc(32.65 * var(--u));
  border-radius: 50%; background: rgba(38, 130, 164, .3);
}
.j-dot::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: calc(13.72 * var(--u)); height: calc(13.72 * var(--u));
  border-radius: 50%; background: var(--j-blue);
}
.j-link { /* lien souligné bleu (« Voir les produits ») */
  display: inline-flex; align-items: center; height: calc(62.565 * var(--u));
  padding-inline: calc(28 * var(--u)); border-radius: var(--j-radius-pill);
  font-size: max(15px, calc(24 * var(--u))); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--j-blue); text-decoration: underline; text-underline-offset: .18em;
}
.j-link:hover { color: var(--j-ink); }
.j-arrow { width: calc(11.77 * var(--u)); height: calc(11.77 * var(--u)); margin: calc(-1 * var(--u)); flex: none; }

/* En-tête de section : surtitre + titre à gauche, texte à droite */
.j-head { position: relative; padding-left: var(--j-gutter); }
.j-head .j-title-2 { margin-top: calc(24 * var(--u)); }
.j-head__aside { position: absolute; left: calc(1327.08 * var(--u)); top: calc(113 * var(--u)); }

/* ---------------------------------------------------------------
   1. HERO (fond 110:111 : y 196.55, 1838 × 782)
   --------------------------------------------------------------- */
.j-hero__panel { height: calc(782.39 * var(--u)); }
.j-hero__content { position: relative; z-index: 1; padding: calc(90.07 * var(--u)) 0 0 calc(95.8 * var(--u)); }
.j-hero__eyebrow {
  display: flex; align-items: center; gap: calc(7.97 * var(--u));
  padding-left: calc(1.76 * var(--u));
  font-weight: 700; font-size: max(13px, calc(24 * var(--u))); line-height: 1;
  text-transform: uppercase; color: var(--j-blue);
}
.j-hero__title { width: calc(770.85 * var(--u)); margin-top: calc(64.95 * var(--u)); }
.j-hero__text { width: calc(511.93 * var(--u)); margin-top: calc(67.14 * var(--u)); }
.j-hero__buttons { display: flex; gap: calc(20 * var(--u)); margin-top: calc(98.44 * var(--u)); }
.j-hero__visual {
  position: absolute; top: 0; right: 0; bottom: 0; left: calc(811.77 * var(--u));
  overflow: hidden; border-radius: var(--j-radius-section);
}
.j-hero__visual img {
  position: absolute; max-width: none;
  left: calc(-288.25 * var(--u)); top: calc(-113.09 * var(--u));
  width: calc(1704.14 * var(--u)); height: calc(1136.23 * var(--u));
  object-fit: cover;
}

/* ---------------------------------------------------------------
   2. BANDEAU DE RÉASSURANCE (110:203) : défilement continu, fondu aux bords
   --------------------------------------------------------------- */
.j-strip {
  width: calc(1784.44 * var(--u)); height: calc(129.86 * var(--u));
  margin: calc(67.94 * var(--u)) auto 0; overflow: hidden; padding-left: calc(25.92 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 2.8%, #000 15%, #000 85%, transparent 97%);
          mask-image: linear-gradient(90deg, transparent 2.8%, #000 15%, #000 85%, transparent 97%);
}
.j-strip__track {
  display: flex; width: max-content; gap: calc(40 * var(--u));
  padding-top: calc(37.12 * var(--u)); list-style: none;
  animation: j-marquee 38s linear infinite;
}
.j-strip:hover .j-strip__track { animation-play-state: paused; }
.j-strip__item { display: flex; align-items: center; gap: calc(16 * var(--u)); white-space: nowrap; }
.j-strip__item img { flex: none; width: auto; height: calc(var(--h) * var(--u)); }
.j-strip__item strong { display: block; font-weight: 400; font-size: max(14px, calc(24 * var(--u))); line-height: 1; color: var(--j-black); }
.j-strip__item small { display: block; margin-top: calc(7 * var(--u)); font-size: max(12px, calc(20 * var(--u))); line-height: 1; color: var(--j-grey-text); }
@keyframes j-marquee { to { transform: translateX(calc(-50% - 20 * var(--u))); } }
@media (prefers-reduced-motion: reduce) { .j-strip__track { animation: none; } }

/* ---------------------------------------------------------------
   3. PAR OÙ COMMENCER (label y 1400.42, cartes y 1677.91, bandeau y 2378.69)
   --------------------------------------------------------------- */
.j-needs { padding-top: calc(223.68 * var(--u)); }
.j-needs .j-head .j-title-2 { width: calc(729.49 * var(--u)); }
.j-needs .j-head__aside { width: calc(453.53 * var(--u)); }
.j-needs__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8.28 * var(--u));
  margin-top: calc(99.89 * var(--u));
}
.j-need {
  position: relative; display: flex; flex-direction: column;
  height: calc(627.51 * var(--u)); background: var(--j-grey-bg); border-radius: var(--j-radius-section);
}
.j-need__media {
  position: relative; height: calc(348.92 * var(--u)); border-radius: var(--j-radius-section);
  background: #eaeaea; overflow: hidden;
}
.j-need__media img { position: absolute; max-width: none; left: -29.53%; top: -11.39%; width: 168.93%; height: 123.04%; object-fit: cover; }
.j-need__body { padding: calc(37.89 * var(--u)) calc(30 * var(--u)) 0 calc(66.25 * var(--u)); }
.j-need__desc { width: calc(248.68 * var(--u)); margin-top: calc(21.11 * var(--u)); }
.j-need .j-link { position: absolute; left: calc(38.46 * var(--u)); bottom: calc(26.92 * var(--u)); }
.j-need .j-link[aria-disabled] { color: var(--j-grey-text); text-decoration: none; pointer-events: none; }

.j-nudge {
  display: flex; align-items: center; height: calc(136.54 * var(--u));
  margin-top: calc(73.27 * var(--u)); padding: 0 calc(63 * var(--u)) 0 calc(66.46 * var(--u));
  background: #d4ff5f; border-radius: var(--j-radius-section);
}
.j-nudge .j-subtitle { width: calc(294.84 * var(--u)); flex: none; }
.j-nudge .j-text { color: var(--j-ink); }
.j-nudge .j-btn { margin-left: auto; }

/* ---------------------------------------------------------------
   4. LA GAMME (fond 121:141 : y 2651.25, 1838 × 1897)
   --------------------------------------------------------------- */
.j-range { margin-top: calc(136.02 * var(--u)); padding: calc(105.75 * var(--u)) 0 calc(85.95 * var(--u)); }
.j-range .j-head { padding-left: calc(95.8 * var(--u)); }
.j-range .j-head .j-title-2 { width: calc(641.7 * var(--u)); }
.j-range .j-head__aside { left: calc(1285.79 * var(--u)); width: calc(346.33 * var(--u)); color: var(--j-black); }
.j-range__grid {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(8.28 * var(--u)); row-gap: calc(8.62 * var(--u));
  margin-top: calc(99.89 * var(--u));
}
.j-product {
  --c-bg: var(--j-white); --c-label: var(--j-blue); --c-title: var(--j-ink); --c-price: var(--j-ink);
  position: relative; display: block; height: calc(627.51 * var(--u));
  background: var(--c-bg); border-radius: var(--j-radius-section);
  transition: background-color .35s ease;
}
.j-product--featured, .j-range__grid:hover .j-product:hover {
  --c-bg: var(--j-ink); --c-label: #d4ff5f; --c-title: var(--j-white); --c-price: var(--j-white);
}
.j-range__grid:hover .j-product--featured:not(:hover) {
  --c-bg: var(--j-white); --c-label: var(--j-blue); --c-title: var(--j-ink); --c-price: var(--j-ink);
}
.j-product__media { position: relative; height: calc(348.92 * var(--u)); border-radius: var(--j-radius-section); background: #eaeaea; overflow: hidden; }
.j-product__media img { position: absolute; max-width: none; left: -14.61%; top: -53.18%; width: 140.32%; height: 206.63%; object-fit: cover; }
.j-product__media--art { background: transparent; }
.j-product__label { position: absolute; left: calc(66.46 * var(--u)); top: calc(393.81 * var(--u)); color: var(--c-label); transition: color .35s ease; }
.j-product__title { position: absolute; left: calc(66.25 * var(--u)); top: calc(437.81 * var(--u)); color: var(--c-title); transition: color .35s ease; }
.j-product__desc { position: absolute; left: calc(66.25 * var(--u)); bottom: calc(51.44 * var(--u)); width: calc(321 * var(--u)); }
.j-product__price {
  position: absolute; right: calc(43.86 * var(--u)); bottom: calc(47.74 * var(--u));
  font-size: max(30px, calc(72 * var(--u))); line-height: .9; letter-spacing: -0.04em; white-space: nowrap;
  color: var(--c-price); transition: color .35s ease;
}
.j-product__cta { position: absolute; right: calc(43.86 * var(--u)); top: calc(396.25 * var(--u)); }
.j-product .j-btn--dark { transition: background-color .35s ease, color .35s ease; }
.j-product--featured .j-btn--dark, .j-range__grid:hover .j-product:hover .j-btn--dark { background: var(--j-white); color: var(--j-black); }
.j-range__grid:hover .j-product--featured:not(:hover) .j-btn--dark { background: var(--j-ink); color: var(--j-white); }
.j-range__all { display: flex; justify-content: center; margin-top: calc(101.87 * var(--u)); }
.j-range__all .j-btn { gap: calc(10 * var(--u)); }


/* ---------------------------------------------------------------
   5. LA DÉMARCHE (label y 4701.44, bannière y 4978.93, engagements y 5389.07)
   --------------------------------------------------------------- */
.j-approach { padding-top: calc(152.92 * var(--u)); }
.j-approach__title { width: calc(580.79 * var(--u)); }
.j-approach__title span { color: var(--j-grey-text); }
.j-approach__aside { left: calc(997.28 * var(--u)); top: calc(91 * var(--u)); width: calc(676.13 * var(--u)); color: var(--j-black); }
.j-approach__banner {
  position: relative; height: calc(348.92 * var(--u)); margin-top: calc(99.89 * var(--u));
  border-radius: var(--j-radius-section); background: #eaeaea; overflow: hidden;
}
.j-approach__banner img { position: absolute; max-width: none; left: -30.56%; top: -183.44%; width: 123.91%; height: 366.88%; object-fit: cover; }
.j-approach__btn { position: absolute; left: calc(1330.72 * var(--u)); top: calc(242.57 * var(--u)); transform: translateX(-50%); gap: calc(10 * var(--u)); }
.j-approach__btn:hover { transform: translateX(-50%) translateY(-1px); }
.j-approach__points { display: grid; grid-template-columns: repeat(3, calc(524.55 * var(--u))); height: calc(172.75 * var(--u)); margin-top: calc(61.22 * var(--u)); padding-left: calc(7.73 * var(--u)); list-style: none; }
.j-approach__point { display: flex; gap: calc(43.12 * var(--u)); }
.j-approach__point > div { width: calc(321 * var(--u)); padding-top: calc(31.15 * var(--u)); }
.j-approach__point .j-subtitle { width: calc(349.79 * var(--u)); }
.j-approach__point .j-text { margin-top: calc(20 * var(--u)); }
.j-approach__icon {
  flex: none; display: grid; place-items: center;
  width: calc(85.65 * var(--u)); height: calc(85.65 * var(--u)); border-radius: 50%; background: #d4ff5f;
}
.j-approach__icon img { width: auto; }
.j-approach__ico--methode { height: calc(43.19 * var(--u)); }
.j-approach__ico--biodispo { height: calc(43.34 * var(--u)); }
.j-approach__ico--holistique { height: calc(31.88 * var(--u)); transform: rotate(30deg); }


/* ---------------------------------------------------------------
   6. NOS ROUTINES (label y 5851.31, cartes y 6128.81 → 7095.41)
   Cartes posées en absolu sur une bande de 1838 px (comme la maquette).
   --------------------------------------------------------------- */
.j-routines { padding-top: calc(289.49 * var(--u)); }
.j-routines .j-head .j-title-2 { width: calc(729.49 * var(--u)); }
.j-routines .j-head__aside { width: calc(453.53 * var(--u)); }
.j-routines__row {
  position: relative; height: calc(1050.12 * var(--u));
  margin: calc(99.9 * var(--u)) var(--j-side) 0; list-style: none;
}
.j-routine { position: absolute; top: 0; height: 100%; }
.j-routine--gauche { left: 0; width: calc(642.33 * var(--u)); --tx: calc(70.36 * var(--u)); --cta: calc(196.97 * var(--u)); --lx: calc(79.78 * var(--u)); --tw: auto; --c-title: #d4ff5f; --c-price: #fff; --c-compare: #fff; --c-list: var(--j-ink); }
.j-routine--centre { left: calc(492.83 * var(--u)); width: calc(852.48 * var(--u)); --tx: calc(261.27 * var(--u)); --cta: calc(220.24 * var(--u)); --lx: calc(277.46 * var(--u)); --tw: calc(530.91 * var(--u)); --c-title: #fff; --c-price: #d4ff5f; --c-compare: #fff; --c-list: var(--j-blue); }
.j-routine--droite { left: calc(1182.47 * var(--u)); width: calc(655.67 * var(--u)); --tx: calc(255.37 * var(--u)); --cta: calc(29.25 * var(--u)); --lx: calc(255.37 * var(--u)); --tw: calc(371.05 * var(--u)); --c-title: var(--j-ink); --c-price: var(--j-blue); --c-compare: var(--j-ink); --c-list: var(--j-ink); }
.j-routine__card { position: relative; display: block; height: calc(966.61 * var(--u)); }
.j-routine__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.j-routine__shape {
  position: absolute; inset: 0; overflow: hidden; background: var(--j-grey-bg);
  -webkit-mask: url('jasp-routine-gauche-forme.svg') 0 0 / 100% 100% no-repeat;
          mask: url('jasp-routine-gauche-forme.svg') 0 0 / 100% 100% no-repeat;
}
.j-routine__photo { position: absolute; max-width: none; left: -99.87%; top: -25.49%; width: 263.9%; height: 116.92%; object-fit: cover; }
.j-routine__cta { position: absolute; top: calc(27.67 * var(--u)); right: var(--cta); }
.j-routine__card:hover .j-routine__cta { background: #eaeaea; }
.j-routine__prices { position: absolute; left: var(--tx); top: calc(714.76 * var(--u)); display: flex; align-items: flex-end; gap: calc(12.37 * var(--u)); }
.j-routine__price { font-size: max(24px, calc(48 * var(--u))); line-height: .9; letter-spacing: -0.04em; color: var(--c-price); white-space: nowrap; }
.j-routine__compare { font-size: max(13px, calc(24 * var(--u))); line-height: 1.2; color: var(--c-compare); white-space: nowrap; text-decoration-skip-ink: none; }
.j-routine__title {
  position: absolute; left: var(--tx); top: calc(773.82 * var(--u));
  font-weight: 600; font-size: max(30px, calc(72 * var(--u))); line-height: .9; letter-spacing: -0.04em;
  width: var(--tw); color: var(--c-title);
}
.j-routine__items { position: absolute; left: var(--lx); top: calc(988.8 * var(--u)); display: grid; row-gap: calc(3.72 * var(--u)); list-style: none; color: var(--c-list); }
.j-routine__items li { display: flex; align-items: center; gap: calc(18.7 * var(--u)); font-size: max(14px, calc(24 * var(--u))); line-height: 1.2; white-space: nowrap; }
.j-routine__items li::before { content: ''; flex: none; width: calc(16.47 * var(--u)); height: calc(16.47 * var(--u)); border-radius: 50%; background: currentColor; }


/* ---------------------------------------------------------------
   7. AVIS (fond 126:442 : y 7390.97, 1838 × 936)
   --------------------------------------------------------------- */
.j-reviews-section { margin-top: calc(212.04 * var(--u)); }
.j-reviews { height: calc(936.35 * var(--u)); }
.j-reviews > *:not(.j-reviews__list) { position: absolute; z-index: 2; }
.j-reviews__label { left: calc(95.8 * var(--u)); top: calc(105.74 * var(--u)); }
.j-reviews__rating { left: calc(1302.61 * var(--u)); top: calc(100.08 * var(--u)); display: flex; align-items: flex-start; }
.j-reviews__rating img { width: calc(252.25 * var(--u)); height: auto; margin-top: calc(12.23 * var(--u)); }
.j-reviews__rating p {
  position: absolute; left: calc(279.63 * var(--u)); top: 0;
  font-family: 'Neue Montreal', var(--j-font); font-size: max(28px, calc(65 * var(--u))); line-height: 1; letter-spacing: -0.02em;
  color: var(--j-ink); white-space: nowrap;
}
.j-reviews__quote { left: calc(91.2 * var(--u)); top: calc(297.85 * var(--u)); width: calc(163.85 * var(--u)); height: auto; }
.j-reviews__title { left: calc(88.01 * var(--u)); top: calc(485.3 * var(--u)); width: calc(381.78 * var(--u)); }
.j-reviews__nav { left: calc(88.01 * var(--u)); top: calc(756.7 * var(--u)); display: flex; align-items: center; width: calc(342.54 * var(--u)); height: calc(14.51 * var(--u)); }
.j-reviews__arrow { flex: none; display: grid; place-items: center; width: calc(10 * var(--u)); height: calc(14.51 * var(--u)); padding: 0; border: 0; background: none; color: var(--j-ink); cursor: pointer; }
.j-reviews__arrow svg { width: 100%; height: 100%; overflow: visible; }
.j-reviews__arrow::after { content: ''; position: absolute; width: 40px; height: 40px; } /* zone cliquable confortable */
.j-reviews__track { position: relative; flex: 1; height: calc(2.5 * var(--u)); margin-inline: calc(23.09 * var(--u)); border-radius: 2px; background: var(--j-white); }
.j-reviews__thumb {
  --p: 0; position: absolute; top: 0; height: 100%; width: calc(35.12 * var(--u)); border-radius: 2px; background: var(--j-ink);
  left: calc(var(--p) * (100% - 35.12 * var(--u))); transition: left .2s ease;
}
.j-reviews__list {
  position: absolute; z-index: 1; left: 0; right: 0; top: calc(285.2 * var(--u));
  display: flex; gap: calc(47.52 * var(--u)); padding: 0 calc(96.62 * var(--u)) calc(10 * var(--u));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(96.62 * var(--u));
  list-style: none; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 27.89%, #000 44.2%, #000 96.87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 27.89%, #000 44.2%, #000 96.87%, transparent 100%);
}
.j-reviews__list::-webkit-scrollbar { display: none; }
.j-review { flex: none; width: calc(519.38 * var(--u)); scroll-snap-align: start; }
.j-review__bubble {
  position: relative; height: calc(424.03 * var(--u));
  background: url('jasp-bulle.svg') 0 0 / 100% 100% no-repeat;
}
.j-review__text {
  position: absolute; left: calc(54.68 * var(--u)); top: calc(133.83 * var(--u)); transform: translateY(-50%);
  width: calc(404.54 * var(--u));
  font-family: 'Inter', system-ui, sans-serif; font-size: max(13px, calc(20 * var(--u))); line-height: 1.5; color: var(--j-black);
}
.j-review__stars { position: absolute; left: calc(45.26 * var(--u)); top: calc(314.62 * var(--u)); width: calc(150.89 * var(--u)); height: auto; }
.j-review__author { display: flex; align-items: flex-end; gap: calc(28.76 * var(--u)); margin: calc(-9.74 * var(--u)) 0 0 calc(72.19 * var(--u)); }
.j-review__author img { width: calc(74.42 * var(--u)); height: auto; }
.j-review__author p { display: grid; gap: calc(3.32 * var(--u)); color: #b6b6b6; font-family: 'Neue Montreal', var(--j-font); }
.j-review__author strong { font-weight: 500; font-size: max(22px, calc(45 * var(--u))); line-height: 1; }
.j-review__author span { font-size: max(12px, calc(20 * var(--u))); line-height: 1; }

/* ---------------------------------------------------------------
   Écrans étroits : la maquette n'existe qu'en 1920 px.
   Adaptation empilée lisible, à affiner avec une maquette mobile.
   --------------------------------------------------------------- */
@media (max-width: 989px) {
  :root { --u: 0.52px; }
  .j-panel { margin-inline: 12px; border-radius: 28px; }
  .j-hero__panel { height: auto; display: flex; flex-direction: column-reverse; }
  .j-hero__visual { position: relative; left: 0; height: 300px; border-radius: 28px; }
  .j-hero__visual img { left: -18%; top: -16%; width: 130%; height: auto; }
  .j-hero__content { padding: 28px 22px 32px; }
  .j-hero__title, .j-hero__text { width: auto; }
  .j-hero__title { margin-top: 22px; }
  .j-hero__text { margin-top: 18px; }
  .j-hero__buttons { margin-top: 26px; flex-wrap: wrap; gap: 10px; }
  .j-dot { width: 22px; height: 22px; }
  .j-dot::after { width: 9px; height: 9px; }

  .j-strip { width: 100%; height: 96px; margin-top: 18px; }
  .j-strip__track { gap: 28px; padding-top: 22px; }
  .j-strip__item { gap: 12px; }
  .j-strip__item img { height: calc(var(--h) * .6px); }

  .j-head, .j-range .j-head { padding-inline: 22px; }
  .j-head__aside { position: static; width: auto !important; margin-top: 14px; }
  .j-head .j-title-2, .j-needs .j-head .j-title-2, .j-range .j-head .j-title-2 { width: auto; margin-top: 12px; }
  .j-needs { padding-top: 72px; }
  .j-row { width: auto; margin-inline: 12px; }
  .j-needs__grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
  .j-need { height: auto; padding-bottom: 64px; border-radius: 28px; }
  .j-need__media { height: 170px; border-radius: 28px; }
  .j-need__body { padding: 18px 16px 0; }
  .j-need__desc { width: auto; margin-top: 10px; }
  .j-need .j-link { left: 2px; bottom: 6px; }
  .j-nudge { height: auto; flex-wrap: wrap; gap: 12px 20px; padding: 22px; margin-top: 16px; border-radius: 28px; }
  .j-nudge .j-subtitle { width: auto; }
  .j-nudge .j-btn { margin-left: 0; }

  .j-range { margin-top: 56px; padding: 40px 0 36px; }
  .j-range__grid { grid-template-columns: 1fr; gap: 8px; margin: 28px 10px 0; }
  .j-product { height: auto; min-height: 380px; border-radius: 28px; padding-bottom: 24px; }
  .j-product__media { height: 190px; border-radius: 28px; }
  .j-product__label, .j-product__title, .j-product__cta { position: static; }
  .j-product__label { margin: 20px 20px 0; }
  .j-product__title { margin: 10px 20px 0; }
  .j-product__cta { position: absolute; top: 210px; right: 18px; }
  .j-product__desc { position: static; width: auto; margin: 14px 20px 0; }
  .j-product__price { position: static; display: block; margin: 14px 20px 0; text-align: right; }
  .j-range__all { margin-top: 32px; }

  .j-approach { padding-top: 72px; }
  .j-approach__title, .j-approach__aside { width: auto; }
  .j-approach__banner { height: 220px; margin-top: 28px; border-radius: 28px; }
  .j-approach__banner img { left: -60%; top: -110%; width: 220%; height: 300%; }
  .j-approach__btn { left: auto; right: 16px; top: auto; bottom: 16px; transform: none; }
  .j-approach__btn:hover { transform: none; }
  .j-approach__points { grid-template-columns: 1fr; gap: 22px; height: auto; padding: 0 10px; margin-top: 28px; }
  .j-approach__point .j-subtitle { width: auto; }
  .j-approach__point { gap: 18px; }
  .j-approach__point > div { width: auto; padding-top: 6px; }
  .j-approach__icon { width: 56px; height: 56px; }
  .j-approach__icon img { transform-origin: center; scale: .66; }

  .j-routines { padding-top: 72px; }
  .j-routines .j-head .j-title-2, .j-routines .j-head__aside { width: auto; }
  .j-routines__row { height: auto; margin: 28px 12px 0; display: grid; gap: 28px; }
  .j-routine { position: relative; left: auto !important; width: 100% !important; height: auto; --tx: 26px !important; --cta: 22px !important; --lx: 26px !important; }
  .j-routine__card { height: auto; aspect-ratio: 642 / 760; border-radius: 28px; overflow: hidden; background: var(--j-ink); }
  .j-routine--droite .j-routine__card { background: #e8f8c4; }
  .j-routine--centre .j-routine__card { background: var(--j-blue); }
  .j-routine__art, .j-routine__shape { -webkit-mask: none; mask: none; object-fit: cover; }
  .j-routine__prices { top: auto; bottom: 108px; }
  .j-routine__title { top: auto; bottom: 26px; }
  .j-routine__items { position: static; margin: 14px 0 0 26px; }

  .j-reviews-section { margin-top: 64px; }
  .j-reviews { height: auto; padding: 32px 0 28px; }
  .j-reviews > *:not(.j-reviews__list) { position: static; }
  .j-reviews__label, .j-reviews__title, .j-reviews__rating, .j-reviews__nav { margin-inline: 22px; }
  .j-reviews__rating { margin-top: 14px; gap: 12px; align-items: center; }
  .j-reviews__rating p { position: static; }
  .j-reviews__rating img { margin: 0; width: 130px; }
  .j-reviews__quote { display: none; }
  .j-reviews__title { width: auto; margin-top: 18px; }
  .j-reviews__list { position: static; margin-top: 24px; padding-inline: 22px; scroll-padding-left: 22px; -webkit-mask-image: none; mask-image: none; }
  .j-review { width: 78vw; }
  .j-review__bubble { height: 260px; }
  .j-review__text { left: 24px; right: 24px; width: auto; top: 26px; transform: none; }
  .j-review__stars { left: 24px; top: auto; bottom: 46px; width: 96px; }
  .j-reviews__nav { width: 200px; margin-top: 18px; }
}

/* Emplacement du widget d'avis (capture Trustpilot de la maquette, nœud 127:504) */
.j-widget { width: calc(1639.85 * var(--u)); margin: calc(51.78 * var(--u)) auto 0; }
.j-widget--empty {
  display: grid; place-items: center; height: calc(346.55 * var(--u));
  border: 2px dashed #cfd8dc; border-radius: calc(30 * var(--u));
  font-size: max(13px, calc(20 * var(--u))); color: var(--j-grey-nav); text-align: center; padding: 0 24px;
}
@media (max-width: 989px) { .j-widget { width: auto; margin: 40px 12px 0; } .j-widget--empty { height: 160px; } }