/* Responsive Design */

/* Pour les tablettes et les écrans moyens */
@media (max-width: 1024px) {
  header nav ul {
    flex-direction: column; /* Empile les éléments du menu */
    align-items: center; /* Centre le menu */
  }

  header nav ul li {
    margin: 10px 0; /* Espacement vertical entre les liens */
  }

  #services .services-grid {
    grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes */
  }

  #projects .projects-grid {
    grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes */
  }

  #hero h1 {
    font-size: 2.5rem; /* Réduction de la taille des titres */
  }

  #hero p {
    font-size: 1.2rem; /* Réduction de la taille des paragraphes */
  }

  .contact-container {
    flex-direction: column; /* Empile image et formulaire */
    align-items: center; /* Centre le contenu */
  }

  .contact-form {
    margin-left: 0; /* Supprime le décalage de gauche */
    margin-top: 20px; /* Ajoute un espacement en haut */
  }

  .contact-image img {
    width: 80%; /* Réduit la taille de l'image */
  }
}

/* Pour les mobiles et petits écrans */
@media (max-width: 768px) {
  header nav ul {
    display: none; /* Masque complètement le menu */
  }

  header .logo {
    display: block; /* Garde le logo visible */
    margin: 0 auto; /* Centre le logo */
  }

  #services .services-grid,
  #projects .projects-grid {
    grid-template-columns: 1fr; /* Une seule colonne */
  }

  #hero {
    height: auto; /* Ajuste la hauteur automatiquement */
    padding: 20px; /* Ajoute du padding */
  }

  #hero h1 {
    font-size: 2rem; /* Réduit encore plus la taille des titres */
  }

  #hero p {
    font-size: 1rem; /* Texte plus petit pour mobile */
  }

  .contact-container {
    flex-direction: column; /* Empile tout verticalement */
  }

  .contact-form, .contact-image img {
    width: 100%; /* Prend toute la largeur */
  }

  footer {
    font-size: 0.8rem; /* Réduit la taille du texte dans le footer */
  }
}

/* Pour les très petits écrans (ex. téléphones basiques) */
@media (max-width: 480px) {
  header {
    padding: 10px; /* Réduit le padding du header */
  }

  #hero h1 {
    font-size: 1.8rem; /* Encore plus petit */
  }

  #hero p {
    font-size: 0.9rem; /* Texte encore plus compact */
  }

  .cta-btn {
    padding: 8px 15px; /* Boutons plus petits */
    font-size: 0.9rem; /* Texte des boutons réduit */
  }

  .contact-title {
    font-size: 1.5rem; /* Réduction du titre */
  }
}