@import url("header.css");
@import url("footer.css");
@import url("cards.css");
@import url("sections.css");

/* GLOBAL */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: black;
  color: white;

  overflow-x: hidden; /* 🔥 FIX débordement mobile */
}

/* TITRES */
h1, h2, h3 {
  margin: 0;
}

/* LIENS */
a {
  text-decoration: none;
  color: inherit;
}

/* MOBILE */
@media (max-width: 768px) {

  /* HEADER spacing */
  .header {
    padding: 15px;
  }

  /* HERO */
  .hero {
    padding: 40px 15px 20px;
  }

  .hero h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  .subtitle {
    font-size: 14px;
    padding: 0 10px;
  }

  /* CARDS */
  .cards {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 10px;
  }

  .card {
    width: 90%;
    max-width: 320px;
  }

  /* STATS */
  .stats {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  /* CTA */
  .cta {
    padding: 30px 15px;
    text-align: center;
  }

  .cta-btn {
    width: 100%;
    max-width: 250px;
  }

  /* FAQ */
  .faq {
    padding: 10px;
  }

  .faq-item {
    padding: 15px;
  }

}