/* Styles personnalisés pour les boutons CTA sur mobile */
@media (max-width: 640px) {
  .hero-cta-button {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
  }
  
  /* Ajustement des titres sur mobile */
  h1.text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }
  
  /* Ajustement de la hauteur des sections hero sur mobile */
  .h-\[70vh\] {
    height: 50vh !important;
  }
  
  /* Amélioration du formulaire de contact sur mobile */
  .rounded-3xl {
    border-radius: 1.5rem !important;
  }
  
  /* Ajustement du padding sur mobile */
  .p-8 {
    padding: 1.5rem !important;
  }
  
  /* Amélioration de la lisibilité des textes sur mobile */
  .text-xl {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
  }
}

/* Styles pour les boutons CTA sur desktop */
.hero-cta-button {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.hero-cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Styles améliorés pour le menu hamburger */
@media (max-width: 768px) {
  /* Animation pour le menu hamburger */
  .hamburger-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
  }
  
  .hamburger-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms, transform 200ms;
  }
  
  .hamburger-menu-exit {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hamburger-menu-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 150ms, transform 150ms;
  }
  
  /* Styles pour le bouton du menu */
  button[aria-label="Ouvrir le menu"],
  button[aria-label="Fermer le menu"] {
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  button[aria-label="Ouvrir le menu"]:active,
  button[aria-label="Fermer le menu"]:active {
    transform: scale(0.95);
  }
  
  /* Style minimaliste pour le menu mobile */
  .md\:hidden.bg-white {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
  }
  
  /* Amélioration du footer sur mobile */
  footer .grid-cols-1 > div {
    text-align: center !important;
  }
  
  footer .flex.items-center,
  footer .flex.items-start {
    justify-content: center !important;
  }
  
  /* Amélioration de la galerie sur mobile */
  .gallery-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  
  /* Amélioration du scroll sur mobile */
  html, body {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Amélioration des inputs sur mobile */
  input, select, textarea {
    font-size: 16px !important; /* Empêche le zoom automatique sur iOS */
  }
}

/* Styles pour les animations de la galerie sur mobile */
@media (max-width: 768px) {
  /* Animation de swipe pour la galerie */
  .gallery-grid {
    overflow: visible !important;
  }
  
  /* Effet de carte 3D au toucher sur mobile */
  .gallery-grid > div {
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    touch-action: manipulation !important;
    will-change: transform !important;
  }
  
  /* Effet de tilt 3D au toucher */
  .gallery-grid > div:active {
    transform: rotateY(2deg) rotateX(2deg) scale(0.98) !important;
    transition: transform 0.2s ease-out !important;
  }
  
  /* Amélioration des transitions du lightbox sur mobile */
  .fixed.inset-0.bg-black\/90 {
    overscroll-behavior: contain !important;
    touch-action: none !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  /* Boutons de navigation plus grands sur mobile */
  .fixed.inset-0.bg-black\/90 button {
    padding: 0.75rem !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
  }
  
  /* Effet de pression sur les boutons */
  .fixed.inset-0.bg-black\/90 button:active {
    transform: scale(0.9) !important;
    transition: transform 0.1s ease-out !important;
  }
  
  /* Indicateurs de pagination plus visibles sur mobile */
  .fixed.inset-0.bg-black\/90 .w-3.h-3 {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin: 0 0.25rem !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  }
  
  /* Animation de pulse pour les indicateurs actifs */
  .fixed.inset-0.bg-black\/90 .bg-white {
    animation: pulse 2s infinite !important;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  
  /* Effet de parallaxe sur les images au scroll */
  .gallery-grid .aspect-\[4\/3\] {
    transform: translateZ(0);
    will-change: transform;
  }
  
  /* Animation d'entrée pour les éléments de la galerie */
  .gallery-grid > div {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    animation-delay: calc(var(--index, 0) * 100ms);
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation pour le lightbox */
  .fixed.inset-0.bg-black\/90 img {
    animation: zoomIn 0.3s ease-out forwards;
  }
  
  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Animation de déplacement pour les flèches */
  .fixed.inset-0.bg-black\/90 button svg {
    animation: float 2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }
  
  @keyframes float {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(3px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  
  /* Animation pour les textes dans le lightbox */
  .fixed.inset-0.bg-black\/90 h3,
  .fixed.inset-0.bg-black\/90 p {
    animation: slideUp 0.5s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
    transform: translateY(20px);
  }
  
  .fixed.inset-0.bg-black\/90 p {
    animation-delay: 0.3s;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Effet de glitch sur les images au chargement */
  .gallery-grid img:not([src=""]) {
    animation: glitch 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    clip-path: inset(0 0 0 0);
  }
  
  @keyframes glitch {
    0% {
      clip-path: inset(40% 0 61% 0);
      transform: translate(-10px, 5px);
    }
    20% {
      clip-path: inset(92% 0 1% 0);
      transform: translate(10px, -5px);
    }
    40% {
      clip-path: inset(43% 0 1% 0);
      transform: translate(-5px, 10px);
    }
    60% {
      clip-path: inset(25% 0 58% 0);
      transform: translate(5px, 5px);
    }
    80% {
      clip-path: inset(54% 0 7% 0);
      transform: translate(-5px, -10px);
    }
    100% {
      clip-path: inset(0 0 0 0);
      transform: translate(0);
    }
  }
  
  /* Optimisation des performances */
  .gallery-grid, 
  .gallery-grid > div,
  .gallery-grid img,
  .fixed.inset-0.bg-black\/90,
  .fixed.inset-0.bg-black\/90 img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Amélioration du swipe */
  .swipe-container {
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}

/* Styles pour les boutons CTA sur desktop */
.hero-cta-button {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.hero-cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}