/* ============================================================
   SITA & Compagnie — Animations CSS custom
   ============================================================ */

/* 1. Fade-in hero au chargement */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2. Slide-in depuis gauche */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 3. Slide-in depuis droite */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 4. Zoom-in */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* 5. Scroll indicator hero */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%       { transform: translateY(8px); opacity: .4; }
}

/* 6. Loader barre */
@keyframes loaderSlide {
  from { transform: translateX(-60%); }
  to   { transform: translateX(200%); }
}

/* 7. Ripple boutons */
@keyframes rippleAnim {
  from { width: 0; height: 0; opacity: .6; }
  to   { width: 200px; height: 200px; opacity: 0; }
}

/* 8. Pulsation badge */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,171,224,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(77,171,224,0); }
}

/* 9. Gradient animé CTA bouton */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Classe d'animation hero */
.animate-hero-title {
  animation: heroFadeIn .9s ease forwards;
}
.animate-hero-subtitle {
  animation: heroFadeIn .9s ease .2s both;
}
.animate-hero-ctas {
  animation: heroFadeIn .9s ease .4s both;
}

/* Scroll indicator */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.6);
  font-size: .8rem;
  margin-top: 2.5rem;
  animation: scrollBounce 1.8s ease-in-out infinite;
}
.scroll-indicator-dot {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6) 0%, transparent 100%);
  border-radius: 2px;
}

/* Hover image zoom dans card */
.card-img-wrap {
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-img-wrap img {
  transition: transform .45s ease;
  width: 100%;
  display: block;
}
.card-img-wrap:hover img { transform: scale(1.06); }

/* Bouton CTA gradient au hover */
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  background-size: 200% 200%;
  animation: gradientShift 1.5s ease infinite;
}

/* Icône flèche se déplace au hover du bouton */
.btn .icon-arrow-right { transition: transform var(--transition); }
.btn:hover .icon-arrow-right { transform: translateX(5px); }

/* Badge pulsation */
.badge-pulse { animation: pulse 2s ease-in-out infinite; }

/* Underline nav animé gauche → droite */
.nav-link-animated {
  position: relative;
  display: inline-block;
}
.nav-link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition);
}
.nav-link-animated:hover::after { width: 100%; }

/* Hover service card */
.service-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  border-bottom: 3px solid transparent;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--color-secondary);
}
.service-card .service-icon {
  transition: transform var(--transition), color var(--transition);
}
.service-card:hover .service-icon {
  transform: scale(1.15) rotate(-5deg);
  color: var(--color-secondary);
}

/* Partenaires : défilement doux */
.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.partners-row img {
  transition: filter var(--transition), transform var(--transition), opacity var(--transition);
}

/* Ligne décorative qui pousse de gauche */
.line-anim {
  display: block;
  width: 0;
  height: 3px;
  background: var(--color-secondary);
  border-radius: 2px;
  transition: width .6s cubic-bezier(.25,.8,.25,1);
}
.line-anim.active { width: 60px; }

/* Apparition flottant WhatsApp */
#btn-whatsapp {
  transition: opacity .4s ease, transform var(--transition);
}
#btn-whatsapp.visible { opacity: 1; pointer-events: auto; }

/* ── Ping animation (point clignotant live) ───────────────── */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping {
  animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}

/* ── Transitions FAQ details/summary ─────────────────────── */
.faq-details summary .faq-icon {
  transition: transform .2s ease;
}
.faq-details[open] summary .faq-icon {
  transform: rotate(45deg);
}