/* ===========================================
   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, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 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 des sections Hero :
   - btn--hero-pricing : fond blanc semi-transparent, pages du blog
   =========================================== */

/* 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--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 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. RESPONSIVE DESIGN - ADAPTATIONS MOBILES
   ===========================================
   
   Adaptations pour appareils mobiles : tailles ajustées pour le tactile
   
   Breakpoint : max-width 768px
   =========================================== */

/* Adaptations mobiles */
@media (max-width: 768px) {
  .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}

/* ===========================================
   6. 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 {
    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;
  }
}

/* ===========================================
   7. 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 {
    transition: none;
    animation: none !important;
  }

  .btn:hover {
    transform: none;
    animation-play-state: paused;
  }

  .ripple-effect {
    animation: none;
  }
}