/**
 * StatsSection.css - Version Finale Parfaite
 *
 * Objectif : Un rendu visuel et une animation 100% identiques à l'original,
 * dans une structure propre et compatible.
 */

/* ==========================================================================
   1. STYLES DE BASE ET SÉLECTEURS
   ========================================================================== */
   #stats-section {
    --stats-text-color: #a5b4fc;
    --stats-card-bg: rgba(15, 23, 42, 0.85);
    --stats-card-border: rgba(139, 92, 246, 0.4);

    /* Lazy rendering - ne peint que lorsqu'il entre dans le viewport */
    content-visibility: auto;
    contain-intrinsic-size: 500px; /* hauteur approximative pour pré-layout */
    
    /* Optimisations de performance */
    contain: content; /* limite la propagation des styles */

    /* Background supprimé pour utiliser le fond neural global */
    background: transparent;
    padding-top: 4rem;  /* Réduit de 6rem à 2rem pour rapprocher du séparateur 5 */
    position: relative;
  }
  
  
  .section-subtitle {
    color: var(--stats-text-color);
  }
  
  #stats-grid {
    position: relative;
    pointer-events: auto;
  }
  
  /* ==========================================================================
     2. STYLES DES CARTES
     ========================================================================== */
  
  .stat-card {
    background: rgba(15, 23, 42, 0.95); /* Augmenté de 0.85 à 0.95 pour plus d'opacité */
    border: 1px solid var(--stats-card-border);
    border-radius: 1.5rem;
    backdrop-filter: blur(15px); /* Augmenté de 10px à 15px pour plus de flou */
    transform-style: preserve-3d;
    will-change: transform, box-shadow, background;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3),
                0 4px 6px -2px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.1s ease-out, background 0.2s ease-out;
    padding: 2.5rem 2rem;
  }
  
  /* Effets de bordure et de brillance de la carte */
  .stat-card::before, .stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    pointer-events: none;
  }
  .stat-card::before {
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(167, 139, 250, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  .stat-card::after {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%);
  }
  
  /* ==========================================================================
     3. STYLES DES TEXTES
     ========================================================================== */
  
  .stat-number {
    font-weight: bold;
    background: linear-gradient(135deg, white 30%, rgb(162, 134, 255) 65%, rgb(99, 102, 241) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    text-shadow: 0 1px 0px rgba(139, 92, 246, 0.3),
                 0 2px 4px rgba(0, 0, 0, 0.15),
                 0 0 2px rgba(255, 255, 255, 0.1);
    font-size: 3.5rem;
    line-height: 1.2;
  }
  
  .stat-card p:last-of-type {
    color: #c7d2fe !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.4;
    position: relative;
    white-space: nowrap; 
  }
  
  /* Animation de soulignement au survol */
  .stat-card p:last-of-type::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #818cf8, #a78bfa);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .stat-card:hover p:last-of-type::after {
    width: 100%;
  }
  
  /* ==========================================================================
     4. ANIMATIONS ET STYLES RESPONSIVES
     ========================================================================== */
  
  @keyframes floatingAnimation {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-8px) scale(1.01); }
    100% { transform: translateY(0px) scale(1); }
  }
  
  .stat-card-wrapper:nth-child(1) .stat-card { animation: floatingAnimation 8s ease-in-out infinite 0s; }
  .stat-card-wrapper:nth-child(2) .stat-card { animation: floatingAnimation 7s ease-in-out infinite 1.5s; }
  .stat-card-wrapper:nth-child(3) .stat-card { animation: floatingAnimation 9s ease-in-out infinite 0.75s; }
  .stat-card-wrapper:nth-child(4) .stat-card { animation: floatingAnimation 7.5s ease-in-out infinite 2.25s; }
  
  #stats-section.stats-section--initialized .stats-wrapper { z-index: 10; }
  #stats-section.stats-section--initialized #stats-grid article { z-index: 2; }
  
  @media (max-width: 640px) {
    .stat-number { font-size: 2.5rem; }
    .stat-card { padding: 2.5rem 1.5rem; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .stat-card,
    .stat-card p:last-of-type::after {
      transition: none !important;
      animation: none !important;
    }
  }
  
  /* MODIFICATION : Suppression des règles de correction obsolètes qui causaient le problème */
  /* Les règles ci-dessous ont été supprimées car elles appliquaient un fond au header */
  /* ScrollObserver now handles stat card visibility and animations */



/* Le séparateur "Déploiement Chromatique" a été externalisé vers /components/shared/separators/separator2/ */

/* Styles pour le placeholder du séparateur chromatique - AVANT injection */
.chromatic-separator-placeholder,
#stats-section .separator2-placeholder {
  display: block;
  margin-top: 10rem; /* Grand espace au-dessus du séparateur */
  margin-bottom: 4rem; /* Espace vers la section suivante */
  height: 40px;
}

/* Styles pour le séparateur APRÈS injection - règle plus spécifique */
#stats-section .unfold-separator-wrapper {
  margin: 7rem 0 4rem 0; /* Override la marge par défaut de 7rem */
}