/* ══════════════════════════════════════════════════════
   product-page.css — Pages produit PC Gaming (style fiche
   produit e-commerce) pour FixCenter.
   À inclure APRÈS base.css :
   <link rel="stylesheet" href="base.css">
   <link rel="stylesheet" href="product-page.css">
   ══════════════════════════════════════════════════════ */

/* ── BREADCRUMB ── */
.prod-breadcrumb {
  padding: 6.5rem 4% 0;
  max-width: 1240px; margin: 0 auto;
}
.prod-breadcrumb-inner {
  font-size: .8rem; color: var(--sub); display: flex; gap: .5rem; align-items: center;
}
.prod-breadcrumb-inner a { color: var(--sub); text-decoration: none; transition: color .2s; }
.prod-breadcrumb-inner a:hover { color: var(--text); }
.prod-breadcrumb-inner .sep { color: var(--muted); }
.prod-breadcrumb-inner .current { color: var(--text); }

/* ── LAYOUT PRINCIPAL FICHE PRODUIT ── */
.prod-main {
  padding: 2rem 4% 5rem;
  max-width: 1240px; margin: 0 auto;
}
.prod-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}

/* ── GALERIE D'IMAGES ── */
.prod-gallery { position: sticky; top: 90px; }
.prod-gallery-main {
  width: 100%; aspect-ratio: 1/1;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 1rem; position: relative;
}
.prod-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.prod-gallery-main .ph-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: var(--muted);
}
.prod-gallery-main .ph-ico { font-size: 3.5rem; }
.prod-gallery-main .ph-label { font-size: .85rem; }

.prod-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.prod-thumb {
  aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s; position: relative;
}
.prod-thumb.active { border-color: var(--blue); }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-thumb .ph-ico { font-size: 1.3rem; color: var(--muted); }

/* ── INFOS PRODUIT (colonne droite) ── */
.prod-info-tier {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Syne', sans-serif; font-size: .75rem; font-weight: 700;
  color: var(--blue); background: var(--blue-lo);
  padding: .4rem .9rem; border-radius: 99px; margin-bottom: 1rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.prod-info h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800; letter-spacing: -1px; line-height: 1.12; margin-bottom: .9rem;
}
.prod-info-tagline { font-size: 1rem; color: var(--sub); line-height: 1.7; margin-bottom: 1.6rem; }

.prod-rating { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.8rem; }
.prod-stars { color: #fbbf24; font-size: .95rem; letter-spacing: 1px; }
.prod-rating-text { font-size: .82rem; color: var(--sub); }

.prod-price-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.6rem 1.8rem; margin-bottom: 1.6rem;
}
.prod-price-row { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.prod-price-val { font-family: 'Syne', sans-serif; font-size: 2.1rem; font-weight: 800; letter-spacing: -1px; }
.prod-price-unit { font-size: .85rem; color: var(--sub); }
.prod-price-note { font-size: .8rem; color: var(--sub); line-height: 1.6; }
.prod-stock {
  display: flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-size: .85rem; color: #4ade80; font-weight: 600;
}
.prod-stock .dot-stock {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  animation: blink 1.8s ease-in-out infinite;
}

.prod-cta-group { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2rem; }
.prod-cta-group .btn-primary, .prod-cta-group .btn-ghost {
  width: 100%; text-align: center; padding: 1rem 1.5rem; font-size: 1rem;
}

.prod-trust { display: flex; flex-direction: column; gap: .9rem; }
.prod-trust-item {
  display: flex; align-items: center; gap: .8rem; font-size: .85rem; color: var(--sub);
}
.prod-trust-item .ti-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}

/* ── SPECS DÉTAILLÉES ── */
.prod-specs-section { padding: 5rem 4%; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prod-specs-table {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-radius: 16px; overflow: hidden;
}
.prod-spec-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.6rem; background: var(--bg);
}
.prod-spec-label { font-size: .85rem; color: var(--sub); font-weight: 500; }
.prod-spec-val { font-size: .85rem; font-weight: 700; text-align: right; }

/* ── POINTS FORTS ── */
.prod-highlights { padding: 5rem 4%; max-width: 1240px; margin: 0 auto; }
.prod-highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.prod-highlight-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.8rem;
}
.prod-highlight-ico { font-size: 1.8rem; margin-bottom: 1rem; display: block; }
.prod-highlight-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.prod-highlight-card p { font-size: .85rem; color: var(--sub); line-height: 1.65; }

/* ── USAGES / PERFORMANCES JEUX ── */
.prod-perf { padding: 5rem 4%; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prod-perf-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.prod-perf-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.4rem; text-align: center;
}
.prod-perf-game { font-size: .85rem; font-weight: 700; margin-bottom: .8rem; }
.prod-perf-bar-bg {
  height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin-bottom: .6rem;
}
.prod-perf-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), #6ea3ff); border-radius: 99px; }
.prod-perf-fps { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--blue); }
.prod-perf-res { font-size: .72rem; color: var(--sub); }

/* ── AUTRES CONFIGS (cross-sell type Amazon) ── */
.prod-related { padding: 5rem 4%; max-width: 1240px; margin: 0 auto; }
.prod-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.prod-related-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: border-color .25s, transform .25s; display: block;
}
.prod-related-card:hover { border-color: rgba(61,127,255,.35); transform: translateY(-4px); }
.prod-related-visual {
  aspect-ratio: 16/10; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.prod-related-visual img { width: 100%; height: 100%; object-fit: cover; }
.prod-related-visual .ph-ico { font-size: 2rem; color: var(--muted); }
.prod-related-body { padding: 1.4rem; }
.prod-related-tier { font-size: .7rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .4rem; }
.prod-related-body h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: .5rem; }
.prod-related-specs { font-size: .78rem; color: var(--sub); margin-bottom: 1rem; line-height: 1.5; }
.prod-related-price { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 800; }
.prod-related-price span { font-size: .75rem; color: var(--sub); font-weight: 500; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .prod-grid { grid-template-columns: 1fr; gap: 2rem; }
  .prod-gallery { position: static; }
  .prod-specs-table { grid-template-columns: 1fr; }
  .prod-highlights-grid { grid-template-columns: 1fr 1fr; }
  .prod-perf-grid { grid-template-columns: 1fr 1fr; }
  .prod-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .prod-breadcrumb { padding: 6rem 5% 0; }
  .prod-thumbs { grid-template-columns: repeat(4, 1fr); }
  .prod-highlights-grid { grid-template-columns: 1fr; }
  .prod-perf-grid { grid-template-columns: 1fr 1fr; }
  .prod-related-grid { grid-template-columns: 1fr; }
  .prod-spec-row { flex-direction: column; gap: .3rem; }
  .prod-spec-val { text-align: left; }
}