* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Quicksand', sans-serif; }
    body { background-color: #fff; color: #333; line-height: 1.6; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

.p{
  font-weight: 500;
}

    header {
      background-color: #F87B1B;
      padding: 20px 40px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
    }
    header h1 { font-size: 1.8rem; font-weight: 700; text-transform: lowercase; }
    nav a { margin-left: 25px; font-weight: 500; color: #fff; }
    nav a:hover { text-decoration: underline; }

    /* Intro */
    .intro {
      text-align: center;
      padding: 40px 20px;
    }
    .intro h2 { font-size: 2rem; color: #F87B1B; margin-bottom: 15px; }
    .intro p { font-size: 1rem; max-width: 700px; margin: 0 auto; }

    /* FAQ et Tutoriels */
    .section-container { max-width: 900px; margin: 50px auto; padding: 0 20px; }
    .section-container h3 { font-size: 1.6rem; color: #F87B1B; margin-bottom: 20px; text-align: center; }
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
    .card { background-color: #F87B1B; border-radius: 10px; padding: 20px; color: #fff; transition: transform 0.3s; }
    .card:hover { transform: translateY(-5px); }
    .card h4 { font-size: 1.2rem; margin-bottom: 10px; color: #fff; }
    .card p { font-size: 0.95rem; color: #000; }

    /* Formulaire contact */
    .contact { max-width: 700px; margin: 50px auto; padding: 0 20px; }
    .contact h3 { font-size: 1.6rem; color: #F87B1B; margin-bottom: 20px; text-align: center; }
    .contact form { display: flex; flex-direction: column; gap: 10px; }
    .contact input, .contact textarea, .contact select { padding: 10px; border-radius: 8px; border: 1px solid #ffb07c; font-family: 'Quicksand', sans-serif; font-size: 1rem; }
    .contact button { padding: 12px; border: none; border-radius: 8px; background-color: #ff7f2a; color: #fff; font-weight: 600; cursor: pointer; transition: background 0.3s; }
    .contact button:hover { background-color: #ff5500; }

    /* Footer */
    footer { background-color:#ff5500; color: #fff; text-align: center; padding: 20px; margin-top: 50px; }
    footer a { color: #fff; margin: 0 5px; font-weight: 500; }

    @media(max-width: 768px){
      header { flex-direction: column; text-align: center; }
      nav a { margin: 10px; display: inline-block; }
    }