/* =====================================================
   Smart-ERP.fr — animations.css
   Animations d'apparition au scroll, micro-animations UI,
   design modernisé (glassmorphism, gradient text, blobs).
   Mode clair uniquement.
   ===================================================== */

/* =====================
   A. Apparition au scroll (Intersection Observer)
   ===================== */
.animate-on-scroll { will-change: opacity, transform; }

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.fade-in.visible { opacity: 1; }

.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-left.visible { opacity: 1; transform: translateX(0); }

.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-right.visible { opacity: 1; transform: translateX(0); }

.zoom-in {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.zoom-in.visible { opacity: 1; transform: scale(1); }

/* Délais en cascade */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* =====================
   B. Micro-animations UI permanentes
   ===================== */
/* Boutons : léger lift (renforce le style existant) */
.btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background var(--transition), color var(--transition); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,115,232,0.35); }
.btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,191,165,0.30); }

/* Cards : élévation au survol */
.card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* Header : rétrécit au scroll (classe ajoutée en JS) */
.site-header {
  transition: height var(--transition), box-shadow var(--transition), background var(--transition);
}
.site-header.scrolled {
  height: 60px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.98);
}

/* Barre de progression de lecture */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #1A73E8, #00BFA5);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Compteurs animés */
.counter {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

/* =====================
   Design modernisé
   ===================== */
/* Texte en dégradé pour accents de titres */
.gradient-text {
  background: linear-gradient(135deg, #1A73E8, #00BFA5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Carte "verre dépoli" (hero) */
.glass-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Hero : blob décoratif flou en arrière-plan */
.hero { position: relative; }
.hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26,115,232,0.12), transparent 70%);
  top: -220px; right: -180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,191,165,0.10), transparent 70%);
  bottom: -240px; left: -160px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }

/* =====================
   ÉTAPE 5 — Section statistiques animées
   ===================== */
.stats-section {
  background: linear-gradient(135deg, #E8F0FE 0%, #E6F4F1 100%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  text-align: center;
}
.stat-item {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius);
  padding: var(--spacing-lg) var(--spacing-md);
}
.stat-item .counter + span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--color-primary);
}
.stat-item p {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin: var(--spacing-sm) 0 0;
}

/* =====================
   ÉTAPE 2 — Images réelles (Unsplash)
   ===================== */
.media-figure { margin: 0; }
.content-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow);
  object-fit: cover;
}
.content-img--tall { max-height: 460px; }

/* Image d'en-tête de page interne */
.page-hero { position: relative; overflow: hidden; }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--spacing-xl);
  align-items: center;
}
.page-hero__media .content-img { max-height: 320px; }

/* Photo dans le hero d'accueil */
.hero__photo {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(26,115,232,0.20);
  object-fit: cover;
}

/* Bande média pleine largeur dans le contenu */
.media-band { margin: var(--spacing-xl) 0; }
.media-band .content-img { max-height: 380px; }

/* Illustrations SVG animées intégrées */
.svg-illustration { width: 100%; height: auto; }
.svg-illustration svg { width: 100%; height: auto; display: block; }

/* =====================
   Accessibilité : mouvement réduit
   ===================== */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .fade-up, .fade-in, .slide-left, .slide-right, .zoom-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #scroll-progress { display: none; }
  .svg-illustration svg * { animation: none !important; }
}