/* Tablettes et écrans moyens (768px à 991px) */
@media screen and (max-width: 991px) {
  main {
    max-width: 95%;
  }

  .activities-cards {
    padding: 0 10px;
  }

  .activity {
    margin-right: 15px;
  }

  #guide {
    padding: 40px 10%;
  }

  .guide-card {
    width: 90%;
    margin: 0 auto;
  }
}

/* Petites tablettes (576px à 767px) */
@media screen and (max-width: 767px) {
  .hero-title {
    font-size: 28px;
    max-width: 200px;
  }

  .hero-text {
    font-size: 16px;
    max-width: 350px;
    padding: 5px 15px;
  }

  .activities-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .activity {
    margin-right: 0;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  #guide {
    padding: 30px 5%;
  }

  .guide-card {
    width: 100%;
    padding: 15px 10px;
  }
}

/* Mobiles (jusqu'à 575px) */
@media screen and (max-width: 575px) {

  #hero {
    height: 280px;
    padding: 0 10px;
  }

  .hero-title {
    font-size: 24px;
    max-width: 180px;
  }

  .hero-text {
    font-size: 14px;
    max-width: 300px;
  }

  .activities-cards {
    flex-direction: column;
    align-items: center;
  }

  .activity {
    max-width: 250px;
    margin-bottom: 25px;
  }

  .activity-img {
    width: 80px;
    height: 80px;
  }

  #guide {
    padding: 20px 10px;
    max-width: 500px;
  }

  .guide-card {
    width: 450px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .guide-img {
    width: 150px;
    margin-right: 0;
    margin-bottom: 15px;
  }

}


@media screen and (max-width:  420px) {
  .guide-card {
    width: 350px;
  }

  }
/* Orientation paysage pour mobiles */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #hero {
    height: 200px;
  }

  .activities-cards {
    flex-direction: row;
  }

  .activity {
    max-width: 30%;
  }

}