/* Fiche produit v2 — composition inspirée de la proposition générée, avec les contenus du site et d'Etsy.
   Tout est préfixé p2- et s'appuie sur les variables de home-v2.css (couleurs, polices). */

.p2-wrap {max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem;}
.p2-page {font-family: var(--v2-font-sans); color: var(--v2-fg);}
.p2-eyebrow {font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: var(--v2-accent-strong); margin: 0;}

/* ---------- Produit ---------- */
.p2-top {padding: 72px 0 0;} /* place du menu fixe ; annule le padding de 130 px du thème */
.p2-back {display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .875rem; font-weight: 500; color: var(--v2-muted); text-decoration: none; transition: color .2s;}
.p2-back:hover {color: var(--v2-primary);}
.p2-produit {display: grid; gap: 3rem; padding-block: 2.5rem 4rem; align-items: start;}
@media (min-width: 900px) {
    .p2-produit {grid-template-columns: 1.05fr 1fr; padding-block: 3rem 5rem;}
}
@media (min-width: 900px) and (min-height: 860px) {
    .p2-galerie {position: sticky; top: 6rem;} /* seulement si l'écran est assez haut pour toute la galerie */
}
@media (max-width: 899px) {
    .p2-galerie {width: 100%; max-width: 34rem; margin-inline: auto;}
}

/* Galerie */
.p2-carousel {position: relative; display: grid; overflow: hidden; border-radius: 1.5rem; background: var(--v2-paper); touch-action: pan-y;}
.p2-slide {grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;}
.p2-slide.is-active {opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s;}
.p2-slide img {display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;}
.p2-counter {position: absolute; bottom: 1rem; right: 1rem; background: rgba(20,18,59,.7); color: #fff; border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 700;}
.p2-arrow {position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.95); color: var(--v2-primary); box-shadow: 0 10px 25px rgba(0,0,0,.18); transition: transform .2s;}
.p2-arrow:hover {transform: translateY(-50%) scale(1.1);}
.p2-arrow svg {width: 1.1rem; height: 1.1rem;}
.p2-prev {left: 1rem;}
.p2-next {right: 1rem;}
.p2-thumbs {display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .6rem; margin-top: .75rem;}
.p2-thumb {border: 0; padding: 0; cursor: pointer; border-radius: .75rem; overflow: hidden; opacity: .6; transition: opacity .2s, box-shadow .2s, transform .2s; background: var(--v2-paper);}
.p2-thumb:hover {opacity: 1; transform: translateY(-2px);}
.p2-thumb.is-active {opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--v2-accent-strong);}
.p2-thumb {position: relative;}
.p2-thumb img {display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;}
.p2-play {position: absolute; inset: 0; margin: auto; width: 1.6rem; height: 1.6rem; padding: .35rem .3rem .35rem .4rem; border-radius: 999px; background: rgba(20,18,59,.7); color: #fff;}
.p2-slide-video video {display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--v2-paper);}

/* Infos */
.p2-h1 {font-family: var(--v2-font-display); font-weight: 400; font-size: clamp(3rem, 6vw, 4.5rem); line-height: .95; color: var(--v2-primary); margin: .75rem 0 0;}
.p2-subtitle {font-family: var(--v2-font-display); font-style: italic; font-size: 1.5rem; color: var(--v2-muted); margin: .5rem 0 0;}
.p2-stars {display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; font-size: .875rem; font-weight: 500; color: var(--v2-muted);}
.p2-avis {color: var(--v2-muted); text-decoration: underline; text-underline-offset: 3px; transition: color .2s;}
.p2-avis:hover {color: var(--v2-primary);}
.p2-stars .p2-s {color: var(--v2-accent-strong); font-size: 1rem; letter-spacing: .15em;}
.p2-price {display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; border-block: 1px solid rgba(29,0,176,.15); padding-block: 1.5rem; margin-top: 1.5rem;}
.p2-price strong {font-family: var(--v2-font-display); font-size: 3rem; font-weight: 400; line-height: 1; color: var(--v2-primary);}
.p2-price span {padding-bottom: .3rem; font-size: .875rem; color: var(--v2-muted);}
.p2-desc {margin-top: 1.5rem; color: var(--v2-muted); line-height: 1.7;}
.p2-desc p {margin: 0 0 1rem;}
.p2-specs {margin: 1.75rem 0 0; display: grid; gap: .4rem;}
.p2-spec {display: flex; align-items: center; gap: .85rem; background: var(--v2-paper); border-radius: .75rem; padding: .5rem 1rem; line-height: 1.35;}
.p2-spec::before {content: ""; flex-shrink: 0; width: .65rem; height: .65rem; border-radius: 999px; background: var(--v2-accent-strong);}
.p2-spec dt {font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--v2-muted);}
.p2-spec dd {margin: 0; font-weight: 500; font-size: .95rem;}
.p2-cta {margin-top: 2rem;}
.p2-cta a {display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: var(--v2-accent-strong); color: #fff; border-radius: 999px; padding: 1.25rem 2rem; font-size: 1.125rem; font-weight: 700; text-decoration: none; transition: transform .2s;}
.p2-cta a:hover {transform: scale(1.02); color: #fff;}
.p2-cta a svg {width: 1.1rem; height: 1.1rem; transition: transform .2s;}
.p2-cta a:hover svg {transform: translateX(4px);}
@media (min-width: 640px) {.p2-cta a {width: auto;}}
.p2-cta p {margin: .75rem 0 0; font-size: .875rem; color: var(--v2-muted);}
.p2-reassurance {margin-top: 2rem; display: grid; gap: 1rem;}
@media (min-width: 640px) and (max-width: 899px), (min-width: 1100px) {.p2-reassurance {grid-template-columns: 1fr 1fr;}}
.p2-reas-item {display: flex; align-items: flex-start; gap: .85rem;}
.p2-ico {flex-shrink: 0; width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 999px; background: var(--v2-paper); color: var(--v2-primary);}
.p2-reassurance p {margin: 0; font-size: .875rem; color: var(--v2-muted); line-height: 1.6;}
.p2-reassurance strong {color: var(--v2-fg);}

/* Suggestions */
.p2-suggestions {background: var(--v2-paper); padding-block: 5rem;}
.p2-suggestions h2 {font-family: var(--v2-font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; color: var(--v2-primary); margin: .75rem 0 3rem;}
.p2-cards {display: grid; gap: 2rem;}
@media (min-width: 640px) {.p2-cards {grid-template-columns: repeat(2, minmax(0, 24rem));}}
@media (min-width: 768px) {.p2-cards {grid-template-columns: repeat(3, minmax(0, 22rem));}}
.p2-card {display: block; text-decoration: none; color: var(--v2-fg);}
.p2-card-img {position: relative; overflow: hidden; border-radius: 1.5rem; background: #fff; aspect-ratio: 4 / 3;}
.p2-card-img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s;}
.p2-card:hover .p2-card-img img {transform: scale(1.05);}
.p2-card-row {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1rem;}
.p2-card h3 {font-family: var(--v2-font-display); font-weight: 600; font-size: 1.25rem; margin: 0; color: var(--v2-fg);}
.p2-card-size {margin: .15rem 0 0; font-size: .875rem; color: var(--v2-muted);}
.p2-card-price {font-family: var(--v2-font-display); font-size: 1.25rem; color: var(--v2-primary);}

@media (max-width: 575px) {
    .p2-thumbs {grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .5rem;}
    .p2-suggestions {padding-block: 3.5rem;}
    .p2-produit {padding-block: 1.5rem 3rem;}
}

/* ---------- Micro-interactions (discrètes) ---------- */
@keyframes p2-rise {from {opacity: 0; transform: translateY(14px);} to {opacity: 1; transform: none;}}
.p2-in {opacity: 0; animation: p2-rise .55s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards;}
.js .p2-reveal {opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s);}
.js .p2-reveal.is-visible {opacity: 1; transform: none;}
.p2-arrow:active {transform: translateY(-50%) scale(.94);}
.p2-cta a:active {transform: scale(.98);}
@media (prefers-reduced-motion: reduce) {
    .p2-in {animation: none; opacity: 1;}
    .js .p2-reveal {opacity: 1; transform: none; transition: none;}
    .p2-slide, .p2-slide.is-active {transition: none;}
    .p2-thumb:hover {transform: none;}
}

/* Survol d'une carte « Vous aimerez aussi » : la 2e image (zoom sur un détail) apparaît en fondu */
.p2-card-img .p2-card-alt {position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease, transform .7s;}
@media (hover: hover) {
    .p2-card:hover .p2-card-alt, .p2-card:focus-visible .p2-card-alt {opacity: 1;}
}

/* Caractéristiques : la fleur du logo, d'une couleur par ligne, à la place du point rose (fiches marquées dans generer_fiches.py) */
.p2-specs--fleurs .p2-spec::before {display: none;}
.p2-spec-fleur {flex-shrink: 0; width: 1rem; height: 1rem; color: var(--c, var(--v2-accent-strong)); transition: transform .8s cubic-bezier(.3,.7,.2,1);}
.p2-specs--fleurs .p2-spec:nth-child(1) .p2-spec-fleur {--c: var(--v2-primary);}
.p2-specs--fleurs .p2-spec:nth-child(2) .p2-spec-fleur {--c: var(--v2-accent-strong);}
.p2-specs--fleurs .p2-spec:nth-child(3) .p2-spec-fleur {--c: var(--v2-accent);}
.p2-specs--fleurs .p2-spec:nth-child(4) .p2-spec-fleur {--c: #8e7cf0;}
@media (hover: hover) {.p2-specs--fleurs .p2-spec:hover .p2-spec-fleur {transform: rotate(60deg) scale(1.15);}}
@media (prefers-reduced-motion: reduce) {.p2-spec-fleur {transition: none;}}