/* ==========================================================================
   Cartes de formules de /premium
   --------------------------------------------------------------------------
   Depuis la suppression du sélecteur de fréquence, une carte affiche TOUS ses
   tarifs à la fois (1 mois et à vie) au lieu d'en masquer un. Ces règles
   remplacent .plan-price-option, qui reposait sur un affichage conditionnel.
   ========================================================================== */

.plan-credits {
  margin: -0.2rem 0 0.9rem;
  padding: 5px 12px; border-radius: 999px; display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  background: rgba(0, 140, 255, 0.12); border: 1px solid rgba(0, 194, 255, 0.3);
  color: var(--cyan);
}

.plan-tarifs { display: flex; flex-direction: column; gap: 12px; }

.plan-tarif {
  padding: 16px 14px; border-radius: var(--radius-sm); text-align: center;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  transition: border-color 0.25s var(--ease);
}
.plan-tarif:hover { border-color: var(--border-active); }

.plan-tarif-duree {
  margin-bottom: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
}

/* Les prix conservent les classes existantes (.plan-price-main, -old, -promo,
   -permonth) : leur mise en forme vit déjà dans main.css, on ne la duplique pas.
   Seul l'espacement du bouton change dans ce nouveau contexte. */
.plan-tarif form, .plan-tarif > .btn { margin-top: 10px; }
.plan-tarif .btn { width: 100%; }

@media (max-width: 520px) {
  .plan-tarif { padding: 14px 12px; }
}