form 
{
  /* Juste pour centrer le formulaire sur la page */
  margin: 0 auto;
  width: 400px;

  /* Pour voir les limites de la forme */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
  
}

div + div
{
  margin-top: 1em;
}

label 
{
  /* Pour vous assurer que les étiquettes ont la même taille et sont bien aligner */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea 
{
  /* Pour vous assurer que tous les champs de texte ont les mêmes paramètres de police
     Par défaut, textarea sont fixés avec une police monospace */
  font-size: 1.4em comic_sans_ms;

  /* Pour donner la même taille pour tous les champs de texte */
  width: 300px;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  /* Pour harmoniser le look & feel de champ de texte frontière */
  border: 1px solid #999;
}

input:focus, textarea:focus 
{
  /* Pour donner un peu élevé ligh sur des éléments actifs */
  border-color: #000;
}

textarea 
{
  /* Pour aligner correctement multiligne champ de texte avec leur label */
  vertical-align: top;

  /* Pour donner assez de place pour taper un texte */
  height: 5em;

  /* Pour permettre aux utilisateurs de redimensionner une zone de texte à la verticale
      Il ne fonctionne que sur Chrome, Firefox et Safari */
  resize: vertical;
}

.button 
{
  /* Pour positionner les boutons pour la même position des champs de texte */
  padding-left: 90px; /* même taille que les éléments d'étiquetage */
}

button
{
  /* Cette marge supplémentaire représentent le même espace que l'espace entre les étiquettes et les champs de texte */
  margin-left: .5em;
}

fieldset
{
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
  font-size: 1.4em;
}