/* ==========================================================================
   Base + animation (identique à l’esprit original)
   ========================================================================== */

/* Fallback fade-in for browsers sans JS */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* Utilitaire (si besoin de forcer l’anim) */
.animate-fade-fallback { animation: fadeIn 1s ease forwards; }

/* ==========================================================================
   (RAPPEL) La barre couleur du haut utilise Tailwind dans le HTML d'origine :
   <div class="w-full bg-brand text-white text-center py-2 sticky top-0 z-40 shadow">...</div>
   Rien à surcharger ici en CSS — on garde ton design initial.
   ========================================================================== */

/* ==========================================================================
   Switch langues (haut-droite) — on garde le style d’origine (via Tailwind)
   => pas d'override agressif ici pour ne rien casser.
   ========================================================================== */

/* ==========================================================================
   PRICING — cartes spotlight, rubans, badges
   ========================================================================== */

.pricing-spotlight {
  position: relative;
  box-shadow:
    0 10px 30px rgba(79,70,229,.20),
    0 0 0 1px rgba(79,70,229,.10),
    inset 0 0 40px rgba(34,211,238,.10);
}
.pricing-spotlight:after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 1.25rem;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(34,211,238,.14), transparent 60%);
}

.badge-popular {
  background: linear-gradient(90deg, #4F46E5, #22D3EE);
  color: #fff;
}

.badge-value {
  background: #DCFCE7;  /* success soft */
  color: #065F46;
}

/* Rubans */
.ribbon {
  position: absolute;
  top: 12px; left: -8px;
  transform: rotate(-6deg);
  padding: 6px 12px;
  border-radius: 10px;
  background: #FDE68A;  /* amber-200 */
  color: #78350F;       /* amber-900 */
  font-weight: 700; font-size: .75rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ==========================================================================
   Toggle facturation — version “segmented control”
   ========================================================================== */

.segmented {
  display: inline-flex;
  align-items: center;
  background: #F3F4F6;                 /* muted gris clair */
  border: 1px solid rgba(55,65,81,.10);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.segmented button {
  appearance: none; border: 0; background: transparent;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .875rem;
  color: #4B5563;                      /* ink/70 */
  cursor: pointer;
  transition: all .15s ease;
}
.segmented button:hover { color: #111827; }
.segmented button.is-active {
  color: #fff;
  background: linear-gradient(90deg, #4F46E5, #22D3EE);
  box-shadow: 0 8px 22px rgba(79,70,229,.25);
}

/* Petit badge “save” */
.save-chip {
  margin-left: .5rem;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: #E0F2FE;                 /* sky-100 */
  color: #0369A1;                      /* sky-700 */
  font-weight: 700; font-size: .75rem;
}

/* Tableau de comparaison */
.compare td, .compare th {
  border-bottom: 1px solid rgba(55,65,81,.12);
}

/* Utilitaires */
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.06); }

/* Mobile finesse */
@media (max-width: 480px) {
  .save-chip { display: none; } /* garde clean sur mobile */
}