/* ============================================================
   STYLE GLOBAL DE LA PAGE
   ============================================================ */

/* Le sélecteur universel applique box-sizing à tous les éléments.
   Cela rend les tailles plus faciles à gérer avec les bordures et le padding. */
* {
  box-sizing: border-box;
}

/* Mise en forme générale du corps de la page. */
body {
  /* Couleur de fond de la page. */
  background-color: #fff;

  /* Couleur principale du texte. */
  color: #333;

  /* Police générale demandée dans l'exercice : sans-serif lisible. */
  font-family: Arial, Helvetica, sans-serif;

  /* Supprime la marge par défaut du navigateur. */
  margin: 0;

  /* Ajoute de l'espace autour du contenu. */
  padding: 1em;

  /* Améliore la lisibilité des paragraphes. */
  line-height: 1.6;
}

/* Conteneur principal : limite la largeur pour éviter que le texte soit trop étiré. */
.page {
  max-width: 760px;
  margin: 0 auto;
}

/* ============================================================
   TITRES
   ============================================================ */

/* Titre principal h1 :
   la consigne demande hotpink + une bordure inférieure violette pointillée. */
h1 {
  color: hotpink;
  font-size: 2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  border-bottom: 10px dotted purple;
  margin-bottom: 0.3em;
  padding-bottom: 0.2em;
}

/* Titre de niveau 2 :
   la consigne demande un affichage en italique. */
h2 {
  font-style: italic;
  font-size: 1.5em;
  margin-top: 1.6em;
}

/* ============================================================
   TEXTE DE PRÉSENTATION
   ============================================================ */

/* Classe utilisée pour le métier sous le nom. */
.job-title {
  color: green;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 1.2em;
}

/* Paragraphes de la biographie. */
p {
  margin-bottom: 1em;
}

/* ============================================================
   LISTE DE CONTACT
   ============================================================ */

/* Liste des informations de contact :
   fond gris clair, bordure violette et padding comme demandé. */
.contact-list {
  background-color: #d3d3d3;
  border: 5px solid purple;
  padding: 25px;
  margin-bottom: 1.5em;
}

/* Chaque élément de la liste reçoit un petit espace vertical. */
.contact-list li {
  margin-bottom: 0.4em;
}

/* Supprime l'espace sous le dernier élément pour garder une liste propre. */
.contact-list li:last-child {
  margin-bottom: 0;
}

/* ============================================================
   LIENS
   ============================================================ */

/* Les liens sont affichés en rouge comme demandé dans la consigne. */
a {
  color: red;
  font-weight: bold;
}

/* Au survol, les liens deviennent verts et ne sont plus soulignés. */
a:hover {
  color: green;
  text-decoration: none;
}

/* Lien de retour vers la Home Page. */
.back-link {
  display: inline-block;
  margin-top: 0.5em;
}

/* ============================================================
   RESPONSIVE SIMPLE
   ============================================================ */

/* Adaptation légère pour les petits écrans. */
@media (max-width: 600px) {
  body {
    padding: 0.8em;
  }

  h1 {
    font-size: 1.7em;
  }

  .contact-list {
    padding: 18px;
  }
}