/* ══════════════════════════════════════
   animations.css
   Animations, classes reveal,
   toast de notification & responsive
══════════════════════════════════════ */

/* ══ ANIMATIONS KEYFRAMES ══ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Classes d'animation décalée au chargement du hero */
.a1 { animation: fadeUp .55s .05s both; }
.a2 { animation: fadeUp .55s .15s both; }
.a3 { animation: fadeUp .55s .25s both; }
.a4 { animation: fadeUp .55s .35s both; }
.a5 { animation: fadeUp .55s .45s both; }

/* ══ REVEAL AU SCROLL ══ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Délais de révélation en cascade */
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

/* ══ TOAST NOTIFICATION ══ */
.toast {
  position: fixed; bottom: 2rem; right: 2rem;
  background: #fff; border: 1.5px solid var(--blue);
  border-radius: 14px; padding: 1rem 1.5rem;
  font-size: .88rem; color: var(--text);
  box-shadow: 0 8px 32px rgba(9,117,244,.15);
  z-index: 999;
  transform: translateY(80px); opacity: 0;
  transition: transform .3s, opacity .3s;
  max-width: 300px;
}
.toast.show { transform: none; opacity: 1; }

/* ══ RESPONSIVE ══ */

/* Tablette large */
@media (max-width: 1024px) {
  .feat-grid          { grid-template-columns: repeat(2, 1fr); }
  .feat.big           { grid-column: span 2; }
}

/* Tablette */
@media (max-width: 900px) {
  .hero-inner,
  .parti-layout,
  .techpage-inner,
  .contact-grid,
  .footer-top          { grid-template-columns: 1fr; }

  .hero-visual-wrap,
  .hero-blob           { display: none; }

  .testi-grid,
  .pricing-grid        { grid-template-columns: 1fr; }

  .plan.popular        { transform: none; }
  .trust-section       { grid-template-columns: repeat(2, 1fr); }

  nav .nav-links       { display: none; }
  .hamburger           { display: flex; }

  .feat-grid           { grid-template-columns: 1fr; }
  .feat.big            { grid-column: span 1; display: block; }
}

/* Mobile */
@media (max-width: 480px) {
  section, .sec   { padding: 4rem 5%; }
  .fg-row         { grid-template-columns: 1fr; }
  .stats-grid     { gap: 1.5rem; }
}