/* Proforma Peptides - home page */

.pf-home {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pf-ink);
  overflow-x: clip;
}

.pf-home *, .pf-home *::before, .pf-home *::after { box-sizing: border-box; }
.pf-home img { max-width: 100%; height: auto; display: block; }
.pf-home p { margin: 0; }
.pf-home a { text-decoration: none; }

.pf-home h1, .pf-home h2, .pf-home h3 {
  margin: 0;
  font-family: var(--pf-font-display);
  color: var(--pf-ink);
  line-height: 1.16;
  letter-spacing: -.025em;
  font-weight: 700;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- shared bits ---------- */

.pf-kicker {
  display: block;
  position: relative;
  padding-left: 26px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--pf-accent-d);
}

.pf-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 17px;
  height: 2px;
  background: var(--pf-accent);
  border-radius: 2px;
}

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pf-btn span { transition: transform .2s ease; }
.pf-btn:hover span { transform: translateX(3px); }

.pf-btn--dark {
  background: var(--pf-navy);
  color: #fff;
  box-shadow: 0 8px 22px rgba(12,74,110,.20);
}
.pf-btn--dark:hover { background: var(--pf-accent-d); color: #fff; transform: translateY(-2px); }

.pf-btn--light {
  background: #fff;
  color: var(--pf-ink);
  border-color: var(--pf-line);
}
.pf-btn--light:hover { border-color: var(--pf-navy); transform: translateY(-2px); }

.pf-btn--teal { background: var(--pf-accent-d); color: #fff; }
.pf-btn--teal:hover { background: #fff; color: var(--pf-navy); transform: translateY(-2px); }

.pf-section { padding: 88px 0; }
.pf-section--tint { background: var(--pf-surface); }
/* Derniere section avant le footer : le visuel enchaine directement. */
.pf-section--flush { padding-bottom: 88px; }

.pf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 40px;
}

.pf-head h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  margin-top: 14px;
}

.pf-head p {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--pf-muted);
  font-size: 15px;
}

.pf-morelink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-accent-d);
  white-space: nowrap;
}

.pf-morelink span { transition: transform .2s ease; }
.pf-morelink:hover span { transform: translateX(4px); }

/* ---------- HERO ---------- */

.pf-hero {
  position: relative;
  background: linear-gradient(175deg, #F7FCFF 0%, #EDF7FE 60%, #E6F4FD 100%);
  overflow: hidden;
}

/* Fond photographique derriere tout le hero.
   ::before porte la photo, floutee et legerement agrandie (le scale evite les
   bords transparents que produit le flou). ::after pose un voile clair qui
   garantit le contraste du texte : sans lui, le navy sur photo tombe sous 4,5:1.
   Le degrade est plus opaque a gauche, ou se trouve le texte, et s'allege a
   droite pour laisser la scene de labo visible. */
.pf-hero--photo::before,
.pf-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Sur la photo, le kicker (11,5px) est le seul texte reellement contraint :
   en --pf-accent-d il passait trop pres du seuil de 4,5. Un bleu plus sombre
   lui redonne de la marge sans alourdir le voile ni effacer la photo.
   Le "em" du h1 est en gros caracteres, son seuil est 3:1, il reste large. */
.pf-hero--photo .pf-kicker { color: #86D7F7; }

.pf-hero--photo::before {
  background-image: var(--pf-hero-bg, none);
  background-size: cover;
  background-position: 64% 50%;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.01);
}

.pf-hero--photo::after {
  background:
    linear-gradient(90deg, rgba(3, 10, 18, .90) 0%, rgba(3, 10, 18, .70) 42%, rgba(3, 10, 18, .32) 70%, rgba(3, 10, 18, .12) 100%),
    linear-gradient(180deg, rgba(3, 10, 18, .10) 0%, rgba(3, 10, 18, .58) 100%);
}

.pf-hero--photo h1,
.pf-hero--photo h1 em,
.pf-home .pf-hero--photo p.pf-hero__lede,
.pf-hero--photo .pf-hero__stats dd,
.pf-hero--photo .pf-hero__stats dt {
  color: #fff;
}

.pf-hero--photo .pf-hero__copy {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
}

.pf-hero--photo .pf-kicker::before {
  background: var(--pf-accent);
}

.pf-hero--photo .pf-btn--light {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
  backdrop-filter: blur(12px);
}

.pf-hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(86px, 8vw, 124px) 0 clamp(88px, 8vw, 126px);
}

.pf-hero__copy {
  max-width: 620px;
}

/* Calibre pour que "verified batch by batch." tienne sur UNE ligne, comme
   sur la maquette (titre en 3 lignes). Au-dela de ~2.9rem la ligne casse. */
.pf-hero h1 {
  margin-top: 22px;
  font-size: clamp(2.05rem, 3.2vw, 2.9rem);
  font-weight: 800;
}

.pf-hero h1 em {
  font-style: normal;
  color: var(--pf-accent-d);
}

.pf-hero--photo h1 em {
  color: #35C9F4;
}

.pf-home p.pf-hero__lede {
  margin-top: 24px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--pf-ink-soft);
}

.pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

.pf-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 52px;
  margin: 44px 0 0;
}

.pf-hero__stats div { display: flex; flex-direction: column-reverse; }

.pf-hero__stats dd {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--pf-ink);
  line-height: 1.1;
}

.pf-hero__stats dt {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--pf-muted);
}

/* Hero stage: real photo when supplied, CSS lab composite otherwise.
   The stage is kept near-white so the product renders - which carry their own
   pale backdrop and reflection - sit on it without a blend mode. Blend modes
   here escalate the backdrop root and darken the whole section in Chromium. */
.pf-hero__stage {
  display: none;
  position: relative;
  width: 100%;
  /* Height comes from aspect-ratio alone. A min-height here combines with the
     ratio into an intrinsic *width* floor (380px -> 507px) that overflows the
     grid track at ~1024px. */
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background-color: #ededed;
  background-size: cover;
  background-position: center;
  box-shadow: var(--pf-shadow-lg);
  /* Ton de base cale sur le fond gris propre aux rendus produit
     (echantillonne ~#ececec, plus clair a gauche) pour que les photos
     carrees se fondent au lieu de faire des rectangles colles. Le voile
     bleu reste dans la bande haute, a l'ecart des flacons. */
  background-image:
    radial-gradient(64% 34% at 62% 0%, rgba(2,132,199,.20), transparent 74%),
    radial-gradient(52% 34% at 16% 34%, rgba(255,255,255,.72), transparent 74%),
    linear-gradient(100deg, #f5f5f5 0%, #eeeeee 52%, #e5e5e5 100%);
}

.pf-hero__vials {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 2% 4% 21%;
}

/* A soft edge fade on top of the tone match, to hide the last seam. */
.pf-hero__vial img {
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 82% 80% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 80% at 50% 50%, #000 70%, transparent 100%);
}

/* Equal width and baseline so each render's built-in reflection floor lines
   up into one continuous bench surface across the three vials. */
.pf-hero__vial--1,
.pf-hero__vial--2,
.pf-hero__vial--3 { width: 38%; margin-bottom: 0; }

.pf-hero__vial--1 { margin-right: -6%; z-index: 3; }
.pf-hero__vial--2 { z-index: 2; }
.pf-hero__vial--3 { margin-left: -6%; z-index: 3; }

/* ---- Mode photo : une vraie paillasse est fournie ----------------------
   Le degrade gris de secours ne s'applique plus, donc le fond clair des
   rendus produit redeviendrait des rectangles. multiply neutralise tout ce
   qui est clair dans le PNG et ne laisse que le flacon : c'est possible ici
   parce que la paillasse de la photo est quasi blanche. */
/* isolation sur le stage : le groupe de fusion contient la photo de fond, donc
   multiply agit dessus - et ne peut pas remonter assombrir toute la section
   (c'etait le bug du hero noir). Les z-index intermediaires sont annules :
   chacun creait un contexte d'empilement qui coupait le blend de la photo. */
.pf-hero__stage--photo {
  background-color: #EAF4FB;
  isolation: isolate;
}

.pf-hero__stage--photo .pf-hero__vials {
  /* Cale a gauche : la droite de la photo est occupee par le microscope. */
  padding: 4% 26% 12% 2%;
  z-index: auto;
}

.pf-hero__stage--photo .pf-hero__vial { z-index: auto; }

.pf-hero__stage--photo .pf-hero__vial img {
  /* Le fond des rendus est a ~#ececec, pas blanc : multiply seul laisse une
     bande grise de ~8%. brightness le sature d'abord a blanc pur, que multiply
     rend alors totalement transparent. Le masque efface les derniers bords. */
  filter: contrast(1.13) brightness(1.06);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 88% 86% at 50% 50%, #000 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 86% at 50% 50%, #000 76%, transparent 100%);
}

.pf-hero__stage--photo .pf-hero__vial--1,
.pf-hero__stage--photo .pf-hero__vial--2,
.pf-hero__stage--photo .pf-hero__vial--3 { width: 44%; z-index: auto; }

.pf-home p.pf-hero__script {
  position: absolute;
  right: 6%;
  bottom: 6%;
  max-width: 46%;
  z-index: 4;
  text-shadow: 0 1px 8px rgba(255,255,255,.9);
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.25;
  color: var(--pf-navy);
}

.pf-hero__script span {
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--pf-accent);
}

/* ---------- USP ---------- */

.pf-usp {
  background: #fff;
  padding: 60px 0 56px;
  border-bottom: 1px solid var(--pf-line);
}

.pf-usp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.pf-usp__item { text-align: center; }

.pf-usp__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-d);
}

.pf-usp__icon svg { width: 24px; height: 24px; }

.pf-usp__item h2 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 9px;
}

.pf-usp__item p {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--pf-muted);
  max-width: 30ch;
  margin-inline: auto;
}

/* ---------- CATEGORIES ---------- */

.pf-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.pf-cat {
  display: block;
  border-radius: var(--pf-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pf-line);
  box-shadow: var(--pf-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pf-cat:hover {
  transform: translateY(-5px);
  box-shadow: var(--pf-shadow-lg);
  border-color: rgba(2,132,199,.45);
}

.pf-cat__img {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--pf-surface);
  overflow: hidden;
}

/* Product renders, not lifestyle shots - never crop the cap or label. */
.pf-cat__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s ease;
}

.pf-cat:hover .pf-cat__img img { transform: scale(1.05); }

.pf-cat__body { display: block; padding: 17px 20px 20px; }

.pf-cat__name {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--pf-ink);
}

.pf-cat__name span {
  display: inline-block;
  color: var(--pf-accent);
  transition: transform .2s ease;
}

.pf-cat:hover .pf-cat__name span { transform: translateX(4px); }

.pf-cat__sub {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--pf-muted);
}

/* ---------- PRODUCTS ---------- */

.pf-products {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.pf-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  overflow: hidden;
  box-shadow: var(--pf-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pf-product:hover {
  transform: translateY(-5px);
  box-shadow: var(--pf-shadow-lg);
  border-color: rgba(2,132,199,.45);
}

.pf-product__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}

.pf-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s ease;
}

.pf-product:hover .pf-product__media img { transform: scale(1.05); }

.pf-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

.pf-tag--sale { background: var(--pf-sale); }
.pf-tag--out { background: var(--pf-navy); left: auto; right: 11px; }

.pf-product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
  text-align: center;
}

.pf-product__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.pf-product__name a { color: var(--pf-ink); }
.pf-product:hover .pf-product__name a { color: var(--pf-accent-d); }

.pf-home p.pf-product__dose {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--pf-muted);
}

.pf-home p.pf-product__price {
  margin: 12px 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  /* Chiffres a chasse fixe : sans cela le prix barre et le prix actuel
     ne s'alignent pas d'une carte a l'autre. */
  font-variant-numeric: tabular-nums;
  color: var(--pf-accent-d);
}

.pf-product__price del {
  font-size: .78em;
  font-weight: 600;
  color: var(--pf-muted);
  text-decoration: line-through;
}

.pf-product__price ins { text-decoration: none; color: var(--pf-accent-d); }
.pf-product__price .woocommerce-Price-amount { white-space: nowrap; }

.pf-product__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--pf-accent-d);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .2s ease, transform .2s ease;
}

.pf-product__cta:hover { background: var(--pf-navy); color: #fff; transform: translateY(-1px); }
.pf-product__cta.loading { opacity: .65; }
.pf-product__cta.added { background: var(--pf-navy); }
.pf-product__cta--alt { background: var(--pf-surface-2); color: var(--pf-ink); }
.pf-product__cta--alt:hover { background: var(--pf-navy); color: #fff; }

.pf-product .added_to_cart {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pf-accent-d);
}

/* ---------- QUALITY ---------- */

.pf-quality__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 60px;
}

.pf-quality__copy h2 {
  margin-top: 15px;
  font-size: clamp(1.7rem, 2.7vw, 2.3rem);
}

.pf-quality__copy > p {
  margin-top: 20px;
  max-width: 50ch;
  color: var(--pf-muted);
  font-size: 15.5px;
  line-height: 1.72;
}

.pf-quality__copy .pf-btn { margin-top: 30px; }

.pf-quality__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pf-quality__photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 18px;
  background-color: #cddfe7;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(150deg, #e6f1f5 0%, #bcd6e0 55%, #9dc0cd 100%);
  box-shadow: var(--pf-shadow-lg);
}

.pf-checklist {
  position: absolute;
  left: 4%;
  bottom: 9%;
  z-index: 2;
  margin: 0;
  padding: 22px 26px;
  list-style: none;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--pf-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pf-checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pf-ink);
}

.pf-check {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: none;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-d);
}

.pf-check svg { width: 12px; height: 12px; }

/* ---------- DARK BAND ---------- */

.pf-band {
  position: relative;
  background-color: var(--pf-navy);
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}

.pf-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(7,41,61,.95) 0%, rgba(12,74,110,.90) 48%, rgba(2,111,168,.72) 100%);
}

.pf-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px 40px;
  padding: 62px 0;
}

.pf-home p.pf-band__title { margin: 0; }

.pf-band__title span,
.pf-band__title strong {
  display: block;
  line-height: 1.18;
}

.pf-band__title span {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

.pf-band__title strong {
  margin-top: 8px;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pf-band__title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 20px;
  background: rgba(255,255,255,.45);
}

.pf-band__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  text-align: right;
}

.pf-band__aside p {
  color: rgba(255,255,255,.85);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- REVIEWS ---------- */

.pf-reviews-shell {
  position: relative;
  overflow: hidden;
  padding: 0 74px 48px;
}

.pf-reviews-shell::before,
.pf-reviews-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 44px;
  z-index: 3;
  width: 74px;
  pointer-events: none;
}

.pf-reviews-shell::before {
  left: 0;
  background: linear-gradient(90deg, #fff 36%, rgba(255, 255, 255, 0));
}

.pf-reviews-shell::after {
  right: 0;
  background: linear-gradient(270deg, #fff 36%, rgba(255, 255, 255, 0));
}

.pf-reviews {
  display: flex;
  gap: 22px;
  transform: translateX(0);
  transition: transform .58s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.pf-review {
  flex: 0 0 calc((100% - 66px) / 4);
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 286px;
  margin: 0;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,252,255,.92)),
    var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 20px;
  box-shadow: var(--pf-shadow-lg);
  opacity: .45;
  transform: scale(.97);
  transition: opacity .42s ease, transform .42s ease;
}

.pf-review.is-active {
  opacity: 1;
  transform: scale(1);
}

.pf-stars { display: flex; gap: 4px; color: var(--pf-star); }
.pf-stars svg { width: 15px; height: 15px; }

.pf-review blockquote { margin: 0; }

.pf-review blockquote p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--pf-ink-soft);
}

.pf-review figcaption {
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pf-ink);
}

.pf-review-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--pf-line);
  border-radius: 50%;
  background: #fff;
  color: var(--pf-ink);
  cursor: pointer;
  box-shadow: var(--pf-shadow);
  transform: translateY(-70%);
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.pf-review-nav:hover {
  background: var(--pf-accent-d);
  border-color: var(--pf-accent-d);
  color: #fff;
  transform: translateY(-70%) scale(1.04);
}

.pf-review-nav--prev { left: 0; }
.pf-review-nav--next { right: 0; }

.pf-review-dots {
  position: absolute;
  left: 50%;
  bottom: 4px;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}

.pf-review-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #BDD6E5;
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}

.pf-review-dots button.is-active {
  width: 28px;
  border-radius: 999px;
  background: var(--pf-accent-d);
}

/* ---------- FAQ ---------- */

.pf-faq {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(56, 189, 248, .20), transparent 31%),
    linear-gradient(135deg, #05131D 0%, #08283B 48%, #06111A 100%);
  color: #fff;
}

.pf-faq::before {
  content: "";
  position: absolute;
  inset: auto -8% -45% 46%;
  height: 520px;
  background: radial-gradient(circle, rgba(125, 211, 252, .22), transparent 68%);
  pointer-events: none;
}

.pf-faq__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Colonne unique depuis le retrait de la carte "Speak to the team" :
     l'accordeon occupe toute la largeur. */
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/* L'accordeon suit la meme largeur que l'en-tete de section, pour que le
   filet sous le sous-titre s'aligne avec les separateurs des questions. */
.pf-faq__list {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.pf-faq__header {
  grid-column: 1 / -1;
  max-width: 780px;
  margin: 0 auto 10px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  width: 100%;
}

.pf-faq .pf-kicker { color: #7DD3FC; }
.pf-faq .pf-kicker::before { background: #38BDF8; }
.pf-faq__header .pf-kicker {
  display: inline-block;
  width: auto;
}

.pf-faq__header h2 {
  margin-top: 16px;
  max-width: 13ch;
  margin-inline: auto;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.pf-faq__header p {
  margin: 20px auto 0;
  max-width: 50ch;
  color: rgba(232, 246, 255, .78);
  font-size: 16px;
  line-height: 1.75;
}

.pf-faq__support {
  padding: 30px;
  border: 1px solid rgba(125, 211, 252, .24);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(255,255,255,.04);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .20);
  backdrop-filter: blur(14px);
}

.pf-faq__eyebrow {
  color: #7DD3FC;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pf-faq__support h3 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.12;
}

.pf-faq__support p:not(.pf-faq__eyebrow) {
  margin-top: 16px;
  color: rgba(232, 246, 255, .72);
  font-size: 14.5px;
  line-height: 1.7;
}

.pf-faq__support .pf-btn {
  margin-top: 26px;
  background: #fff;
  color: var(--pf-navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

.pf-faq__support .pf-btn:hover {
  background: #38BDF8;
  color: #04121B;
}

.pf-faq__list {
  border-top: 0;
}

.pf-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.pf-faq__item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 20px;
  align-items: center;
  padding: 28px 0;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: -.025em;
  cursor: pointer;
  list-style: none;
}

.pf-faq__item summary::-webkit-details-marker { display: none; }

.pf-faq__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background-color .2s ease, border-color .2s ease, transform .25s ease;
}

.pf-faq__icon::before,
.pf-faq__icon::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #7DD3FC;
  transition: transform .25s ease;
}

.pf-faq__icon::after { transform: rotate(90deg); }

.pf-faq__item[open] .pf-faq__icon {
  background: #38BDF8;
  border-color: #38BDF8;
  transform: rotate(180deg);
}

.pf-faq__item[open] .pf-faq__icon::before,
.pf-faq__item[open] .pf-faq__icon::after {
  background: #04121B;
}

.pf-faq__item[open] .pf-faq__icon::after { transform: rotate(0deg); }

.pf-faq__item p {
  max-width: 68ch;
  margin: -8px 64px 28px 0;
  color: rgba(232, 246, 255, .74);
  font-size: 15.5px;
  line-height: 1.75;
}

.pf-faq__item:hover .pf-faq__icon {
  border-color: rgba(125, 211, 252, .72);
}

/* ---------- NEWSLETTER ---------- */

.pf-news {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(320px, auto);
  align-items: center;
  gap: 26px 30px;
  padding: 34px 38px;
  background: var(--pf-accent-soft);
  border: 1px solid rgba(2,132,199,.22);
  border-radius: 18px;
}

.pf-news__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #fff;
  color: var(--pf-accent-d);
  box-shadow: var(--pf-shadow);
}

.pf-news__icon svg { width: 25px; height: 25px; }

.pf-news__copy h2 { margin-top: 10px; font-size: 1.4rem; }

.pf-news__copy p {
  margin-top: 7px;
  font-size: 14px;
  color: var(--pf-muted);
}

.pf-news__form { display: flex; gap: 10px; }

.pf-news__form input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(2,132,199,.3);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: var(--pf-ink);
}

.pf-news__form input::placeholder { color: #93AFC6; }

.pf-news__form button {
  height: 50px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--pf-navy);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.pf-news__form button:hover { background: var(--pf-accent-d); transform: translateY(-1px); }

.pf-news__done {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-accent-d);
}

/* ---------- COMPLIANCE ---------- */

.pf-compliance {
  padding: 30px 0 56px;
  text-align: center;
}

.pf-compliance p {
  font-size: 13px;
  color: var(--pf-muted);
  max-width: 78ch;
  margin-inline: auto;
}

.pf-compliance strong { color: var(--pf-ink); }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1180px) {
  .pf-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .pf-hero {
    min-height: calc(100svh - var(--pf-header-h, 76px));
    display: grid;
    align-items: center;
  }

  .pf-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 66px 0 70px;
  }

  .pf-hero--photo::after {
    background:
      linear-gradient(90deg, rgba(5, 13, 18, .84) 0%, rgba(5, 13, 18, .68) 54%, rgba(5, 13, 18, .26) 100%),
      linear-gradient(180deg, rgba(5, 13, 18, .20) 0%, rgba(5, 13, 18, .74) 100%);
  }

  .pf-hero--photo::before {
    background-position: 68% 50%;
    filter: saturate(1.05);
    transform: scale(1.02);
  }

  .pf-hero--photo .pf-kicker,
  .pf-hero--photo h1,
  .pf-hero--photo h1 em,
  .pf-home .pf-hero--photo p.pf-hero__lede,
  .pf-hero--photo .pf-hero__stats dd,
  .pf-hero--photo .pf-hero__stats dt {
    color: #fff;
  }

  .pf-hero--photo .pf-kicker::before {
    background: var(--pf-accent);
  }

  .pf-hero--photo .pf-hero__copy {
    max-width: 620px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
  }

  .pf-hero--photo .pf-btn--light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
    backdrop-filter: blur(12px);
  }

  .pf-hero__stage {
    display: none;
  }

  .pf-quality__inner { grid-template-columns: 1fr; gap: 40px; }
  .pf-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .pf-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-reviews-shell { padding-inline: 60px; }
  .pf-reviews-shell::before,
  .pf-reviews-shell::after { width: 60px; }
  .pf-review { flex-basis: calc((100% - 22px) / 2); }

  .pf-news { grid-template-columns: auto minmax(0, 1fr); }
  .pf-news__form { grid-column: 1 / -1; }
  .pf-band__inner { flex-direction: column; align-items: flex-start; }
  .pf-band__aside { align-items: flex-start; text-align: left; }
}

@media (max-width: 760px) {
  .pf-section { padding: 60px 0; }
  .pf-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pf-cats { gap: 14px; }
  .pf-hero__stats { gap: 14px 34px; }
  .pf-checklist { left: 50%; transform: translateX(-50%); bottom: -22px; padding: 18px 20px; gap: 12px; }
  .pf-quality__media { margin-bottom: 40px; }
  .pf-news { padding: 26px 22px; }
  .pf-head { margin-bottom: 30px; }
  .pf-reviews-shell { padding: 0 0 44px; }
  .pf-reviews-shell::before,
  .pf-reviews-shell::after { display: none; }
  .pf-review {
    flex-basis: 100%;
    min-height: 260px;
    padding: clamp(30px, 8vw, 46px);
  }
  .pf-review blockquote p { font-size: clamp(1.05rem, 4.8vw, 1.45rem); }
  .pf-review-nav {
    top: auto;
    bottom: 0;
    width: 42px;
    height: 42px;
    transform: none;
  }
  .pf-review-nav:hover { transform: scale(1.04); }
  .pf-review-nav--prev { left: 0; }
  .pf-review-nav--next { right: 0; }
  .pf-review-dots { bottom: 16px; }
  .pf-faq__item summary {
    grid-template-columns: minmax(0, 1fr) 36px;
    padding: 23px 0;
    padding-right: 54px;
  }
  .pf-faq__header h2 { font-size: clamp(2rem, 11vw, 2.55rem); }
  .pf-faq__support { padding: 28px 30px; }
  .pf-faq__icon { width: 36px; height: 36px; }
  .pf-faq__item p { margin-right: 0; font-size: 14.5px; }
}

@media (max-width: 480px) {
  /* La bande USP reste volontairement en 2x2 sur mobile (pas d'empilement en
     une colonne) : elle tient sur un ecran au lieu d'en occuper quatre. */
  .pf-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .pf-usp__icon { width: 46px; height: 46px; margin-bottom: 13px; }
  .pf-usp__icon svg { width: 21px; height: 21px; }
  .pf-usp__item h2 { font-size: 14px; margin-bottom: 6px; }
  .pf-usp__item p { font-size: 12.5px; line-height: 1.5; max-width: none; }

  /* Categories et produits restent eux aussi en 2 colonnes : une carte par
     ligne obligeait a defiler un ecran entier par element. */
  .pf-cat__body { padding: 13px 14px 15px; }
  /* 13px : au-dessus, "Injectable Peptides" ne tient plus et la fleche
     retombe seule sur une deuxieme ligne. */
  .pf-cat__name { font-size: 13px; }
  .pf-cat__sub { font-size: 12px; margin-top: 4px; }

  .pf-product__body { padding: 13px 12px 15px; }
  .pf-product__name { font-size: 13.5px; }
  .pf-home p.pf-product__dose { font-size: 12px; }
  .pf-home p.pf-product__price { font-size: 1rem; margin: 9px 0 11px; gap: 6px; }
  .pf-product__cta { font-size: 12.5px; padding: 11px 8px; }

  .pf-hero__actions .pf-btn { width: 100%; }
  .pf-news__form { flex-direction: column; }
  .pf-news__form button { width: 100%; }
}

@media (max-width: 380px) {
  /* Sous cette largeur la fleche ne tient plus derriere le libelle et
     retombe seule sur une ligne. Elle est purement decorative
     (aria-hidden), donc on la retire plutot que de reduire le texte. */
  .pf-cat__name span { display: none; }
}