/* ============================================
   ENERTON — Animations & Effects
   ============================================ */

/* --- Fade-in au scroll --- */
.anim-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.anim-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile : fade seul, pas de slide (evite le saut) */
@media (max-width: 640px) {
  .anim-fade {
    transform: translateY(12px);
  }
}

/* --- Stagger : delai echelonne pour les enfants --- */
.anim-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.anim-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.anim-stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
.anim-stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
.anim-stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
.anim-stagger.visible > * { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .anim-stagger > * { transform: translateY(10px); }
  .anim-stagger.visible > *:nth-child(2) { transition-delay: 50ms; }
  .anim-stagger.visible > *:nth-child(3) { transition-delay: 100ms; }
  .anim-stagger.visible > *:nth-child(4) { transition-delay: 150ms; }
}

/* --- Hero text animation --- */
.anim-hero {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.anim-hero.visible {
  opacity: 1;
  transform: translateX(0);
}
.anim-hero-delay {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease-out 0.4s, transform 0.5s ease-out 0.4s;
}
.anim-hero-delay.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .anim-hero { transform: translateX(0); transform: translateY(15px); }
}

/* --- Hover cards : desktop only --- */
@media (hover: hover) {
  .card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  }
  .card-hover img {
    transition: transform 0.4s ease;
  }
  .card-hover:hover img {
    transform: scale(1.06);
    overflow: hidden;
  }
}

/* Image overflow hidden for zoom */
.img-zoom {
  overflow: hidden;
  border-radius: 0.5rem;
}
.img-zoom img {
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .img-zoom:hover img {
    transform: scale(1.08);
  }
}

/* --- CTA pulse --- */
.cta-pulse {
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84, 145, 196, 0); }
  50% { box-shadow: 0 0 0 8px rgba(84, 145, 196, 0.15); }
}

/* --- Compteur anime --- */
.counter {
  display: inline-block;
}

/* --- Header shrink --- */
header {
  transition: height 0.3s ease, padding 0.3s ease;
}
header.shrink .flex.h-20 {
  height: 4rem !important;
}
header.shrink img {
  height: 2.5rem;
  transition: height 0.3s ease;
}

/* --- Nav underline effect (desktop) --- */
@media (hover: hover) {
  .nav-link {
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #5491C4;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after {
    width: 100%;
  }
}

/* --- Table row highlight --- */
@media (hover: hover) {
  tbody tr {
    transition: background-color 0.2s ease;
  }
  tbody tr:hover {
    background-color: rgba(84, 145, 196, 0.06);
  }
}

/* --- Tableau scroll shadow mobile --- */
.overflow-x-auto {
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* --- Badge shine effect (desktop only) --- */
@media (hover: hover) {
  .badge-shine {
    position: relative;
    overflow: hidden;
  }
  .badge-shine::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 4s ease-in-out infinite;
  }
  @keyframes shine {
    0%, 80%, 100% { left: -100%; }
    40% { left: 150%; }
  }
}

/* --- Smooth page transitions --- */
main {
  animation: pageIn 0.4s ease-out;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}