/* =======================================
   SYSTÈME DE BOUTONS UNIFIÉ - BLOOM IA
   =======================================
   
   Ce fichier contient UNIQUEMENT les styles visuels :
   - Couleurs, gradients et thèmes
   - Animations et transitions CSS
   - Responsive design et adaptations
   
   La LOGIQUE d'interaction est dans index.js
   
   ARCHITECTURE :
   1-2.   Variables et base unifiée (tokens design)
   3-13.  Types de boutons spécialisés (Hero, CTA, Auth, etc.)
   14.    Effet Ripple (styles pour JavaScript)
   
   Style inspiré de la HeroSection avec animations cohérentes
   ======================================= */

/* ===========================================
   1. VARIABLES CSS GLOBALES - DESIGN TOKENS
   ===========================================
   
   Palette de couleurs et variables partagées :
   - Couleurs primaires et secondaires
   - Gradients cohérents
   - Ombres et transitions uniformes
   
   Utilisées dans tous les types de boutons
   =========================================== */
:root {
  /* Palette de couleurs principales */
  --color-primary: #4f46e5;
  --color-secondary: #7c3aed;
  --color-accent: #a855f7;
  --color-pink: #ec4899;
  --color-text: #ffffff;
  --color-text-dark: #1f2937;
  
  /* Variables RGBA pour calculs */
  --rgb-primary: 79, 70, 229;
  --rgb-pink: 236, 72, 153;

  /* Gradients principaux */
  --gradient-primary: linear-gradient(125deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-hover: linear-gradient(125deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  
  /* Ombres cohérentes (inspirées HeroSection) */
  --shadow-base: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-hover: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);

  /* Transitions cohérentes */
  --transition-base: all 0.3s ease;
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===========================================
   2. STYLE DE BASE UNIFIÉ - CLASSE .btn
   ===========================================
   
   Styles de base appliqués à tous les boutons :
   - Positionnement et layout
   - Typographie et espacement
   - Animations hover/active communes
   - Optimisations performance GPU
   
   Inspiré du design de la HeroSection
   =========================================== */
.btn {
  /* Positionnement et display */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  
  /* Dimensions et spacing (style HeroSection) */
  padding: 1rem 2rem;
  border: none;
  border-radius: 1rem;
  
  /* Typographie (style HeroSection) */
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  
  /* Interactions */
  cursor: pointer;
  overflow: hidden;
  z-index: 1;

  /* Effets visuels (style HeroSection) */
  box-shadow: var(--shadow-base);
  transition: var(--transition-base);
  will-change: transform, box-shadow;
  
  /* Performance GPU */
  transform: translateZ(0);
}

/* Animation hover unifiée (style HeroSection) */
.btn:hover {
  transform: scale(1.05); /* Animation signature de la HeroSection */
  box-shadow: var(--shadow-hover);
}

.btn:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

/* Icônes dans les boutons */
.btn .icon, 
.btn i { 
  transition: transform 0.3s ease; 
}
.btn:hover .icon, 
.btn:hover i { 
  transform: scale(1.1);
}

/* ===========================================
   3. BOUTONS HERO SECTION
   ===========================================
   
   Boutons spécifiques de la section Hero :
   - btn--hero-demo : "Voir la démo" (gradient violet-rose)
   - btn--hero-appointment : "Prendre rendez-vous" (gradient vert-bleu)
   - btn--hero-pricing : "Tarifs" (fond blanc semi-transparent)
   
   Utilisés uniquement sur BloomAIPage
   =========================================== */

/* Bouton "Voir la démo" - Gradient violet-rose */
.btn--hero-demo {
  background: linear-gradient(to right, #6366f1, #ec4899);
  color: #fff;
}

/* Bouton "Prendre rendez-vous" - Gradient vert-bleu */
.btn--hero-appointment {
  background: linear-gradient(to right, #4ade80, #3b82f6);
  color: #fff;
}

/* Bouton "Tarifs" - Fond blanc semi-transparent */
.btn--hero-pricing {
  background: rgba(255, 255, 255, 0.8);
  color: #6366f1;
}
.btn--hero-pricing:hover {
  background: rgba(243, 244, 246, 0.9);
}

/* ===========================================
   4. BOUTONS CTA (CALL TO ACTION)
   ===========================================
   
   Boutons d'action principaux du site :
   - btn--cta-demo : Démonstrations (gradient bleu-cyan)
   - btn--cta-trial : Essais gratuits (gradient principal)
   - btn--training-request : Demandes de formation
   
   Utilisés sur toutes les pages
   =========================================== */

/* Bouton CTA Demo - Gradient bleu-cyan (comme header) */
.btn--cta-demo {
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  color: var(--color-text);
}
.btn--cta-demo:hover {
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
}

/* Bouton CTA Trial - Gradient principal */
.btn--cta-trial {
  background: var(--gradient-primary);
  color: var(--color-text);
}
.btn--cta-trial:hover {
  background: var(--gradient-hover);
}

/* Bouton Training Request - Même style que CTA Demo */
.btn--training-request {
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  color: var(--color-text);
}
.btn--training-request:hover {
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
}

/* ===========================================
   5. BOUTONS AUTHENTIFICATION - HEADER
   ===========================================
   
   Boutons du Header pour l'authentification :
   - #login-button, .btn--login : Connexion
   - #signup-button, .btn--signup : Inscription 
   - .btn--mobile-login : Version mobile connexion
   
   Tailles ajustées pour s'intégrer au Header
   =========================================== */

/* Bouton Login */
.btn--login,
#login-button {
  background: var(--gradient-primary);
  color: var(--color-text);
}
.btn--login:hover,
#login-button:hover {
  background: var(--gradient-hover);
}

/* Boutons mobiles */
.btn--mobile-login,
.btn--signup {
  background: var(--gradient-primary);
  color: var(--color-text);
}
.btn--mobile-login:hover,
.btn--signup:hover {
  background: var(--gradient-hover);
}

/* Boutons Header - Taille ajustée */
#login-button,
#signup-button {
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  border-radius: 0.875rem;
}

/* Bouton signup header avec style spécifique */
#signup-button {
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  color: var(--color-text);
}
#signup-button:hover {
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
}

/* ===========================================
   6. BOUTONS NAVIGATION ET ACTIONS
   ===========================================
   
   Boutons pour actions de navigation :
   - btn--hero-how : "Comment ça marche"
   - #hero-how-button : Version avec ID spécifique
   
   Style cohérent avec le thème principal
   =========================================== */

/* Bouton "Comment ça marche" */
.btn--hero-how,
#hero-how-button {
  background: var(--gradient-primary);
  color: var(--color-text);
}
.btn--hero-how:hover,
#hero-how-button:hover {
  background: var(--gradient-hover);
}

/* ===========================================
   7. BOUTONS SECTION TARIFS
   ===========================================
   
   Boutons spécifiques de la section pricing :
   - .pricing-popular .signup-plan-button : Plan populaire (gradient)
   - .pricing-card .signup-plan-button : Plans standards (fond clair)
   
   Design différencié pour mettre en valeur le plan recommandé
   =========================================== */

/* Bouton plan populaire - Gradient principal */
.pricing-popular .signup-plan-button {
  background: var(--gradient-primary);
  color: var(--color-text);
}
.pricing-popular .signup-plan-button:hover {
  background: var(--gradient-hover);
}

/* Bouton plan standard - Fond clair avec contour design */
.pricing-card:not(.pricing-popular) .signup-plan-button {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-dark);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-base), inset 0 1px 2px rgba(255, 255, 255, 0.1);
}
.pricing-card:not(.pricing-popular) .signup-plan-button:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--color-text-dark);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: var(--shadow-hover), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* ===========================================
   8. BOUTONS MODERNES - FORME PILL
   ===========================================
   
   Boutons avec design moderne arrondi :
   - .modern-button : Style pill principal
   - .modern-button--secondary : Variante secondaire
   - .has-pulse : Effet de pulsation animée
   
   Forme arrondie (border-radius: 9999px)
   =========================================== */

/* Bouton moderne principal */
.modern-button {
  padding: 0.8rem 1.8rem;
  border-radius: 9999px; /* Forme pill */
  background: var(--gradient-primary);
  color: var(--color-text);
}

/* Bouton moderne secondaire */
.modern-button--secondary {
  background: linear-gradient(to right, var(--color-pink), var(--color-accent));
}

/* Effet de pulsation pour boutons modernes */
.modern-button.has-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 1px solid rgba(var(--rgb-primary), 0.5);
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  animation: modern-pulse 2.5s infinite ease-out;
  z-index: -2;
}

.modern-button--secondary.has-pulse::after {
  border-color: rgba(var(--rgb-pink), 0.5);
}

@keyframes modern-pulse {
  0% { 
    transform: translate(-50%, -50%) scale(0.95); 
    opacity: 0; 
  }
  50% { 
    opacity: 1; 
  }
  100% { 
    transform: translate(-50%, -50%) scale(1.4); 
    opacity: 0; 
  }
}


/* ===========================================
   9. RESPONSIVE DESIGN - ADAPTATIONS MOBILES
   ===========================================
   
   Adaptations pour appareils mobiles :
   - Tailles ajustées pour tactile
   - Layout flex pour conteneurs
   - Boutons pleine largeur sur mobile
   
   Breakpoint : max-width 768px
   =========================================== */

/* Container pour les boutons héros */
.hero-buttons-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Adaptations mobiles */
@media (max-width: 768px) {
  .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
  
  .modern-button {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
  
  .hero-buttons-container {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }
  
  .hero-buttons-container .btn {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ===========================================
   10. BOUTONS LIQUID GLASS - ÉQUIPE
   ===========================================
   
   Style spécial pour les boutons d'équipe :
   - .btn--liquid-glass-team : Design blanc cassé sophistiqué
   - Animation organicPulse : Respiration naturelle
   - Effet 3D avec ombres multiples
   
   Utilisé uniquement pour la section équipe
   =========================================== */

/* Variables pour bouton simple blanc cassé */
.btn--liquid-glass-team {
  /* Couleurs simples */
  --team-bg-color: rgba(245, 245, 245, 0.95);
  --team-text-color: rgba(30, 30, 30, 0.9);
  --team-border-color: rgba(200, 200, 200, 0.3);
}

/* Bouton simple blanc cassé avec pulsation organique */
.btn--liquid-glass-team {
  position: relative;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--team-text-color) !important;
  
  /* Background simple blanc cassé */
  background: var(--team-bg-color);
  
  /* Style avec bords très arrondis et effet 3D */
  border-radius: 25px;
  border: 1px solid var(--team-border-color);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  /* Animation de pulsation organique */
  animation: organicPulse 4s ease-in-out infinite;
  
  /* Transitions */
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}

/* État hover - pause de l'animation et effet hover */
.btn--liquid-glass-team:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  animation-play-state: paused;
}

/* État actif */
.btn--liquid-glass-team:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
  animation-play-state: paused;
}

/* Animation de respiration organique */
@keyframes organicPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.15),
      0 2px 4px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  50% { 
    transform: scale(1.06); 
    box-shadow: 
      0 10px 20px rgba(0, 0, 0, 0.25),
      0 5px 10px rgba(0, 0, 0, 0.18),
      inset 0 2px 0 rgba(255, 255, 255, 0.35);
  }
}

/* ===========================================
   11. BOUTONS VIDÉO DÉMONSTRATION
   ===========================================
   
   Boutons interactifs pour vidéos de démo :
   - .btn--video-demo : Container principal avec glassmorphism
   - .btn--video-demo-play : Bouton play central
   - .btn--video-demo-text : Texte descriptif
   
   Design glassmorphism avec effets visuels avancés
   =========================================== */

/* Container pour les boutons vidéo de démonstration */
.btn--video-demo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.2/1;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  
  /* Visual styling */
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(139, 92, 246, 0.15) 50%, rgba(217, 70, 239, 0.1) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  /* Performance optimizations */
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.2s ease-out;
}

.btn--video-demo:hover {
  transform: scale(1.02) translateZ(0);
}

/* Contenu du bouton vidéo */
.btn--video-demo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* Bouton play à l'intérieur du bouton vidéo */
.btn--video-demo-play {
  width: 4.5rem !important;
  height: 4.5rem !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
  box-shadow: 
    0 8px 20px rgba(139, 92, 246, 0.4),
    0 0 30px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.2s ease-out;
  margin-bottom: 1rem;
}

.btn--video-demo:hover .btn--video-demo-play {
  transform: scale(1.05) translateZ(0);
}

/* Texte du bouton vidéo */
.btn--video-demo-text {
  font-weight: 500;
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.25rem;
}

.btn--video-demo-subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem;
}

/* Responsive pour mobile */
@media (max-width: 767px) {
  .btn--video-demo {
    aspect-ratio: 16/9 !important;
  }
}

/* Accessibilité */
.btn--video-demo:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.8);
  outline-offset: 2px;
}

/* ===========================================
   12. BOUTONS "EN SAVOIR PLUS" - FEATURES
   ===========================================
   
   Petits boutons pour sections de fonctionnalités :
   - .btn-feature-learn-more : Style compact et élégant
   - Taille réduite pour s'intégrer dans les cards
   - Gradient cohérent avec le thème
   
   Utilisés dans les sections de présentation des features
   =========================================== */

.btn-feature-learn-more {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.btn-feature-learn-more:hover {
  background: linear-gradient(135deg, #5b5ff6 0%, #7c3aed 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-feature-learn-more:active {
  transform: translateY(0);
}

/* ===========================================
   13. MODES SPÉCIAUX - ACCESSIBILITÉ
   ===========================================
   
   Adaptations pour besoins spécifiques :
   - @media print : Mode impression (couleurs adaptées)
   - @media prefers-reduced-motion : Réduction animations
   
   Respect des préférences utilisateur et accessibilité
   =========================================== */

/* Mode impression */
@media print {
  .btn, 
  .modern-button {
    background: #f3f4f6 !important;
    color: #111827 !important;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .btn::before, 
  .btn::after {
    display: none !important;
  }
}

/* ===========================================
   14. EFFET RIPPLE - STYLES POUR JAVASCRIPT
   ===========================================
   
   Styles pour les éléments créés dynamiquement par index.js :
   - .ripple-effect : Style de l'élément d'animation
   - .btn-ripple : Container avec overflow hidden
   
   La logique de création est dans index.js
   Ces styles définissent uniquement l'apparence
   =========================================== */

/* Styles pour l'effet ripple créé dynamiquement */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  pointer-events: none;
  z-index: 0;
}

/* Conteneur des boutons avec ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

/* Mode accessibilité - mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .modern-button,
  .btn--liquid-glass-team {
    transition: none;
    animation: none !important;
  }
  
  .btn:hover,
  .btn--liquid-glass-team:hover {
    transform: none;
    animation-play-state: paused;
  }
  
  .modern-button.has-pulse::after,
  .ripple-effect {
    animation: none;
  }
}