/* ==========================================================================
   Fiche produit (produit.html) — préfixe pp-
   S'appuie sur base.css (jetons --pc-*, composants pc-*). Mobile d'abord.
   Repères : 26em (416 px), 48em (768 px), 56em (896 px, deux colonnes).
   ========================================================================== */

.pp-page { padding-block: var(--pc-space-3) var(--pc-section); }

/* --------------------------------------------------------------------------
   Mise en page : galerie, bloc d'achat (collant sur bureau), contenus
   -------------------------------------------------------------------------- */
.pp-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "galerie" "achat" "details";
  row-gap: var(--pc-space-5);
}
.pp-gallery { grid-area: galerie; min-width: 0; }
.pp-buy { grid-area: achat; min-width: 0; }
.pp-details { grid-area: details; min-width: 0; margin-top: var(--pc-space-4); }

@media (min-width: 56em) {
  .pp-page { padding-top: var(--pc-space-5); }
  .pp-product {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "galerie achat" "details achat";
    column-gap: clamp(2rem, 4.5vw, 4.5rem);
    row-gap: var(--pc-space-6);
    align-items: start;
  }
  .pp-details { margin-top: 0; }
  .pp-buy.is-sticky { position: sticky; top: var(--pp-haut, calc(var(--pc-header-h) + 1.25rem)); }
}

/* --------------------------------------------------------------------------
   Galerie : défilement avec aimantation, flèches et vignettes sur grand écran
   -------------------------------------------------------------------------- */
.pp-stage {
  position: relative;
  margin-inline: calc(-1 * var(--pc-gutter)); /* pleine largeur sur mobile */
  background: var(--pc-creme);
  isolation: isolate;
}
@media (min-width: 48em) {
  .pp-stage { margin-inline: 0; overflow: hidden; border-radius: var(--pc-radius-l); }
}
.pp-track {
  display: flex;
  aspect-ratio: var(--pp-ratio, 1);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
/* Une colonne (tablette, téléphone à l'horizontale) : la photo laisse voir le début du bloc d'achat */
@media (max-width: 55.99em) {
  .pp-track { max-height: max(16rem, 66vh); max-height: max(16rem, 66svh); }
}
/* Tablette (48 à 56em) : scène plus basse, vignettes sur une seule rangée défilante */
@media (min-width: 48em) and (max-width: 55.99em) {
  .pp-track { max-height: max(16rem, 55vh); max-height: max(16rem, 55svh); }
}
.pp-track::-webkit-scrollbar { display: none; }
.pp-track:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: -3px; }
.pp-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  cursor: zoom-in;
}
.pp-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Packshot sur fond blanc : fondu dans la crème */
.pp-slide.is-packshot .pp-slide__img { padding: 5%; mix-blend-mode: multiply; }

.pp-stage__nav,
.pp-stage__zoom {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--pc-tap);
  height: var(--pc-tap);
  border-radius: 50%;
  background: rgb(251 246 236 / 0.92);
  color: var(--pc-encre);
  box-shadow: var(--pc-ombre-1);
  transition: background-color var(--pc-dur-1) ease, opacity var(--pc-dur-2) ease;
}
.pp-stage__nav:hover,
.pp-stage__zoom:hover { background: var(--pc-blanc); }
.pp-stage__zoom { top: 0.75rem; right: 0.75rem; }
.pp-stage__zoom .pc-icon { width: 1.125rem; height: 1.125rem; }
.pp-stage__nav { top: 50%; display: none; transform: translateY(-50%); }
.pp-stage__nav--prec { left: 0.875rem; }
.pp-stage__nav--suiv { right: 0.875rem; }
@media (min-width: 48em) {
  .pp-stage__nav { display: grid; }
}
@media (hover: hover) and (min-width: 48em) {
  .pp-stage:not(:hover):not(:focus-within) .pp-stage__nav { opacity: 0; }
}

.pp-stage--vide {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  aspect-ratio: 1;
  color: var(--pc-texte-doux);
  font-size: var(--pc-fs-sm);
}
.pp-stage__marque { width: 4rem; height: 4rem; --pc-logo-fond: var(--pc-cuir-pale); --pc-logo-trait: var(--pc-cuir); }

/* Indicateur de position (mobile) : une rangée de points de couture */
.pp-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}
.pp-position__points { display: flex; flex: 1 1 auto; gap: 5px; max-width: 15rem; }
.pp-position__points > span {
  flex: 1 1 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pc-trait-fort);
  opacity: 0.4;
  transition: opacity var(--pc-dur-2) ease, background-color var(--pc-dur-2) ease, transform var(--pc-dur-2) ease;
}
.pp-position__points > span.is-active { background: var(--pc-terracotta); opacity: 1; transform: scaleY(1.6); }
.pp-position__compte {
  font-size: var(--pc-fs-xs);
  font-weight: 600;
  color: var(--pc-texte-doux);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 48em) {
  .pp-position { display: none; }
}

/* Vignettes (tablette et bureau) */
.pp-thumbs { display: none; }
@media (min-width: 48em) {
  .pp-thumbs {
    display: grid;
    grid-template-columns: repeat(var(--pp-cols, 6), minmax(0, 1fr));
    gap: 0.5rem;
    max-width: calc(var(--pp-cols, 6) * 5.75rem);
    margin-top: 0.75rem;
  }
}
@media (min-width: 48em) and (max-width: 55.99em) {
  .pp-thumbs {
    display: flex;
    max-width: none;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .pp-thumbs > li { flex: 0 0 5rem; scroll-snap-align: start; }
}
.pp-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border: 1.5px solid transparent;
  border-radius: var(--pc-radius-s);
  background: var(--pc-creme);
  transition: border-color var(--pc-dur-1) ease;
}
.pp-thumb__img { width: 100%; height: 100%; object-fit: cover; }
.pp-thumb.is-packshot .pp-thumb__img { padding: 8%; object-fit: contain; mix-blend-mode: multiply; }
.pp-thumb:hover { border-color: var(--pc-trait-fort); }
.pp-thumb[aria-current="true"] { border-color: var(--pc-encre); }
.pp-thumb[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px dashed rgb(42 26 12 / 0.45);
  border-radius: calc(var(--pc-radius-s) - 3px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Visionneuse plein écran
   -------------------------------------------------------------------------- */
.pp-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  inset: 0;
  overflow: hidden;
  background: var(--pc-creme);
  color: var(--pc-encre);
}
.pp-lightbox::backdrop { background: var(--pc-creme); }
.pp-lightbox[open] { animation: pc-fade-in var(--pc-dur-2) ease both; }
.pp-lightbox.is-closing { animation: pc-fade-out var(--pc-dur-2) ease both; }
.pp-lightbox__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}
.pp-lightbox__tete {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem 0.5rem var(--pc-gutter);
}
.pp-lightbox__titre {
  font-size: var(--pc-fs-lg);
  font-weight: 560;
  line-height: 1.2;
}
.pp-lightbox__compte {
  flex: 1 1 auto;
  font-size: var(--pc-fs-sm);
  color: var(--pc-texte-doux);
  font-variant-numeric: tabular-nums;
}
.pp-lightbox__scene {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  margin: 0;
  touch-action: pan-y pinch-zoom;
}
.pp-lightbox__cadre { position: relative; min-height: 0; }
.pp-lightbox__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-inline: var(--pc-gutter);
  object-fit: contain;
}
.pp-lightbox__img.is-packshot { mix-blend-mode: multiply; }
.pp-lightbox__legende {
  padding: 0.5rem var(--pc-gutter) 0;
  text-align: center;
  font-size: var(--pc-fs-sm);
  color: var(--pc-texte-doux);
}
.pp-lightbox__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
.pp-lightbox__nav .pc-iconbtn { width: 3rem; height: 3rem; background: var(--pc-blanc); }

/* --------------------------------------------------------------------------
   Bloc d'achat
   -------------------------------------------------------------------------- */
.pp-ariane { margin-bottom: 0.125rem; }
.pp-buy__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.875rem;
  font-size: var(--pc-fs-sm);
  color: var(--pc-texte-doux);
}
.pp-buy__gamme {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--pc-encre-douce);
  font-weight: 600;
  text-decoration: none;
}
.pp-buy__gamme:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pp-buy__nom {
  margin-top: 0.125rem;
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: clamp(2.5rem, 1.75rem + 2.6vw, 3.75rem);
  font-weight: 470;
  line-height: 1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.pp-buy__accroche {
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-base);
  font-style: italic;
  line-height: 1.55;
}
.pp-buy__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: var(--pc-space-5);
}
.pp-dispo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--pc-fs-sm);
  font-weight: 600;
  color: var(--pc-vert);
}
.pp-dispo::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}
.pp-dispo[data-niveau="faible"] { color: var(--pc-terracotta-fonce); }
.pp-dispo[data-niveau="epuise"] { color: var(--pc-texte-doux); }
.pp-dispo[data-niveau="epuise"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Couture : sépare la présentation du choix de pointure */
.pp-couture {
  height: 6px;
  margin-block: var(--pc-space-5);
  background: var(--pc-piqure-h) left center / 18px 6px repeat-x;
  opacity: 0.8;
}

/* --- Choix de la pointure --- */
.pp-sizes__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: var(--pc-space-3);
}
.pp-sizes__titre { font-size: var(--pc-fs-base); font-weight: 650; }
.pp-outil .pc-icon { width: 1.25rem; height: 1.25rem; }

.pp-sizes .pc-sizes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-sizes[data-count="4"] .pc-sizes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 26em) {
  .pp-sizes .pc-sizes__list,
  .pp-sizes[data-count="4"] .pc-sizes__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pp-sizes .pc-size__box { height: 100%; min-height: 4.25rem; }
.pp-sizes__erreur { margin-bottom: var(--pc-space-3); }
.pp-sizes.is-invalid .pc-size:not(.is-soldout) .pc-size__box { border-color: var(--pc-erreur); }

.pp-sizes__resume {
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-sm);
  line-height: 1.45;
  color: var(--pc-encre-douce);
}
.pp-sizes__resume strong { color: var(--pc-encre); }
.pp-sizes__resume:empty { display: none; }

.pp-sizes__pourquoi,
.pp-sizes__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: var(--pc-space-2);
  font-size: var(--pc-fs-sm);
  line-height: 1.45;
  color: var(--pc-texte-doux);
}
.pp-sizes__pourquoi:empty { display: none; }
.pp-sizes__pourquoi .pc-icon,
.pp-sizes__note .pc-icon { width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--pc-vert); }
.pp-sizes__pourquoi[data-type$="epuise"] .pc-icon,
.pp-sizes__pourquoi[data-type$="absent"] .pc-icon,
.pp-sizes__note .pc-icon { color: var(--pc-ardoise); }
.pp-sizes__pourquoi[data-type$="epuise"],
.pp-sizes__pourquoi[data-type$="absent"] { color: var(--pc-encre-douce); }
.pp-sizes__pourquoi a,
.pp-sizes__pourquoi .pp-lien-bouton { margin-right: 0.75rem; }

.pp-sizes__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin-top: var(--pc-space-2);
  font-size: var(--pc-fs-sm);
}
.pp-sizes__liens > a,
.pp-sizes__liens > button { display: inline-flex; align-items: center; min-height: var(--pc-tap); }

/* Bouton présenté comme un lien (action dans la page) */
.pp-lien-bouton {
  color: var(--pc-lien);
  font-weight: 550;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: var(--pc-radius-xs);
}
.pp-lien-bouton:hover { color: var(--pc-action-survol); text-decoration-thickness: 2px; }

/* --- Quantité et ajout au panier --- */
.pp-ajout {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  margin-top: var(--pc-space-4);
}
.pp-ajout .pc-qty { flex: none; }
.pp-ajout__btn { flex: 1 1 auto; min-width: 0; padding-inline: 1rem; }
@media (max-width: 25.99em) {
  .pp-ajout .pc-qty__btn { width: var(--pc-tap); }
  .pp-ajout .pc-qty__input { width: 2.25rem; min-width: 2.25rem; }
  .pp-ajout__btn .pc-icon { display: none; }
}
.pp-ajout__info {
  margin-top: var(--pc-space-2);
  font-size: var(--pc-fs-sm);
  color: var(--pc-encre-douce);
}
.pp-ajout__info:empty { display: none; }

/* --- Réassurance --- */
.pp-reassure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem 1.5rem;
  margin-top: var(--pc-space-5);
  padding-top: var(--pc-space-5);
  border-top: 1px solid var(--pc-trait);
}
@media (min-width: 36em) and (max-width: 55.99em) {
  .pp-reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pp-reassure__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.pp-reassure__icon { width: 1.625rem; height: 1.625rem; color: var(--pc-terracotta-fonce); stroke-width: 1.5; }
.pp-reassure__item p { display: flex; flex-direction: column; gap: 0.0625rem; font-size: var(--pc-fs-sm); line-height: 1.4; }
.pp-reassure__item strong { font-weight: 650; }
.pp-reassure__item span { font-size: var(--pc-fs-xs); line-height: 1.45; color: var(--pc-texte-doux); }

/* --- Produit épuisé et alerte de retour --- */
/* Ordre : alerte standard (une phrase), modèles similaires disponibles, formulaire. */
.pp-epuise { display: grid; gap: var(--pc-space-5); }
.pp-epuise__alerte p { font-size: var(--pc-fs-sm); line-height: 1.45; }
.pp-epuise__similaires .pp-section__tete { margin-bottom: var(--pc-space-4); }
.pp-epuise__similaires .pp-section__titre { font-size: var(--pc-fs-lg); }
/* Deux cartes par rangée dans la colonne d'achat (quatre quand elle occupe toute la largeur) */
.pp-epuise .pp-epuise__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.875rem; }
@media (min-width: 36em) and (max-width: 55.99em) {
  .pp-epuise .pp-epuise__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pp-epuise .pp-alerte { margin-top: 0; }
.pp-epuise .pp-sizes__liens { margin-top: 0; }

.pp-alerte {
  margin-top: var(--pc-space-3);
  padding: var(--pc-space-5) var(--pc-space-4);
  border: 1.5px dashed var(--pc-couture);
  border-radius: var(--pc-radius-m);
  background: var(--pc-creme);
}
@media (min-width: 26em) { .pp-alerte { padding-inline: var(--pc-space-5); } }
.pp-alerte__intro { margin-bottom: var(--pc-space-4); font-size: var(--pc-fs-sm); line-height: 1.45; color: var(--pc-encre-douce); }
.pp-alerte__form { gap: 1rem; }
.pp-alerte__statut:empty { display: none; }
.pp-alerte__ok { align-items: flex-start; }
.pp-alerte__ok:focus { outline: none; }
.pp-alerte__ok:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
.pp-alerte__ok .pp-lien-bouton { display: inline-flex; align-items: center; min-height: var(--pc-tap); }
/* Piège à robots : hors écran, jamais affiché */
.pp-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Contenus (accordéons) et guide des pointures
   -------------------------------------------------------------------------- */
.pp-accordeon .pc-accordion__panel { font-size: var(--pc-fs-base); }
.pp-liste { padding-left: 1.25em; list-style: disc; }
.pp-liste li + li { margin-top: 0.4em; }
.pp-liste li::marker { color: var(--pc-terracotta); }

.pp-table { margin-block: var(--pc-space-2); }
.pp-table td, .pp-table th { padding-right: 1rem; }
.pp-table__dispo { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.pp-table__dispo::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pc-vert);
}
.pp-table__dispo[data-niveau="faible"] { color: var(--pc-terracotta-fonce); }
.pp-table__dispo[data-niveau="faible"]::before { background: var(--pc-terracotta); }
.pp-table__dispo[data-niveau="epuise"],
.pp-table__dispo[data-niveau="absent"] { color: var(--pc-texte-doux); }
.pp-table__dispo[data-niveau="epuise"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pc-trait-fort); }
.pp-table__dispo[data-niveau="absent"]::before { display: none; }
.pp-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

/* --------------------------------------------------------------------------
   Aide « Trouver sa pointure »
   -------------------------------------------------------------------------- */
.pp-aide__intro { margin-bottom: var(--pc-space-4); font-size: var(--pc-fs-sm); color: var(--pc-encre-douce); }
.pp-onglets {
  display: flex;
  gap: 0.25rem;
  margin-bottom: var(--pc-space-5);
  padding: 0.25rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-papier-fonce);
}
.pp-onglet {
  flex: 1 1 0;
  min-height: var(--pc-tap);
  padding: 0.375rem 0.75rem;
  border-radius: var(--pc-radius-pill);
  color: var(--pc-encre-douce);
  font-size: var(--pc-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--pc-dur-1) ease, color var(--pc-dur-1) ease;
}
.pp-onglet:hover { color: var(--pc-encre); }
.pp-onglet[aria-selected="true"] { background: var(--pc-creme); color: var(--pc-encre); box-shadow: var(--pc-ombre-1); }

.pp-panneau { display: flex; flex-direction: column; gap: var(--pc-space-4); }
.pp-panneau__btn { align-self: flex-start; }
.pp-saisie { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
.pp-saisie__champ { width: 7.5rem; }
.pp-unite {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--pc-trait-fort);
  border-radius: var(--pc-radius-s);
  background: var(--pc-blanc);
}
.pp-unite__choix { position: relative; display: inline-flex; }
.pp-unite__choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pp-unite__choix span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: var(--pc-tap);
  padding-inline: 0.75rem;
  border-radius: calc(var(--pc-radius-s) - 3px);
  font-size: var(--pc-fs-sm);
  font-weight: 600;
  transition: background-color var(--pc-dur-1) ease, color var(--pc-dur-1) ease;
}
.pp-unite__choix input:checked + span { background: var(--pc-encre); color: var(--pc-creme); }
.pp-unite__choix input:focus-visible + span { outline: 3px solid var(--pc-focus); outline-offset: 2px; }

/* Comment mesurer : semelle vue de dessus, cote du talon au gros orteil */
.pp-mesure {
  margin: 0;
  padding: var(--pc-space-4);
  border-radius: var(--pc-radius-m);
  background: var(--pc-papier);
}
.pp-mesure__dessin { width: 100%; max-width: 20rem; height: auto; margin-inline: auto; }
.pp-mesure__semelle { fill: var(--pc-cuir-pale); stroke: var(--pc-cuir); stroke-width: 1.75; }
.pp-mesure__orteils { fill: var(--pc-cuir-pale); stroke: var(--pc-cuir); stroke-width: 1.5; }
.pp-mesure__mur { fill: none; stroke: var(--pc-encre-douce); stroke-width: 2.5; stroke-linecap: round; }
.pp-mesure__hachures { fill: none; stroke: var(--pc-trait-fort); stroke-width: 1.25; stroke-linecap: round; }
.pp-mesure__repere { fill: none; stroke: var(--pc-terracotta-fonce); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pp-mesure__cote { fill: none; stroke: var(--pc-terracotta-fonce); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-mesure__texte { font-family: var(--pc-font-ui); font-size: 13px; font-weight: 600; fill: var(--pc-encre-douce); }
.pp-mesure__etapes {
  margin-top: var(--pc-space-3);
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: var(--pc-fs-sm);
  line-height: 1.45;
  color: var(--pc-encre-douce);
}
.pp-mesure__etapes li + li { margin-top: 0.25rem; }
.pp-mesure__etapes li::marker { color: var(--pc-terracotta-fonce); font-weight: 650; }

/* Résultat */
.pp-resultat { margin-top: var(--pc-space-5); }
.pp-resultat:empty { display: none; }
.pp-resultat__carte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--pc-space-5);
  border: 1.5px solid var(--pc-trait);
  border-radius: var(--pc-radius-m);
  background: var(--pc-papier);
}
.pp-resultat__carte[data-etat="ok"] { border-style: dashed; border-color: var(--pc-couture); }
.pp-resultat__label { font-size: var(--pc-fs-sm); font-weight: 600; color: var(--pc-encre-douce); }
.pp-resultat__taille {
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: var(--pc-fs-3xl);
  font-weight: 480;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.pp-resultat__detail { font-size: var(--pc-fs-sm); color: var(--pc-texte-doux); }
.pp-resultat__statut {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: var(--pc-fs-sm);
  font-weight: 600;
  line-height: 1.4;
}
.pp-resultat__statut .pc-icon { width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; }
[data-etat="ok"] > .pp-resultat__statut { color: var(--pc-vert); }
[data-etat="epuise"] > .pp-resultat__statut { color: var(--pc-terracotta-fonce); }
[data-etat="absent"] > .pp-resultat__statut { color: var(--pc-ardoise); }
.pp-resultat__carte > .pc-btn { margin-top: var(--pc-space-3); }
.pp-resultat__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--pc-space-3); }

/* --------------------------------------------------------------------------
   Modèles similaires, vus récemment
   -------------------------------------------------------------------------- */
.pp-section { margin-top: var(--pc-section); }
.pp-section__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin-bottom: var(--pc-space-5);
}
.pp-section__titre { font-size: var(--pc-fs-xl); font-weight: 520; }
.pp-section__note { flex: 1 1 14rem; font-size: var(--pc-fs-sm); color: var(--pc-texte-doux); }
.pp-section__note:empty { flex-basis: 0; }
.pp-section__lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--pc-tap);
  margin-left: auto;
  font-size: var(--pc-fs-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Barre d'achat collante (mobile)
   -------------------------------------------------------------------------- */
.pp-barre {
  position: fixed;
  inset: auto 0 0;
  z-index: calc(var(--pc-z-header) - 1);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--pc-trait);
  background: rgb(251 246 236 / 0.97);
  box-shadow: 0 -12px 24px -18px rgb(42 26 12 / 0.5);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform var(--pc-dur-3) var(--pc-ease), visibility 0s linear var(--pc-dur-3);
}
.pp-barre.is-visible {
  transform: none;
  visibility: visible;
  transition: transform var(--pc-dur-3) var(--pc-ease), visibility 0s;
}
.pp-barre__inner { display: flex; align-items: center; gap: 0.75rem; min-height: 4.25rem; padding-block: 0.5rem; }
.pp-barre__info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-barre__ligne { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.pp-barre__nom {
  overflow: hidden;
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: 1.0625rem;
  font-weight: 560;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pp-barre__prix { font-size: var(--pc-fs-sm); }
.pp-barre__taille { font-size: var(--pc-fs-xs); color: var(--pc-texte-doux); }
.pp-barre__btn { flex: none; padding-inline: 1rem; }
@media (min-width: 56em) {
  .pp-barre { display: none; }
}
@media (max-width: 55.99em) {
  /* Le focus clavier et les ancres ne finissent pas sous la barre */
  html.pp-barre-visible { scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  html.pp-barre-visible .pc-toasts { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  html.pp-avec-barre .pc-footer__main { padding-bottom: calc(1.5rem + 4.5rem); }
}

/* --------------------------------------------------------------------------
   États : squelette, introuvable, erreur
   -------------------------------------------------------------------------- */
.pp-product--squelette .pp-stage { aspect-ratio: 1.15; }
@media (min-width: 48em) { .pp-product--squelette .pp-stage { border-radius: var(--pc-radius-l); } }
.pp-skel-titre { height: 3rem; width: 55%; margin-block: 0.75rem 1rem; border-radius: var(--pc-radius-pill); }
.pp-skel-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-block: 1.5rem; }
.pp-skel-sizes > span { height: 4.25rem; border-radius: var(--pc-radius-m); }
.pp-skel-btn { height: 3.5rem; border-radius: var(--pc-radius-pill); }

.pp-introuvable { max-width: 34rem; padding-block: var(--pc-space-7) var(--pc-space-4); }
.pp-introuvable__recherche { width: 100%; margin-top: var(--pc-space-3); text-align: left; }
.pp-introuvable__champ { display: flex; gap: 0.5rem; margin-top: 0.375rem; }
.pp-introuvable__champ .pc-input { flex: 1 1 auto; min-width: 0; }
.pp-introuvable__champ .pc-btn { flex: none; padding-inline: 1.125rem; }

.pp-erreur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pc-space-4);
  max-width: 40rem;
  padding-block: var(--pc-space-7);
}

/* Cadre cousu (SVG, lib/couture.js) : la bordure pointillée de repli disparaît. */
.pp-alerte { position: relative; }
.pp-alerte.is-cousu { border-color: transparent; }

/* --------------------------------------------------------------------------
   Vue 360° (40 photos à 9°, tools/build_360.py) : bouton sur la scène, puis
   visionneuse par-dessus la galerie, qu'on fait tourner en glissant.
   -------------------------------------------------------------------------- */
.pp-stage__360 {
  position: absolute;
  z-index: 2;
  left: 0.875rem;
  bottom: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 0.875rem 0 0.625rem;
  border: 1px solid rgb(31 24 20 / 0.12);
  border-radius: var(--pc-radius-pill);
  background: rgb(255 255 255 / 0.92);
  color: var(--pc-encre);
  font: 600 var(--pc-fs-sm) / 1 var(--pc-font-ui);
  cursor: pointer;
  box-shadow: var(--pc-ombre-1);
}
.pp-stage__360:hover { background: var(--pc-blanc); }
.pp-stage__360:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
.pp-stage__360 .pc-icon { width: 1.125rem; height: 1.125rem; }
.pp-stage.is-360 .pp-stage__nav,
.pp-stage.is-360 .pp-stage__zoom,
.pp-stage.is-360 .pp-stage__360 { display: none; }

.pp-360 {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: var(--pc-creme);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.pp-360.is-drag { cursor: grabbing; }
.pp-360:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: -3px; }
.pp-360__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pp-360__chargement {
  position: absolute;
  inset: auto 1rem 3.5rem;
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  font-size: var(--pc-fs-sm);
  color: var(--pc-texte-doux);
}
.pp-360__barre { width: min(16rem, 60%); height: 4px; border-radius: 2px; background: var(--pc-trait); overflow: hidden; }
.pp-360__barre > span { display: block; height: 100%; width: 0; background: var(--pc-terracotta); transition: width 120ms linear; }
.pp-360__aide {
  position: absolute;
  left: 50%;
  bottom: 0.875rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--pc-radius-pill);
  background: rgb(255 255 255 / 0.92);
  font-size: var(--pc-fs-xs);
  font-weight: 600;
  color: var(--pc-encre);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--pc-dur-2) ease;
}
.pp-360.is-touche .pp-360__aide { opacity: 0; }
.pp-360__fermer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: var(--pc-tap);
  height: var(--pc-tap);
  border: 1px solid rgb(31 24 20 / 0.12);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--pc-encre);
  cursor: pointer;
  box-shadow: var(--pc-ombre-1);
}
.pp-360__fermer:hover { background: var(--pc-blanc); }
.pp-360__fermer:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
.pp-360__fermer .pc-icon { width: 1.125rem; height: 1.125rem; }
@media (prefers-reduced-motion: reduce) {
  .pp-360__barre > span { transition: none; }
}