/* 1. Le fond et les marges globales */
body {
  background-color: #ffe600;
  /* Un jaune vibrant très audacieux en fond */
  font-family: 'Courier New', Courier, monospace;
  /* Typographie style machine à écrire */
  color: #000000;
  margin: 40px auto;
  /* Centre le contenu avec une marge en haut/bas */
  max-width: 800px;
  /* Limite la largeur pour que ce soit lisible */
  padding: 20px;
}

/* 2. Le bandeau de titre */
header {
  background-color: #111111;
  /* Fond très sombre */
  border: 4px solid #000000;
  padding: 20px;
  box-shadow: 8px 8px 0px #0055ff;
  /* Ombre décalée bleu électrique */
  margin-bottom: 50px;
}

header h1 {
  color: #ff0055;
  /* Un rose fluo pour le titre qui "claque" sur le noir */
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 3. La liste des messages */
ul {
  list-style-type: none;
  /* On enlève les puces par défaut */
  padding: 0;
  margin: 0 0 40px 0;
  /* Marge en bas pour séparer de la zone de texte */
}

li {
  background-color: #ffffff;
  /* Fond blanc pour la lisibilité */
  border: 3px solid #000000;
  padding: 15px;
  margin-bottom: 20px;
  /* Espace entre chaque message */
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 5px 5px 0px #ff0055;
  /* Ombre dure rose fluo */
  transition: transform 0.2s;
  /* Prépare une petite animation */
}

/* Petit effet interactif quand on passe la souris sur un message */
li:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px #ff0055;
}

/* 4. La zone de texte */
textarea {
  width: 100%;
  background-color: #f4f4f4;
  border: 3px solid #000000;
  padding: 15px;
  font-family: 'Courier New', Courier, monospace;
  /* On garde la cohérence */
  font-size: 16px;
  box-shadow: 5px 5px 0px #000000;
  box-sizing: border-box;
  /* Empêche le 100% de déborder de l'écran */
  margin-bottom: 20px;
  /* Marge avant le bouton */
  resize: vertical;
  /* Permet d'agrandir la zone seulement en hauteur */
}

/* 5. Le bouton d'envoi */
button {
  background-color: #0055ff;
  /* Bleu électrique */
  color: #ffffff;
  font-size: 18px;
  font-weight:
}

/* --- Thème Sombre (Activé par JavaScript) --- */
body.dark-theme {
  background-color: #222222;
  /* Fond sombre */
  color: #eeeeee;
}

body.dark-theme li {
  background-color: #333333;
  color: #ffffff;
  border-color: #ff0055;
  /* On garde la touche fluo ! */
}

body.dark-theme textarea {
  background-color: #444444;
  color: #ffffff;
}