/* ================================================================================
   PERFORMANCE TRACKING SECTION - STYLES ORGANISÉS POUR UNE MEILLEURE MAINTENANCE
   Section: Feature "Suivi de performance"
   Layout: Reverse (texte à gauche, carte à droite sur desktop)
================================================================================ */

/* ====================================================================
   1. CONFIGURATION DE LA SECTION (DESKTOP)
==================================================================== */

/* Layout principal horizontal avec reverse */
#feature-section-2 .feature-section { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 2rem; 
  padding: 6rem 2rem; 
  min-height: 80vh; 
  position: relative; 
  z-index: 1; 
}

#feature-section-2 .feature-section.reverse { 
  flex-direction: row-reverse; 
}

/* ====================================================================
   2. STYLES DES TEXTES (DESKTOP)
==================================================================== */

/* Container du contenu textuel */
#feature-section-2 .feature-text-content { 
  flex: 1.3; 
  max-width: 700px; 
  color: #E5E7EB; 
}

/* Titre principal avec gradient */
#feature-section-2 .feature-text-content h2 { 
  font-size: 2.5rem; 
  font-weight: bold; 
  margin-bottom: 1.5rem; 
  background: linear-gradient(135deg, #a78bfa, #ec4899, #3b82f6); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
  white-space: nowrap; 
}

/* Paragraphes de description */
#feature-section-2 .feature-text-content p { 
  font-size: 1.1rem; 
  line-height: 1.7; 
  text-align: justify; 
  text-justify: inter-word; 
  hyphens: auto; 
  -webkit-hyphens: auto; 
  color: #D1D5DB; 
}

/* Texte d'accroche (lead) */
#feature-section-2 .feature-text-content .lead { 
  font-size: 1.1rem; 
  line-height: 1.7; 
  color: #D1D5DB; 
  font-weight: 400; 
  letter-spacing: normal; 
  margin-bottom: 0.75rem; 
}

/* Espacement entre paragraphes */
#feature-section-2 .feature-text-content p + p { 
  margin-top: 0.75rem; 
  color: #D1D5DB; 
}

/* ====================================================================
   3. CONTAINER DE LA CARTE FEATURE (DESKTOP)
==================================================================== */

#feature-section-2 .feature-card-container { 
  flex: 0.8; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  max-width: 540px; 
  position: relative; 
  z-index: 1; 
  transform: translateX(-20px) translateY(-14px); 
  
  /* Variables pour les effets visuels */
  --card-radius: 2.5rem; 
  --ring-width: 3px; 
  --outer-glow-blur: 20px; 
  --outer-glow-spread: 3px; 
  --inner-glow-size: 12px; 
  --inner-glow-blur: 18px; 
  --inner-glow-feather: 12px; 
  --ring-angle: 220deg; 
  --ring-stops: 
    rgba(255,122,0,1) 0deg, rgba(255,45,85,1) 50deg, rgba(255,0,153,1) 100deg,
    rgba(191,90,242,1) 150deg, rgba(94,92,230,1) 200deg, rgba(10,132,255,1) 250deg,
    rgba(100,210,255,1) 300deg, rgba(255,122,0,1) 360deg; 
  --ring-gradient: conic-gradient(from var(--ring-angle), var(--ring-stops)); 
}

/* ====================================================================
   4. ANIMATIONS SCROLL (DESKTOP)
==================================================================== */

/* Animations d'apparition */
#feature-section-2 .feature-card-container.animate-on-scroll, 
#feature-section-2 .liquid-glass-card.animate-on-scroll, 
#feature-section-2 .feature-card-container .liquid-glass-card.animate-on-scroll, 
#feature-section-2 .lg-card.animate-on-scroll, 
#feature-section-2 .feature-card-container .lg-card.animate-on-scroll { 
  opacity: 1 !important; 
  transition: transform var(--animation-duration,600ms) var(--animation-easing-elegant,cubic-bezier(0.25,0.46,0.45,0.94)) !important; 
}

#feature-section-2 .feature-card-container.animate-on-scroll.fade-left { transform: translateX(40px); }
#feature-section-2 .feature-card-container.animate-on-scroll.fade-right { transform: translateX(-40px); }
#feature-section-2 .feature-card-container.animate-on-scroll.fade-up { transform: translateY(40px); }
#feature-section-2 .feature-card-container.animate-on-scroll.fade-down { transform: translateY(-40px); }
#feature-section-2 .feature-card-container.animate-on-scroll.is-visible, 
#feature-section-2 .liquid-glass-card.animate-on-scroll.is-visible, 
#feature-section-2 .lg-card.animate-on-scroll.is-visible { 
  transform: none !important; 
}

/* ====================================================================
   5. CARTE FEATURE PRINCIPALE (DESKTOP)
==================================================================== */

#feature-section-2 .liquid-glass-card, 
#feature-section-2 .lg-card { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  width: 100%; 
  height: 650px; 
  padding: 2.5rem; 
  overflow: hidden; 
  z-index: 2; 
  border-radius: var(--card-radius); 
  border: 2px solid rgba(255, 255, 255, 0.12); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.02), inset 0 1px 2px rgba(100,180,255,0.04), inset 0 -1px 2px rgba(0,0,0,0.01); 
  will-change: border-color; 
  color: #fff; 
  transform: none; 
  transform-style: preserve-3d; 
  perspective: 1200px; 
  isolation: isolate; 
  transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 700ms cubic-bezier(0.2,0.8,0.2,1), border-color 700ms ease; 
}

/* Effets de fond subtils */
#feature-section-2 .liquid-glass-card::before, 
#feature-section-2 .lg-card::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  border-radius: inherit; 
  pointer-events: none; 
  z-index: 0; 
  background: radial-gradient(ellipse at center, rgba(100,180,255,0) 0%, rgba(255,255,255,0) 70%), 
              linear-gradient(135deg, rgba(100,180,255,0.002) 0%, rgba(255,255,255,0.0003) 50%, rgba(100,180,255,0.002) 100%); 
  backdrop-filter: blur(6px) saturate(110%) contrast(102%); 
  -webkit-backdrop-filter: blur(6px) saturate(110%) contrast(102%); 
}

/* Effets de survol subtils */
#feature-section-2 .liquid-glass-card::after, 
#feature-section-2 .lg-card::after { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  border-radius: inherit; 
  pointer-events: none; 
  z-index: 1; 
  opacity: 0; 
  transform: translate3d(0,0,0); 
  background: radial-gradient(120% 120% at 50% 50%, rgba(191,90,242,0) 0%, rgba(191,90,242,0.24) 18%, rgba(94,92,230,0.18) 42%, rgba(255,255,255,0) 70%), 
              radial-gradient(80% 60% at 18% 22%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 60%), 
              radial-gradient(80% 60% at 82% 78%, rgba(10,132,255,0.20) 0%, rgba(10,132,255,0) 60%), 
              linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 60%); 
  will-change: opacity, transform; 
  transition: opacity 600ms ease, transform 600ms ease; 
}

/* ====================================================================
   6. ANNEAUX ET CONTOURS VISUELS (DESKTOP)
==================================================================== */

/* Anneau principal coloré - SUPPRIMÉ */
#feature-section-2 .lg-card__ring { 
  display: none;
}

#feature-section-2 .lg-card:hover .lg-card__ring, 
#feature-section-2 .lg-card:focus-within .lg-card__ring { 
  opacity: 1; 
  filter: saturate(140%) brightness(122%); 
}

/* Bande intérieure avec lueur - SUPPRIMÉE */
#feature-section-2 .lg-card__innerband { 
  display: none;
}

/* Plumes de lueur intérieure */
#feature-section-2 .lg-card__innerfeather { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  border-radius: inherit; 
  pointer-events: none; 
  z-index: 0; 
  background: var(--ring-gradient); 
  background-blend-mode: screen; 
  -webkit-mask: 
    linear-gradient(#000, transparent) top/100% var(--inner-glow-feather) no-repeat, 
    linear-gradient(transparent, #000) bottom/100% var(--inner-glow-feather) no-repeat, 
    linear-gradient(90deg, #000, transparent) left/var(--inner-glow-feather) 100% no-repeat, 
    linear-gradient(90deg, transparent, #000) right/var(--inner-glow-feather) 100% no-repeat; 
  mask: 
    linear-gradient(#000, transparent) top/100% var(--inner-glow-feather) no-repeat, 
    linear-gradient(transparent, #000) bottom/100% var(--inner-glow-feather) no-repeat, 
    linear-gradient(90deg, #000, transparent) left/var(--inner-glow-feather) 100% no-repeat, 
    linear-gradient(90deg, transparent, #000) right/var(--inner-glow-feather) 100% no-repeat; 
  filter: blur(calc(var(--inner-glow-blur) * 0.65)) saturate(126%); 
  opacity: .38; 
}

/* Lueur externe */
#feature-section-2 .feature-card-container::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  border-radius: var(--card-radius); 
  z-index: 0; 
  pointer-events: none; 
  background: var(--ring-gradient); 
  padding: calc(var(--ring-width) + var(--outer-glow-spread)); 
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  filter: blur(var(--outer-glow-blur)) saturate(140%) brightness(135%); 
  opacity: .78; 
  transition: opacity 400ms ease, filter 400ms ease; 
}

#feature-section-2 .feature-card-container:hover::before { 
  opacity: .90; 
  filter: blur(calc(var(--outer-glow-blur) + 2px)) saturate(155%) brightness(145%); 
}

/* ====================================================================
   7. CONTENU INTERNE DE LA CARTE (DESKTOP)
==================================================================== */

#feature-section-2 .liquid-glass-card > *, 
#feature-section-2 .lg-card > * { 
  position: relative; 
  z-index: 2; 
}

#feature-section-2 .card-motion { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: inherit; 
  width: 100%; 
  height: 100%; 
  transform-style: preserve-3d; 
  will-change: transform; 
  transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1); 
}

#feature-section-2 .card-motion.animate-on-scroll { 
  transition: all var(--animation-duration,600ms) var(--animation-easing-elegant,cubic-bezier(0.25,0.46,0.45,0.94)); 
}

/* Titre de la carte */
#feature-section-2 .card-title { 
  font-size: 2.9rem; 
  font-weight: bold; 
  margin-bottom: 1rem; 
  background: linear-gradient(135deg, #c084fc, #ec4899, #60a5fa); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
}

#feature-section-2 .card-subtitle { 
  font-size: 1rem; 
  color: #D1D5DB; 
  margin-bottom: 2rem; 
}

/* Accent spécial pour "performance" */
#feature-section-2 .card-title .accent-etr {
  display: inline-block;
  font-size: 1.18em;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: none;
}

/* ====================================================================
   8. ANIMATIONS SPÉCIALES (DESKTOP)
==================================================================== */

/* Animation de pulsation illumination */
#feature-section-2 .lg-card.pulsating-illumination { 
  animation: card-border-flash 1.5s ease; 
}

#feature-section-2 .lg-card.pulsating-illumination::after { 
  animation: card-refraction-flash 1.5s ease, card-refraction-shift 1.5s ease; 
}

@keyframes card-border-flash { 
  0%,100% { border-color: rgba(255,255,255,0.12); } 
  40% { border-color: rgba(191,90,242,0.95); } 
}

@keyframes card-refraction-flash { 
  0%,100% { opacity: 0; } 
  45% { opacity: 0.30; } 
}

@keyframes card-refraction-shift { 
  0%,100% { transform: translate3d(0,0,0); } 
  42% { transform: translate3d(6px,6px,0); } 
}

/* ====================================================================
   9. CHIPS DE MOTS-CLÉS (DESKTOP UNIQUEMENT)
==================================================================== */

#feature-section-2 .chip-row, 
#feature-section-2 .badge-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .5rem; 
  justify-content: center; 
  margin-top: 1rem; 
}

#feature-section-2 .glass-chip { 
  --bg: rgba(255,255,255,0.06); 
  --bd: rgba(255,255,255,0.18); 
  padding: .4rem .7rem; 
  font-size: .85rem; 
  line-height: 1; 
  border-radius: 999px; 
  border: 1px solid var(--bd); 
  background: linear-gradient(135deg, rgba(255,255,255,0.10), var(--bg)); 
  color: rgba(255,255,255,0.92); 
  backdrop-filter: blur(10px) saturate(120%); 
  -webkit-backdrop-filter: blur(10px) saturate(120%); 
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 6px rgba(0,0,0,0.20); 
  transition: transform 350ms ease, box-shadow 350ms ease, background 350ms ease; 
}

#feature-section-2 .glass-chip:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 18px rgba(99,102,241,0.25), inset 0 1px 0 rgba(255,255,255,0.12); 
  background: linear-gradient(135deg, rgba(138,43,226,0.18), rgba(99,102,241,0.10)); 
}

/* ====================================================================
   10. VISUALISATION - RADAR CHART
==================================================================== */

#feature-section-2 .card-visual { 
  margin-top: 2rem; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  flex: 1;
  min-height: 160px;
  width: 100%;
  position: relative;
}

#feature-section-2 #radarChart { 
  width: 240px !important; 
  height: 240px !important; 
  opacity: 1;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Chart alternatif (non utilisé actuellement) */
#feature-section-2 .visual-chart { 
  display: grid; 
  grid-template-columns: repeat(6,1fr); 
  align-items: end; 
  gap: 8px; 
  height: 70px; 
  width: 100%; 
  max-width: 360px; 
}

#feature-section-2 .visual-chart .col { 
  height: 100%; 
  transform-origin: bottom; 
  background: linear-gradient(180deg, rgba(99,102,241,0.85), rgba(99,102,241,0.35)); 
  border-radius: 6px; 
  opacity: .95; 
  animation: col-rise 1.4s var(--animation-easing-elegant, cubic-bezier(0.25,0.46,0.45,0.94)) forwards; 
}

#feature-section-2 .visual-chart .col:nth-child(1) { transform: scaleY(0.35); }
#feature-section-2 .visual-chart .col:nth-child(2) { transform: scaleY(0.55); }
#feature-section-2 .visual-chart .col:nth-child(3) { transform: scaleY(0.42); }
#feature-section-2 .visual-chart .col:nth-child(4) { transform: scaleY(0.78); }
#feature-section-2 .visual-chart .col:nth-child(5) { transform: scaleY(0.62); }
#feature-section-2 .visual-chart .col:nth-child(6) { transform: scaleY(0.90); }

@keyframes col-rise { 
  from { transform: scaleY(0.1); } 
  to { transform: scaleY(1); } 
}

/* ====================================================================
   11. FALLBACKS ET ACCESSIBILITÉ (DESKTOP)
==================================================================== */

/* Fallback si mask-composite n'est pas supporté */
@supports not (mask-composite: exclude) { 
  #feature-section-2 .liquid-glass-card, 
  #feature-section-2 .lg-card { 
    border: var(--ring-width) solid transparent; 
    border-image: var(--ring-gradient) 1; 
    border-radius: var(--card-radius); 
  } 
  #feature-section-2 .liquid-glass-card .liquid-glass-outline, 
  #feature-section-2 .lg-card .lg-card__ring { 
    display: none; 
  } 
}

/* Mouvement réduit pour accessibilité */
@media (prefers-reduced-motion: reduce) { 
  #feature-section-2 .liquid-glass-card, 
  #feature-section-2 .lg-card { 
    transition: none; 
    transform: none; 
  } 
  #feature-section-2 .liquid-glass-card:hover, 
  #feature-section-2 .liquid-glass-card:focus-within { 
    transform: none; 
  } 
  #feature-section-2 .visual-equalizer .bar, 
  #feature-section-2 .visual-chart .col { 
    animation: none !important; 
  } 
}

/* ====================================================================
   12. CLASSES UTILITAIRES POUR RESPONSIVE
==================================================================== */

/* Classes pour masquer/afficher selon l'écran */
.desktop-only { 
  display: block; 
}

.mobile-recap { 
  display: none; 
}

.mobile-recap-container { 
  display: none; 
}

/* ====================================================================
   13. OPTIMISATIONS MOBILE
==================================================================== */
@media (max-width: 768px) {
  
  /* Classes pour masquer/afficher selon l'écran */
  .desktop-only { 
    display: none !important; 
  }
  
  #feature-section-2 .desktop-only { 
    display: none !important; 
  }
  
  .mobile-recap { 
    display: block; 
  }
  
  .mobile-recap-container { 
    display: block; 
  }
  
  /* Configuration principale de la section sur mobile */
  #feature-section-2 { 
    text-align: center; 
    align-items: center;
    justify-content: center;
  }
  
  /* Layout mobile en colonne - Override des styles desktop */
  #feature-section-2 .feature-section,
  #feature-section-2 .feature-section.reverse {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.1rem 1rem;
    margin-bottom: -3rem;
    min-height: unset;
  }
  
  /* Contenu textuel (masqué sur mobile) */
  #feature-section-2 .feature-text-content {
    order: 2;
    width: 100%;
    max-width: none;
  }
  
  #feature-section-2 .feature-text-content h2 { 
    white-space: normal; 
  }
  
  #feature-section-2 .feature-text-content p {
    text-align: center;
    font-size: 1rem; 
    line-height: 1.65; 
  }
  
  #feature-section-2 .feature-text-content .lead { 
    font-size: 1rem; 
    line-height: 1.65; 
  }
  
  /* Carte centrée sur mobile avec optimisations performances */
  #feature-section-2 .feature-card-container {
    order: 1;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
    transform: none;
    margin-left: 0;
    
    /* Variables optimisées pour mobile */
    --inner-glow-size: 10px; 
    --inner-glow-blur: 16px; 
    --inner-glow-feather: 10px; 
    --outer-glow-blur: 18px;
    
    /* Variables pour le contour parfait */
    --card-radius: 2rem;
    --ring-width: 3px;
    --outer-glow-spread: 3px;
    --ring-angle: 220deg;
    --ring-stops:
      rgba(255,122,0,1) 0deg, rgba(255,45,85,1) 50deg, rgba(255,0,153,1) 100deg,
      rgba(191,90,242,1) 150deg, rgba(94,92,230,1) 200deg, rgba(10,132,255,1) 250deg,
      rgba(100,210,255,1) 300deg, rgba(255,122,0,1) 360deg;
    --ring-gradient: conic-gradient(from var(--ring-angle), var(--ring-stops));
  }
  
  /* Contour parfait sur mobile */
  #feature-section-2 .feature-card-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    z-index: 0;
    pointer-events: none;
    background: var(--ring-gradient);
    padding: calc(var(--ring-width) + var(--outer-glow-spread));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(var(--outer-glow-blur)) saturate(140%) brightness(135%);
    opacity: .78;
    transition: opacity 400ms ease, filter 400ms ease;
    width: 100%;
    height: 100%;
  }
  
  /* Carte optimisée pour mobile - Dark background with subtle violet effects */
  #feature-section-2 .lg-card {
    height: auto;
    min-height: 320px;
    padding: 2rem 1.5rem;
    margin: 0;
    width: 100%;
    background: 
      radial-gradient(ellipse at center, hsla(250, 90%, 50%, 0.12) 0%, hsla(280, 85%, 45%, 0.08) 40%, rgb(9, 5, 24) 70%),
      rgb(9, 5, 24) !important;
    box-shadow: 
      inset 0 0 30px hsla(220, 95%, 55%, 0.10),
      inset 0 0 60px hsla(250, 90%, 50%, 0.05) !important;
    /* Optimisations performances mobile sélectives */
    will-change: auto;
    contain: layout style paint;
  }
  
  /* Remove all glassmorphism effects on mobile */
  #feature-section-2 .lg-card::before {
    display: none !important;
  }
  
  /* Remove colored rings and inner glow on mobile */
  #feature-section-2 .lg-card__ring,
  #feature-section-2 .lg-card__innerband,
  #feature-section-2 .lg-card__innerfeather {
    display: none !important;
  }
  
  /* Remove outer glow container on mobile */
  #feature-section-2 .feature-card-container::before {
    display: none !important;
  }
  
  /* Désactiver seulement les animations coûteuses sur mobile */
  #feature-section-2 .lg-card.pulsating-illumination {
    animation: none;
  }
  
  #feature-section-2 .lg-card.pulsating-illumination::after {
    animation: none;
    opacity: 0;
  }
  
  /* Optimiser les éléments internes sans casser l'apparence */
  #feature-section-2 .card-motion {
    will-change: auto;
  }
  
  #feature-section-2 .card-title {
    font-size: 1.75rem;
  }
  
  #feature-section-2 .glass-chip {
    font-size: 0.8rem;
    /* Optimisation légère pour les chips */
    will-change: auto;
  }
  
  /* Conteneur pour le texte récapitulatif en dessous de la carte */
  #feature-section-2 .mobile-recap-container {
    order: 3;
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem;
    width: 100%;
    position: relative;
  }
  
  /* Trait horizontal design entre carte et texte */
  #feature-section-2 .mobile-recap-container::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(191,90,242,0.6), rgba(94,92,230,0.6), transparent);
    border-radius: 1px;
  }
  
  #feature-section-2 .mobile-recap {
    font-size: 1rem;
    line-height: 1.5;
    color: #D1D5DB;
    margin: 0;
    text-align: center;
  }
}