/* =================================================
   BLOOM AI HERO SECTION – V3 (Responsive Optimized)
   ================================================= 
   
   Structure du fichier :
   1. BASE STYLES (Desktop par défaut)
   2. RESPONSIVE TABLET (1024px)
   3. RESPONSIVE MOBILE (768px)
   
   ================================================= */

/* =================================================
   1. BASE STYLES - DESKTOP FIRST
   ================================================= */

/* Forcer le fond violet pour BloomAI avec priorité maximale */
body.bloom-page,
body.bloom-page .network-container {
  background: rgb(9, 5, 24) !important;
  background-color: rgb(9, 5, 24) !important;
}

/* ---------- 1.1 SECTION PRINCIPALE ---------- */
.hero-bloom-ai{
  position:relative;
  min-height:100vh;
  padding:0;
}

/* ---------- 1.2 CANVAS PARTICULES ---------- */
.network-container{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  background:#090518;          /* fond sombre derrière le blur */
  overflow:hidden;
  pointer-events:none;
  z-index:-1;                  /* derrière tout pour le backdrop-filter */
  will-change: transform;      /* GPU optimization */
  transform: translateZ(0);    /* Force GPU layer */
}

/* Forcer le fond violet pour BloomAI avec une priorité maximale */
body.bloom-page,
body.bloom-page .network-container {
  background: rgb(9, 5, 24) !important;
}
#network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent!important;
  pointer-events:none;
  will-change: transform;      /* GPU optimization */
}

/* ---------- 1.3 CONTENU AU-DESSUS ---------- */
.hero-bloom-ai .container{
  position:relative;
  z-index:1;  /* au-dessus du canvas pour l'interaction */
}

/* ---------- 1.4 TYPOGRAPHY & COLORS ---------- */
.gradient-text-ai-bloom,
.gradient-text-ai{
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#d946ef);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 1.4a. TITRE HERO: Bloom (blanc) + IA (cyan lumineux) */
.hero-title {
  color: #ffffff; /* garantit Bloom en blanc par défaut */
}
.hero-title-bloom {
  /* Bloom en blanc (sans dégradé) */
  color: #ffffff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
.hero-title-ia {
  /* Couleurs alignées sur heroHud.js: stroke + glow cyan */
  /* stroke (couleur du trait) ≈ rgba(170,240,255,0.9) */
  color: rgba(170, 240, 255, 0.95); /* fallback visuel proche: #aaf0ff */
  /* Lueur plus organique et naturelle - évite l'effet rectangulaire */
  text-shadow:
    0 0 3px rgba(0,255,255,0.40),
    0 0 8px rgba(0,255,255,0.30),
    0 0 16px rgba(0,255,255,0.20),
    0 0 32px rgba(0,255,255,0.12),
    0 0 64px rgba(0,255,255,0.06);
  will-change: filter, text-shadow;
}

/* 1.4b. Sous-texte Hero (blanc cassé) */
.hero-subtext{
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 44rem;
  text-align: center;
}
@media (min-width: 768px){
  .hero-subtext{ font-size: 1rem; }
}

/* ---------- 1.5 BOUTONS ---------- */
/* Les styles des boutons sont maintenant dans /src/components/shared/Buttons/button-animations.css */


/* ---------- 1.6 CARTE IA (Glass Morphism) ---------- */

.neural-card {
  margin-top:1.5rem;
  position: relative;
}

/* Lueur violette subtile derrière la carte */
.neural-card::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 3rem;
  background: radial-gradient(ellipse at center, rgba(147, 51, 234, 0.08) 0%, rgba(147, 51, 234, 0.04) 40%, transparent 70%);
  filter: blur(20px);
  z-index: -1;
  opacity: 0.4;
}

/* 1.6a. Conteneur principal - Le cadre de verre */
.neural-card-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:36rem;
  will-change: transform, border-color; /* GPU optimization for animations */
  transform: translateZ(0); /* Force GPU layer */
  max-height:680px;
  width:100%;
  padding:2.5rem;
  overflow:hidden;
  z-index:2;
  
  /* MODIFIÉ : Forme plus arrondie pour matcher l'esprit "liquide" du bouton */
  border-radius: 2.5rem; /* 40px */
  
  /* MODIFIÉ : Bordure identique à celle du LiquidGlassButton */
  border:1px solid rgba(255, 255, 255, 0.12);

  /* MODIFIÉ : Ombre portée et interne plus subtile */
  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);
  /* Performance hint: nous n'animons que la couleur de bordure */
  will-change: border-color;
}

/* 1.6b. Pseudo-élément - La surface floutée */
.neural-card-inner::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;

  /* MODIFIÉ : Fond encore plus transparent */
  background: 
    radial-gradient(ellipse at center, rgba(100, 180, 255, 0.003) 0%, rgba(255, 255, 255, 0.00005) 70%),
    linear-gradient(135deg, rgba(100, 180, 255, 0.001) 0%, rgba(255, 255, 255, 0.00005) 50%, rgba(100, 180, 255, 0.001) 100%);

  /* MODIFIÉ : Effet de flou copié du LiquidGlassButton (plus performant et subtil) */
  backdrop-filter: blur(6px) saturate(110%) contrast(102%);
  -webkit-backdrop-filter: blur(6px) saturate(110%) contrast(102%);
  
  /* La bordure interne n'est plus nécessaire ici, celle du parent suffit. */
}

/* 1.6c. Pseudo-élément - Reflet de lumière (réfraction) */
.neural-card-inner::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1; /* au-dessus du ::before (0), sous le contenu (2) */
  opacity:0;
  transform: translate3d(0,0,0); /* force layer, évite flou du texte */
  /* Reflet très subtil: léger halo au centre + lueur en diagonale */
  background:
    /* halo central teinté (cyan, aligné au heroHud) */
    radial-gradient(120% 120% at 50% 50%, rgba(0, 255, 255, 0.12) 0%, rgba(170, 240, 255, 0.10) 42%, rgba(255, 255, 255, 0.0) 70%),
    /* glint haut-gauche (neutre blanc, conserve le relief) */
    radial-gradient(80% 60% at 18% 22%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.0) 60%),
    /* glint bas-droit (teinte cyan pâle au lieu d'indigo) */
    radial-gradient(80% 60% at 82% 78%, rgba(170, 240, 255, 0.10) 0%, rgba(170, 240, 255, 0.0) 60%),
    /* lueur diagonale douce (inchangée) */
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 38%, rgba(255,255,255,0.0) 60%);
  /* Pas de blend-mode ni de blur ici pour ne pas affecter le glassmorphism */
  will-change: opacity, transform;
}

/* 1.6d. Contenu de la carte (doit être au-dessus de l'effet de verre) */
.neural-card-inner > * {
  position: relative;
  z-index: 2; /* Assure que tout le contenu est bien visible */
}

/* 1.6e. Hero HUD Container */
.hero-hud-container{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:420px;
  aspect-ratio: 1 / 1; /* carré pour plus de largeur utile */
  box-sizing: border-box;
  padding: 16px 20px; /* marge interne pour éviter le rognage des lueurs */
  transform: translateY(-20px);
  margin-top:0.75rem;
  margin-inline:auto; /* centrer dans la carte */
}
#ai-hero-bubble{display:block;margin:auto;position:relative;z-index:2;width:100%;height:100%;}

/* Centered logo overlay inside the neural bubble */
.hero-hud-logo{
  position:absolute;
  top:50%; left:50%; transform:translate(-50%, -50%);
  width:32%; max-width:160px; height:auto;
  pointer-events:none;
  z-index:3;
}


/* ---------- 1.7 ANIMATIONS ---------- */
.ai-stars-effect{position:absolute;top:-54px;right:-120px;width:72px;height:82px;pointer-events:none;z-index:3;}
.card-tilt{transform:none;transition:none;}

.animate-hero-fadein{animation:heroFadeIn 1.1s cubic-bezier(.4,2,.6,1) .1s both;}
.animate-hero-fadein-delay{animation:heroFadeIn 1.1s cubic-bezier(.4,2,.6,1) .45s both;}
.animate-hero-slidein{animation:heroSlideIn 1.2s cubic-bezier(.4,2,.6,1) .1s both;}
.animate-hero-slidein-right{animation:heroSlideInRight 1.15s cubic-bezier(.4,2,.6,1) .2s both;}
.animate-hero-cta{animation:heroFadeIn 1.05s cubic-bezier(.4,2,.6,1) .7s both;}
.animate-hero-float{animation:heroFloat 3.5s ease-in-out infinite alternate;}
.animate-hero-card-float{animation:heroCardFloat 2.6s cubic-bezier(.4,2,.6,1) .7s both;}

/* Pulsation de bordure ultra-légère pour la carte (synchronisée avec le pulse neurone) */
.neural-card-inner.pulsating-illumination {
  animation: card-border-flash 1.5s ease;
}

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

/* Refraction overlay pulse (synchronisé) */
.neural-card-inner.pulsating-illumination::after {
  animation: card-refraction-flash 1.5s ease, card-refraction-shift 1.5s ease;
}

@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); }
}

/* Désactivation sur appareils à mobilité réduite */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .neural-card-inner.pulsating-illumination { animation: none; }
  .neural-card-inner.pulsating-illumination::after { animation: none; }
}

@keyframes heroFadeIn{0%{opacity:0;transform:translateY(40px) scale(.98);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes heroSlideIn{0%{opacity:0;transform:translateX(-60px) scale(.96);}100%{opacity:1;transform:translateX(0) scale(1);}}
@keyframes heroSlideInRight{0%{opacity:0;transform:translateX(60px) scale(.96);}100%{opacity:1;transform:translateX(0) scale(1);}}
@keyframes heroFloat{0%{transform:translateY(0) scale(1);}100%{transform:translateY(-14px) scale(1.04);}}
      

/* =================================================
   2. RESPONSIVE TABLET - 1024px AND BELOW
   ================================================= */
@media(max-width:1024px){
  .hero-hud-container{max-width:380px; aspect-ratio:1/1; padding:14px 18px; transform: translateY(-18px);} 
}

/* =================================================
   3. RESPONSIVE MOBILE - 768px AND BELOW
   ================================================= */
@media(max-width:768px){
  /* ========== 3.1 LAYOUT & CONTAINERS ========== */
  
  /* Section principale - permet le débordement de la lueur */
  .hero-bloom-ai {
    overflow: visible;
  }
  
  /* Container principal - organisation verticale */
  .hero-bloom-ai .container {
    overflow: visible;
  }
  
  .hero-bloom-ai .container > div {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  
  /* ========== 3.2 CONTENT AREA ========== */
  
  /* Contenu principal - descendre pour éviter le header */
  .bloom-ai-hero-content {
    padding-top: 4rem; /* Compensation header mobile */
    order: 1; /* Premier dans l'ordre mobile */
    margin-bottom: 1rem;
    overflow: visible; /* Permet débordement lueur IA */
  }
  
  /* ========== 3.3 TYPOGRAPHY MOBILE ========== */
  
  /* Titre principal */
  .bloom-ai-hero-content h1 {
    margin-bottom: 1.5rem;
    overflow: visible; /* Permet débordement lueur */
  }
  
  /* Container titre - pas de clipping */
  .hero-title {
    overflow: visible;
  }
  
  /* Terme "IA" - optimisé pour éviter clipping rectangle */
  .hero-title-ia {
    position: relative;
    display: inline-block;
    overflow: visible; /* Crucial pour la lueur */
  }
  
  /* Sous-titre */
  .bloom-ai-hero-content p {
    margin-bottom: 2rem;
  }
  
  /* ========== 3.4 BUTTONS MOBILE ========== */
  
  /* Container des boutons - alignement à gauche, ordre après sous-titre */
  .bloom-ai-hero-content .flex.flex-wrap {
    order: 2; /* Après le texte, avant la carte */
    margin: 0 0 1.5rem 0;
    justify-content: flex-start; /* Alignement gauche */
    gap: 0.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
  }
  
  /* Boutons individuels - taille compacte */
  .hero-bloom-ai .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    min-height: 44px; /* Accessibilité */
    flex: 0 0 auto; /* Taille selon contenu */
    white-space: nowrap; /* Pas de retour ligne */
  }
  
  /* Bouton "Tarifs" - même style que les autres */
  .hero-bloom-ai .btn--hero-pricing {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }
  
  /* ========== 3.5 NEURAL CARD MOBILE ========== */
  
  /* Carte - dernière dans l'ordre, légèrement remontée */
  .neural-card {
    order: 3; /* Après boutons */
    margin-top: 0.75rem;
    margin-bottom: 2rem;
  }
  
  /* Hero HUD - taille réduite mobile */
  .hero-hud-container{
    max-width: 300px;
    aspect-ratio: 1/1;
    padding: 12px 14px;
    transform: translateY(15px);
  } 
  
  /* ========== 3.6 MISC MOBILE ========== */
  .decorative-point{opacity:.4;}
}