/* ================================================
   ARTEMYS - CSS CAROUSEL COMPLET AVEC ANIMATIONS
   VERSION AVEC FLÈCHES EN BAS CENTRE + DÉCALAGE DROITE
   ================================================ */

/* Safari fix : Forcer l'isolement des effets sur les cartes pour une meilleure animation */

/* === MASQUER LES TRACKS INACTIFS (AVEC TRANSITION) === */
.services-section .carousel-wrapper .carousel-track.swiper {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: relative;
}

.services-section .carousel-wrapper .carousel-track.swiper.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: trackFadeSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes trackFadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================
   ✅ NOUVEAU : DÉCALAGE À DROITE DU CAROUSEL
   ================================================ */
.services-section .carousel-wrapper {
  position: relative;
  margin-left: 15%; /* ✅ Décale le carousel à droite, laisse du blanc à gauche */
  padding-right: 15%; /* ✅ IMPORTANT : Espace à droite pour que la dernière carte ne soit pas coupée */
  padding-bottom: 100px; /* ✅ Espace pour les flèches en bas */
}

/* === SWIPER CONFIGURATION === */
.services-section .swiper {
  width: 100%;
  padding: 20px 0;
  overflow: visible;
}

.services-section .swiper-wrapper {
  display: flex;
}

.services-section .swiper-slide {
  width: auto;
  flex-shrink: 0;
  height: auto;
  /* Fix Safari issue with contain/isolation for animations */
  contain: layout paint style;
  isolation: isolate;
  /* Pour Safari : forcer le stacking context et l'accélération matérielle */
  will-change: opacity, transform;
  backface-visibility: hidden;
  perspective: 800px;
}

/* === ANIMATION CASCADE DES CARTES === */
/* Utiliser both au lieu de backwards pour la compatibilité avec Safari */
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide {
  animation: cardStaggerAppear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Délais en cascade pour chaque carte */
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(1) {
  animation-delay: 0.1s;
}
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(2) {
  animation-delay: 0.2s;
}
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(3) {
  animation-delay: 0.3s;
}
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(4) {
  animation-delay: 0.4s;
}
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(5) {
  animation-delay: 0.5s;
}
.services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(6) {
  animation-delay: 0.6s;
}

/* Amélioration du keyframe pour Safari : utiliser opacity et transform sans filter */
@keyframes cardStaggerAppear {
  0% {
    opacity: 0.01;
    /* Pour Safari : séparer les fonctions sur transform */
    transform: translateY(30px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* === CARTES === */
.services-section .card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid #000;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Safari fix : stacking context */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0); /* force la couche GPU pour Safari */
  isolation: isolate;
}

.services-section .card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  border-color: var(--color-primary);
}

.services-section .card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.5s ease;
  will-change: transform;
  backface-visibility: hidden;
}

.services-section .card:hover img {
  transform: scale(1.08);
}

.services-section .card-content {
  padding: 24px;
  background: var(--color-orange);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}

/* Petit effet de brillance au hover */
.services-section .card-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.services-section .card:hover .card-content::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

.services-section .card-content h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

.services-section .card:hover .card-content h3 {
  color: var(--color-primary);
}

.services-section .card-content p {
  font-size: 16px;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.services-section .card-content a,
.services-section .card-content button,
.services-section .card-content .brxe-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  margin-top: auto;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

/* ================================================
   ✅ NOUVEAU : FLÈCHES EN BAS AU CENTRE
   ================================================ */

/* === FLÈCHES DE NAVIGATION SWIPER (EN BAS AU CENTRE) === */
.services-section .swiper-button-prev,
.services-section .swiper-button-next {
  /* ✅ Position en bas au centre */
  position: absolute !important;
  top: auto !important;
  bottom: 20px !important;
  left: 50% !important;
  margin: 0 !important;
  
  /* Style */
  width: 60px !important;
  height: 60px !important;
  background: var(--color-orange) !important;
  border-radius: 50% !important;
  color: transparent !important; /* Masquer le texte par défaut */
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  z-index: 100 !important;
}

/* ✅ FLÈCHE PRÉCÉDENTE (à gauche du centre) */
.services-section .swiper-button-prev {
  transform: translateX(calc(-50% - 40px)) !important; /* ✅ 40px à gauche du centre */
}

/* ✅ FLÈCHE SUIVANTE (à droite du centre) */
.services-section .swiper-button-next {
  transform: translateX(calc(-50% + 40px)) !important; /* ✅ 40px à droite du centre */
}

/* ✅ HOVER */
.services-section .swiper-button-prev:hover,
.services-section .swiper-button-next:hover {
  background: var(--color-primary) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(48, 97, 70, 0.3) !important;
}

.services-section .swiper-button-prev:hover {
  transform: translateX(calc(-50% - 40px)) scale(1.15) !important;
}

.services-section .swiper-button-next:hover {
  transform: translateX(calc(-50% + 40px)) scale(1.15) !important;
}

.services-section .swiper-button-prev:active {
  transform: translateX(calc(-50% - 40px)) scale(1.05) !important;
}

.services-section .swiper-button-next:active {
  transform: translateX(calc(-50% + 40px)) scale(1.05) !important;
}

/* ✅ SVG PERSONNALISÉS POUR LES FLÈCHES */
.services-section .swiper-button-prev::after,
.services-section .swiper-button-next::after {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.services-section .swiper-button-prev::after {
  background-image: url('../img/arrow-left.svg') !important;
}

.services-section .swiper-button-next::after {
  background-image: url('../img/arrow-right.svg') !important;
}

/* Animation au clic */
.services-section .swiper-button-prev:active::after {
  animation: arrowBounce 0.4s ease;
}

@keyframes arrowBounce {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  50% { transform: translate(-50%, -50%) translateX(-4px); }
}

.services-section .swiper-button-next:active::after {
  animation: arrowBounceRight 0.4s ease;
}

@keyframes arrowBounceRight {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  50% { transform: translate(-50%, -50%) translateX(4px); }
}

/* Masquer les flèches si pas assez de slides */
.services-section .swiper-button-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.services-section .swiper-button-disabled:hover {
  background: var(--color-orange) !important;
  color: var(--color-dark) !important;
}

/* === ONGLETS (AVEC MICRO-ANIMATIONS) === */
.services-section .tabs-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 60px;
  background: #fcf5ef;
  border: 2px solid #000;
  border-radius: 50px;
}

.services-section .tab {
  padding: 16px 32px;
  background:#fcf5ef;
  color: var(--color-dark);
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.services-section .tab::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(48, 97, 70, 0.1);
  transform: translate(-50%, -50%);
  transition: width 1.5s ease, height 1.5s ease;
}

.services-section .tab:hover::before {
  width: 300px;
  height: 300px;
}

.services-section .tab:hover {
  transform: translateY(0);
}

.services-section .tab.active {
  background: var(--color-primary);
  color: white;
  border: #000;
}

.services-section .tab:active {
  transform: translateY(0) scale(0.97);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .services-section .carousel-wrapper {
    margin-left: 10%; /* ✅ Moins de décalage sur tablette */
    padding-right: 10%; /* ✅ Espace à droite pour la dernière carte */
    padding-bottom: 90px;
  }
  
  .services-section .swiper-button-prev,
  .services-section .swiper-button-next {
    width: 50px !important;
    height: 50px !important;
  }
  
  .services-section .swiper-button-prev {
    transform: translateX(calc(-50% - 35px)) !important;
  }
  
  .services-section .swiper-button-next {
    transform: translateX(calc(-50% + 35px)) !important;
  }
  
  .services-section .swiper-button-prev:hover {
    transform: translateX(calc(-50% - 35px)) scale(1.15) !important;
  }
  
  .services-section .swiper-button-next:hover {
    transform: translateX(calc(-50% + 35px)) scale(1.15) !important;
  }
}

@media (max-width: 768px) {
  .services-section .carousel-wrapper {
    margin-left: 0; /* ✅ Pas de décalage sur mobile */
    padding-bottom: 80px;
  }
  
  .services-section .swiper-button-prev,
  .services-section .swiper-button-next {
    width: 44px !important;
    height: 44px !important;
  }
  
  .services-section .swiper-button-prev {
    transform: translateX(calc(-50% - 30px)) !important;
  }
  
  .services-section .swiper-button-next {
    transform: translateX(calc(-50% + 30px)) !important;
  }
  
  .services-section .swiper-button-prev:hover {
    transform: translateX(calc(-50% - 30px)) scale(1.15) !important;
  }
  
  .services-section .swiper-button-next:hover {
    transform: translateX(calc(-50% + 30px)) scale(1.15) !important;
  }
  
  .services-section .swiper-button-prev::after,
  .services-section .swiper-button-next::after {
    width: 20px !important;
    height: 20px !important;
  }
  
  .services-section .card img {
    height: 200px;
  }
  .services-section .card-content {
    padding: 20px;
  }
  .services-section .tab {
    padding: 12px 24px;
    font-size: 15px;
  }
  /* Réduire les délais d'animation sur mobile */
  .services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide {
    animation-duration: 0.5s;
  }
  .services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(n) {
    animation-delay: 0.05s;
  }
  .services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(2) {
    animation-delay: 0.1s;
  }
  .services-section .carousel-wrapper .carousel-track.swiper.active .swiper-slide:nth-child(3) {
    animation-delay: 0.15s;
  }
}

/* === OPTIMISATIONS PERFORMANCE === */
@media (prefers-reduced-motion: reduce) {
  .services-section *,
  .services-section *::before,
  .services-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Force GPU acceleration pour animations fluides */
.services-section .card,
.services-section .swiper-slide,
.services-section .swiper-button-prev,
.services-section .swiper-button-next,
.services-section .tab {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}