/* =========================================================
   banner.css — surcharges propres à index.html.
   Chargé APRÈS style.css sur index.html uniquement.
   Fichier séparé pour que style.css reste strictement intact.

   ORDRE : styles de base d'abord, media queries en dernier.
   ========================================================= */

/* ===== 1. BANDEAU VERS /plugins ===== */
.home-plugins-banner {
  display: block;
  position: relative;
  z-index: 1001;
  background: #6366F1;
  color: #F1F5F9;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  padding: 10px 16px;
  letter-spacing: -0.2px;
  transition: background 0.2s;
}

.home-plugins-banner:hover {
  background: #5558E3;
}

/* ===== 2. TARIFS — équivalent euro sous le prix FCFA ===== */
.pricing-price-eur {
  font-size: 13px;
  font-weight: 500;
  color: #94A3B8;
  margin: -0.25rem 0 0.75rem;
}

/* Disclaimer sous les boutons d'achat — même traitement que plugins.html */
.pricing-note {
  color: #94A3B8;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 0.85rem;
  text-align: center;
}

/* ===== 3. ÉCONOMIE ANNUELLE — montant FCFA plus long =====
   « Plus de 700 000 FCFA / an » ne tient plus dans la boîte de
   400 px à 3rem de style.css, et sous 768 px style.css impose
   white-space: nowrap sur .savings-amount, ce qui ferait déborder
   le texte à 380 px. Scopé sur #savings (spécificité d'id) pour
   l'emporter sur ces règles, y compris celles en media query. */
#savings .savings-highlight {
  max-width: 600px;
}

#savings .savings-amount {
  font-size: 2.5rem;
  line-height: 1.2;
  white-space: normal;
}


/* =========================================================
   MEDIA QUERIES — rien ne doit être ajouté après
   ========================================================= */

@media (max-width: 768px) {
  #savings .savings-amount {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .home-plugins-banner {
    font-size: 12px;
    padding: 8px 12px;
    line-height: 1.4;
  }

  #savings .savings-amount {
    font-size: 1.5rem;
  }
}