/* promo-spotlight.css — Nova Épargne
   Bloc "offre en cours" injecté sur les pages produit dédiées (PEA, CTO, etc.).

   Autonome et préfixé (.promo-spotlight / .ps-*) pour ne jamais entrer en
   collision avec nova.css. Le conteneur reste INVISIBLE tant que le script
   d'injection (phase 2) ne l'a pas rempli : il porte l'attribut [hidden] par
   défaut, et le script le retire seulement s'il trouve une offre active pour
   ce partenaire. On peut donc poser le conteneur sur toutes les pages dès
   maintenant, sans rien afficher tant que la phase 2 n'existe pas.

   La variante Défi Épargne (îlot sombre, phase 3) se fera plus tard en
   surchargeant uniquement les variables --ps-* ci-dessous, sans toucher à la
   structure. */

.promo-spotlight {
  --ps-card-bg: #f4f7f1;
  --ps-card-border: #d9e4d1;
  --ps-accent: #6f9266;
  --ps-logo-bg: #ffffff;
  --ps-logo-border: #e4ebde;
  --ps-badge-bg: #e4ecdd;
  --ps-badge-text: #3f5539;
  --ps-title-color: #2f3b2c;
  --ps-desc-color: #5c6b56;
  --ps-cta-bg: #6f9266;
  --ps-cta-bg-hover: #5f8057;
  --ps-cta-color: #ffffff;
  --ps-radius: 12px;

  width: min(1120px, calc(100% - 40px));
  margin: 1.5rem auto;
  font-family: inherit;
}

.promo-spotlight[hidden] { display: none; }

.ps-card {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--ps-card-bg);
  border: 1px solid var(--ps-card-border);
  border-left: 3px solid var(--ps-accent);
  border-radius: var(--ps-radius);
  padding: 20px;
}

.ps-logo {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ps-logo-bg);
  border: 1px solid var(--ps-logo-border);
  border-radius: var(--ps-radius);
  padding: 10px;
  box-sizing: border-box;
}

.ps-logo img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

.ps-body {
  flex: 1;
  min-width: 220px;
}

.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ps-badge-bg);
  color: var(--ps-badge-text);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.ps-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ps-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .ps-badge-dot { animation: ps-pulse 2s ease-in-out infinite; }
}

@keyframes ps-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.ps-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ps-title-color);
  margin-bottom: 6px;
}

.ps-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ps-desc-color);
}

.ps-cta {
  align-self: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ps-cta-bg);
  color: var(--ps-cta-color);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.ps-cta:hover { background: var(--ps-cta-bg-hover); }

@media (max-width: 560px) {
  .ps-cta { width: 100%; justify-content: center; }
}