/* Responsive pour petits écrans (Smartphones) */
@media (max-width: 768px) {
  header .main-nav ul {
      flex-direction: column;
      text-align: center;
  }

  header .main-nav ul li {
      margin: 10px 0;
  }

  .hero {
      padding: 30px 10px;
  }

  .hero h2 {
      font-size: 1.8em;
  }

  .hero p {
      font-size: 1em;
  }

  .filters {
      padding: 15px;
  }

  .filters .filter-container {
      flex-direction: column;
      gap: 15px;
  }

  .catalog {
      padding: 15px;
  }

  .product-carousel {
      display: flex;
      flex-direction: column;
  }

  .product-item {
      width: 90%;
      margin: 0 auto;
  }

  .call-to-action {
      padding: 20px 10px;
  }
}

/* Responsive pour écrans moyens (Tablettes) */
@media (min-width: 769px) and (max-width: 1024px) {
  header .main-nav ul {
      flex-direction: row;
      justify-content: space-around;
  }

  .hero {
      padding: 40px 20px;
  }

  .hero h2 {
      font-size: 2.2em;
  }

  .filters {
      padding: 20px;
  }

  .filters .filter-container {
      gap: 10px;
  }

  .catalog {
      padding: 20px;
  }

  .product-carousel {
      gap: 15px;
  }

  .product-item {
      width: 280px;
  }
}

/* Responsive pour très petits écrans (Téléphones anciens) */
@media (max-width: 480px) {
  header {
      text-align: center;
  }

  header .main-nav ul {
      flex-direction: column;
      align-items: center;
  }

  .hero h2 {
      font-size: 1.5em;
  }

  .hero p {
      font-size: 0.9em;
  }

  .product-item {
      width: 95%;
  }
}

/* Responsive pour écrans très larges (Grand Moniteur) */
@media (min-width: 1200px) {
  .catalog {
      max-width: 1400px;
  }

  .product-item {
      width: 300px;
  }

  .hero {
      padding: 60px 40px;
  }

  .hero h2 {
      font-size: 3em;
  }
}

/* Styles pour les écrans de moins de 768px */
@media (max-width: 768px) {
    body {
      font-size: 16px; /* Texte plus lisible sur mobile */
      padding: 10px;
    }
  
    header {
      flex-direction: column; /* Empile les éléments dans l'en-tête */
      align-items: center;
    }
  
    nav ul {
      flex-direction: column; /* Affiche le menu en colonne */
      gap: 10px;
    }
  
    .service, .realisation, .testimonial {
      flex-direction: column; /* Empile les éléments */
      align-items: center;
      text-align: center;
    }
  
    img {
      width: 100%; /* Images ajustées à l'écran */
      height: auto;
    }
  }
  
  .menu-toggle {
    display: none;
  }
  
  @media (max-width: 768px) {
    .menu-toggle {
      display: block;
      font-size: 24px;
      cursor: pointer;
    }
  
    .main-nav {
      display: none;
      flex-direction: column;
    }
  
    .main-nav.active {
      display: flex;
    }
  }