<style type="text/css">

/* Réinitialiser marges et paddings pour tous les éléments */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
	margin: 0px;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width:98%;
	}

.header {
	font-family: 'Indie Flower', cursive;
	text-shadow: 2px 2px 4px #550000;
	border-bottom:solid;
	border-bottom-color:#000000;
	z-index:200;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #FFFFFF;
	opacity: 0.8;
	color:#000000;
	position: fixed;
	top: 0;
	height:70px;
	width: 100%;
	}

.header-mobile {
	font-family: 'Indie Flower', cursive;
	text-shadow: 2px 2px 4px #550000;
	border-bottom:solid;
	border-bottom-color:#000000;
	z-index:200;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility:hidden;
	background-color: #FFFFFF;
	opacity: 0.8;
	color:#000000;
	position: fixed;
	top: 0;
	height:35px;
	width: 100%;
	}

.spacetop {
	float:left;
	text-align:center;
	width: 100%;
	height:70px;
	padding:5px;
	}

.spacebottom {
	float:left;
	text-align:center;
	width: 100%;
	height:70px;
	padding:5px;
	}

.main {
	float:left;
	text-align:justify;
	width:100%;
	height:100%;
	}

.main2 {
	float:left;
	text-align:justify;
	width:50%;
	height:100%;
	}

.main3 {
	float:left;
	text-align:justify;
	width:33%;
	height:100%;
	}

.footer3 {
	float:left;
	width:33%;
	height:100%;
	text-align:center;
	font-size:9px;
	}

.afooter3 {
	float:left;
	text-align:justify;
	width:33%;
	height:100%;
	}

.main4 {
	float:left;
	text-align:justify;
	width:25%;
	height:100%;
	}
.main5 {
	float:left;
	text-align:justify;
	width:20%;
	height:100%;
	}

.box:hover {
	opacity: 1;
	transition: 0.2s;
	cursor:pointer;
	}

.box {
	border:solid;
	border-radius:10px;
	border-width:thin;
	border-color:#000099;
	background-color: #FFFFFF;
	opacity: 0.4;
	margin:10px;
	padding:4px;
	box-shadow: 3px 3px 5px #CCCCCC;
	}

.box img {
	border:solid;
	border-radius:8px;
	border-width:thin;
	border-color:#000099;
	background-color: #FFFFFF;
	margin:3px;
	padding:0px;
	box-shadow: 2px 2px 3px #CCCCCC;
	max-height: 60px;
	max-width: 80px;
	}

.footer {
	clear:both;
	border-top:solid;
	border-top-color:#000000;
	text-align:center;
	font-size:10px;
	background: #DDDDDD;
	color:#000000;
	width:100%;
	height:25px;
	padding:5px;
	bottom:0;
	position:fixed;
	}





@media screen and (max-width: 2500px) {
	.main5	{ width:25%; }
	}


@media screen and (max-width: 2000px) {
	.main4, .main5	{ width:33%; }
	}


@media screen and (max-width: 1500px) {
	.main5, .main4, .main3, .main2 { width:50%; }
	.footer { padding:5px; margin:0px; height:auto; }
	}


@media screen and (max-width: 1000px) {
	.main5, .main4, .main3, .main2 { width:100%; }
	.box { border-radius:5px; }
	.header img { visibility:hidden; height:0; margin:0px; padding:0px; }
	.header { visibility:hidden; }
	.header-mobile { visibility:visible; }
	.spacetop {	height:35px; }
	.footer .afooter3 { visibility:hidden; height:0; margin:0px; padding:0px; }
	.footer3 { width:100%; }
	}










@media (prefers-color-scheme: dark) {

	body {
		background-color:#000000;
		color:#FFFFFF;
		}
	.header {
		background-color: #000000;
		text-shadow: 2px 2px 4px #FF0000;
		color:#FFFFFF;
		border-bottom-color:#999999;
		}

	.header-mobile {
		background-color: #000000;
		text-shadow: 2px 2px 4px #FF0000;
		color:#FFFFFF;
		border-bottom-color:#999999;
		}


	.box {
		border-color:#3333EE;
		box-shadow: 3px 3px 5px #333333;
		background-color: #000000;
		opacity: 0.4;
		}

	.box img {
		border-color:#3333EE;
		box-shadow: 2px 2px 3px #333333;
		}



	}





</style>