/* image de fond qui ne bouge pas avec la page */
body {
	background-image: url(fond.jpg);
	background-attachment: fixed;
}
/* taille et centration des titres */
h1 {text-align: center;}
/* mise en page des éléments des tables de l'exercice 1.b */
table, td, tr, th{
    border : 1px;
    border-color : red;
    border-style : solid;
    background-color: #F9CBBA;
}
table{
    width : 320px;
    display : inline-block;
    position : relative;
    margin : 50px;
}
td{
    padding : 5px;
    margin : 5px;
}
th{
    background-color : #F9CBBA;
}
td.pronom{
    width : 40px;   
}
td.verbe{
    width : 80px;
    color : #F9CBBA;
}
input{
    width : 80px;   
}
button{
    width : 80px;
}
body {
	text-align: center;
}
/* corps de la page */
#corps {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
    text-align: justify;
	padding: 0px;
    width: 950px;
	height: 100%;
	/* cet attribut permet de rendre le fond un peu transparent (0.7 d'opacité) */
	background-color: rgba(242,242,242,0.7) ;
	padding: 50px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
/* mise en page de tous les objets deplacables de l'exercice 1.a */
.carte {
	float: left;
	width: 70px;
	border: 1px solid #999;
	background-color: #F9F6D0;
	padding: 10px 15px;
	font-weight: bold;
	font-size: 16px;
	margin-right: 20px;
	margin-bottom: 50px;
}
/* div qui permet d'éviter le soucis dit de la guillotine */
.clear {
	clear: both;
	overflow: hidden;
}
/* mise en page de tous les conteneur de l'exercice 1.a */
.container {
	float: left;
	width: 150px;
	height: 200px;
	background-color: #F9CBBA;
	border: 2px;
	border-color : red;
    border-style : solid;
	padding: 10px 15px;
	margin-left: 20px;
	margin-bottom: 20px;
	text-align: center;
}
/*classe pour donner un feedback lorsque l'item est placé dans le bon conteneur */
.juste {
	background-color: lightgreen;
	border: 2px;
	border-color : green;
}

/* mise en page des listes selectables  */
.select { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	width: 100px; 
	height: 100px; 
  }
/* mise en page des points de la liste */
.select li { 
	margin: 3px; 
	padding: 0.4em; 
	height: 18px; 
}
/* mise en page lorsque l'item choisi est correct */
.ui-selected.bon { 
	background: green; 
	color: white; 
}
/* mise en page lorsque l'item est incorrect */
.ui-selected.mauv { 
	background: red; 
	color: white; 
}
/* mise ne page de la div avec phrase à traduire  */
.phrase {
	align-content: center;
	width: 700px;
	height: 100px;
	display: flex;
    flex-wrap:nowrap;
	
}
/* mise page de chaque sous-exercice de l'exercice 2 */
.ex {
	text-align: left;
	margin-left: 100px;
	font-size: 1.2em;
	width: 700px;
	height: 150px;
	background-color: #F9CBBA;
	border: 2px;
	border-color : red;
    border-style : solid;
	padding: 20px;
	margin-bottom: 5px;
	
}