/* Style global pour le corps */
body {
  font-family: Arial, sans-serif; /* Police de caractère générale */
  margin: 0; /* Enlève les marges par défaut */
  padding: 0; /* Enlève les espacements internes par défaut */
  background-color: #fafafa; /* Couleur de fond globale */
}

/* Style pour l'en-tête */
header {
  background-color: #333; /* Couleur de fond de l'en-tête */
  color: white; /* Couleur du texte de l'en-tête */
  padding: 20px; /* Espacement intérieur de l'en-tête */
  text-align: center; /* Centre le texte de l'en-tête */
}

header h1 {
  margin: 0; /* Enlève les marges par défaut du titre */
  color: white;
}

/* Style pour la navigation */
nav {
  margin: 20px; /* Marge autour de la navigation */
}

/* Style pour la liste */
ul {
  list-style-type: none; /* Supprime les puces des éléments de liste */
  margin: 0; /* Enlève les marges par défaut */
  padding: 0; /* Enlève les espacements internes par défaut */
  width: 100%; /* Utilise toute la largeur disponible */
  max-width: 300px; /* Largeur maximale pour la liste */
  background-color: #f1f1f1; /* Couleur de fond de la liste */
  border-radius: 8px; /* Bordures arrondies */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Style pour les éléments de la liste */
li {
  border-bottom: 1px solid #ddd; /* Ligne de séparation entre les éléments */
}

/* Style pour les liens dans les éléments de liste */
li a {
  display: block; /* Affiche les liens comme des blocs pour la zone cliquable */
  color: #000; /* Couleur du texte des liens */
  padding: 8px 16px; /* Espacement intérieur */
  text-decoration: none; /* Supprime la sous-ligne des liens */
  font-size: 16px; /* Taille de la police */
}

/* Style pour les liens au survol */
li a:hover {
  background-color: #555; /* Couleur de fond au survol */
  color: white; /* Couleur du texte au survol */
  border-radius: 8px; /* Bordures arrondies au survol */
}

/* Style pour le contenu principal */
main {
  margin: 20px; /* Marge autour du contenu principal */
}

/* Style pour les titres */
h1 {
  font-size: 24px; /* Taille du titre */
  color: #333; /* Couleur du texte du titre */
}

/* Style pour les formulaires */
form {
  background-color: #fff; /* Couleur de fond du formulaire */
  padding: 20px; /* Espacement intérieur du formulaire */
  border-radius: 8px; /* Bordures arrondies */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  max-width: 600px; /* Largeur maximale du formulaire */
  margin: auto; /* Centre le formulaire horizontalement */
}

/* Style pour les labels et les champs de formulaire */
label {
  display: block; /* Affiche les labels en bloc pour un alignement propre */
  margin-bottom: 10px; /* Marge inférieure */
}

textarea, input[type="text"] {
  width: 100%; /* Utilise toute la largeur disponible */
  padding: 10px; /* Espacement intérieur */
  border: 1px solid #ccc; /* Bordure des champs de formulaire */
  border-radius: 4px; /* Bordures arrondies */
}

input[type="submit"] {
  background-color: #333; /* Couleur de fond du bouton de soumission */
  color: white; /* Couleur du texte du bouton */
  border: none; /* Enlève la bordure par défaut */
  padding: 10px 20px; /* Espacement intérieur du bouton */
  border-radius: 4px; /* Bordures arrondies du bouton */
  cursor: pointer; /* Curseur pointer pour le bouton */
}

input[type="submit"]:hover {
  background-color: #555; /* Couleur de fond du bouton au survol */
}