body{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+41,cbebff+95,a1dbff+100 */
background: rgb(240,249,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(240,249,255,1) 41%, rgba(203,235,255,1) 95%, rgba(161,219,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(240,249,255,1) 41%,rgba(203,235,255,1) 95%,rgba(161,219,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(240,249,255,1) 41%,rgba(203,235,255,1) 95%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
	}
	
	html {
		scroll-behavior: smooth;
	}
	
	.italique
	{
		font-style:italic;
		/*font-size:12px;*/
		font-size:0.80em;
	}
	
	.italique2
	{
		font-style:italic;
		/*font-size:12px;*/
		font-size:0.90em;
	}
	
	#langFR
	{
		clear:both;
		margin:0;
		padding:0;
		display:block;
	}
	
	#langUK
	{
		clear:both;
		margin:0;
		padding:0;
		display:none;
	}
	
	#langNL
	{
		clear:both;
		margin:0;
		padding:0;
		display:none;
	}

	
@media screen and (min-width: 801px) {
	#coronavirus
	{
		margin:0 auto;
		width:900px;
		font-family:Arial;
		font-size:1em;
	}
	
	
	/* boutons */
	.boutons
	{
		clear:both;
		margin:40px 0 15px 0;
		text-align:center;
	}
	
	.button {
		display:inline-block;
		width:40%;
		box-sizing: inherit;
		font: inherit;
		overflow: visible;
		text-transform: none;
		-webkit-appearance: button;
		padding: 15px 32px;
		text-align: center;
		transition-duration: 0.4s;
		margin: 5px 16px 16px 0 ;
		text-decoration: none;
		font-size:0.875em;
		cursor: pointer;
		border-radius: 3px;
		background-color: white;
		color: black;
		border: 2px solid #00406D;
		font-weight:bold;
	}

	.button:hover {
	  background-color: #00406D;
	  color: white;
	}
	
	
	.drapeaux
	{
		clear:both;
		width:100%;
		margin:20px 0 0 0;
		text-align:center;
	}
	
	.flag {
		display:inline-block;
		width:100px;
		height:50px;
		padding: 0;
		text-align: center;
		transition-duration: 0.4s;
		margin: 0 0 0 15px;
		text-decoration: none;
		cursor: pointer;
	}
	
	.flag svg {
		width:100%;
		height:100%;
	}

}

	
	
	#coronavirus .title
	{
		margin:0 auto 20px auto;
		width:100%;
		text-align:center;
	}
	
	#coronavirus .title h1
	{
		/*font-size : 32px;*/
		font-size:2em;
		color:#00406D;
	}
	
	#coronavirus .title span
	{
		/*font-size : 30px;*/
		font-size:1.875em;
		color:#006400;
	}
	
	#coronavirus .entete
	{
		text-align:center;
		margin: 0 0 20px 0;
	}
	
	#coronavirus .maj
	{
		clear:both;
		float:right;
		margin:10px 0 0 0;
		font-style: oblique;
		font-size:1.3em;
		color:#8B0000;
	}
	
	#coronavirus p.actualisation
	{
		clear:both;
		float:left;
		margin:15px 0 0 0;
		font-style: oblique;
		text-align: justify;
	}
	
	#coronavirus span.salutations
	{
		clear:both;
		float:left;
		margin:15px 0 0 0;
		text-align: justify;
	}
	
	#coronavirus span.attache
	{
		
		text-align: justify;
		font-weight: bold;
		font-style: italic;
	}
	
	
	#coronavirus .logo
	{
		text-align:center;
		margin:10px auto 20px auto;
		width:75%;
	}
	
	#coronavirus .gestes
	{
		text-align:center;
	}
	
	
	#coronavirus .coronavirus
	{
		width:350px;
		text-align:center;
		margin:20px auto 20px auto;
	}
	
	#coronavirus .titre
	{
		clear:both;
		float:left;
		/*font-size:26px;*/
		font-size:1.625em;
		text-align:center;
		width:100%;
		color:#00406D;
		margin:120px auto 0 auto;
	}
	
	
	#coronavirus .info
	{
		clear:both;
		display:block;
		float:left;
		text-align: justify;
		margin:35px 0 0 0 ;
	}
	
	#coronavirus ul.mails
	{
		clear:both;
		/*float:left;*/
		margin:20px 0 0 0;
	}
	
	#coronavirus ul.mails li
	{
		/*font-size:14px;*/
		font-size:0.875em;
		list-style: circle;
		margin:7px 0 0 0;
	}
	
	#coronavirus span.ordonnance
	{
		display:inline-block;
		clear:both;
		float:left;
		margin:20px 0 0 0;
		padding:0;
		font-style:oblique;
		color:#3B3B3B;
	}
	
	#coronavirus ul.listeCommunique
	{
		clear:both;
		float:left;
		margin:10px 0 10px 0 ;
	}
	
	#coronavirus span.residences
	{
		display:block;
		clear:both;
		float:left;
		margin:25px 0 0 0;
		text-decoration:underline;
	}
	
	#coronavirus li.residences
	{
		list-style: circle;
		margin:2px 0 0 0;
	}
	
	#coronavirus .ul
	{
		clear:both;
		float:left;
		margin:15px 0 100px 0 ;
	}
	
	#coronavirus li.question
	{
		/*font-size:18px;*/
		font-size:1.125em;
		margin:15px 0 0 0;
	}
	
	#coronavirus li.groupeReponse
	{
		list-style: none;
	}
	
	#coronavirus li.reponse
	{
		list-style: square;
		margin:8px 0 0 0;
	}
	
	#coronavirus li.sousReponse
	{
		margin:5px 0 0 15px;
		padding:0 0 0 5px;
		list-style-type:"-";
		font-size:90%;
	}
	
	
	
	#coronavirus p.groupeLagrange
	{
		clear:both;
		float:right;
		margin:30px 0 0 0 ;
	}
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* MOBILE */
	
@media (max-width: 800px) {
   * {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
		font-size:150%;
	}
	
	/* 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 les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */
	
	#coronavirus
	{
		margin:0 auto;
		padding: 0 0.5em 0 0.5em !important;
		width:100%;
		font-family:Arial;
		font-size:0.7em;
	}
	
	
	/* boutons */
	.boutons
	{
		clear:both;
		margin:40px 0 15px 0;
		text-align:center;
	}
	
	.button {
		display:inline-block;
		width:50%;
		box-sizing: inherit;
		font: inherit;
		overflow: visible;
		text-transform: none;
		-webkit-appearance: button;
		padding: 15px 32px;
		text-align: center;
		transition-duration: 0.4s;
		margin: 0px 16px 16px 0 ;
		text-decoration: none;
		font-size:0.7em;
		cursor: pointer;
		border-radius: 3px;
		background-color: white;
		color: black;
		border: 2px solid #00406D;
		font-weight:bold;
	}

	.button:hover {
	  background-color: #00406D;
	  color: white;
	}
	
	#coronavirus .ul
	{
		padding:0 !important;
		list-style-type:disc;
	}
	
	#coronavirus ul.mails li a
	{
		
		white-space:nowrap;
	}
	
	#coronavirus li.groupeReponse
	{
		margin:0;
	}
	
	#coronavirus li.reponse
	{
		margin:8px 0 0 0 !important;
		padding:0 !important;
	}
	
	#coronavirus li.sousReponse
	{
		margin:5px 0 0 3px !important;
		padding:0 0 0 2px !important;
	}
	
	
	.drapeaux
	{
		clear:both;
		width:100%;
		margin:20px 0 0 0;
		text-align:center;
	}
	
	.flag {
		display:inline-block;
		width:60px;
		height:30px;
		padding: 0;
		text-align: center;
		transition-duration: 0.4s;
		margin: 0 0 0 10px;
		text-decoration: none;
		cursor: pointer;
	}
	
	.flag svg {
		width:100%;
		height:100%;
	}
}