/* ============================================================
   ANIMAL SHADOW · Cartes produit et transparence affiliation
   ============================================================
   Les articles comparatifs du Journal utilisent les blocs .prod
   (recommandations materiel). Ces classes n'avaient AUCUN style :
   les cartes s'affichaient en texte brut sur les 6 articles qui
   portent les liens affilies. Ce fichier repare ca, dans la DA.

   Palette : voir css/variables.css. Rappel des regles du DA.md :
   - #ae0000 en aplats, bordures et fonds UNIQUEMENT
   - tout rouge en couleur de texte passe par #e74c3c (--c-error)
   - or #d4a84b pour les prix, le focus et les liseres
   ============================================================ */

/* ---------- Mention Partenaire Amazon (obligatoire) ---------- */
/* Placee AVEC le contenu qui porte les liens, pas seulement en pied
   de page. Conditions Associes Amazon, section 5. */
.aff-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 2.2rem 0;
  padding: 1rem 1.15rem;
  background: #111111;
  border: 1px solid #2a2a2a;
  border-left: 3px solid var(--c-red, #ae0000);
  font-family: var(--ff-body, 'Montserrat', sans-serif);
  font-size: 0.82rem;
  line-height: 1.6;
  color: #bdbab5;
}
.aff-notice__mark {
  flex: 0 0 auto;
  font-family: var(--ff-display, 'Oswald', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold, #d4a84b);
  padding-top: 0.15rem;
  white-space: nowrap;
}
.aff-notice p { margin: 0; }
.aff-notice b { color: #f5f5f5; font-weight: 600; }

/* ---------- Carte produit ---------- */
.prod {
  position: relative;
  display: grid;
  gap: 0.55rem;
  margin: 2rem 0;
  padding: 1.5rem 1.5rem 1.35rem;
  background: #111111;
  border: 1px solid #2a2a2a;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.prod:hover {
  border-color: #3a352d;
  transform: translateY(-2px);
}

/* Rang, en pastille or sur le bord haut */
.prod__rank {
  position: absolute;
  top: -1px;
  left: -1px;
  font-family: var(--ff-display, 'Oswald', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--c-gold, #d4a84b);
  padding: 0.3rem 0.7rem;
  line-height: 1.4;
}

.prod__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
}
.prod .badge {
  font-family: var(--ff-display, 'Oswald', sans-serif);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border: 1px solid #3a352d;
  color: #bdbab5;
  line-height: 1.5;
}
.prod .badge--green { border-color: rgba(46, 204, 113, 0.45); color: #7fd8a4; }
.prod .badge--red { border-color: rgba(174, 0, 0, 0.5); color: var(--c-error, #e74c3c); }
.prod .badge--gold { border-color: var(--c-gold-dark, #b08930); color: var(--c-gold, #d4a84b); }

.prod__cat {
  font-family: var(--ff-body, 'Montserrat', sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d8a84;
}

.prod__name {
  font-family: var(--ff-heading, 'Oswald', sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: #f5f5f5;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.prod__brand {
  font-family: var(--ff-body, 'Montserrat', sans-serif);
  font-size: 0.75rem;
  color: var(--c-gold, #d4a84b);
  letter-spacing: 0.06em;
}

.prod__price {
  font-family: var(--ff-display, 'Oswald', sans-serif);
  font-size: 1.1rem;
  color: var(--c-gold, #d4a84b);
  font-variant-numeric: tabular-nums;
}

.prod__why,
.prod__specs,
.prod__for,
.prod__against {
  font-family: var(--ff-body, 'Montserrat', sans-serif);
  font-size: 0.9rem;
  line-height: 1.65;
  color: #bdbab5;
  margin: 0;
}
.prod__for,
.prod__against {
  padding: 0.6rem 0.85rem;
  background: #0d0d0d;
  border-left: 2px solid #2a2a2a;
  font-size: 0.85rem;
}
.prod__for { border-left-color: var(--c-gold-dark, #b08930); }
.prod__against { border-left-color: var(--c-red, #ae0000); }
.prod__for strong,
.prod__against strong {
  color: #f5f5f5;
  font-weight: 600;
}

/* Bouton d'achat : aplat rouge, texte blanc (jamais de rouge en texte) */
.prod__btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.72rem 1.3rem;
  background: var(--c-red, #ae0000);
  color: #ffffff;
  font-family: var(--ff-display, 'Oswald', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-red, #ae0000);
  transition: background 0.2s ease, transform 0.2s ease;
}
.prod__btn:hover {
  background: #8a0000;
  transform: translateX(2px);
}
.prod__btn:focus-visible {
  outline: 2px solid var(--c-gold, #d4a84b);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .prod { padding: 1.25rem 1.1rem 1.15rem; }
  .prod__btn { width: 100%; justify-content: center; }
  .aff-notice { flex-direction: column; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .prod,
  .prod:hover,
  .prod__btn,
  .prod__btn:hover { transition: none; transform: none; }
}