/* ============================================
   Electric Border Effect - Formule Pro
   Adapté de l'effet dramatic border pour MR Agence Web
   ============================================ */

/* Variables pour l'effet électrique - Palette Dorée Premium */
:root {
  --electric-border-color: #f59e0b; /* Amber-500 doré */
  --electric-light-color: #fbbf24; /* Amber-400 doré clair */
  --gradient-color: rgba(245, 158, 11, 0.2);
}

/* === STRUCTURE PRINCIPALE === */
/* Wrapper de la carte Pro - crée l'espace pour les effets */
.pricing-card[data-popular="true"] {
  position: relative;
  isolation: isolate;
}

/* === COUCHES D'EFFET ÉLECTRIQUE === */

/* Couche 1: Bordure principale avec distorsion animée */
.pricing-card[data-popular="true"] .electric-main-border {
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--electric-border-color);
  border-radius: 1.75rem;
  filter: url(#electric-turbulence);
  pointer-events: none;
  opacity: 0.65;
  z-index: 1;
}

/* Couche 2: Bordure extérieure légère */
.pricing-card[data-popular="true"] .electric-outer-border {
  position: absolute;
  inset: -6px;
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 1.875rem;
  pointer-events: none;
  z-index: 0;
}

/* Couche 3: Premier glow (flou léger) */
.pricing-card[data-popular="true"] .electric-glow-1 {
  position: absolute;
  inset: -4px;
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 1.75rem;
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 2;
}

/* Couche 4: Deuxième glow (flou moyen) */
.pricing-card[data-popular="true"] .electric-glow-2 {
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--electric-light-color);
  border-radius: 1.75rem;
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 3;
}

/* Couche 5: Premier overlay lumineux */
.pricing-card[data-popular="true"] .electric-overlay-1 {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  opacity: 0.45;
  mix-blend-mode: overlay;
  transform: scale(1.02);
  filter: blur(12px);
  background: linear-gradient(
    -30deg,
    white 0%,
    transparent 30%,
    transparent 70%,
    white 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* Couche 6: Deuxième overlay lumineux */
.pricing-card[data-popular="true"] .electric-overlay-2 {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  opacity: 0.28;
  mix-blend-mode: overlay;
  transform: scale(1.02);
  filter: blur(12px);
  background: linear-gradient(
    -30deg,
    white 0%,
    transparent 30%,
    transparent 70%,
    white 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Couche 7: Halo externe (background glow) */
.pricing-card[data-popular="true"] .electric-glow {
  position: absolute;
  inset: -12px;
  border-radius: 2rem;
  filter: blur(24px);
  transform: scale(1.03);
  opacity: 0.25;
  z-index: -1;
  background: linear-gradient(
    -30deg,
    var(--electric-light-color) 0%,
    transparent 50%,
    var(--electric-border-color) 100%
  );
  pointer-events: none;
}

/* === CONTENU === */
/* S'assurer que tout le contenu reste au-dessus des effets */
.pricing-card[data-popular="true"] > * {
  position: relative;
  z-index: 10;
}

/* Le badge "LE PLUS POPULAIRE" reste simple, sans effet */
.pricing-card[data-popular="true"] > div[style*="z-index: 100"] {
  position: absolute;
  z-index: 100 !important;
}

/* === OPTIMISATIONS === */

/* Mobile - Effets simplifiés pour performance */
@media (max-width: 768px) {
  .pricing-card[data-popular="true"] .electric-main-border {
    filter: none; /* Pas de distorsion animée */
  }
  
  .pricing-card[data-popular="true"] .electric-overlay-1,
  .pricing-card[data-popular="true"] .electric-overlay-2 {
    display: none; /* Pas d'overlays */
  }
  
  .pricing-card[data-popular="true"] .electric-glow {
    opacity: 0.1;
    filter: blur(20px);
  }
  
  .pricing-card[data-popular="true"] .electric-glow-2 {
    filter: blur(3px);
  }
}

/* Préférence pour mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .pricing-card[data-popular="true"] .electric-main-border {
    filter: none;
  }
}