/* Effet de parallaxe et mouvement d'image pour le carousel */
.carousel-image {
    transition: transform 0.7s ease-in-out;
    transform: scale(1.1);
  }
  
  .carousel-image.active {
    transform: scale(1);
  }
  
  .carousel-image.prev {
    transform: scale(1.05) translateX(-10px);
  }
  
  .carousel-image.next {
    transform: scale(1.05) translateX(10px);
  }
  
  /* Animation de mouvement fluide */
  @keyframes slideInFromRight {
    0% {
      transform: translateX(100%) scale(1.1);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%) scale(1.1);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes slideOutToLeft {
    0% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateX(-100%) scale(1.1);
      opacity: 0;
    }
  }
  
  @keyframes slideOutToRight {
    0% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateX(100%) scale(1.1);
      opacity: 0;
    }
  }
  
  /* Classes d'animation */
  .slide-in-right {
    animation: slideInFromRight 0.7s ease-in-out;
  }
  
  .slide-in-left {
    animation: slideInFromLeft 0.7s ease-in-out;
  }
  
  .slide-out-left {
    animation: slideOutToLeft 0.7s ease-in-out;
  }
  
  .slide-out-right {
    animation: slideOutToRight 0.7s ease-in-out;
  }
  
  /* Effet de parallaxe sur le conteneur */
  .carousel-container {
    overflow: hidden;
    position: relative;
    background-color: #0C2C4A; /* Couleur de fond pour éviter le blanc */
  }
  
  .carousel-container > div {
    position: relative;
    background-color: #0C2C4A; /* Couleur de fond pour éviter le blanc */
  }
  
  .carousel-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(12 44 74, 0.1) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  
  /* Effet de mouvement subtil sur les images */
  .carousel-image {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* Effet de zoom et mouvement pendant les transitions */
  .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .carousel-item[data-carousel-item="active"] {
    z-index: 2;
  }
  
  .carousel-item:not([data-carousel-item="active"]) {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  
  /* Pendant les animations, rendre visible l'image qui entre */
  .carousel-item .carousel-image.slide-in-right,
  .carousel-item .carousel-image.slide-in-left {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3;
  }
  
  .carousel-item .carousel-image.slide-out-left,
  .carousel-item .carousel-image.slide-out-right {
    z-index: 2;
  }
  
  .carousel-item[data-carousel-item="active"] .carousel-image {
    transform: scale(1) translateZ(0);
  }
  
  .carousel-item:not([data-carousel-item="active"]) .carousel-image {
    transform: scale(1.1) translateZ(0);
  }
  
  /* Effet de zoom avant lent et subtil */
  .carousel-item[data-carousel-item="active"] .carousel-image {
    animation: slowZoomIn 8s ease-in-out infinite;
  }
  
  @keyframes slowZoomIn {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* Effet de zoom très subtil pour les images non actives */
  .carousel-item:not([data-carousel-item="active"]) .carousel-image {
    animation: verySubtleZoom 10s ease-in-out infinite;
  }
  
  @keyframes verySubtleZoom {
    0% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1.12);
    }
    100% {
      transform: scale(1.1);
    }
  }
  
  /* carousel-animations.css - À ajouter dans votre CSS */
  
  /* Transitions fluides pour tous les items du carousel */
  [data-carousel-item] {
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  /* Animation sur l'image active */
  [data-carousel-item] .carousel-image {
    transition: transform 500ms ease-out;
  }
  
  /* Effet de zoom au survol (seulement sur item actif) */
  [data-carousel-item]:not(.hidden) .carousel-image:hover {
    transform: scale(1.05);
  }
  
  /* Animation d'entrée plus douce */
  [data-carousel-item]:not(.hidden) {
    animation: fadeIn 700ms ease-out;
  }
  
  @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  /* Navigation personnalisée */
  .nav-primary {
    background-color: var(--color-primary);
    color: var(--color-text-primary);
  }
  
  .nav-primary .nav-link {
    color: var(--color-text-primary);
  }
  
  .nav-primary .nav-link:hover {
    color: var(--color-accent);
  }
  
  /* Effet de navbar au scroll */
  .nav-sticky {
    /* Le background-color est géré par Alpine.js avec bg-secondary */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
  }
  
  .nav-sticky .navigation-menu li a {
    color: var(--color-primary) !important;
  }
  
  .nav-sticky .navigation-menu li a:hover {
    color: var(--color-accent) !important;
  }
  
  .nav-sticky .logo img.l-dark {
    display: block !important;
  }
  
  .nav-sticky .logo img.l-light {
    display: none !important;
  }
  
  .nav-sticky .login-btn-primary {
    display: none !important;
  }
  
  .nav-sticky .login-btn-light {
    display: inline-block !important;
  }
  
  /* S'assurer que les boutons restent alignés horizontalement */
  .nav-sticky .buy-button li {
    display: inline-block !important;
    vertical-align: middle !important;
  }
  
  /* Animation de transition pour la navbar */
  #topnav {
    transition: all 0.3s ease-in-out;
  }

  /* ============================================
     EFFETS DE PARALLAXE POUR LE CAROUSEL
     ============================================ */

  /* Conteneur du carousel avec overflow pour l'effet parallaxe */
  [data-carousel="slide"] {
    position: relative;
    overflow: hidden;
  }

  [data-carousel="slide"] > div {
    position: relative;
    height: 100%;
  }

  /* Effet de parallaxe - Zoom lent et continu */
  [data-carousel-item]:not(.hidden) {
    position: relative;
    overflow: hidden;
  }

  [data-carousel-item]:not(.hidden) img {
    animation: parallax 15s ease-in-out infinite;
    will-change: transform;
    transform-origin: center center;
    width: 120%;
    height: 120%;
    object-fit: cover;
  }

  @keyframes parallax {
    0% {
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* Pause l'animation au survol pour un effet plus interactif */
  [data-carousel-item]:not(.hidden):hover img {
    animation-play-state: paused;
  }

  /* Transition douce lors du changement de slide */
  [data-carousel-item] img {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Optimisation des performances */
  [data-carousel-item]:not(.hidden) img {
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
  }

  /* Effet de parallaxe au scroll (optionnel) */
  @media (prefers-reduced-motion: no-preference) {
    [data-carousel-item]:not(.hidden) img {
      animation: parallax 15s ease-in-out infinite;
    }
  }

  /* Désactiver l'animation pour les utilisateurs qui préfèrent moins de mouvement */
  @media (prefers-reduced-motion: reduce) {
    [data-carousel-item]:not(.hidden) img {
      animation: none;
      transform: translate(-50%, -50%) scale(1);
    }
  }