@media (max-width: 640px) 
	{
	*
		{
		box-sizing: border-box;
		}

	body 
		{
		width: auto;
		margin: 0;
		padding: 0;
		}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video 
		{
		max-width: 100%;
		}
	
	/* conserver le ratio des images */

	img 
		{
		height: auto;
		}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp 
		{
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
		}
	
	code,
	pre,
	samp 
		{
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
		}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 
		{
		float: none;
		width: auto;
		}
	
	/* masquer/afficher les éléments  */

	.u-mobile 
		{
		display: block;
		display: revert !important; /* affichage des éléments */
		}
	
	.u-no-mobile 
		{
		display: none !important; /* masquage des éléments */
		}
	
	/* Un message personnalisé */

	body:before 
		{
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color:#777;
		}
	}
	

/* ******************************************************************** ECRITURE ************************************************************************************ */
/* ******************************************************************** ECRITURE ************************************************************************************ */
/* ******************************************************************** ECRITURE ************************************************************************************ */
/* ******************************************************************** ECRITURE ************************************************************************************ */
/* ******************************************************************** ECRITURE ************************************************************************************ */

h1
	{
	width:90%;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	text-align:center;
	font-size:1.5rem;
	color:#5472ae;
	float:left;
	margin-left:5%;
	margin-top:1%;
	font-weight:bold;
	}
	
p
	{
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-size:1rem;
	color:#000;
	float:none;
	margin-left:1%;
	margin-top:1%;
	font-weight:normal;
	display:block;
	}
	
a
	{
	color:#5472ae;
	}
	
a.question
	{
	margin-left:30%;
	font-size:2rem;
	}
	
a.questionsup
	{
	margin-left:10%;
	font-size:2rem;
	}
	
.gras
	{
	font-weight:bold;
	}
	
.souligne
	{
	text-decoration:underline;
	}
	
.rouge
	{
	color:#f00;
	}
	
.vert
	{
	color:#147f50;
	}
	
.vert1
	{
	color:#22780f;
	}
	
.vert2
	{
	color:#3a9d23;
	}
	
.bleu
	{
	color:#3748ff;
	}
	
.rose
	{
	color:#f9429e;
	}
	
.orange
	{
	color:#e86b07;
	}
	
.gris
	{
	color:#999;
	}
	
.noir
	{
	color:#000;
	}
	
.jaune
	{
	color:#f6dc12;
	}
	
	
/* ******************************************************************** BLOC ************************************************************************************ */
/* ******************************************************************** BLOC ************************************************************************************ */
/* ******************************************************************** BLOC ************************************************************************************ */
/* ******************************************************************** BLOC ************************************************************************************ */
/* ******************************************************************** BLOC ************************************************************************************ */
	
header
	{
	margin-top:1%;
	width:100%;
	height:auto;
	}
	
footer
	{
	margin-top:20%;
	width:100%;
	height:auto;
	}
	
article.enonce
	{
	display:inline-block;
	margin-top:1%;
	margin-left:1%;
	width:96%;
	border:1px #000 solid;
	border-radius:10px;
	background:#ccc;
	padding:1%;
	}
	
article.reponse
	{
	display:inline-block;
	margin-top:20%;
	margin-left:1%;
	width:96%;
	background:#fff;
	padding:1%;
	}