/* Styles responsives */

@media (max-width: 900px) {
  .social-icons {
    display: none;
  }

  .mobile-social-icons {
    display: block;
  }

  .login-icon-mobile {
    display: block;
  }

  .login-tooltip {
    display: none;
  }
}

@media (max-width: 1024px) {
  .navbar-menu {
    gap: 1.5rem;
  }

  .navbar-menu > li > a {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
  }
}

@media (max-width: 900px) {
  .navbar-menu {
    display: none;
  }

  .burger-menu {
    display: flex;
  }

  .navbar {
    padding: 0 1.5rem;
  }

  .hero-section {
    padding: 3rem 2rem;
  }

  .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero-section p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .services-container {
    padding: 2rem 1.5rem;
  }

  .service-section,
  .service-section.reverse {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .service-image {
    flex: 0 0 auto;
    width: 100%;
    max-height: 300px;
  }

  /* Animation mobile au scroll */
  .service-image {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: none;
  }

  .service-image.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .service-image:hover {
    transform: scale(1) translateY(0);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }

  .service-image img {
    transition: none;
  }

  .service-image:hover img {
    transform: scale(1);
  }

  .service-content h2 {
    font-size: 1.8rem;
  }

  .service-content p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 0 1rem;
    height: var(--navbar-height-mobile);
  }

  .logo-icon {
    width: 55px;
    height: 55px;
  }

  .page-content {
    margin-top: var(--navbar-height-mobile);
    padding: 2rem 1.25rem;
  }

  .hero-section {
    padding: 2rem 1.5rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .services-container {
    padding: 1.5rem 1rem;
  }

  .service-section {
    margin-bottom: 2.5rem;
  }

  .service-content h2 {
    font-size: 1.6rem;
  }

  .service-content p {
    font-size: 0.95rem;
  }

  .service-content ul li {
    font-size: 0.9rem;
  }
}