/*──────────────────────────────────────────────────────────────────────────────────
  LIQUID GLASS BUTTON - STYLES ORGANISÉS ET OPTIMISÉS
  Réorganisation pour une meilleure maintenance et lisibilité
──────────────────────────────────────────────────────────────────────────────────*/

/* ====================================================================
   1. VARIABLES CSS ET CONFIGURATION GLOBALE
==================================================================== */
:root {
  /* Couleurs principales */
  --bg-color: rgba(255, 255, 255, 0.0001);
  --text-color-light: rgba(255, 255, 255, 0.95);
  --text-color-dark: rgba(0, 0, 0, 0.85);
  --text-color: var(--text-color-dark);
  --border-color: rgba(100, 180, 255, 0.12);
  --shadow-color: rgba(0, 0, 0, 0.03);
  --highlight-color: rgba(100, 180, 255, 0.18);
  --inset-shadow-top: rgba(100, 180, 255, 0.06);
  --inset-shadow-bottom: rgba(0, 0, 0, 0.02);
  
  /* Effets de verre optimisés */
  --glass-blur: 6px;
  --glass-saturate: 110%;
  --glass-contrast: 102%;
  
  /* Variables de transformation 3D */
  --mx: 50%;
  --my: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --bubble-y: 0px;
  --bubble-scale: 1;

  /* Transitions optimisées */
  --transform-duration: 1.2s;
  --transform-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --btn-transition: transform var(--transform-duration) var(--transform-timing),
                    padding 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    min-width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    min-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.4s ease-out;
  --btn-transition-no-transform: padding 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                                 min-width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                                 min-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                                 box-shadow 0.4s ease-out;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: rgba(15, 15, 15, 0.0005); 
    --text-color: var(--text-color-light); 
    --border-color: rgba(100, 180, 255, 0.06);
    --shadow-color: rgba(100, 180, 255, 0.08); 
    --highlight-color: rgba(100, 180, 255, 0.3); 
    --inset-shadow-top: rgba(100, 180, 255, 0.15);
    --inset-shadow-bottom: rgba(100, 180, 255, 0.08);
  }
}

/* ====================================================================
   2. STYLES PRINCIPAUX DU BOUTON (DESKTOP)
==================================================================== */
#liquid-glass-button {
  position: fixed;
  bottom: 24px;
  left: 50%;
  min-height: 48px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: 600 1.1rem/1 system-ui, -apple-system, sans-serif;
  color: var(--text-color);
  
  /* Background avec dégradés subtils */
  background:
    radial-gradient(ellipse at center, rgba(100, 180, 255, 0.005) 0%, var(--bg-color) 70%),
    linear-gradient(135deg, rgba(100, 180, 255, 0.002) 0%, var(--bg-color) 50%, rgba(100, 180, 255, 0.002) 100%);
  
  /* Effet verre */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  
  /* Style et forme */
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 4px 12px var(--shadow-color),
    inset 0 1px 2px var(--inset-shadow-top),
    inset 0 -1px 2px var(--inset-shadow-bottom);
  
  /* Transform 3D */
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: perspective(800px) 
    translateX(-50%) 
    translateY(var(--bubble-y, 0px)) 
    scale(var(--bubble-scale, 1)) 
    rotateX(var(--tilt-x)) 
    rotateY(var(--tilt-y));
  
  /* Performance */
  will-change: transform, opacity;
  contain: layout style paint;
  
  /* Interactions et transitions */
  transition: var(--btn-transition), color .35s ease, background-color .2s ease, opacity 0.4s ease-in-out;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
}

/* État ouvert du bouton */
#liquid-glass-button.open {
  padding: 24px 28px;
  min-width: 280px;
  min-height: 140px;
  overflow: visible;
}

/* ====================================================================
   3. ÉTATS DU BOUTON
==================================================================== */

/* État actif du scroll */
#liquid-glass-button.liquid-glass-active {
  transform: perspective(800px) 
    translateX(-50%) 
    translateY(var(--bubble-y, 10px)) 
    scale(var(--bubble-scale, 1.05)) 
    rotateX(var(--tilt-x)) 
    rotateY(var(--tilt-y));
  opacity: 1;
}

/* Animation de disparition (modale ouverte) */
#liquid-glass-button.hidden {
  opacity: 0;
  pointer-events: none;
  transform: perspective(800px) 
    translateX(-50%) 
    translateY(20px) 
    scale(0.95) 
    rotateX(0deg) 
    rotateY(0deg);
}

/* Animation de réapparition (modale fermée) */
#liquid-glass-button:not(.hidden) {
  opacity: 1;
  transition: var(--btn-transition), color .35s ease, background-color .2s ease, opacity 0.4s ease-in-out 0.2s;
}

/* États de bulle au scroll */
#liquid-glass-button.is-bubbling-up {
  --bubble-y: -25px;
  --bubble-scale: 1.15;
  --transform-duration: 0.65s;
  --transform-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#liquid-glass-button.is-settling {
  --bubble-y: 0px;
  --bubble-scale: 1;
  --transform-duration: 1.6s;
  --transform-timing: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ====================================================================
   4. STYLES DES ÉLÉMENTS INTERNES
==================================================================== */

/* Labels */
.label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s ease-out, transform 0.3s ease-out;
}

.label-main-text {
  font-size: 1.1em;
  font-weight: 700;
}

.label-sub-text {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.8;
}

#liquid-glass-button.open .label {
  opacity: 0;
  transform: scale(0.8);
  transition-duration: 0.1s;
}

/* Choix de contact */
.contact-choices {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
  transition:
    opacity 0.5s 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#liquid-glass-button.open .contact-choices {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* Boutons de choix */
.choice {
  padding: 14px 24px;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(5px);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-color);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
              0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: center;
  white-space: nowrap;
  min-width: 200px;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

.choice:active {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

/* ====================================================================
   5. STYLES DESKTOP AVEC HOVER
==================================================================== */
@media (hover: hover) {
  /* Hover du bouton principal */
  #liquid-glass-button:hover,
  #liquid-glass-button:focus-visible {
    outline: none;
    min-width: 270px;
    border-radius: 50px;
    padding: 60px 32px;
    box-shadow:
      0 20px 40px -5px rgba(0, 0, 0, 0.15),
      0 30px 60px -10px rgba(0, 0, 0, 0.12);
    left: 50%;
    transform-origin: center center;
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
  }

  /* Hover des labels */
  #liquid-glass-button:hover .label {
    opacity: 0;
    transform: scale(0.8);
    transition-duration: 0.1s;
  }

  /* Hover des choix */
  #liquid-glass-button:hover .contact-choices {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  /* Hover des boutons de choix */
  .choice:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
                0 8px 16px rgba(0,0,0,0.15);
    color: var(--text-color);
  }
}

/* ====================================================================
   6. OPTIMISATIONS MOBILE
==================================================================== */
@media (max-width: 768px) {
  
  /* Bouton principal sur mobile */
  #liquid-glass-button {
    min-width: 340px;
    padding: 14px 26px;
    transform-origin: center center !important;
    transition: var(--btn-transition) !important;
    will-change: transform, opacity;
    contain: layout style paint;
  }
  
  /* État spécial mobile pour éviter les bugs de transform */
  #liquid-glass-button.mobile-click-active {
    transition: var(--btn-transition-no-transform) !important;
  }
  
  /* État ouvert sur mobile */
  #liquid-glass-button.open {
    min-width: 360px;
    min-height: 140px;
    padding: 24px 28px;
    border-radius: 50px !important;
    box-shadow: 
      0 12px 30px -3px rgba(0, 0, 0, 0.2),
      0 20px 40px -6px rgba(0, 0, 0, 0.15);
    left: 50% !important;
    transform: perspective(800px) 
      translateX(-50%) 
      translateY(var(--bubble-y, 0px)) 
      scale(var(--bubble-scale, 1)) !important;
  }
  
  /* Désactiver animations liquid coûteuses sur mobile */
  #liquid-glass-button.liquid-in,
  #liquid-glass-button.liquid-out {
    animation: none !important;
  }
  
  /* Réduction du grossissement au scroll sur mobile */
  #liquid-glass-button.is-bubbling-up {
    --bubble-scale: 1.08 !important;
  }
  
  /* Optimisation des labels sur mobile */
  #liquid-glass-button .label {
    transition: 
      opacity 0.2s ease-out,
      transform 0.2s ease-out !important;
    will-change: opacity, transform;
  }
  
  #liquid-glass-button.open .label {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    transition-duration: 0.15s;
  }
  
  /* Optimisation des choix sur mobile */
  #liquid-glass-button .contact-choices {
    transition:
      opacity 0.2s 0.1s ease-out,
      transform 0.2s 0.1s ease-out !important;
    will-change: opacity, transform;
  }
  
  #liquid-glass-button.open .contact-choices {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }
  
  /* Animation de fermeture optimisée */
  #liquid-glass-button.open.closing .contact-choices {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.92) translateY(-4px) !important;
    transition: 
      opacity 0.28s ease 0s,
      transform 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s !important;
    pointer-events: none !important;
  }
  
  /* Taille du texte principal sur mobile */
  .label-main-text {
    font-size: 1em;
  }
  
  /* Styles des choix optimisés pour mobile */
  #liquid-glass-button .choice {
    /* Background solide pour éviter les artefacts */
    background: #1a1a1a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    /* Bordure simple */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* Texte contrasté */
    color: #ffffff !important;
    text-shadow: none !important;
    
    /* Ombre simple */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
  }
  
  #liquid-glass-button .choice:active {
    background: #0d0d0d !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  
  /* Héritage forcé pour les enfants */
  #liquid-glass-button .choice * {
    color: inherit !important;
    background: transparent !important;
  }
}

/* ====================================================================
   7. FALLBACKS ET ACCESSIBILITÉ
==================================================================== */

/* Fallback si backdrop-filter n'est pas supporté */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #liquid-glass-button {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* Option accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  #liquid-glass-button { 
    transition: none; 
  }
}

/* Désactiver effets de bordure inutilisés */
#liquid-glass-button::before,
#liquid-glass-button .edge-distort {
  display: none;
}

@media (hover: hover) {
  #liquid-glass-button:hover::before {
    display: none;
  }
}

/* ====================================================================
   8. ANIMATIONS KEYFRAMES
==================================================================== */

/* Classes d'animation */
.liquid-in {
  animation: liquid-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.liquid-out {
  animation: liquid-out 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Animation liquid-in (Desktop) */
@keyframes liquid-in {
  0% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 50px;
  }
  30% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(calc(var(--bubble-y, 0px) - 1.5px))
      scale(var(--bubble-scale, 1))
      scale3d(1.08, 0.92, 1)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 60px;
  }
  60% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      scale3d(0.97, 1.03, 1)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 40px;
  }
  80% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(calc(var(--bubble-y, 0px) - 0.5px))
      scale(var(--bubble-scale, 1))
      scale3d(1.02, 0.98, 1)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 55px;
  }
  100% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 50px;
  }
}

/* Animation liquid-out (Desktop) */
@keyframes liquid-out {
  0% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 50px;
  }
  20% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      scale3d(0.92, 1.08, 1)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 40px;
  }
  50% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(calc(var(--bubble-y, 0px) - 1.5px))
      scale(var(--bubble-scale, 1))
      scale3d(1.05, 0.95, 1)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 65px;
  }
  70% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      scale3d(0.98, 1.02, 1)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 48px;
  }
  100% {
    transform: perspective(800px)
      translateX(-50%)
      translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-radius: 50px;
  }
}

/* Versions mobile optimisées des animations */
@media (max-width: 768px) {
  @keyframes liquid-in {
    0% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(var(--bubble-y, 0px))
        scale(var(--bubble-scale, 1));
      border-radius: 50px;
    }
    30% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(calc(var(--bubble-y, 0px) - 1px))
        scale(var(--bubble-scale, 1))
        scale3d(1.05, 0.95, 1);
      border-radius: 55px;
    }
    60% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(var(--bubble-y, 0px))
        scale(var(--bubble-scale, 1))
        scale3d(0.98, 1.02, 1);
      border-radius: 45px;
    }
    100% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(var(--bubble-y, 0px))
        scale(var(--bubble-scale, 1));
      border-radius: 50px;
    }
  }

  @keyframes liquid-out {
    0% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(var(--bubble-y, 0px))
        scale(var(--bubble-scale, 1));
      border-radius: 50px;
    }
    20% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(var(--bubble-y, 0px))
        scale(var(--bubble-scale, 1))
        scale3d(0.95, 1.05, 1);
      border-radius: 45px;
    }
    50% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(calc(var(--bubble-y, 0px) - 1px))
        scale(var(--bubble-scale, 1))
        scale3d(1.03, 0.97, 1);
      border-radius: 60px;
    }
    100% {
      transform: perspective(800px)
        translateX(-50%)
        translateY(var(--bubble-y, 0px))
        scale(var(--bubble-scale, 1));
      border-radius: 50px;
    }
  }
}

/* ====================================================================
   9. STYLES UTILITAIRES ET DIVERS
==================================================================== */

/* Texte magnétique (si utilisé) */
.magnetic-text { 
  max-width: 600px; 
  margin: 5rem auto; 
  font-size: 1.5rem; 
  line-height: 1.6; 
  text-align: center; 
}

.magnetic-text .letter { 
  display: inline-block; 
  transition: transform .3s cubic-bezier(.2, .75, .4, 1); 
  will-change: transform; 
}