/* ==========================================================================
   Fiches produit Carpolish, DA v3. Pas de maquette Figma : composition dans le
   vocabulaire de la Boutique (héros glacé, carte produit .prod3) et de la page
   Nettoyage (titres numérotés, filets turquoise, plaque sombre). Textes fabricant inchangés.
   ========================================================================== */

/* ---------- Héros : texte et achat à gauche, le flacon sur sa scène glacée à droite ---------- */
.pp { position: relative; padding: 150px 0 90px; border-radius: 0 0 40px 40px; background: #edf7f7; }
.pp__grille { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 600px); grid-template-areas: "tete visuel" "achat visuel"; justify-content: space-between; column-gap: 60px; align-items: start; }
.pp__tete { grid-area: tete; padding-top: 30px; }
.pp__visuel { grid-area: visuel; }
.pp__achat { grid-area: achat; }

.pp .ariane { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; font: 600 13px/1.2 var(--f-texte); color: rgba(34, 54, 55, .6); }
.pp .ariane li + li::before { content: "/"; margin-right: 8px; color: rgba(34, 54, 55, .3); }
.pp .ariane a { color: inherit; text-decoration: none; transition: color .3s; }
.pp .ariane a:hover { color: var(--v3-lagon); }
.pp .ariane [aria-current] { color: var(--v3-lagon); }
.pp__cat { display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--f-texte); letter-spacing: .02em; color: var(--v3-lagon); }
.pp__cat::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, var(--v3-lagon) 0 4px, rgba(96, 191, 194, .16) 4.5px); }
.pp__nom { margin: 14px 0 0; font: 700 clamp(32px, 3.2vw, 46px)/1.12 var(--f-titre); letter-spacing: -.03em; color: var(--v3-encre); }
.pp__nom span { display: block; margin-top: 6px; font-size: .52em; font-weight: 600; line-height: 1.3; color: rgba(34, 54, 55, .7); }

.pp__prix { display: flex; align-items: baseline; gap: 8px; margin-top: 30px !important; }
.pp__montant { font: 700 40px/1.1 var(--f-texte); letter-spacing: -.04em; color: var(--v3-lagon); }
.pp__ttc { font: 600 14px/1 var(--f-texte); color: rgba(34, 54, 55, .6); }
.pp__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid rgba(96, 191, 194, .24); border-bottom: 1px solid rgba(96, 191, 194, .24); }
.pp__faits > div { padding: 16px 0; }
.pp__faits > div + div { padding-left: 18px; border-left: 1px solid rgba(96, 191, 194, .24); }
.pp__faits dt { font: 700 11px/1.2 var(--f-texte); letter-spacing: .04em; color: var(--v3-lagon); }
.pp__faits dd { margin: 6px 0 0; font: 600 16px/1.2 var(--f-texte); color: var(--v3-encre); }
.pp__note { margin-top: 18px !important; font: 600 14px/1.4 var(--f-texte); color: rgba(34, 54, 55, .75); }
.pp__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pp__sommaire { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; }
.pp__sommaire a { font: 600 14px/1.2 var(--f-texte); color: var(--v3-encre); text-decoration: none; border-bottom: 1px solid rgba(96, 191, 194, .5); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.pp__sommaire a:hover { color: var(--v3-lagon); border-color: var(--v3-lagon); }

/* Scène : carte blanche à filet, le visuel détouré posé dessus */
.pp-scene { position: relative; aspect-ratio: 600 / 560; border-radius: 30px; background: radial-gradient(ellipse at 50% 38%, #ffffff 0 45%, #f4fafa 100%); box-shadow: 0 4px 36px rgba(111, 161, 162, .14); overflow: hidden; }
.pp-scene::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--v3-bord-carte); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pp-scene__sol { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(96, 191, 194, 0), rgba(96, 191, 194, .08)); }
.pp-scene__ombre { position: absolute; left: 50%; bottom: 13%; width: 46%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(34, 54, 55, .22), transparent 70%); filter: blur(4px); }
.pp-scene__obj { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); display: block; transition: opacity .32s var(--doux), transform .6s var(--doux); }
.pp-scene__obj img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(34, 54, 55, .18)); }
.pp-scene__obj--haut { height: 72%; aspect-ratio: 255 / 697; }
.pp-scene__obj--large { width: 66%; height: 56%; bottom: 20%; }
/* Photo pleine image (visuel carré) : elle remplit la scène, sans ombre portée ni sol */
.pp-scene__obj--photo { inset: 0; width: 100%; height: 100%; transform: none; }
.pp-scene__obj--photo img { object-fit: cover; filter: none; }
.pp-scene__obj--photo.is-change { transform: translateY(8px); }
.pp-scene:has(.pp-scene__obj--photo) { aspect-ratio: 1; }
/* Affiche (packs My Lave Auto) : visuel complet, ni sol ni ombre, cadre aux proportions de l'affiche */
.pp-scene__obj--affiche { inset: 0; width: 100%; height: 100%; transform: none; }
.pp-scene__obj--affiche img { object-fit: cover; filter: none; }
.pp-scene:has(.pp-scene__obj--affiche) { aspect-ratio: 900 / 1598; /* repli : ratio réel posé en style par single-product.php */ max-width: 460px; margin-inline: auto; background: #0a1114; }
.pp-scene:has(.pp-scene__obj--affiche) .pp-scene__ombre, .pp-scene:has(.pp-scene__obj--affiche) .pp-scene__sol { display: none; }
.pp-scene:has(.pp-scene__obj--photo) .pp-scene__ombre, .pp-scene:has(.pp-scene__obj--photo) .pp-scene__sol { display: none; }
.pp-scene__obj.is-change { opacity: 0; transform: translateX(-50%) translateY(8px); }
/* Vignettes (produits à plusieurs visuels) */
.pp-vignettes, [data-vignettes] { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.pp-vignette { width: 64px; height: 64px; padding: 6px; border-radius: 16px; border: 1px solid rgba(96, 191, 194, .35); background: #fff; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.pp-vignette img { width: 100%; height: 100%; object-fit: contain; }
.pp-vignette[aria-pressed="true"] { border-color: var(--v3-lagon); box-shadow: 0 0 0 3px rgba(96, 191, 194, .2); }

/* ---------- Informations fabricant : trois blocs numérotés, titre à gauche, texte à droite ---------- */
.pp-infos { padding-bottom: 60px; }
.pp-bloc { display: grid; grid-template-columns: 501px minmax(0, 722px); column-gap: 57px; padding: 48px 0; border-top: 1px solid rgba(96, 191, 194, .24); scroll-margin-top: 100px; }
.pp-bloc:first-child { border-top: 0; padding-top: 0; }
.pp-bloc__tete { display: flex; align-items: baseline; gap: 12px; }
.pp-bloc__n { font: 700 14px/1.2 var(--f-texte); color: var(--v3-lagon); }
.pp-bloc__titre { margin: 0; font: 700 clamp(24px, 2.25vw, 32px)/1.16 var(--f-titre) !important; letter-spacing: -.03em; color: var(--v3-encre); }
.pp-texte { font: 600 16px/1.7 var(--f-texte); letter-spacing: 0; color: rgba(34, 54, 55, .85); }
.pp-texte p { margin: 0 0 14px; }
.pp-texte h3 { margin: 26px 0 10px; font: 700 18px/1.36 var(--f-titre); color: var(--v3-encre); }
.pp-texte h3:first-child { margin-top: 0; }
.pp-chapeau { font: 600 20px/1.36 var(--f-texte) !important; letter-spacing: -.03em; color: var(--v3-encre); }
.pp-etapes { display: grid; gap: 10px; }
.pp-etape { display: flex; gap: 10px; }
.pp-etape__n { flex: none; min-width: 22px; font-weight: 700; color: var(--v3-lagon); }
.pp-puces { margin: 0 0 14px; padding: 0; list-style: none; }
.pp-puces li { position: relative; padding-left: 22px; }
.pp-puces li::before { content: ""; position: absolute; left: 0; top: .55em; width: 13px; height: 12px; background: var(--v3-lagon); -webkit-mask: url(../icons/v3/coche.svg) center / contain no-repeat; mask: url(../icons/v3/coche.svg) center / contain no-repeat; }
.pp-carac { margin: 0; }
.pp-carac > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(96, 191, 194, .16); }
.pp-carac dt { font: 700 14px/1.4 var(--f-texte); color: var(--v3-lagon); }
.pp-carac dd { margin: 0; font: 600 15px/1.5 var(--f-texte); color: var(--v3-encre); }
.pp-dangers { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pp-secu { margin-top: 28px; padding: 24px 28px; border-radius: 20px; background: var(--v3-glace); }
.pp-secu h3 { margin-top: 0; }
.pp-secu p:last-child { margin-bottom: 0; }
.pp-source { margin-top: 20px !important; font: 600 13px/1.2 var(--f-texte); color: rgba(34, 54, 55, .5); }

/* ---------- Dans la même catégorie : les cartes produit de la Boutique ---------- */
.pp-lies-s { background: var(--v3-glace); }
.pp-lies-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.v3 .pp-lies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }

/* ---------- Le centre : plaque sombre ---------- */
.pp-centre-s { padding-block: clamp(70px, 8vw, 110px); }
.pp-centre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "tete infos" "btns infos"; gap: 28px 60px; padding: 56px 60px; border-radius: 30px; box-shadow: 0 4px 36px rgba(34, 54, 55, .3); }
.pp-centre__tete { grid-area: tete; }
.pp-centre__tete p { margin-top: 16px !important; font: 600 16px/1.5 var(--f-texte); color: rgba(254, 254, 254, .78); }
.pp-centre__infos { grid-area: infos; margin: 0; }
.pp-centre__infos > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(96, 191, 194, .16); }
.pp-centre__infos > div:first-child { padding-top: 0; }
.pp-centre__infos dt { font: 700 12px/1.4 var(--f-texte); letter-spacing: .04em; color: var(--v3-lagon); }
.pp-centre__infos dd { margin: 0; font: 600 15px/1.5 var(--f-texte); color: #fefefe; }
.pp-centre__infos a { color: inherit; text-decoration: none; }
.pp-centre__btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: 10px; align-self: end; }
.pp-centre .pil3:not(.pil3--plein) { color: #fefefe; --trace3: #fefefe; }
.pp-centre .pil3--plein { color: var(--v3-encre); }
.pp-centre .pil3--plein .ico3 { color: var(--v3-encre); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pp__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .pp-bloc { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .pp-centre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "infos" "btns"; padding: 40px 32px; }
}
@media (max-width: 760px) {
  .pp { padding: 110px 0 56px; border-radius: 0 0 28px 28px; }
  .pp__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "visuel" "achat"; row-gap: 26px; }
  .pp__tete { padding-top: 0; }
  .pp-scene { aspect-ratio: 1 / .9; }
  .pp__faits { grid-template-columns: minmax(0, 1fr); }
  .pp__faits > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(96, 191, 194, .24); }
  .pp__faits > div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; }
  .pp__faits dd { margin: 0; }
  .pp-bloc { padding: 36px 0; }
  .pp-carac > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .v3 .pp-lies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pp-centre { padding: 32px 20px; }
  .pp-centre__infos > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}