/* Reset de base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    h3 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #4fc3f7; /* bleu clair du site */
      margin: 25px 0 15px 0;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.05em;
      text-shadow: 0 0 8px rgba(79, 195, 247, 0.6); /* effet lumineux */
      border-left: 4px solid #8f00ff; /* petit rappel violet */
      padding-left: 12px; /* espace après la bordure */
    }

    h4 {
      font-size: 1.4em;
      color: #3ba7d5;
      font-weight: 600;
      margin-top: 15px;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 2px solid #3ba7d5;
      text-transform: uppercase; /* facultatif */
      text-shadow: 0px 0px 8px rgba(59, 167, 213, 0.6); /* lueur subtile */
    }

    .logo {
      display: block;
      margin: 0 auto;
      max-width: 300px; /* taille par défaut */
      height: auto;
    }

    /* Quand l’écran est plus petit que 600px (smartphones) */
    @media (max-width: 600px) {
      .logo {
        max-width: 120px; /* logo réduit sur mobile */
      }
    }

    body, html {
      height: 100%;
      font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #0a0a18;
      color: #eee;
      overflow-x: hidden;
      position: relative;
    }

    header {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 20px;
      position: relative;
      z-index: 10;
      background: linear-gradient(135deg, #1a1a40 0%, #0a0a18 80%);
      box-shadow: inset 0 0 150px 60px #3a0ca3;
    }

    header h1 {
      font-size: 3.5rem;
      font-weight: 700;
      color: #8f00ff;
      text-shadow: 0 0 12px #8f00ff, 0 0 20px #00c2ff;
      margin-bottom: 0.5rem;
      letter-spacing: 0.08em;
      font-family: 'Poppins', sans-serif;
    }

    header p.slogan {
      font-size: 1.6rem;
      font-weight: 500;
      font-style: italic;
      color: #4fc3f7;
      text-shadow: 0 0 10px #4fc3f7;
      margin-bottom: 1rem;
    }

    header p.accroche {
      font-size: 1.3rem;
      max-width: 600px;
      line-height: 1.5;
      color: #c0c8f7;
      text-shadow: 0 0 6px rgba(50, 130, 230, 0.7);
    }

.lang-switch {
  margin-top: 15px;
  font-size: 1rem;
}

.lang-switch a {
  color: #4fc3f7;
  text-decoration: none;
  font-weight: 600;
  margin: 0 5px;
  transition: color 0.3s ease;
}

.lang-switch a:hover {
  color: #8f00ff;
  text-decoration: underline;
}

main {
  padding: 40px 20px;
  max-width: 960px;
  margin: 0 auto 60px auto;
  background: #12122bdd;
  border-radius: 10px;
  box-shadow: 0 0 30px #3a0ca3cc;
  position: relative;
  z-index: 10;
  color: #ddd;
}

    section {
      margin-bottom: 50px;
    }

    section h2 {
      font-size: 2.2rem;
      color: #8f00ff;
      margin-bottom: 25px;
      border-bottom: 3px solid #00b4d8;
      padding-bottom: 10px;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.05em;
    }

    p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #b0b8f7;
    }

    /* Formulaire contact stylé */
    form {
      display: flex;
      flex-direction: column;
      gap: 18px;
      max-width: 400px;
    }

    input, textarea {
      padding: 12px 15px;
      border: 2px solid #3a0ca3;
      border-radius: 6px;
      background: #0a0a18;
      color: #eee;
      font-size: 1rem;
      font-family: 'Poppins', sans-serif;
      transition: border-color 0.3s ease;
    }

    input:focus, textarea:focus {
      outline: none;
      border-color: #00b4d8;
      box-shadow: 0 0 8px #00b4d8;
      background: #12122b;
    }

    input[type="submit"] {
      background-color: #8f00ff;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    input[type="submit"]:hover {
      background-color: #00b4d8;
      box-shadow: 0 0 15px #00b4d8;
    }

    a {
      color: #4fc3f7;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.3s ease;
    }

    a:hover {
      color: #8f00ff;
      text-decoration: underline;
    }

    #actualites {
  margin-top: 50px;
}

#actualites h2 {
  color: #8f00ff;
  border-bottom: 2px solid #00b4d8;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

.actu {
  margin-bottom: 25px;
  padding: 15px;
  border-left: 3px solid #00b4d8;
  background: #1a1a2e;
  border-radius: 6px;
}

.actu h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: #4fc3f7;
}

.actu .date {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 10px;
  font-style: italic;
}