/**
 * Initialisation
 */
html, body {
  background-color:orange;
}
body {
  color: #333;
  font: 15px/24px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}


/**
 * Mise en forme des blocs de chaque partie
 */
div.conteneur {
  max-width: 640px;

  /* marge extérieure au bloc */
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* Vieille astuce pour centrer un bloc, on met en 'auto' à gauche et à droite. Pour du simple texte dans un bloc, voir 'text-align: center;' */
  margin-left: auto;
  margin-right: auto;

  /* marge intérieure. Sans direction spécifiée = 4 directions identiques, sinon spécifier padding-left, etc. */
  padding: 0.5rem;

  background-color: Lavenderblush;

  box-shadow: 1px /* x */  1px /* y */   4px /* rayon */  rgba(0, 0, 0, 0.35) /* couleur */;

  /* bords arrondis */
  border-radius: 0.5rem;

  overflow: hidden; /* pour cacher le dépassement du background du h2 */
}


div.conteneur p,
div.conteneur ul {
  margin: 0;  /* écrasement de la valeur par défaut utilisée par la plupart des navigateurs. */
}
div.conteneur p:not(:first-child) {
  /* À part le premier paragraphe, tous les paragraphes ont une marge au-dessus d'eux. */
  margin: 0.5em 0 0;
}
div.conteneur h2 {
  color: white;
  background: hotpink;
  /* On s'amuse à coller à la bordure, sachant qu'elle est ombrée... */
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.1rem 1rem;
  font-size: 13px;
  max-width: 100%;
}
div.conteneur h2:first-child {
  /* Si h2 est le premier élément, on le colle en haut de la bordure. */
  margin-top: -0.5rem;
}

.mascotte {
    /* les éléments avec une classe "mascotte" flottent à droite en laissant de la place pour le texte. */
    float: right;
    max-width: 30%;
}

/* titres */
h1 {
  text-align: center;
}
h1 a {
  /* en général utilisé pour retour à la page d'accueil : pas de bleu/souligné */
  color: inherit;
  text-decoration: inherit;
}


/* dt/dd sur une même ligne + dt en gras */
dl {
  display: grid;
  grid-template-columns: min-content auto;
  align-items: center;
}
dt {
  grid-column-start: 1;
  white-space: nowrap; /* min-content mais sans retour à la ligne. */
  font-weight: bold;  /* titre en gras */
}
dd {
  grid-column-start: 2;
  margin: 0.2rem;
}