/* ============================================================
   EKD — Page PRODUIT : galerie teintée, coloris, perso inline,
   inclus / guide / compatibilité / avis photos / cross-sell, toasts
   ============================================================ */

/* Galerie : image principale teintée par le coloris choisi */
.pdp-main{position:relative}
.pdp-main img{filter:grayscale(1) brightness(1.04) contrast(1.05)}
.pdp-tint{position:absolute;inset:0;z-index:1;mix-blend-mode:color;pointer-events:none;background:#FF4D00}
.pdp-main .badge{position:absolute;z-index:3}

/* FOMO + ventes */
.fomo .sep{opacity:.4;margin:0 4px}

/* Coloris (le grand visuel montre la couleur → pas une pastille qui cache) */
.opt-color{display:inline-flex;align-items:center;gap:8px}
.opt-color .dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex:none}

/* Personnalisation inline (aperçu + CTA tunnel) */
.perso{border:1px solid var(--border-2);border-radius:var(--radius);background:var(--gray);padding:20px;margin-bottom:22px}
.perso .ph{display:flex;align-items:center;gap:9px;font-family:var(--f-cond);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:14px;margin-bottom:14px}
.perso .ph svg.ic{width:18px;height:18px;color:var(--orange)}
.perso-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.perso .field{margin:0}
.perso .hintline{color:var(--muted-2);font-size:12px;margin-bottom:14px;display:flex;align-items:center;gap:7px}
.perso .hintline svg.ic{width:14px;height:14px;color:var(--orange)}

/* Ce qui est inclus */
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.inc{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--gray);transition:.25s}
.inc:hover{border-color:var(--orange);transform:translateY(-4px)}
.inc svg.ic{width:30px;height:30px;color:var(--orange)}
.inc h4{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:15px}
.inc p{color:var(--muted-2);font-size:12.5px}

/* Guide de pose : vidéo + 4 micro-bénéfices (desktop 2 col · mobile vidéo AU-DESSUS des 4) */
.pose-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
@media(max-width:760px){.pose-grid{grid-template-columns:1fr}.pose-grid .vid{order:-1}}

/* Vidéo de pose */
.vid{position:relative;aspect-ratio:16/9;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#0d0d0d;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.45}
.vid .play{position:absolute;width:74px;height:74px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s;box-shadow:0 0 0 0 rgba(255,77,0,.4);animation:glowpulse 2.6s infinite}
.vid:hover .play{transform:scale(1.08)}
.vid .play svg{width:26px;height:26px;margin-left:4px}

/* Compatibilité modèles */
.compat{display:flex;flex-wrap:wrap;gap:10px}
.compat .m{font-family:var(--f-cond);font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:13px;padding:10px 16px;border:1px solid var(--border-2);border-radius:40px;color:var(--white);display:flex;align-items:center;gap:8px;transition:.2s}
.compat .m:hover{border-color:var(--orange)}
.compat .m svg.ic{width:15px;height:15px;color:var(--orange)}

/* Avis clients avec photos (UGC) */
.ugc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ugc{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--gray);transition:.25s}
.ugc:hover{border-color:var(--orange);transform:translateY(-4px)}
.ugc-img{aspect-ratio:4/3;overflow:hidden;background:#0d0d0d}
.ugc-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.ugc:hover .ugc-img img{transform:scale(1.05)}
.ugc-body{padding:18px}
.ugc-body .rating-stars{margin-bottom:8px}
.ugc-body p{font-size:13.5px;color:#fff;margin-bottom:12px;line-height:1.55}
.ugc-body .who{color:var(--muted-2);font-size:12px;display:flex;align-items:center;gap:7px}
.ugc-body .who b{color:#fff}
.ugc-body .who svg.ic{width:13px;height:13px;color:var(--green)}

/* Notifications d'achat récentes (toasts) */
.toast-host{position:fixed;right:18px;bottom:92px;z-index:350;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:300px}
.toast{display:flex;align-items:center;gap:11px;background:rgba(20,20,20,.97);border:1px solid var(--border-2);border-left:3px solid var(--orange);border-radius:var(--radius);padding:12px 16px;font-size:13px;color:#fff;box-shadow:0 14px 44px rgba(0,0,0,.5);transform:translateX(130%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.toast.show{transform:none}
.toast svg.ic{color:var(--green);width:18px;height:18px;flex:none}
.toast b{font-weight:700}
.toast .ago{display:block;color:var(--muted);font-size:11px;margin-top:1px}

@media(max-width:900px){
  .inc-grid{grid-template-columns:repeat(2,1fr)}
  .ugc-grid{grid-template-columns:1fr}
  .perso-row{grid-template-columns:1fr}
  .toast-host{bottom:84px;right:12px;left:12px;max-width:none}
}
@media(max-width:560px){
  .inc-grid{grid-template-columns:1fr 1fr}
  .fomo{flex-wrap:wrap;font-size:12.5px;align-items:flex-start}
  .fomo .sep{margin:0 6px;opacity:.5}
}
/* options : compactes mais zone tactile ≥44px sur mobile (coloris/modèle/finition) */
@media(max-width:620px){
  .opt,.opt-color{padding:8px 14px;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
  .opt-row{gap:8px}
  .opt-color .dot{width:14px;height:14px}
  .opt-label .val{display:none}
}

/* ── Galerie : zoom + lightbox ── */
.pdp-main{cursor:zoom-in;overflow:hidden}
.pdp-main img{transition:transform .5s}
.pdp-main:hover img{transform:scale(1.06)}
.pdp-zoom-hint{position:absolute;right:14px;bottom:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(8,8,8,.72);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transform:scale(.85);transition:.2s;pointer-events:none}
.pdp-main:hover .pdp-zoom-hint{opacity:1;transform:none}
.pdp-zoom-hint svg.ic{width:18px;height:18px}

/* ── Garanties & paiement sécurisé ── */
.guar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.guar{display:flex;gap:13px;align-items:flex-start;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--gray);transition:.25s}
.guar:hover{border-color:var(--orange)}
.guar svg.ic{width:26px;height:26px;color:var(--orange);flex:none}
.guar h4{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:14px;margin-bottom:2px}
.guar p{color:var(--muted-2);font-size:12px;line-height:1.45}
.pay-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.pay-row .lbl{font-family:var(--f-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px;color:var(--muted);margin-right:4px}
.pay{font-family:var(--f-cond);font-weight:700;letter-spacing:.5px;font-size:12px;color:#fff;border:1px solid var(--border-2);border-radius:5px;padding:8px 13px;background:#0d0d0d}

/* ── Endorsement ambassadeur ── */
.endorse{position:relative;border:1px solid var(--orange);border-radius:var(--radius);background:linear-gradient(120deg,rgba(255,77,0,.12),var(--gray));padding:26px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.endorse .av{width:64px;height:64px;border-radius:50%;border:1px solid var(--border-2);background:linear-gradient(160deg,var(--gray3),var(--black));display:flex;align-items:center;justify-content:center;color:var(--orange);flex:none}
.endorse .av svg.ic{width:32px;height:32px}
.endorse .et{flex:1;min-width:220px}
.endorse .et .k{font-family:var(--f-cond);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;color:var(--orange)}
.endorse .et h3{font-size:26px;margin:4px 0 5px}
.endorse .et p{color:var(--muted-2);font-size:13.5px}

/* ── Répartition des notes ── */
.rating-summary{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--gray);padding:26px 30px;margin-bottom:30px}
.rs-global{text-align:center;padding-right:30px;border-right:1px solid var(--border)}
.rs-global .n{font-family:var(--f-display);font-size:64px;color:var(--orange);line-height:1}
.rs-global .stars{color:var(--orange);display:flex;gap:2px;justify-content:center;margin:6px 0}
.rs-global .stars svg.ic{width:16px;height:16px}
.rs-global .c{color:var(--muted-2);font-size:12px}
.rs-bars{display:grid;gap:9px}
.rs-bar{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:12px;font-size:12px;color:var(--muted-2)}
.rs-bar .lab{display:flex;align-items:center;gap:4px;font-family:var(--f-cond);font-weight:600}
.rs-bar .lab svg.ic{width:12px;height:12px;color:var(--orange)}
.rs-track{height:8px;border-radius:40px;background:var(--gray3);overflow:hidden}
.rs-track span{display:block;height:100%;background:var(--orange);border-radius:40px}

@media(max-width:900px){
  .guar-grid{grid-template-columns:repeat(2,1fr)}
  .rating-summary{grid-template-columns:1fr;gap:20px}
  .rs-global{padding-right:0;border-right:0;border-bottom:1px solid var(--border);padding-bottom:18px}
}
@media(max-width:560px){
  .guar-grid{grid-template-columns:1fr}
}

/* ── Mobile : avis clients en carrousel (slide) ── */
@media(max-width:760px){
  .ugc-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;grid-template-columns:none}
  .ugc-grid::-webkit-scrollbar{display:none}
  .ugc-grid > .ugc{flex:0 0 82%;scroll-snap-align:start}
}