/* ============================================================
   PARFUM COMPARATEUR — CSS Production v3.0
   Design System : Punchy / Tech-Startup / Pop
   Palette : Violet #6C5CE7 · Turquoise #00CEC9 · Rose #FD79A8
   ============================================================ */

:root {
  /* ── Couleurs principales ─────────────────────────────────── */
  --pc-primary:       #6C5CE7;
  --pc-primary-light: #A29BFE;
  --pc-primary-dark:  #5A4BD1;
  --pc-secondary:     #00CEC9;
  --pc-secondary-light: #81ECEC;
  --pc-accent:        #FD79A8;
  --pc-accent-warm:   #FDCB6E;

  /* ── Couleurs fonctionnelles ──────────────────────────────── */
  --pc-success:       #00B894;
  --pc-warning:       #FDCB6E;
  --pc-danger:        #FF6B6B;
  --pc-info:          #74B9FF;

  /* ── Surfaces ─────────────────────────────────────────────── */
  --pc-bg-page:       #F8F9FE;
  --pc-bg-card:       #FFFFFF;
  --pc-bg-section:    #FFFFFF;
  --pc-bg-input:      #FFFFFF;
  --pc-text-main:     #2D3436;
  --pc-text-sub:      #636E72;
  --pc-text-light:    #B2BEC3;
  --pc-border:        #E8ECF1;
  --pc-border-light:  #F1F3F8;

  /* ── Effets ───────────────────────────────────────────────── */
  --pc-shadow:        0 4px 24px rgba(108,92,231,.08);
  --pc-shadow-lg:     0 12px 40px rgba(108,92,231,.12);
  --pc-shadow-hover:  0 16px 48px rgba(108,92,231,.16);
  --pc-radius:        12px;
  --pc-radius-lg:     16px;
  --pc-radius-xl:     20px;
  --pc-radius-pill:   50px;

  /* ── Typographie ──────────────────────────────────────────── */
  --pc-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Gradients ────────────────────────────────────────────── */
  --pc-grad-hero:     linear-gradient(135deg, #6C5CE7 0%, #a855f7 50%, #FD79A8 100%);
  --pc-grad-cta:      linear-gradient(135deg, #6C5CE7, #5A4BD1);
  --pc-grad-success:  linear-gradient(135deg, #00B894, #00CEC9);
  --pc-grad-accent:   linear-gradient(135deg, #FD79A8, #FDCB6E);
  --pc-grad-warm:     linear-gradient(135deg, #FDCB6E, #FD79A8);

  /* ── Anciennes variables (compat) ─────────────────────────── */
  --pc-navy:          #2D3436;
  --pc-gold:          #FDCB6E;
  --pc-cream:         #F8F9FE;
  --pc-white:         #FFFFFF;
  --pc-green:         #00B894;
  --pc-red:           #FF6B6B;
  --pc-orange:        #FDCB6E;
  --pc-grey:          #636E72;
  --pc-border-col:    #E8ECF1;
  --pc-bg-hero:       var(--pc-grad-hero);
  --pc-hero-bg:       var(--pc-primary);
  --pc-hero-text:     #FFFFFF;
}

/* ── BASE ─────────────────────────────────────────────────── */

.pc-single-parfum { background: var(--pc-bg-page); }
.pc-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.pc-section-title {
  font-family: var(--pc-font);
  font-size: 28px;
  color: var(--pc-text-main);
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.pc-section-sub { color: var(--pc-text-sub); margin: 0 0 24px; font-size: 15px; }

/* ── HERO ─────────────────────────────────────────────────── */

.pc-hero {
  background: var(--pc-grad-hero);
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
}
.pc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,206,201,.1) 0%, transparent 50%);
  pointer-events: none;
}
.pc-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: var(--pc-bg-page);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.pc-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pc-hero__image {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border-radius: var(--pc-radius-lg);
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.pc-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-hero__img-placeholder svg { width: 80px; opacity: .4; }

.pc-hero__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.pc-badge-marque {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 5px 16px;
  border-radius: var(--pc-radius-pill);
  font-size: 13px;
  font-family: var(--pc-sans);
  text-decoration: none;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.25);
  transition: all .2s;
  font-weight: 600;
}
.pc-badge-marque:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }

.pc-badge-statut {
  color: #fff;
  padding: 5px 16px;
  border-radius: var(--pc-radius-pill);
  font-size: 12px;
  font-family: var(--pc-sans);
  font-weight: 700;
  letter-spacing: .3px;
}
.pc-badge-famille {
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-family: var(--pc-sans);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-hero__title {
  font-family: var(--pc-font);
  font-size: clamp(28px, 4vw, 48px);
  color: #fff;
  font-weight: 900;
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -1px;
}
.pc-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  font-family: var(--pc-sans);
  margin-bottom: 28px;
}
.pc-hero__specs span::before { content: '· '; }
.pc-hero__specs span:first-child::before { content: ''; }

.pc-hero__prix-block {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pc-hero__prix-label {
  color: rgba(255,255,255,.6);
  font-size: 13px;
  font-family: var(--pc-sans);
}
.pc-hero__prix-value {
  font-size: 42px;
  font-family: var(--pc-font);
  color: #fff;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.pc-btn-primary {
  background: #fff;
  color: var(--pc-primary);
  padding: 14px 32px;
  border-radius: var(--pc-radius);
  font-family: var(--pc-sans);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: .3px;
  transition: all .25s;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pc-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  background: #fff;
}

/* ── PYRAMIDE OLFACTIVE ───────────────────────────────────── */

.pc-notes-section {
  padding: 56px 0;
  background: var(--pc-bg-section);
  border-bottom: 1px solid var(--pc-border);
}
.pc-pyramide {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 560px;
  margin: 0 0 32px;
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow);
}
.pc-pyramide__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  padding: 16px 20px;
  gap: 16px;
}
.pc-pyramide__tete  { background: linear-gradient(135deg, rgba(108,92,231,.08), rgba(168,85,247,.06)); }
.pc-pyramide__coeur { background: linear-gradient(135deg, rgba(0,206,201,.08), rgba(108,92,231,.06)); }
.pc-pyramide__fond  { background: linear-gradient(135deg, rgba(253,121,168,.08), rgba(253,203,110,.06)); }
.pc-pyramide__label {
  font-family: var(--pc-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--pc-primary);
}
.pc-pyramide__notes {
  font-family: var(--pc-sans);
  font-size: 14px;
  color: var(--pc-text-main);
  font-weight: 500;
}

.pc-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pc-attr {
  background: var(--pc-bg-page);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all .2s;
}
.pc-attr:hover { border-color: var(--pc-primary-light); box-shadow: var(--pc-shadow); }
.pc-attr__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pc-text-sub);
  font-family: var(--pc-sans);
  font-weight: 600;
}
.pc-attr__value {
  font-size: 14px;
  color: var(--pc-text-main);
  font-family: var(--pc-sans);
  text-transform: capitalize;
  font-weight: 600;
}

/* ── DESCRIPTION ──────────────────────────────────────────── */

.pc-description-section { padding: 56px 0; background: var(--pc-bg-page); }
.pc-description-inner { max-width: 720px; }
.pc-description-body {
  font-family: var(--pc-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--pc-text-main);
}
.pc-description-body p { margin: 0 0 20px; }

/* ── COMPARATEUR SECTION ──────────────────────────────────── */

.pc-comparateur-section {
  padding: 56px 0;
  background: var(--pc-bg-section);
}

/* Sélecteur de volume */
.pc-volume-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pc-volume-label {
  font-size: 13px;
  font-family: var(--pc-sans);
  color: var(--pc-text-sub);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pc-volume-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.pc-volume-btn {
  padding: 8px 20px;
  border: 2px solid var(--pc-border);
  background: transparent;
  border-radius: var(--pc-radius);
  font-size: 14px;
  font-family: var(--pc-sans);
  cursor: pointer;
  color: var(--pc-text-main);
  transition: all .2s;
  font-weight: 600;
}
.pc-volume-btn:hover { border-color: var(--pc-primary); color: var(--pc-primary); }
.pc-volume-btn.active {
  background: var(--pc-grad-cta);
  border-color: var(--pc-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(108,92,231,.25);
}

/* Tableau comparateur */
.pc-table-wrapper {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  box-shadow: var(--pc-shadow);
}
.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pc-sans);
}
.pc-table thead tr {
  background: var(--pc-grad-cta);
  color: rgba(255,255,255,.9);
}
.pc-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--pc-border);
  vertical-align: middle;
  font-size: 15px;
  color: var(--pc-text-main);
}
.pc-table tr:last-child td { border-bottom: none; }
.pc-table tbody tr { transition: all .15s; }
.pc-table tbody tr:hover { background: var(--pc-bg-page); }
.pc-row-best td { background: rgba(0,184,148,.06) !important; }

/* Cellule boutique */
.pc-cell-boutique { display: flex; align-items: center; gap: 10px; }
.pc-boutique-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg-card);
  padding: 3px;
  flex-shrink: 0;
}
.pc-boutique-nom { font-weight: 700; }
.pc-badge-best {
  display: inline-block;
  background: var(--pc-grad-success);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--pc-radius-pill);
  letter-spacing: .5px;
  margin-left: 6px;
  text-transform: uppercase;
}
.pc-badge-promo {
  background: var(--pc-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--pc-radius-pill);
  letter-spacing: .3px;
  margin-left: 6px;
}

/* Cellule prix */
.pc-prix { font-size: 20px; font-weight: 800; color: var(--pc-text-main); }
.pc-prix-barre { text-decoration: line-through; color: var(--pc-text-light); font-size: 13px; margin-right: 6px; }
.pc-economie {
  display: inline-block;
  background: rgba(255,107,107,.1);
  color: var(--pc-danger);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--pc-radius-pill);
  margin-left: 6px;
}
.pc-code-promo {
  display: inline-block;
  font-size: 11px;
  background: rgba(108,92,231,.08);
  color: var(--pc-primary);
  border: 1px dashed var(--pc-primary-light);
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  font-weight: 600;
}

/* Disponibilité */
.pc-dispo-stock    { color: var(--pc-success); font-weight: 700; }
.pc-dispo-rupture  { color: var(--pc-danger);  font-weight: 700; }
.pc-dispo-commande { color: var(--pc-warning); font-weight: 700; }

/* Bouton voir offre */
.pc-btn-offre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pc-grad-cta);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--pc-radius);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .25s;
  box-shadow: 0 4px 16px rgba(108,92,231,.2);
}
.pc-btn-offre:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108,92,231,.3); }
.pc-btn-indispo {
  color: var(--pc-text-light);
  font-size: 13px;
  font-style: italic;
}
.pc-btn-alerte {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 2px solid var(--pc-border);
  color: var(--pc-text-sub);
  padding: 8px 16px;
  border-radius: var(--pc-radius);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  font-weight: 600;
  transition: all .2s;
}
.pc-btn-alerte:hover { border-color: var(--pc-primary); color: var(--pc-primary); }

/* Score boutique */
.pc-score-mini {
  font-size: 12px;
  color: var(--pc-text-sub);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.pc-stars { color: var(--pc-accent-warm); font-size: 12px; letter-spacing: -1px; }

/* Disclaimer */
.pc-disclaimer {
  margin-top: 20px;
  font-size: 12px;
  color: var(--pc-text-light);
  font-family: var(--pc-sans);
  line-height: 1.6;
}

/* ── DUPES SECTION ────────────────────────────────────────── */

.pc-dupes-section {
  padding: 56px 0;
  background: var(--pc-bg-page);
  border-top: 1px solid var(--pc-border);
}
.pc-dupes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.pc-dupe-card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.pc-dupe-card:hover {
  box-shadow: var(--pc-shadow-hover);
  transform: translateY(-4px);
  border-color: var(--pc-primary-light);
}
.pc-dupe-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--pc-bg-page);
  display: block;
}
.pc-dupe-card__img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--pc-bg-page), rgba(108,92,231,.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-border);
  font-size: 40px;
}
.pc-dupe-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pc-dupe-card__marque {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pc-primary);
  font-family: var(--pc-sans);
  font-weight: 700;
}
.pc-dupe-card__nom {
  font-family: var(--pc-font);
  font-size: 17px;
  color: var(--pc-text-main);
  margin: 0;
  font-weight: 700;
}
.pc-dupe-card__stars { color: var(--pc-accent-warm); font-size: 13px; letter-spacing: -1px; }
.pc-dupe-card__prix {
  font-size: 22px;
  font-family: var(--pc-font);
  color: var(--pc-text-main);
  margin-top: auto;
  font-weight: 800;
}
.pc-dupe-card__footer { padding: 12px 16px; border-top: 1px solid var(--pc-border); }
.pc-dupe-card__btn {
  display: block;
  text-align: center;
  background: var(--pc-grad-cta);
  color: #fff;
  padding: 11px;
  border-radius: var(--pc-radius);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--pc-sans);
  transition: all .25s;
  box-shadow: 0 4px 16px rgba(108,92,231,.15);
}
.pc-dupe-card__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,92,231,.25); }

.pc-ifra-badge {
  font-size: 10px;
  background: rgba(0,184,148,.1);
  color: var(--pc-success);
  padding: 3px 10px;
  border-radius: var(--pc-radius-pill);
  font-weight: 700;
  display: inline-block;
}

/* ── ÉTATS DE CHARGEMENT ──────────────────────────────────── */

.pc-loading-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px;
  color: var(--pc-text-sub);
  font-family: var(--pc-sans);
  font-size: 14px;
}
.pc-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--pc-border);
  border-top-color: var(--pc-primary);
  border-radius: 50%;
  animation: pc-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

.pc-empty-state {
  padding: 48px;
  text-align: center;
  color: var(--pc-text-sub);
  font-family: var(--pc-sans);
  font-size: 15px;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .pc-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .pc-hero__image { max-width: 220px; }
  .pc-hero__prix-block { flex-wrap: wrap; gap: 12px; }
  .pc-table th:nth-child(4),
  .pc-table td:nth-child(4) { display: none; }
  .pc-table th:nth-child(5),
  .pc-table td:nth-child(5) { display: none; }
  .pc-dupes-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 480px) {
  .pc-table th:nth-child(3),
  .pc-table td:nth-child(3) { display: none; }
}