body {
	/*background-color: lightblue;*/
	background-image: url('/icones/background2.jpg');

	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

img.background {
	object-fit: cover;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	width: 101%;
	height: 101%;
	box-sizing: content-box;
	padding: 0;
	margin: 0;
	-webkit-filter: blur(10px);
	filter: blur(10px);
}

a.butt {
	text-decoration: none
}

.alert {
	position: relative;
	margin: 0 auto;
	padding: 20px;
	opacity: 1;
	transition: opacity 0.6s;
	margin-bottom: 15px;
	box-shadow: 2px 3px 2px #666666;
	-webkit-box-shadow: 2px 3px 2px #666666;
	-moz-box-shadow: 2px 3px 2px #666666;
}

.alert img {
	vertical-align: middle;
}

.alert.danger {
	background-color: #f44336;
}

.alert.success {
	background-color: #4CAF50;
}

.alert.info {
	background-color: #2196F3;
}

.alert.warning {
	background-color: #ff9800;
}

.anchor {

	float: right;

	margin-left: 10px;
	margin-bottom: 10px;

}

.anchor.neg {

	background: #F8E0E0;

}

.anchor.pos {

	background: #E0F8EC;
}

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

	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	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 les éléments superflus */

	.hide_mobile {
		display: none !important;
	}

}

@media (max-device-width:768px) and (orientation: landscape) {
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

input[id^="spoiler"] {
	display: none;
}

input[id^="spoiler"]+label {
	display: block;
	width: 200px;
	/*margin: 0 auto;*/
	padding: 5px 20px;
	background: #e1a;
	color: #fff;
	text-align: center;
	/*font-size: 24px;*/
	border-radius: 8px;
	cursor: pointer;
	transition: all .6s;
}

input[id^="spoiler"]:checked+label {
	color: #333;
	background: #ccc;
}

input[id^="spoiler"]~.spoiler {
	width: 90%;
	height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 10px auto 0;
	padding: 10px;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 8px;
	transition: all .6s;
}

input[id^="spoiler"]:checked+label+.spoiler {
	height: auto;
	opacity: 1;
	padding: 10px;
}

.modialog {
	z-index: 1;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.modialog[hidden=false] {
	display: block;
}

.modialog .mocont {
	overflow: auto;
	width: 70%;
	height: 70%;
	margin: 5% auto;
	background-color: #c0dcff;
	border: outset 2px black;
	padding: 10px;
}

.modialog .mocont .close {
	display: inline-block;
	margin-right: 10px;
	float: right;
	color: #aaa;
	font-size: 28px;
	font-weight: bold;
}

.modialog .mocont .close:hover,
.modialog .mocont .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

img.comp {
	margin-right: 20px;
}

a.downloadbut {
	all: initial;
	cursor: pointer;
}

a.downloadbut div {
	border-radius: 10px;
	background-color: green;
	margin: 20px;
	padding-left: 10px;
}

.document {
	background-color: #eee;
	height: 100%;
}

.document body {
	background-image: none;
	max-width: 90%;
	min-width: 60%;
	width: 640px;
	padding: 10px 20px;
	box-shadow: 10px 0px 5px lightgray, -10px 0px 5px lightgray;
	min-height: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 10px auto;
	background-color: whitesmoke;
	font-size: large;
}

@media (max-width: 640px) {
	.document body {
		max-width: 100%;
		margin: 0;
	}
}

.document h1,
.document h2 {
	font-size: x-large;
	text-align: center;
}

.document li:not(.compact), .document li.document {
	margin-bottom: 8px;
}