/* ================================================================================
   COACHING SECTION - STYLES ORGANISÉS POUR UNE MEILLEURE MAINTENANCE
   Section: Feature "Coaching IA en temps réel"
================================================================================ */

/* ====================================================================
   1. IMPORT DES COMPOSANTS
==================================================================== */
@import './components/coachingBubble.css';

/* ====================================================================
   2. CONFIGURATION DE LA SECTION (DESKTOP)
==================================================================== */
#feature-section-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0.5rem 2rem 2rem;
  min-height: 80vh;
  position: relative;
  z-index: 1;
}

/* ====================================================================
   3. STYLES DES TITRES PRINCIPAUX (DESKTOP)
==================================================================== */
#feature-section-1 .problem-title {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: auto;
}

#feature-section-1 .problem-subtitle {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 8rem auto;
  position: relative;
  z-index: auto;
}

/* ====================================================================
   4. LAYOUT PRINCIPAL DES FEATURES (DESKTOP)
==================================================================== */

/* Container principal horizontal */
#feature-section-1 .feature-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

/* Variant inversé (si nécessaire) */
#feature-section-1.reverse .feature-content-wrapper { 
  flex-direction: row-reverse; 
}

/* ====================================================================
   5. CONTENU TEXTE DES FEATURES (DESKTOP)
==================================================================== */
#feature-section-1 .feature-text-content { 
  flex: 1; 
  max-width: 640px; 
  color: #E5E7EB; 
  font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji'); 
}

#feature-section-1 .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;
}

#feature-section-1 .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; 
}

#feature-section-1 .feature-text-content .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #D1D5DB;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 0.75rem;
}

#feature-section-1 .feature-text-content p + p {
  margin-top: 0.75rem;
  color: #D1D5DB;
}

/* ====================================================================
   6. CONTAINER DE LA CARTE FEATURE (DESKTOP)
==================================================================== */
#feature-section-1 .feature-card-container {
  flex: 0.8; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  max-width: 540px; 
  margin-left: 12px;
  position: relative; 
  z-index: 1; 
  transform: translateX(45px);

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

/* Animations d'apparition */
#feature-section-1 .feature-card-container.animate-on-scroll,
#feature-section-1 .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-1 .feature-card-container.animate-on-scroll.fade-left { transform: translateX(40px); }
#feature-section-1 .feature-card-container.animate-on-scroll.fade-right { transform: translateX(-40px); }
#feature-section-1 .feature-card-container.animate-on-scroll.fade-up { transform: translateY(40px); }
#feature-section-1 .feature-card-container.animate-on-scroll.fade-down { transform: translateY(-40px); }
#feature-section-1 .feature-card-container.animate-on-scroll.is-visible,
#feature-section-1 .lg-card.animate-on-scroll.is-visible { transform: none !important; }

/* ====================================================================
   7. CARTE FEATURE PRINCIPALE (DESKTOP)
==================================================================== */
#feature-section-1 .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, transform, box-shadow; 
  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;
  contain: layout style paint;
}

/* Effets de fond subtils */
#feature-section-1 .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-1 .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;
}

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

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

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

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

/* Plumes de lueur intérieure */
#feature-section-1 .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;
}

/* ====================================================================
   9. CONTENU INTERNE DE LA CARTE (DESKTOP)
==================================================================== */
#feature-section-1 .lg-card > * { 
  position: relative; 
  z-index: 2; 
}

#feature-section-1 .card-motion { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: flex-start; 
  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); 
  padding-top: 0; 
  contain: layout style; 
}

#feature-section-1 .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)); 
}

#feature-section-1 .card-title { 
  font-size: 2.9rem; 
  font-weight: bold; 
  margin-top: 0; 
  margin-bottom: 0.25rem; 
  background: linear-gradient(135deg, #c084fc, #ec4899, #60a5fa); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
}

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

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

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

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

#feature-section-1 .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);} 
}

/* Lueur externe */
#feature-section-1 .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;
  will-change: opacity, filter;
  contain: layout style paint;
}

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

/* ====================================================================
   11. CHIPS DE MOTS-CLÉS (DESKTOP UNIQUEMENT)
==================================================================== */
#feature-section-1 .chip-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
  justify-content: center; 
  margin-top: 1rem; 
}

#feature-section-1 .glass-chip { 
  --bg: rgba(255,255,255,0.06); 
  --bd: rgba(255,255,255,0.18); 
  padding: 0.4rem 0.7rem; 
  font-size: 0.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; 
  will-change: transform, box-shadow, background; 
}

#feature-section-1 .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)); 
}

/* ====================================================================
   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. FALLBACKS ET ACCESSIBILITÉ (DESKTOP)
==================================================================== */

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

/* Mouvement réduit pour accessibilité */
@media (prefers-reduced-motion: reduce) {
  #feature-section-1 .lg-card { 
    transition: none; 
    transform: none; 
  }
  #feature-section-1 .lg-card:hover, 
  #feature-section-1 .lg-card:focus-within { 
    transform: none; 
  }
}

/* ====================================================================
   14. OPTIMISATIONS MOBILE
==================================================================== */
@media (max-width: 768px) {
  
  /* Classes pour masquer/afficher selon l'écran */
  .desktop-only { 
    display: none; 
  }
  
  .mobile-recap { 
    display: block; 
  }
  
  .mobile-recap-container { 
    display: block; 
  }
  
  /* Masquer spécifiquement les chips sur mobile */
  #feature-section-1 .chip-row.desktop-only { 
    display: none; 
  }
  
  /* CoachingSection.css - VERSION MOBILE CORRIGÉE */
  /* Configuration de la section principale sur mobile */
  #feature-section-1 { 
    min-height: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.1rem 0.5rem 2rem !important; /* Réduit le padding latéral */
    width: 100% !important;
    max-width: 100% !important;
    contain: none !important; /* Override Performance.css containment */
  }
  
  /* Fix du titre principal sur mobile */
  #feature-section-1 .problem-title {
    font-size: 2rem !important;
    line-height: 1.2;
    margin-bottom: 1rem;
    padding: 0; /* On le met à 0 car le conteneur parent gère l'espacement */
  }
  
  #feature-section-1 .problem-subtitle {
    font-size: 1rem !important;
    line-height: 1.4;
    margin-bottom: 3rem !important;
    padding: 0; /* On le met à 0 également */
  }
  
  /* Layout mobile en colonne */
  #feature-section-1 .feature-content-wrapper {
    flex-direction: column;
    gap: 2rem;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  #feature-section-1 .feature-text-content {
    order: 1;
  }
  
  /* Ajustement du texte sur mobile */
  #feature-section-1 .feature-text-content p {
    text-align: center;
    font-size: 1rem; 
    line-height: 1.65; 
  }
  
  #feature-section-1 .feature-text-content .lead { 
    font-size: 1rem; 
    line-height: 1.65; 
  }
  
  /* Carte centrée sur mobile avec optimisations performances */
  #feature-section-1 .feature-card-container {
    order: 1;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: calc(100% - 1rem) !important; /* Largeur maximale alignée avec la carte */
    width: calc(100% - 1rem) !important;
    transform: none !important;
    margin-left: 0;
    position: relative; /* Important pour le positionnement du ::before */
    
    /* 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-1 .feature-card-container::before {
    content: '';
    position: absolute;
    inset: 0; /* Utilise tout l'espace disponible */
    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-1 .lg-card {
    height: auto;
    min-height: 320px;
    padding: 2rem 1.5rem;
    margin: 0;
    width: 100% !important; /* Utilise 100% du container parent */
    max-width: 100% !important;
    border-radius: var(--card-radius) !important; /* Assure le border-radius */
    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-1 .lg-card::before {
    display: none !important;
  }
  
  /* Remove colored rings and inner glow on mobile */
  #feature-section-1 .lg-card__ring,
  #feature-section-1 .lg-card__innerband,
  #feature-section-1 .lg-card__innerfeather {
    display: none !important;
  }
  
  /* Remove outer glow container on mobile */
  #feature-section-1 .feature-card-container::before {
    display: none !important;
  }
  
  /* Désactiver seulement les animations coûteuses sur mobile */
  #feature-section-1 .lg-card.pulsating-illumination {
    animation: none;
  }
  
  #feature-section-1 .lg-card.pulsating-illumination::after {
    animation: none;
    opacity: 0;
  }
  
  /* Assurer la visibilité des éléments de contour sur mobile */
  #feature-section-1 .lg-card__ring,
  #feature-section-1 .lg-card__innerband,
  #feature-section-1 .lg-card__innerfeather {
    opacity: 1 !important;
    display: block !important;
  }
  
  /* Optimiser les éléments internes sans casser l'apparence */
  #feature-section-1 .card-motion {
    will-change: auto;
  }
  
  #feature-section-1 .card-title {
    font-size: 1.75rem;
  }
  
  #feature-section-1 .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-1 .mobile-recap-container {
    order: 3;
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem;
    position: relative;
  }
  
  /* Trait horizontal design entre carte et texte */
  #feature-section-1 .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-1 .mobile-recap {
    font-size: 1rem;
    line-height: 1.5;
    color: #D1D5DB;
    margin: 0;
    text-align: center;
  }
}