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

/* Product selector sits centered between the header and the plan cards. */
.home-product-slot {
  display: flex;
  justify-content: center;
  margin-top: -3rem;
  margin-bottom: 3.5rem;
}

/* 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;
}

/* Keep the section heading on the shared HomePage title system. */
#pricing .home-pricing__title {
  margin: 0 auto 1.25rem;
  color: var(--home-text, #f8f7ff);
}

#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 */
}

/* 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(var(--primary-rgb), 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;
}

/* 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);
  }
}

@media (max-width: 768px) and (hover: none), (max-width: 768px) and (pointer: coarse) {
  .card-3d-hover:hover {
    z-index: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  .card-3d-hover:hover::after {
    opacity: 0 !important;
  }

  .pricing-card:hover::before {
    transform: scaleX(0) !important;
  }
}

/* TEMPORAIRE - Effet de flou sur les cartes Premium et Enterprise en attente des autres plans */
.pricing-card-blurred {
  filter: blur(3px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

/* === 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 */
}

/* --- Plan emblems (shared tier artwork) --------------------------
   The pricing cards here sit on a light header (the .p-8 block) — we
   anchor each tier emblem inside a frosted circular frame so the
   colored SVG reads clearly against the white card surface. */
.home-plan-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 24px -14px rgba(15, 23, 42, 0.25);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.home-plan-emblem img {
  width: 52px;
  height: 52px;
  display: block;
}

.home-plan-emblem--standard {
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 28px -14px rgba(15, 23, 42, 0.3),
    0 0 22px -6px rgba(96, 165, 250, 0.38);
}
.home-plan-emblem--premium {
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 28px -14px rgba(15, 23, 42, 0.3),
    0 0 22px -6px rgba(251, 191, 36, 0.4);
}
.home-plan-emblem--enterprise {
  border-color: rgba(244, 114, 182, 0.38);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 28px -14px rgba(15, 23, 42, 0.3),
    0 0 22px -6px rgba(244, 114, 182, 0.38);
}

.pricing-card:hover .home-plan-emblem {
  transform: translateY(-3px);
}

/* Signup reassurance line — answers "what happens after I pick a plan?" and
   deep-links to the product page signup walkthrough (#story-signup). */
.pricing-signup-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  max-width: 46rem;
  margin: 3rem auto 0;
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(154, 86, 255, 0.28);
  border-radius: 999px;
  background: rgba(101, 44, 255, 0.1);
  color: #e9e3ff;
  text-align: center;
  font-size: 1rem;
}

.pricing-signup-link {
  color: #c7b3ff;
  font-weight: 700;
}

@media (max-width: 640px) {
  .pricing-signup-note {
    border-radius: 1.1rem;
    padding: 0.85rem 1.1rem;
  }
}