/* --- Features Section --- */

/* Section sous la ligne de flottaison -> ne la peins que quand visible */
#features {
  content-visibility: auto;
  contain-intrinsic-size: 900px; /* hauteur d'approx pour le pré-layout */
}

/* Conteneur de perspective pour l'effet 3D (inchangé) */
.card-perspective-wrapper {
  perspective: 1000px;
}

/* Styles des cartes pour un thème sombre matériel et profond */
.feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  
  /* 1. FOND : Un fond solide, très sombre mais pas noir pur. */
  background-color: #1e293b; /* Correspond à slate-800, un gris-bleu foncé. */
  
  /* 2. BORDURE : Une bordure subtile pour délimiter la carte. */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* 3. OMBRE & PROFONDEUR : Ombre optimisée et moins intensive */
  box-shadow: inset 0 1px 1px rgba(255,255,255,.05),
              0 8px 16px rgba(138,43,226,.12);    /* avant 0 0 25px */
  
  /* Animations et transformations - optimisées */
  /* transform-style: preserve-3d SUPPRIMÉ car inutile hors hover */
  transform: perspective(1000px) translateZ(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), 
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease;
  /* will-change SUPPRIMÉ pour éviter promotion permanente */
  backface-visibility: hidden;
  
  /* Limite la propagation de style/paint */
  contain: content;  
}

/* Effets au survol : la lueur s'intensifie et la bordure s'illumine. */
.feature-card:hover {
  border-color: rgba(167, 139, 250, 0.4); /* Bordure plus visible */
  box-shadow: inset 0 1px 1px rgba(255,255,255,.07),
              0 12px 24px rgba(138,43,226,.18);   /* avant 0 0 45px */
  
  /* La même animation de transformation 3D que vous aimiez. */
  transform: perspective(1000px) translateY(-10px) rotateX(2deg) rotateY(2deg) scale(1.02);
  
  /* Promotion temporaire = moins de Layerize */
  will-change: transform;
}


/* --- Styles du contenu --- */

/* Icône : le fond clair est conservé pour créer un point de contraste fort. */
.feature-card-icon {
  margin-bottom: 1.25rem;
}

.feature-card-logo-bg {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Cercle extérieur (gros) - FONCÉ pour créer la dépression */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.15) 0%, 
    rgba(0, 0, 0, 0.25) 100%);
  
  /* Bordure sombre */
  border: 1px solid rgba(0, 0, 0, 0.2);
  
  /* Ombres pour creuser l'effet */
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 -1px 2px rgba(255, 255, 255, 0.05),
    0 4px 16px rgba(138, 43, 226, 0.12);
  
  /* Transition optimisée */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  
  /* Optimisation GPU */
  transform: translateZ(0);
  will-change: auto;
}

.feature-card .feature-card-logo-bg i {
  font-size: 2.1rem;
  transition: all 0.35s;
}

.feature-card-image {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  
  /* Cercle intérieur plus clair pour mieux voir les images */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.7) 0%, 
    rgba(255, 255, 255, 0.6) 100%);
  
  /* Bordure claire plus visible */
  border: 2px solid rgba(255, 255, 255, 0.4);
  
  /* Jeu d'ombres optimisé pour le relief */
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 -1px 3px rgba(255, 255, 255, 0.15),
    inset 0 1px 3px rgba(255, 255, 255, 0.3);
  
  /* Filtres pour améliorer la visibilité des images */
  filter: saturate(1.1) contrast(1.1) brightness(1.1);
  
  /* Transition optimisée */
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.feature-card:hover .feature-card-logo-bg {
  /* Renforce l'effet de creux au hover */
  transform: translateY(-1px) translateZ(0);
  box-shadow: 
    inset 0 3px 10px rgba(0, 0, 0, 0.4),
    inset 0 -1px 3px rgba(255, 255, 255, 0.08),
    0 6px 20px rgba(138, 43, 226, 0.18);
}

.feature-card:hover .feature-card-image {
  /* L'image ressort encore plus du creux au hover */
  transform: scale(1.03);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 -1px 4px rgba(255, 255, 255, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.6);
  
  /* Améliore encore la visibilité au hover */
  filter: saturate(1.15) contrast(1.15) brightness(1.15);
}

/* Écritures : couleurs ajustées pour une lisibilité optimale sur fond sombre. */
.feature-card h3 {
  color: #f1f5f9; /* Texte blanc cassé (slate-100) pour les titres. */
  transition: color 0.3s ease;
}

.feature-card p {
  color: #94a3b8; /* Texte gris clair (slate-400) pour le corps. */
  transition: color 0.3s ease;
}

.feature-card:hover h3 {
  color: #ffffff; /* Le titre devient blanc pur au survol. */
}

.feature-card:hover p {
  color: #cbd5e1; /* Le texte devient plus clair au survol (slate-300). */
}

/* --- Adaptations responsives --- */
@media (max-width: 768px) {
  /* Suppression de l'effet hover/active sur mobile pour les bulles */
  .feature-card:hover .feature-card-logo-bg,
  .feature-card:active .feature-card-logo-bg,
  .feature-card:focus .feature-card-logo-bg {
    background: linear-gradient(135deg, 
      rgba(0, 0, 0, 0.15) 0%, 
      rgba(0, 0, 0, 0.25) 100%);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 
      inset 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 -1px 2px rgba(255, 255, 255, 0.05),
      0 4px 16px rgba(138, 43, 226, 0.12);
    transform: translateZ(0);
  }
  
  .feature-card:hover .feature-card-image,
  .feature-card:active .feature-card-image,
  .feature-card:focus .feature-card-image {
    transform: scale(1);
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.5),
      0 -1px 3px rgba(255, 255, 255, 0.15),
      inset 0 1px 3px rgba(255, 255, 255, 0.3);
    filter: saturate(1.1) contrast(1.1) brightness(1.1);
  }
}