/* --- Style global de la page --- */
body {
  font-family: Arial, sans-serif; /* Police principale */
  background: linear-gradient(to left, #010e22, #1f305e); /* Dégradé bleu foncé */
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les espacements internes */
  color: white; /* Texte en blanc */
}

body, a {
  font-family: "Arial", sans-serif; /* remplacez par votre police */
}

/* --- Titres principaux --- */
h1 {
  font-size: 2.5em; /* Taille du titre */
  color: white; /* Texte blanc */
  text-shadow: white 0 0 10px; /* Effet lumineux autour du texte */
  text-align: center; /* Centrage horizontal */
}

h2 {
  text-align: center; /* Centrage horizontal */
  font-size: 2em; /* Taille intermédiaire */
  margin-bottom: 10px; /* Espacement sous le titre */
  text-shadow: lightgray 0 0 8px; /* Ombre claire autour du texte */
}

/* --- Paragraphes --- */
p {
  text-align: center; /* Centrage du texte */
  margin-bottom: 30px; /* Espacement sous chaque paragraphe */
}

/* --- Pied de page --- */
footer {
  position: fixed; /* Fixé en bas de la page */
  bottom: 0;
  width: 100%; /* Prend toute la largeur */
  background-color: #222; /* Fond gris foncé */
  color: white; /* Texte blanc */
  text-align: center; /* Centré */
  padding: 1em ; /* Espacement interne */
  font-size: 0.9em; /* Taille réduite */
  margin-left: -8px; /* Décalage pour compenser les marges globales */
}

/* --- En-tête --- */
header {
  display: flex; /* Disposition flexible */
  justify-content: space-between; /* Espacement entre le logo/titre et le menu */
  align-items: center; /* Aligne verticalement */
  padding: 10px 20px; /* Espacement interne */
  background: linear-gradient(to right, #000000, #434343); /* Dégradé sombre */
}

/* --- Navigation --- */
nav ul {
  display: flex; /* Les éléments <li> en ligne */
  margin: 0; /* Supprime marges par défaut */
  padding: 0; /* Supprime padding par défaut */
}

/* --- Boutons du menu --- */
.btn {
  font-weight: bold; /* Texte en gras */
  font-size: 1em; /* Taille standard */
  padding: 10px 15px; /* Espacement interne */
  margin-left: 20px; /* Espacement entre les boutons */
  list-style-type: none; /* Supprime les puces */
}

/* --- Liens hypertextes --- */
a {
  color: white; /* Texte blanc */
  font-family: Satisfy, cursive; /* Police manuscrite */
  text-decoration: none; /* Supprime le soulignement */
}

a:hover {
  text-decoration: underline; /* Soulignement au survol */
  color: lightgray; /* Change la couleur */
  text-shadow: whitesmoke 0 0 10px; /* Effet lumineux */
}

/* --- Section du formulaire de contact --- */
.contact-section {
  max-width: 600px; /* Largeur max */
  margin: 80px auto; /* Centré avec marge verticale */
  padding: 30px; /* Espacement interne */
  background: rgba(0, 0, 0, 0.6); /* Fond noir transparent */
  border-radius: 12px; /* Coins arrondis */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* Ombre claire */
  margin-bottom: 120px; /* Espace avant le footer */
}

/* --- Structure du formulaire --- */
.contact-form {
  display: flex; /* Utilise flexbox */
  flex-direction: column; /* Organisé en colonne */
}

/* --- Labels du formulaire --- */
.contact-form label {
  margin-top: 10px; /* Espacement au-dessus */
  font-weight: bold; /* Texte en gras */
}

/* --- Champs texte et zone de saisie --- */
.contact-form input,
.contact-form textarea {
  margin-top: 5px; /* Espacement au-dessus */
  padding: 10px; /* Espacement interne */
  border: none; /* Supprime les bordures par défaut */
  border-radius: 8px; /* Coins arrondis */
  font-size: 1em; /* Taille du texte */
  outline: none; /* Supprime le contour bleu au clic */
}

/* --- Effet focus sur les champs --- */
.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 8px white; /* Halo lumineux */
}

/* --- Bouton d’envoi --- */
.contact-form button {
  margin-top: 20px; /* Espacement au-dessus */
  padding: 12px; /* Espacement interne */
  border: none; /* Pas de bordure */
  border-radius: 8px; /* Coins arrondis */
  font-size: 1.1em; /* Texte légèrement plus grand */
  font-weight: bold; /* Texte en gras */
  background: linear-gradient(to right, #434343, #000000); /* Dégradé sombre */
  color: white; /* Texte blanc */
  cursor: pointer; /* Curseur main */
  transition: 0.3s; /* Animation fluide */
}

/* --- Effet hover bouton --- */
.contact-form button:hover {
  background: linear-gradient(to right, #222, #666); /* Change le dégradé */
  text-shadow: white 0 0 8px; /* Texte lumineux */
}