@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat:wght@800;900&display=swap");

/* ===== Devenir Riche — classes utilitaires ===== */
.dr-page { background: var(--bg-base); color: var(--ink); font-family: var(--font-body); }

/* Titres */
.dr-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 1; color: var(--gold-500); }
.dr-title--shine {
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 55%, var(--gold-700) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.dr-overline { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-500); }

/* Bouton CTA */
.dr-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 72px; padding: var(--space-6) var(--space-12);
  font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); background: var(--red-500); border: 0; border-radius: var(--radius-md);
  box-shadow: var(--shadow-cta); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dr-cta:hover { background: var(--red-400); box-shadow: var(--shadow-cta-hover); transform: translateY(-2px); }
.dr-cta:active { box-shadow: var(--shadow-cta-active); transform: translateY(6px); }
.dr-cta:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 4px; }
.dr-cta--xl { min-height: 88px; font-size: 26px; padding: var(--space-8) var(--space-16); }
.dr-cta--block { display: flex; width: 100%; }
.dr-cta--pulse { animation: dr-pulse 1.6s ease-in-out infinite; }
@keyframes dr-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .dr-cta--pulse { animation: none; } }

/* Badge de garantie */
.dr-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-500); background: var(--bg-base); border: 2px solid var(--gold-500); box-shadow: var(--glow-gold);
}
.dr-badge--solid { color: var(--on-gold); background: var(--gold-500); border-color: var(--gold-700); }

/* Bandeau d'urgence */
.dr-urgency {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--red-500); border-bottom: 3px solid var(--red-700);
  font-family: var(--font-display); font-weight: 900; font-size: 16px; text-transform: uppercase; color: var(--ink);
}
.dr-urgency__timer { font-variant-numeric: tabular-nums; background: var(--bg-base); color: var(--gold-500); padding: 2px var(--space-2); border-radius: var(--radius-sm); }

/* Encart d'offre */
.dr-offer {
  background: var(--bg-raised); border: 2px solid var(--gold-500); border-radius: var(--radius-lg);
  box-shadow: var(--glow-gold), var(--shadow-card); padding: var(--space-8);
}
.dr-price-old { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--red-500); text-decoration-thickness: 3px; }
.dr-price { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1; color: var(--gold-500); }

/* Pied de page : mentions légales (obligatoire, discret) */
.dr-legal-link { display: block; font-size: 13px; color: var(--ink-muted); text-align: center; padding: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dr-legal-link a { color: inherit; text-decoration: underline; }

/* Écran de révélation (destination de tout CTA d'achat) */
.dr-reveal {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6);
  padding: var(--space-12) var(--space-4); background: var(--bg-base); color: var(--ink); text-align: center;
}