/*******************
  FICHE PRODUIT DE LA REFONTE (P3, 15/10/2026)
  Maquettes produit-desktop.jpg (1920 px) et produit-mobile.jpg (1170 = 3 × 390). Cotes à 90 %
  (décision 4) : --u vaut 0,9 px d'écran par pixel du PSD à 1920 px, proportionnel en dessous.
  Chaque section porte son propre seuil de bascule (décision 1 du plan), à valider par Antoine.
  Le comparatif est dans comparatif.css, le rail dans rail.css.
*******************/

.pp {
  --u: min(0.9px, 0.046875vw);
  --pp-gap: clamp(40px, 24px + 2.6vw, 66px);    /* entre sections : 73 px au PSD */
  --pp-box: var(--r-bloc);                        /* grands blocs beiges */
  --pp-r: clamp(12px, 10px + 0.45vw, 18px);       /* cartes, photos, champs */
  --pp-teal-bg: #d6f1f0;                          /* carte « Shooldy » (PSD #d5efee) */
  color: var(--c-ink);
  text-align: left; /* le thème centre le contenu des pages */
}
.pp *,
.pp *::before,
.pp *::after {
  box-sizing: border-box;
}
.pp p {
  margin: 0;
}
.pp > section {
  max-width: var(--tunnel);
  margin: 0 auto var(--pp-gap);
}
.pp .pp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* En-tête de section : titre (titles.css) et chapeau centrés. */
.pp-head {
  padding: 0 var(--page-edge);
  text-align: center;
}
.pp-head-lead {
  margin-top: var(--sp-s) !important;
  font-size: var(--fs-text);
  line-height: 1.35;
  text-wrap: balance;
}
/* Ancres de la fiche (#avis, #achat…) : défilement doux, sous le header fixe. */
html:has(.pp) {
  scroll-padding-top: calc(var(--hdr-top) + var(--hdr-bar-h) + var(--hdr-bottom) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.pp) {
    scroll-behavior: smooth;
  }
}
/* Bouton pause discret (vidéo d'innovation, chiffres en mobile), comme celui de la vidéo
   d'Avantages de l'accueil : deux barres ; en pause (aria-pressed="true") : triangle. */
.pp-pause {
  position: absolute;
  right: clamp(10px, 1.2vw, 22px);
  bottom: clamp(10px, 1.2vw, 22px);
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--c-ink);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background-color 0.2s;
}
.pp-pause:hover,
.pp-pause:focus-visible {
  background: var(--c-white);
  opacity: 1;
}
.pp-pause::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 3.5px, transparent 3.5px 6.5px, currentColor 6.5px);
}
.pp-pause[aria-pressed="true"]::before {
  left: 2px;
  width: 11px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Étoiles : même dessin que la bande de réassurance de l'accueil. */
.pp-stars {
  display: inline-block;
  flex: none;
  width: 5.5em;
  height: 1.1em;
  /* --fill : part remplie, à proportion de la note Avis Vérifiés (inc/shooldy-avis.php). */
  background: linear-gradient(90deg, var(--c-accent) var(--fill, 100%), rgba(48, 49, 67, 0.18) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.5l6.1-.7z'/%3E%3C/svg%3E") left center / 1.1em 1.1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.5l6.1-.7z'/%3E%3C/svg%3E") left center / 1.1em 1.1em repeat-x;
}
.pp-kicker {
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Partie produit (PARTIE PRODUIT)
   Galerie (845 px au PSD) et colonne d'achat (815 px), 91 px d'écart. Au-dessus de 800 px : image
   principale puis grille 2 × 2 ; en dessous : défilement natif, compteur et vignettes. */
.pp-main {
  display: grid;
  grid-template-columns: minmax(0, 845fr) minmax(0, 815fr);
  grid-template-areas:
    "crumbs crumbs"
    "gallery info";
  column-gap: calc(91 * var(--u));
  align-items: start;
  max-width: calc(var(--wrap-wide) + 2 * var(--side)) !important;
  padding: calc(40 * var(--u)) var(--side) 0;
}
.pp-crumbs {
  grid-area: crumbs;
  margin-bottom: calc(40 * var(--u));
  padding-left: 1em;
  font-size: calc(var(--fs-small) * 1.1);
}
.pp-crumbs [aria-current] {
  font-weight: 600;
}
.pp-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pp-crumbs a:hover {
  color: var(--c-accent);
}

/* Galerie */
.pp-gallery {
  grid-area: gallery;
  min-width: 0;
}
.pp-slider {
  position: relative;
}
.pp-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(22 * var(--u));
}
.pp-slide {
  overflow: hidden;
  border-radius: var(--pp-r);
  background: var(--c-beige);
  aspect-ratio: 410 / 385;
  container-type: inline-size;
}
/* Textes posés sur les vignettes (`pp_gal_notes`) : la maquette les incrustait dans les images
   (vignettes « Épouse votre bras » et « Design simple et breveté »). Tailles en cqw : mêmes
   proportions sur la grande image, les vignettes et le carrousel mobile. */
.pp-notes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: var(--c-ink);
}
.pp-note {
  position: absolute;
  margin: 0;
  font-size: max(9px, 2.9cqw);
  font-weight: 600;
  line-height: 1.25;
}
.pp-note i {
  font-family: var(--f-italic);
  font-weight: 300;
  font-size: 1.12em;
}
.pp-note strong {
  color: var(--c-accent);
  font-weight: 700;
}
.pp-note.is-haut {
  top: 7%;
  right: 8%;
  left: 8%;
  font-size: max(11px, 5.2cqw);
  font-weight: 500;
  text-align: center;
}
.pp-note.is-gauche,
.pp-note.is-droite,
.pp-note.is-haut-droite {
  max-width: 36%;
  padding: 0.55em 0.8em;
  border-radius: 0.5em;
  background: var(--c-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.pp-note.is-gauche {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
.pp-note.is-droite {
  top: 38%;
  right: 5%;
}
.pp-note.is-haut-droite {
  top: 7%;
  right: 5%;
}
.pp-note.is-signature {
  right: 24%;
  bottom: 8%;
  left: 8%;
  font-size: max(11px, 5.2cqw);
  font-weight: 500;
  text-align: center;
}
.pp .pp-note-badge {
  position: absolute;
  right: 6%;
  bottom: 5%;
  width: 15cqw;
  height: auto;
}
.pp-slide.is-main {
  grid-column: 1 / -1;
  aspect-ratio: 840 / 788;
}
.pp-zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
/* Imagify enveloppe les images de la prod dans <picture> : pas de sélecteur `> img`. */
.pp-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Cadres à proportions : l'image y est posée en absolu. Préfixe .pp : `.woocommerce img
   { height: auto }` (woocommerce-layout.css) l'emporterait sur une classe seule. */
.pp-slide,
.pp-in-media,
.pp-pe-media {
  position: relative;
}
.pp-zoom,
.pp .pp-in-img,
.pp .pp-pe-img {
  position: absolute;
  inset: 0;
}
/* Galerie de repli (PRO, CARE, RELAX tant que « Galerie de la fiche » est vide) : images
   aux formats variés, souvent des infographies, montrées entières. */
.pp-gallery.is-fallback .pp-slide {
  background: var(--c-white); /* les anciennes photos sont sur fond blanc */
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.pp-gallery.is-fallback .pp-slide img {
  object-fit: contain;
}
.pp-video {
  position: absolute;
  top: calc(60 * var(--u)); /* PSD : 60 px sous le haut de la photo */
  left: calc(50 * var(--u));
  z-index: 2;
  padding: 0.7em 1.6em;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: var(--sh-bar);
  transition: color 0.2s;
}
.pp-video:hover,
.pp-video:focus-visible {
  color: var(--c-accent);
}
.pp-count,
.pp-thumbs {
  display: none;
}

/* Colonne d'achat */
.pp-info {
  grid-area: info;
  min-width: 0;
  padding-top: calc(10 * var(--u));
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}
.pp-title {
  margin: calc(14 * var(--u)) 0 0;
  color: var(--c-black);
  font-size: clamp(28px, 24.46px + 0.908vw, 41.9px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
}
.pp-title i {
  display: block;
  font-family: var(--f-italic);
  font-weight: 300;
  letter-spacing: 0;
}
.pp-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: calc(18 * var(--u)) !important;
  font-size: var(--fs-text);
}
.pp-rating .pp-stars {
  font-size: 0.95em;
}
.pp-rating strong {
  font-weight: 700;
}
.pp-rating a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pp-rating a:hover {
  color: var(--c-accent);
}
.pp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 1em;
  margin-top: calc(26 * var(--u));
}
.pp-price-amount {
  color: var(--c-black);
  font-size: clamp(30px, 26.97px + 0.778vw, 41.9px);
  font-weight: 700;
  line-height: 1;
}
.pp-eco,
.pp-eco p {
  margin: 0;
  color: rgba(48, 49, 67, 0.7);
  font-size: var(--fs-text);
}
.pp-lead {
  margin-top: calc(34 * var(--u));
}
.pp-checks {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  justify-content: start;
  gap: calc(14 * var(--u)) calc(30 * var(--u));
  margin: calc(28 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.pp-checks li,
.pp-excerpt li {
  position: relative;
  padding-left: 1.5em;
}
.pp-checks li::before,
.pp-excerpt li::before {
  content: '';
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Repli : description courte des infos produit (PRO, CARE, RELAX). */
.pp-excerpt ul {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin: 0.8em 0 0;
  padding: 0;
  list-style: none;
}

/* Choix du modèle */
.pp-models {
  margin-top: calc(44 * var(--u));
}
.pp-models-title {
  margin-bottom: calc(10 * var(--u)) !important;
  padding-left: calc(30 * var(--u) + 2px); /* aligné sur le nom du coussin dans la carte */
  font-weight: 700;
}
.pp-models li {
  display: flex;
  flex-direction: column;
}
.pp-models li.is-current .pp-models-title {
  visibility: hidden; /* garde les deux cartes à la même hauteur */
}
.pp-models li.is-other {
  opacity: 0.8;
  transition: opacity 0.2s;
}
.pp-models li.is-other:hover,
.pp-models li.is-other:focus-within {
  opacity: 1;
}
.pp-models ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: calc(22 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-model {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 1fr auto;
  gap: 0.5em 1em;
  padding: calc(26 * var(--u)) calc(30 * var(--u));
  border: 2px solid var(--c-ink);
  border-radius: var(--pp-r);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.pp-model:hover,
.pp-model:focus-visible {
  border-color: var(--c-accent);
}
.pp-model.is-current {
  border: 3px solid var(--c-accent);
  background: var(--pp-teal-bg);
}
.pp-model-name,
.pp-model-price {
  font-size: clamp(14px, 12.98px + 0.261vw, 18px);
  font-weight: 600;
  line-height: 1.2;
}
.pp-model-name {
  font-weight: 700;
}
.pp-model-desc {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* Formulaire d'achat (WooCommerce) : quantité ± et bouton, puis les boutons express. */
.pp-buy {
  margin-top: calc(18 * var(--u));
}
.pp-buy form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: calc(22 * var(--u));
  max-width: none;
  margin: 0;
}
.pp-buy form.cart .quantity {
  flex: 0 0 calc(176 * var(--u));
  min-width: 110px;
  min-height: calc(var(--btn-h) * 1.2);
  margin: 0;
  padding: 0 0.6em;
  border: 2px solid rgba(48, 49, 67, 0.15);
  border-radius: var(--pp-r);
  justify-content: space-between;
}
.pp-buy .quantity input.qty {
  min-width: 2em;
  padding: 0;
  background: none;
  font-family: var(--f-base);
  font-size: var(--fs-text);
  font-weight: 600;
}
.pp-buy .quantity .minus,
.pp-buy .quantity .plus {
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-text);
  font-weight: 600;
}
.pp-buy form.cart .single_add_to_cart_button {
  flex: 1 1 200px;
  min-height: calc(var(--btn-h) * 1.2);
  border-radius: var(--pp-r);
  font-size: clamp(15px, 13.5px + 0.4vw, 21px);
}
.pp-buy .pswa-preorder-wrap,
.pp-buy .pswa-coming-soon {
  margin-bottom: calc(18 * var(--u));
}
.pp-ext-mention {
  margin-top: var(--sp-s);
  font-size: var(--fs-small);
}

/* Logos de paiement et « 4 x sans frais » : logos en cartes, comme la barre basse du footer. */
.pp-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: calc(26 * var(--u));
}
.pp-pay img {
  width: auto;
  height: clamp(22px, 19px + 0.4vw, 30px);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(48, 49, 67, 0.12);
}
.pp-pay-mention {
  margin-left: auto;
  padding: 0.25em 1.2em;
  border: 1px solid var(--c-ink);
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}

/* Bandeau livraison */
.pp-ship {
  margin-top: calc(40 * var(--u)) !important;
  padding: calc(22 * var(--u)) calc(28 * var(--u));
  border-radius: var(--pp-r);
  background: var(--c-beige);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
.pp-ship p {
  margin: 0;
}

/* Lien vers les distributeurs, sous la réassurance. */
.pp-dist {
  margin: calc(30 * var(--u)) 0 0 !important;
  font-size: var(--fs-small, 0.875rem);
  text-align: center;
}
/* Accordéons rapprochés de la phrase (60 → 30), Antoine 06/11. */
.pp-dist + .pp-acc {
  margin-top: calc(30 * var(--u));
}
.pp-dist a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Réassurance : pictos au-dessus du texte, sans rond (maquette). */
.pp-reass.reassurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-s);
  margin: calc(30 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.pp-reass .reassurance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  text-align: center;
}
.pp-reass .reassurance-icon {
  width: auto;
  height: auto;
  background: none;
}
.pp-reass .reassurance-icon img {
  width: clamp(28px, 24px + 0.6vw, 40px);
  height: auto;
}
.pp-reass .reassurance-text {
  font-size: var(--fs-text);
  line-height: 1.3;
}
.pp-reass .reassurance-text strong {
  font-weight: 700;
}

/* Accordéons (Caractéristiques…) : <details> natif. */
.pp-acc {
  margin-top: calc(60 * var(--u));
  border-top: 1px solid var(--c-line);
}
.pp-acc-item {
  border-bottom: 1px solid var(--c-line);
}
.pp-acc-item summary,
.pp-faq-item summary {
  position: relative;
  display: block;
  padding-right: 2.5em;
  cursor: pointer;
  list-style: none;
}
.pp-acc-item summary::-webkit-details-marker,
.pp-faq-item summary::-webkit-details-marker {
  display: none;
}
.pp-acc-item summary {
  padding: calc(28 * var(--u)) 2.5em calc(28 * var(--u)) calc(21 * var(--u));
  font-size: clamp(15px, 14.24px + 0.196vw, 18px);
  font-weight: 600;
}
/* Signe + qui tourne en × à l'ouverture. */
.pp-acc-item summary::after,
.pp-faq-item summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: calc(40 * var(--u));
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s;
}
.pp-acc-item[open] summary::after,
.pp-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.pp-acc-item summary:hover,
.pp-faq-item summary:hover {
  color: var(--c-accent);
}
.pp-acc-body,
.pp-faq-body {
  padding: 0 calc(21 * var(--u)) calc(28 * var(--u));
  font-size: var(--fs-small);
  line-height: 1.55;
}
.pp-acc-body > :first-child,
.pp-faq-body > :first-child {
  margin-top: 0;
}
.pp-acc-body > :last-child,
.pp-faq-body > :last-child {
  margin-bottom: 0;
}
.pp-acc-body ul,
.pp-faq-body ul {
  padding-left: 1.2em;
}
.pp-acc-body ul + p,
.pp-faq-body ul + p {
  margin-top: 1em;
}
.pp-faq-body p + p {
  margin-top: 0.8em;
}
.pp-acc-body a,
.pp-faq-body a {
  color: var(--c-accent);
  text-decoration: underline;
}

/* 801-1100 px : deux colonnes égales, coches sur une colonne. */
@media (max-width: 1100px) {
  .pp-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-l);
  }
  .pp-checks {
    grid-template-columns: auto;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
/* ≤ 500 px : titre −10 %, galerie plus basse (retours d'Antoine, 16/10). */
@media (max-width: 500px) {
  .pp-title {
    font-size: calc(0.9 * clamp(28px, 24.46px + 0.908vw, 41.9px));
  }
}

/* ≤ 800 px (produit-mobile.jpg) : une colonne ; galerie en défilement natif, vignettes, compteur. */
@media (max-width: 800px) {
  .pp {
    --u: 0.5px;
  }
  .pp-main {
    display: block;
    padding: 12px 10px 0;
  }
  .pp-crumbs {
    margin: 0 6px 12px;
  }
  .pp-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--pp-r);
  }
  .pp-track::-webkit-scrollbar {
    display: none;
  }
  .pp-slide,
  .pp-slide.is-main {
    flex: 0 0 100%;
    border-radius: 0;
    aspect-ratio: 1123 / 1000;
    scroll-snap-align: start;
  }
  .pp-video {
    top: 14px;
    left: 14px;
    padding: 0.6em 1.2em;
    font-size: 10px;
  }
  .pp-count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: block;
    padding: 0.2em 0.7em;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
  }
  .pp-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pp-thumbs button {
    flex: 1 1 0;
    max-width: 72px;
    min-width: 52px;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--c-beige);
    cursor: pointer;
  }
  .pp-thumbs button.is-active {
    border-color: var(--c-accent);
  }
  .pp-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pp-info {
    padding: 26px 6px 0;
  }
  .pp-checks {
    gap: 6px;
    margin-top: 14px;
  }
  .pp-models {
    margin-top: 26px;
  }
  .pp-models ul {
    gap: 10px;
  }
  .pp-models-title {
    margin-bottom: 6px !important;
    padding-left: 11px;
  }
  .pp-model {
    gap: 0.4em 0.6em;
    padding: 12px 10px;
    border-width: 1px;
    border-color: rgba(48, 49, 67, 0.25);
  }
  .pp-model.is-current {
    border-width: 2px;
  }
  .pp-model-name,
  .pp-model-price {
    font-size: 13px;
  }
  .pp-model-desc {
    font-size: 12px;
  }
  .pp-buy form.cart .quantity {
    flex-basis: 110px;
  }
  .pp-reass .reassurance-text {
    font-size: 12.5px;
  }
  .pp-acc {
    margin-top: 26px;
  }
  .pp-acc-item summary {
    padding: 18px 2.5em 18px 0;
  }
  .pp-acc-item summary::after,
  .pp-faq-item summary::after {
    right: 6px;
  }
  .pp-acc-body {
    padding: 0 0 18px;
  }
}
@media (max-width: 500px) {
  .pp-slide,
  .pp-slide.is-main {
    aspect-ratio: 1.5 / 1;
  }
}

/* ---------------------------------------------------------------- Avant / après (AVANT APRES)
   Bloc beige bord à bord (--page-edge) ; photo 1160 × 808 au PSD, légendes dessous. */
.pp-ab {
  margin-inline: var(--page-edge) !important;
  padding: calc(82 * var(--u)) var(--side) calc(78 * var(--u));
  border-radius: var(--pp-box);
  background: var(--c-beige);
}
@media (min-width: 2001px) {
  .pp-ab {
    margin-inline: auto !important;
  }
}
/* Variable typée : le curseur glisse quand une légende le déplace (classe is-anim). */
@property --pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
.pp-ab-stage.is-anim {
  transition: --pos 0.6s ease-in-out;
}
.pp-ab-stage {
  --pos: 50%;
  position: relative;
  max-width: calc(1160 * var(--u));
  margin: calc(46 * var(--u)) auto 0;
  overflow: hidden;
  border-radius: calc(var(--pp-r) * 1.6);
  aspect-ratio: 1160 / 808;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.pp-ab-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pp-ab-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.pp-ab-tag {
  position: absolute;
  top: calc(25 * var(--u));
  z-index: 2;
  padding: 0.45em 1.2em;
  border-radius: var(--r-pill);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s;
}
.pp-ab-tag.is-before {
  left: calc(25 * var(--u));
  background: var(--c-ink);
  color: var(--c-white);
}
.pp-ab-tag.is-after {
  right: calc(43 * var(--u));
  background: var(--c-accent);
  color: var(--c-white);
}
/* Côté presque masqué par le curseur (classes posées par product.js) : son étiquette s'efface. */
.pp-ab-stage.is-only-before .pp-ab-tag.is-after,
.pp-ab-stage.is-only-after .pp-ab-tag.is-before {
  opacity: 0;
}
.pp-ab-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 4px;
  margin-left: -2px;
  background: var(--c-white);
  pointer-events: none;
}
.pp-ab-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(40px, 33px + 1.9vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='%23303143' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l-7 7 7 7M28 3l7 7-7 7'/%3E%3C/svg%3E") center / 50% auto no-repeat;
  box-shadow: 0 4px 16px rgba(48, 49, 67, 0.15);
  transform: translate(-50%, -50%);
}
/* Champ range : hors de l'écran mais focalisable ; le focus se voit sur la poignée. */
.pp-ab-range {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.pp-ab-range:focus-visible ~ .pp-ab-line .pp-ab-handle {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}
.pp-ab-legends {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--u));
  max-width: calc(1160 * var(--u));
  margin: calc(36 * var(--u)) auto 0;
}
/* Légendes cliquables (boutons) : « avant » pousse le curseur à 75 %, « après » à 25 %
   (product.js). */
.pp-ab-legend {
  display: block;
  width: 100%;
  padding: calc(34 * var(--u)) calc(48 * var(--u));
  border: 3px solid transparent;
  border-radius: var(--pp-r);
  background: var(--c-white);
  color: inherit;
  font: inherit;
  font-size: var(--fs-text);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pp-ab-legend:hover,
.pp-ab-legend:focus-visible {
  border-color: var(--c-ink);
}
.pp-ab-legend.is-after {
  border-color: var(--c-accent);
  background: var(--pp-teal-bg);
}
.pp-ab-legend.is-after:hover,
.pp-ab-legend.is-after:focus-visible {
  border-color: var(--c-ink);
}
.pp-ab-legend > span {
  display: block;
}
.pp-ab-legend .pp-ab-legend-t {
  margin-bottom: 0.9em;
  font-weight: 600;
}
@media (max-width: 760px) {
  .pp-ab {
    padding: 28px 10px 18px;
  }
  .pp-ab-stage {
    border-radius: 12px;
  }
  .pp-ab-tag {
    top: 8px;
    padding: 0.35em 0.9em;
    font-size: 8px;
  }
  .pp-ab-tag.is-before {
    left: 8px;
  }
  .pp-ab-tag.is-after {
    right: 8px;
  }
  .pp-ab-legends {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .pp-ab-legend {
    padding: 14px;
    border-width: 2px;
    font-size: 13px;
  }
  .pp-ab-legend.is-after {
    border-width: 2px;
  }
  .pp-ab-legend .pp-ab-legend-t {
    margin-bottom: 0.4em;
  }
}

/* ---------------------------------------------------------------- Innovation (INNOVATION)
   Photo (675 × 807 au PSD) à gauche, titre et trois arguments à pictos ronds à droite. */
.pp-in {
  display: grid;
  grid-template-columns: minmax(0, 675fr) minmax(0, 760fr); /* titre italique sur une ligne (PSD) */
  column-gap: calc(84 * var(--u));
  align-items: start;
  max-width: calc(1520 * var(--u) + 2 * var(--side)) !important;
  margin-bottom: calc(var(--pp-gap) + clamp(12px, 1.2vw, 24px)) !important; /* un peu plus avant les personae */
  padding: 0 var(--side);
}
.pp-in-media {
  overflow: hidden;
  border-radius: calc(var(--pp-r) * 1.4);
  aspect-ratio: 675 / 807;
}
.pp .pp-in-img,
.pp .pp-in-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* Vidéo (champ `pp_in_video`) posée sur la photo, qui sert de poster : boucle muette lancée à
   l'écran au-dessus de 760 px ; en dessous, la photo et un bouton de lecture (product.js). */
.pp .pp-in-video {
  position: absolute;
  inset: 0;
  object-position: 50% 50%; /* la vidéo couvre la case, centrée (Antoine, 20/10) ; la photo garde son cadrage */
}
.pp-in-media:not(.is-started) .pp-in-video {
  visibility: hidden;
}
.pp-in-media .pp-pause:not([aria-pressed="true"]) {
  opacity: 0.55;
}
@media (max-width: 760px) {
  .pp-in-media:not(.is-started) .pp-pause {
    width: 52px;
    height: 52px;
    right: 50%;
    bottom: 50%;
    background: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transform: translate(50%, 50%);
  }
  .pp-in-media:not(.is-started) .pp-pause::before {
    left: 4px;
    width: 15px;
    height: 18px;
  }
  .pp-in-media .tampon-creation { /* le bouton de lecture occupe le centre (03/11) */
    top: 21%;
    font-size: clamp(9px, 4.6cqi, 26px);
  }
}
.pp-in-body {
  padding-top: calc(66 * var(--u));
}
@media (max-width: 1100px) {
  .pp-in-body {
    padding-top: 0;
  }
}
.pp-in-items {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  margin: calc(56 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.pp-in-items li {
  display: flex;
  align-items: center;
  gap: calc(38 * var(--u));
  font-size: var(--fs-text);
  line-height: 1.3;
}
.pp-in-pic {
  flex: none;
  width: calc(110 * var(--u));
  min-width: 52px;
  height: auto;
  border-radius: 50%;
}
.pp-in-t {
  font-weight: 600;
}
@media (max-width: 900px) {
  .pp-in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding: 0 10px;
  }
  .pp-in-media {
    aspect-ratio: 1123 / 640;
  }
  .pp .pp-in-img {
    object-position: 50% 60%;
  }
  .pp-in-body {
    padding: 0 6px;
  }
  .pp-in-items {
    gap: 22px;
    margin-top: 24px;
  }
  .pp-in-items li {
    gap: 16px;
    align-items: flex-start;
    font-size: 13.5px;
  }
}

/* ---------------------------------------------------------------- Personae (PERSONAE)
   Rail de cartes (rail.css) : photo en haut, texte en gras sur fond beige (cf. « Pour qui »). */
.pp-pe .pp-head {
  padding-bottom: 8px;
}
.pp-pe-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 max(240px, (100% - 4 * var(--rail-gap)) / 5);
  max-width: 350px;
  overflow: hidden;
  border-radius: clamp(18px, 15.7px + 0.59vw, 27px);
  background: var(--c-beige);
}
.pp-pe-card:first-child {
  margin-left: auto;
}
.pp-pe-card:last-child {
  margin-right: auto;
}
.pp-pe-media {
  overflow: hidden;
  background: #ece7e1;
  aspect-ratio: 349 / 312;
}
.pp .pp-pe-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-pe-text {
  min-height: calc(5.5em + 2 * clamp(16px, 10.4px + 1.438vw, 38px));
  padding: clamp(16px, 10.4px + 1.438vw, 38px);
  font-size: clamp(16px, 14.5px + 0.392vw, 22px);
  font-weight: 500;
  line-height: 1.22;
}
@media (max-width: 760px) {
  .pp-pe-text {
    min-height: 0;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------- Chiffres (CHIFFRES)
   Bloc beige bord à bord, trois cartes blanches (549 × 254 au PSD). */
.pp-ch {
  margin-inline: var(--page-edge) !important;
}
@media (min-width: 2001px) {
  .pp-ch {
    margin-inline: auto !important;
  }
}
.pp-ch-box {
  padding: calc(74 * var(--u)) var(--side) calc(96 * var(--u));
  border-radius: var(--pp-box);
  background: var(--c-beige);
  text-align: center;
}
.pp-ch-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  max-width: calc(1675 * var(--u));
  margin: calc(48 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.pp-ch-items li {
  padding: calc(46 * var(--u)) calc(46 * var(--u)) calc(40 * var(--u));
  border-radius: calc(var(--pp-r) * 1.4);
  background: var(--c-white);
  font-size: var(--fs-text);
  line-height: 1.3;
}
.pp-ch-items strong {
  font-weight: 700;
}
.pp-ch-src {
  margin-top: calc(14 * var(--u)) !important;
  margin-bottom: 0 !important;
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: 1.35;
  opacity: 0.6;
}
.pp-ch-n {
  margin-bottom: calc(26 * var(--u)) !important;
  color: var(--c-accent);
  font-size: clamp(34px, 31.99px + 0.516vw, 41.9px);
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 760px) {
  .pp-ch-box {
    padding: 34px 10px 12px;
  }
  .pp-ch-items {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }
  .pp-ch-items li {
    padding: 22px 18px;
    font-size: 13.5px;
  }
  .pp-ch-n {
    margin-bottom: 12px !important;
  }
  .pp-ch-src {
    margin-top: 8px !important;
    font-size: 11.5px;
  }
}
/* ≤ 500 px : les cartes défilent seules, une à la fois (product.js), bouton pause discret. */
.pp-ch-slider {
  position: relative;
}
.pp-ch-slider .pp-pause {
  display: none;
}
@media (max-width: 500px) {
  .pp-ch-items {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: calc(var(--pp-r) * 1.4);
  }
  .pp-ch-items::-webkit-scrollbar {
    display: none;
  }
  .pp-ch-items li {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .pp-ch-slider .pp-pause {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: 28px;
    height: 28px;
    margin: 6px 0 0 auto;
    background: var(--c-white);
  }
}

/* ---------------------------------------------------------------- Comparatif : comparatif.css. */

/* ---------------------------------------------------------------- Avis Vérifiés
   Note et liste des avis du produit de Skeepers (inc/shooldy-avis.php), chargées à l'approche :
   une hauteur minimale est réservée pour ne pas décaler la page à leur arrivée. */
.pp-avis {
  padding: 0 var(--side);
}
.avis-widget--produit {
  min-height: 240px;
}
@media (max-width: 760px) {
  .pp-avis {
    padding: 0 10px;
  }
}

/* ---------------------------------------------------------------- FAQ (FAQ)
   Bloc beige bord à bord ; questions en lignes blanches (1306 × 89 au PSD), signe + turquoise. */
.pp-faq {
  margin-inline: var(--page-edge) !important;
}
@media (min-width: 2001px) {
  .pp-faq {
    margin-inline: auto !important;
  }
}
.pp-faq-box {
  padding: calc(60 * var(--u)) var(--side) calc(100 * var(--u));
  border-radius: var(--pp-box);
  background: var(--c-beige);
  text-align: center;
}
.pp-faq-list {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u) + 3px);
  max-width: calc(1306 * var(--u));
  margin: calc(60 * var(--u)) auto 0;
  text-align: left;
}
.pp-faq-item {
  border-radius: var(--pp-r);
  background: var(--c-white);
}
.pp-faq-item summary {
  padding: calc(30 * var(--u)) 3em calc(30 * var(--u)) calc(67 * var(--u));
  font-size: clamp(14.5px, 13.6px + 0.229vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.pp-faq-item summary::after {
  right: calc(36 * var(--u));
  color: var(--c-accent);
  font-size: 1.5em;
}
.pp-faq-body {
  padding: 0 calc(67 * var(--u)) calc(30 * var(--u));
  font-size: var(--fs-text);
}
@media (max-width: 760px) {
  .pp-faq-box {
    padding: 32px 10px 14px;
  }
  .pp-faq-list {
    gap: 8px;
    margin-top: 24px;
  }
  .pp-faq-item summary {
    padding: 18px 2.6em 18px 16px;
  }
  .pp-faq-item summary::after {
    right: 14px;
  }
  .pp-faq-body {
    padding: 0 16px 18px;
    font-size: 13.5px;
  }
}