body {
	background-color: gray;
	margin: auto;
	width: 1000px;
}

h1 {
	color: white;
	text-align: center;
}

strong {
	font-weight: bold;
}

section {
	background-color: white;
	border-style: solid;
	border-radius: 10px;
	padding-left: 20px;
	width: 440px;
	display: inline-block;
	vertical-align: top;
	margin: 5px;
}

article {
	
	display: inline-block;
	vertical-align: top;
	width: 330px;
}

footer {
	text-align: center;
}

aside {
	
	display: inline-block;
	vertical-align: top;
	width: 100px;
}

form {
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: 400px;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
  background-color: white;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  display: inline-block;
  width: 90px;
  text-align: right;
}

.button {
  /* Pour placer le bouton à la même position que les champs texte */
  padding-left: 90px; /* même taille que les étiquettes */
}

button {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les étiquettes et les champs texte */
  margin-left: .5em;
}

input {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la même dimension */
  width: 250px;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #999;
}

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

.indice {
	background-color: white;
	border-style: solid;
	border-radius: 10px;
	padding-left: 20px;
	display: inline-block;
	vertical-align: top;
	width: 85px;
}

.flag {
	background-color: white;
	border-style: solid;
	border-radius: 10px;
	padding-left: 20px;
	display: inline-block;
	vertical-align: top;
	width: 1000px;
}

figure {
	text-align: center;
}