/* --- Pricing Section --- */

/* Section sous la ligne de flottaison -> ne la peins que quand visible */
#pricing {
  content-visibility: auto;
  contain-intrinsic-size: 1100px; /* hauteur d'approx pour le pré-layout */
  
  /* Décaler toute la section vers le haut tout en préservant l'espacement interne */
  margin-top: -6rem; /* Ajustez la valeur selon le rendu désiré */

  /* Use shared HomePage background */
  background: transparent; /* Fond transparent -> fond partagé */
  color: #d1d5db; /* Texte par défaut (gris clair) */
  position: relative;
}

/* Couleurs des titres de la section */
#pricing h2, #pricing h3 {
  color: #f9fafb; /* Texte blanc/très clair */
}

/* Effet de perspective 3D pour les cartes */
.card-perspective-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Styles 3D génériques des cartes (avec plus de profondeur) */
.card-3d-hover {
  /* MODIFICATION : Transition uniquement sur `transform` pour la performance. */
  transition: transform var(--transition-speed-medium) var(--transition-curve-sharp);

  position: relative;
  border-radius: 12px;
  overflow: hidden;
  
  /* Limite la propagation de style/paint */
  contain: content;

  /* Style "Glassmorphism" sombre de base */
  background: linear-gradient(170deg, rgba(30, 35, 60, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, 0.6),
              inset 0px 1px 1px rgba(255, 255, 255, 0.08);
}

/* 
  OPTIMISATION N°1 : Pseudo-élément pour l'état de survol.
  Contient les styles FINAUX (background, box-shadow) pour éviter de les animer.
  Il est invisible par défaut et on ne fait qu'animer son opacité.
*/
.card-3d-hover::after {
  content: '';
  position: absolute;
  inset: 0; /* Équivalent à top/right/bottom/left: 0 */
  border-radius: 12px;
  
  /* Styles de survol pré-calculés */
  background: linear-gradient(170deg, rgba(40, 45, 70, 0.7) 0%, rgba(25, 33, 52, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.7),
              0 0 25px 3px rgba(var(--primary-rgb), 0.25),
              inset 0px 1px 1px rgba(255, 255, 255, 0.1);

  /* Invisible par défaut */
  opacity: 0;
  z-index: -1; /* Placé derrière le contenu */
  
  /* Transition performante sur l'opacité */
  transition: opacity var(--transition-speed-medium) var(--transition-curve-elegant);
  will-change: opacity;
}

.pricing-card {
  height: 100%;
  position: relative;
  backface-visibility: hidden;
  /* La transition principale est gérée par .card-3d-hover */
}

/* Surcharger les couleurs de texte générées par JS/HTML */
.pricing-card .text-gray-800, 
.pricing-card .text-gray-900 {
  color: #f9fafb; /* Titres et prix en blanc */
}

.pricing-card .text-gray-500,
.pricing-card .text-gray-600,
.pricing-card .text-gray-700 {
  color: #d1d5db; /* Textes secondaires en gris clair */
}

/* Adapter le fond de la section des fonctionnalités pour créer un deuxième niveau */
.pricing-card .bg-gray-50 {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4); /* Ombre interne pour séparer les sections */
}

/* Effet de bordure animée (déjà performant car utilise transform) */
.pricing-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-speed-medium) var(--transition-curve-elegant) 0.1s;
  z-index: 1;
}

.pricing-card:hover::before {
  transform: scaleX(1);
}

/* Carte populaire avec "glow" persistant */
.pricing-popular {
  border: 2px solid var(--secondary-color);
  z-index: 10;
  box-shadow: 0 0 25px -5px rgba(var(--secondary-rgb), 0.3), 
              0px 15px 30px -10px rgba(0, 0, 0, 0.6), 
              inset 0px 1px 1px rgba(255, 255, 255, 0.08),
              inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.pricing-popular::before {
  background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

/* OPTIMISATION N°2 : Surcharge du pseudo-élément pour la carte populaire */
.pricing-popular::after {
    border-color: rgba(196, 181, 253, 0.9);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7),
                0 0 45px 5px rgba(var(--secondary-rgb), 0.4);
}

/* MODIFICATION : Le survol de la carte populaire ne change PLUS ses styles coûteux */
.pricing-popular:hover {
  z-index: 11;
  /* border-color et box-shadow ont été déplacés dans le pseudo-élément ::after */
}

/* Animation de mise en évidence (inchangé) */
@keyframes pricingHighlight {
  0% { box-shadow: 0 0 0 rgba(var(--secondary-rgb), 0); }
  50% { box-shadow: 0 0 30px rgba(var(--secondary-rgb), 0.4); }
  100% { box-shadow: 0 0 0 rgba(var(--secondary-rgb), 0); }
}

.card-perspective-wrapper.animate-in .pricing-popular {
    animation: pricingHighlight 1.5s ease-in-out 0.5s;
}

/* Effet de survol 3D principal (simplifié pour la performance) */
.card-3d-hover:hover {
  will-change: transform;
  transform: rotateY(7deg) rotateX(-5deg) translateZ(25px) scale(1.02);
  z-index: 10;
  /* background, border-color, et box-shadow sont SUPPRIMÉS d'ici */
}

/* OPTIMISATION N°3 : On révèle le pseudo-élément au survol */
.card-3d-hover:hover::after {
  opacity: 1;
}

/* Surcharger le style du bouton standard/entreprise pour thème sombre */
.pricing-card .bg-white.border-indigo-600 {
    background-color: transparent !important;
    border-color: #818cf8 !important; /* indigo-400 */
    color: #e0e7ff !important; /* indigo-100 */
}

/* Styles au survol pour desktop - garder le texte clair */
@media (min-width: 769px) {
  .pricing-card .bg-white.border-indigo-600:hover,
  .pricing-card button.bg-white.border-indigo-600:hover,
  .pricing-card .signup-plan-button:hover {
    background-color: rgba(79, 70, 229, 0.2) !important;
    border-color: #a5b4fc !important; /* indigo-300 */
    color: #e0e7ff !important; /* Garder le texte clair - pas de couleur sombre */
  }
}

/* S'assurer que les classes Tailwind ne surchargent pas nos styles */
.pricing-card button:hover {
  color: #e0e7ff !important;
}

/* Élément de transition vers la section Testimonials */
#pricing::after { content: none; }

@keyframes fadeInTransition {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Style responsives (inchangé) */
@media (max-width: 1024px) {
  .pricing-popular:hover {
    transform: translateY(-10px) scale(1.02);
  }
  
  .pricing-popular {
    transform: scale(1.02);
  }
  
  .card-perspective-wrapper {
    perspective: none;
  }
  
  /* L'effet 3D est désactivé, donc nos optimisations n'ont pas d'impact négatif */
  .card-3d-hover {
    transform: none !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }

  /* Sur tablette, l'effet de survol n'étant pas en 3D, le pseudo-élément n'est pas nécessaire.
     On s'assure qu'il reste caché. */
  .card-3d-hover::after {
      display: none;
  }
}

/* Optimisations pour les animations sur mobile (inchangé) */
@media (max-width: 768px) {
  .pricing-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
  }
  
  .pricing-card::before {
    transition: transform 0.2s ease;
  }
  
  .pricing-popular:hover {
    transform: translateY(-7px) scale(1.01);
    box-shadow: 0 20px 40px -15px rgba(var(--secondary-rgb), 0.2);
  }
}

body.is-mobile-device .pricing-card {
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}

/* Style pour le conteneur du séparateur en cascade */
#pricing .separator-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 2.9rem;
  margin-top: 2.9rem;
  overflow: visible;
  z-index: 20;
}

/* === Spacing Adjustment === */
/* Push the separator further down to create more space above it */
#pricing .separator4-placeholder {
  margin-top: 8rem; /* Increase or decrease as needed */
}

/* Adaptation du séparateur au thème sombre de la section Pricing */
#pricing .neon-arrow-separator {
  margin: 0; /* Annule la marge par défaut du séparateur */
}

/* Augmentation de la visibilité des chevrons sur fond sombre */
#pricing .chevron::before,
#pricing .chevron::after {
  background-color: rgba(255, 255, 255, 0.95); /* Plus blanc pour contraster avec le fond sombre */
  box-shadow: 0 0 15px 3px rgba(167, 139, 250, 0.9), /* Lueur violette plus intense */
              0 0 25px 5px rgba(92, 196, 246, 0.5);  /* Lueur bleue plus étendue */
}

/* TEMPORAIRE - Effet de flou sur les cartes Standard et Enterprise en attente des autres plans */
/* TODO: Supprimer ce style une fois que tous les plans tarifaires seront disponibles */
.pricing-card-blurred {
  filter: blur(3px); /* Flou temporaire - À supprimer quand les plans seront prêts */
  opacity: 0.6; /* Transparence temporaire - À supprimer quand les plans seront prêts */
  transition: filter 0.3s ease, opacity 0.3s ease; /* Animation fluide temporaire */
}