/**
 * PowerUp Compa — Styles spécifiques page comparatif par typologie
 * Extrait de templates/comparatif-categorie.html (maquette de référence)
 *
 * Ce fichier couvre UNIQUEMENT les classes propres à la page comparatif,
 * absentes de comparatif-design.css. Il est enqueué séparément par l'orchestrateur.
 *
 * Variables CSS attendues (définies dans comparatif-design.css) :
 *   --pu-c-primary, --pu-c-secondary, --pu-c-accent, --pu-c-text,
 *   --pu-c-bg, --pu-radius, --pu-radius-sm, --pu-radius-lg,
 *   --pu-shadow, --pu-shadow-hover, --pu-font, --pu-transition
 */

/* ─── SCORE PILL (absente de comparatif-design.css en dehors de sidebar) ─ */
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: .25rem .5rem;
  border-radius: var(--pu-radius-sm);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}
/* .sp-teal / .sp-yellow / .sp-red : définis dans comparatif-design.css.
   On surcharge uniquement la couleur de texte manquante dans la base. */
.sp-teal   { color: #fff; }
.sp-yellow { color: #fff; }
.sp-red    { color: #fff; }

/* ─── SECTION TITLE (comparatif) ─────────────────────────────────────────
   Distinct de .section-title dans comparatif-design.css (fiche produit).
   On utilise .cat-section-title pour la page comparatif.               */
.cat-section-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 3rem 0 1rem;
  color: var(--pu-c-accent);
}

/* ─── HERO CATÉGORIE ─────────────────────────────────────────────────────
   Fond primary, coin arrondi, meta en ligne.                            */
.cat-hero {
  background: var(--pu-c-primary);
  color: #fff;
  border-radius: var(--pu-radius-lg);
  padding: 2.5rem 2rem;
  margin-top: 1.5rem;
}
.cat-hero__eyebrow {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pu-c-secondary);
  margin-bottom: .5rem;
}
.cat-hero .cat-hero__title,
.cat-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin: 0 0 .75rem;
  color: #fff !important; /* le theme surcharge h1 (.entry-content h1) -> forcer le blanc */
  font-weight: 800;
  line-height: 1.1;
}
.cat-hero__desc {
  font-size: 1rem;
  max-width: 720px;
  opacity: .85;
  margin: 0 0 1.25rem;
}
/* Ligne de meta (date, compteur, note moyenne) */
.cat-hero__meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  opacity: .8;
  align-items: center;
}
.cat-hero__meta strong { color: var(--pu-c-secondary); }

/* ─── FILTER BAR ─────────────────────────────────────────────────────────
   Barre blanche, deux colonnes : filtres chips | tri select.            */
.filter-bar {
  background: #fff;
  border-radius: var(--pu-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--pu-shadow);
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}
.filter-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pu-c-text);
  margin-right: .5rem;
}
.filter-chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}
.filter-sort {
  display: flex;
  gap: .5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .filter-bar { grid-template-columns: 1fr; }
}

/* ─── RANKING TABLE — cellules spécifiques ────────────────────────────── */
/* rang */
.rank-cell {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pu-c-accent);
  text-align: center;
  min-width: 50px;
}
.rank-cell--gold { color: #d9a429; }

/* ligne surlignée or pour le top 3 */
.rank-row--top td {
  background: linear-gradient(
    90deg,
    rgba(240,190,80,.18),
    rgba(240,190,80,.06)
  ) !important;
}

/* nom produit + sous-ligne marque */
.product-name-cell {
  font-weight: 800;
  color: var(--pu-c-accent);
  text-decoration: none;
  display: block;
  line-height: 1.2;
}
.product-name-cell:hover { color: var(--pu-c-primary); }
.product-name-cell__brand {
  font-size: .75rem;
  font-weight: 600;
  color: var(--pu-c-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .15rem;
  display: block;
}

/* verdict textuel */
.verdict        { font-size: .85rem; font-weight: 700; }
.verdict--top   { color: #3a7a2a; }
.verdict--good  { color: var(--pu-c-primary); }
.verdict--avg   { color: #8a6a00; }
.verdict--low   { color: #8a1010; }

/* ─── BEST-IN-CLASS CARDS (sélection top 3+) ─────────────────────────── */
.best-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 0;
}
.best-card {
  background: #fff;
  border-radius: var(--pu-radius);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--pu-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--pu-c-primary);
  transition: box-shadow var(--pu-transition), transform var(--pu-transition);
}
.best-card:hover {
  box-shadow: var(--pu-shadow-hover);
  transform: translateY(-3px);
}
.best-card__eyebrow {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pu-c-primary);
}
.best-card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pu-c-accent);
  line-height: 1.25;
  margin: 0;
}
.best-card__brand {
  font-size: .8rem;
  color: var(--pu-c-text);
}
/* Ligne basse : score + prix */
.best-card__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(42,50,75,.08);
}
/* Données synthétiques (prot. · Leu · certif · origine) */
.best-card__data {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .75rem;
  color: var(--pu-c-text);
  margin-bottom: .25rem;
}
.best-card__data span { opacity: .85; }
/* Carte-lien : le thème (a / .entry-content a) colore et souligne le texte hérité.
   On neutralise pour retrouver le rendu sobre de la maquette. */
.best-card,
.best-card p,
.best-card .best-card__brand,
.best-card .best-card__data,
.best-card .best-card__data span,
.best-card .best-card__row span:not(.score-pill) { color: var(--pu-c-text) !important; text-decoration: none !important; }
.best-card .best-card__title   { color: var(--pu-c-accent) !important; }
.best-card .best-card__eyebrow { color: var(--pu-c-primary) !important; }
.best-card .best-card__row strong { color: var(--pu-c-accent) !important; }
.best-card .score-pill { color: #fff !important; } /* la pastille score reste blanche (ne pas griser) */

/* ─── TABLEAU COMPARAISON DÉTAILLÉE ──────────────────────────────────── */
.compare-wrap {
  overflow-x: auto;
  border-radius: var(--pu-radius);
  box-shadow: var(--pu-shadow);
  margin-top: 1rem;
}
.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
  font-size: .85rem;
}
.compare-table thead th {
  background: var(--pu-c-primary);
  color: #fff;
  padding: .85rem 1rem;
  font-weight: 700;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.compare-table thead th:first-child {
  text-align: left;
  min-width: 180px;
}
.compare-table tbody th {
  text-align: left;
  padding: .8rem 1rem;
  background: rgba(42,50,75,.04);
  font-weight: 700;
  color: var(--pu-c-accent);
  font-size: .85rem;
  border-bottom: 1px solid rgba(42,50,75,.08);
}
.compare-table tbody td {
  padding: .8rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(42,50,75,.08);
  color: var(--pu-c-text);
}
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th {
  background: rgba(40,105,127,.04);
}
/* Cellule meilleure valeur d'une ligne */
.cell-best {
  background: rgba(177,211,161,.25) !important;
  color: #2a5a1e;
  font-weight: 700;
}

/* ─── BUYER GUIDE GRID ───────────────────────────────────────────────── */
.buyer-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.buyer-guide-card {
  background: #fff;
  border-radius: var(--pu-radius);
  padding: 1.25rem;
  box-shadow: var(--pu-shadow);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border: 1px solid var(--pu-c-primary);
}
.buyer-guide-card__icon { font-size: 1.5rem; }
.buyer-guide-card h3 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--pu-c-accent);
  margin: 0;
  line-height: 1.25;
}
.buyer-guide-card p {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--pu-c-text);
  margin: 0;
  flex: 1;
}

/* ─── CELLULES RICHES DU TABLEAU DE CLASSEMENT ───────────────────────── */

/* Valeurs nutrition (protéine, Leucine, BCAA, lactose) */
.nutrition-cell         { font-size: .78rem; line-height: 1.6; white-space: nowrap; }
.nutrition-cell__line   { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
.nc-val                 { font-weight: 700; color: var(--pu-c-accent); }
.nc-val--good           { color: #3a7a2a; }
.nc-val--warn           { color: #8a6a00; }
.nc-val--bad            { color: #8a1010; }
.nc-sep                 { color: rgba(42,50,75,.2); font-size: .7rem; }

/* Certifications + origine */
.quality-cell           { font-size: .78rem; line-height: 1.7; }
.quality-cell__line     { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.qc-tag                 { display: inline-block; padding: .05rem .4rem; border-radius: 4px; font-size: .68rem; font-weight: 700; }
.qc-tag--certif         { background: rgba(40,105,127,.12); color: var(--pu-c-primary); }
.qc-tag--certif-gold    { background: rgba(217,164,41,.18); color: #7a5500; }
.qc-tag--origin         { background: rgba(42,50,75,.07); color: var(--pu-c-accent); }
.qc-tag--clean          { background: rgba(177,211,161,.3); color: #2a5a1e; }
.qc-tag--warn           { background: rgba(240,190,80,.2); color: #7a5500; }
.qc-tag--none           { background: rgba(42,50,75,.06); color: var(--pu-c-text); }

/* Note avis utilisateurs */
.avis-cell              { font-size: .78rem; white-space: nowrap; }
.avis-cell__stars       { color: #f0be50; letter-spacing: 1px; font-size: .8rem; }
.avis-cell__note        { font-weight: 800; color: var(--pu-c-accent); margin-left: .15rem; }
.avis-cell__count       { color: var(--pu-c-text); font-size: .72rem; display: block; margin-top: .05rem; }

/* Prix et comparaison à la moyenne */
.price-cell             { white-space: nowrap; }
.price-cell__val        { font-weight: 800; color: var(--pu-c-accent); font-size: .95rem; }
.price-cell__vs         { font-size: .7rem; color: var(--pu-c-text); display: block; margin-top: .05rem; }
.price-cell__vs--cheap  { color: #3a7a2a; font-weight: 700; }
.price-cell__vs--exp    { color: #8a6a00; font-weight: 700; }

/* Miniature produit dans le tableau */
.product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pu-c-secondary), rgba(40,105,127,.2));
  flex-shrink: 0;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: var(--pu-c-text);
  background: rgba(42,50,75,.08);
}

/* ─── INTRO ÉDITORIALE ───────────────────────────────────────────────────
   Bloc de texte riche optionnel sous le hero.                           */
.cat-intro {
  font-size: .97rem;
  line-height: 1.7;
  color: var(--pu-c-text);
  margin: 1.5rem 0;
}
.cat-intro p     { margin: 0 0 .9rem; }
.cat-intro p:last-child { margin-bottom: 0; }

/* ─── CHAMP INPUT (select de tri, etc.) ─────────────────────────────────
   Absent de comparatif-design.css ; requis pour le .filter-sort select. */
.pu-input {
  width: 100%;
  padding: .65rem 1rem;
  border: 1.5px solid rgba(42,50,75,.15);
  border-radius: var(--pu-radius-sm);
  font-family: var(--pu-font);
  font-size: 1rem;
  color: var(--pu-c-accent);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.pu-input:focus {
  border-color: var(--pu-c-primary);
  box-shadow: 0 0 0 3px rgba(40,105,127,.1);
}

/* ─── CTA BOX + BOUTON SOMBRE ────────────────────────────────────────────
   Définis aussi dans design-marque.css, répliqués ici pour autonomie
   du comparatif sans dépendre d'un autre fichier enqueué.              */
.pu-cta-box {
  padding: 2.5rem 2rem;
  border-radius: var(--pu-radius-lg);
  text-align: center;
}
.pu-cta-box--light {
  background: #fff;
  border: 1px solid rgba(42,50,75,.1);
  color: var(--pu-c-accent);
  box-shadow: var(--pu-shadow);
}
.pu-cta-box__eyebrow {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .65;
  margin-bottom: .5rem;
  color: inherit;
}
.pu-cta-box__title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .75rem;
  color: inherit;
}
.pu-cta-box__desc {
  font-size: .95rem;
  opacity: .8;
  margin-bottom: 1.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
/* ─── LÉGENDE COULEURS SOUS LE TABLEAU ────────────────────────────────── */
.table-legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  font-size: .75rem;
  color: var(--pu-c-text);
  padding: .5rem .25rem;
}

/* ─── CTA BAS DE PAGE ────────────────────────────────────────────────── */
/* .pu-cta-box est déjà dans comparatif-design.css — on surcharge la couleur
   de fond via style inline dans le template.                            */

/* ─── RESPONSIVE COMPARATIF ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-hero        { padding: 1.5rem 1rem; }
  .best-cards      { grid-template-columns: 1fr; }
  .buyer-guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .filter-bar      { padding: .75rem 1rem; }
  .cat-section-title { font-size: 1.4rem; margin: 2rem 0 .75rem; }
}

/* ── Encadrés "Notre avis" par marque ─────────────────────────────────────── */
.pu-bv-section { margin: 2.5rem 0; }
.pu-bv-section__lead { color: var(--pu-c-text); margin: -.25rem 0 1.25rem; font-size: .95rem; }
.pu-bv {
  background: var(--pu-c-white, #fff);
  border: 1px solid rgba(40, 105, 127, .18);
  border-radius: var(--pu-radius, 12px);
  padding: 1.1rem 1.25rem 1.2rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 2px rgba(42, 50, 75, .04);
}
.pu-bv__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.pu-bv__rank {
  flex: 0 0 auto; min-width: 2.4rem; height: 2.4rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pu-c-primary); color: #fff; font-weight: 800; font-size: .95rem;
}
.pu-bv:first-of-type .pu-bv__rank { background: #b8860b; }
.pu-bv__logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.pu-bv__id { flex: 1 1 auto; min-width: 0; }
.pu-bv__brand { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--pu-c-accent); line-height: 1.2; }
.pu-bv__brand a { color: inherit; text-decoration: none; }
.pu-bv__brand a:hover { color: var(--pu-c-primary); }
.pu-bv__trust { margin: .15rem 0 0; font-size: .8rem; color: var(--pu-c-text); }
.pu-bv__head .score-pill { flex: 0 0 auto; }
.pu-bv__text p { margin: 0 0 .6rem; line-height: 1.65; }
.pu-bv__facts { list-style: none; margin: .4rem 0 .2rem; padding: 0; }
.pu-bv__product {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .55rem .75rem; margin: 0 0 .45rem;
  border-left: 3px solid var(--pu-c-secondary, #B1D3A1);
  background: rgba(177, 211, 161, .12); border-radius: 0 8px 8px 0;
}
.pu-bv__pname { font-weight: 700; color: var(--pu-c-accent); }
a.pu-bv__pname:hover { color: var(--pu-c-primary); }
.pu-bv__meta, .pu-bv__quality, .pu-bv__evo { font-size: .85rem; color: var(--pu-c-text); line-height: 1.45; }
.pu-bv__quality::before { content: "Qualité : "; font-weight: 700; color: var(--pu-c-accent); }
.pu-bv__evo { font-weight: 600; color: var(--pu-c-primary); }
.pu-bv__fit { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.pu-bv__fit p { margin: 0; padding: .55rem .75rem; border-radius: 8px; font-size: .9rem; line-height: 1.5; }
.pu-bv__fit-yes { background: rgba(40, 105, 127, .08); }
.pu-bv__fit-no  { background: rgba(138, 106, 0, .08); }
.pu-bv__fit strong { display: block; color: var(--pu-c-accent); margin-bottom: .1rem; }
@media (max-width: 640px) {
  .pu-bv { padding: .9rem .9rem 1rem; }
  .pu-bv__fit { grid-template-columns: 1fr; }
  .pu-bv__logo { width: 36px; height: 36px; }
  .pu-bv__brand { font-size: 1.05rem; }
}