/* ═══════════════════════════════════════════════════════════════
   PISTE 3 — Override CSS pour CTA "Tout savoir sur RPM Boost & RPM Market"
   Cible : div.text-center.mt-12 contenant un lien vers rpm.rentability.fr
   Effet : séparateur horizontal gauche + bouton ghost + séparateur droit
   Injecté le : 27 juillet 2026
   Réversible : supprimer ce bloc CSS (ou l'include dans index.html)
   ═══════════════════════════════════════════════════════════════ */

/* Container : force flex-row avec séparateurs de chaque côté */
div.text-center.mt-12:has(> a[href*="rpm.rentability"]) {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  text-align: left !important;
  margin-top: 5rem !important; /* mt-20 au lieu de mt-12 : donne de l'air */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Séparateur : ligne dégradée avant + après le CTA */
div.text-center.mt-12:has(> a[href*="rpm.rentability"])::before,
div.text-center.mt-12:has(> a[href*="rpm.rentability"])::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.25) 100%);
}

div.text-center.mt-12:has(> a[href*="rpm.rentability"])::after {
  background: linear-gradient(-90deg, transparent, rgba(16, 185, 129, 0.25) 100%);
}

/* Le lien : bouton ghost émeraude avec bordure, radius pill, glow au hover */
div.text-center.mt-12:has(> a[href*="rpm.rentability"]) > a {
  flex-shrink: 0;
  padding: 0.875rem 1.75rem !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  background: rgba(16, 185, 129, 0.05) !important;
  color: rgb(110, 231, 183) !important; /* emerald-300 */
  transition: all 300ms ease-out !important;
  white-space: nowrap;
}

div.text-center.mt-12:has(> a[href*="rpm.rentability"]) > a:hover {
  border-color: rgba(52, 211, 153, 0.6) !important; /* emerald-400/60 */
  background: rgba(16, 185, 129, 0.10) !important;
  color: rgb(167, 243, 208) !important; /* emerald-200 */
  box-shadow: 0 0 32px -8px rgba(16, 185, 129, 0.4) !important;
}

/* Focus visible pour accessibilité clavier */
div.text-center.mt-12:has(> a[href*="rpm.rentability"]) > a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.6) !important;
}

/* Responsive : sur mobile, on empile les séparateurs plus courts */
@media (max-width: 640px) {
  div.text-center.mt-12:has(> a[href*="rpm.rentability"]) {
    gap: 1rem !important;
    padding: 0 1rem;
  }
  div.text-center.mt-12:has(> a[href*="rpm.rentability"]) > a {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.8125rem !important;
  }
}

/* Fallback pour navigateurs sans :has() (Firefox < 121, Safari < 15.4)
   → apparence par défaut inchangée, dégrade en lien émeraude sobre.
   Aucune régression visuelle : le CTA reste utilisable, juste sans les séparateurs. */