* {
	margin:0;
	padding:0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#entete {
	position: absolute;
	top: 0px;
	height: 6em;
	width: 100%;
	background-image: url('entete.jpg');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
}

#entete a {
	display:block;
	text-decoration: none;
}

#entete_titre {
	position: relative;
	text-align: center;
	font-family: Verdana;
	font-size: 3em;
	color: white;
}

#entete_desc {
	position: relative;
	text-align: center;
	font-family: Verdana;
	font-size: 1.5em;
	color: white;
}


#sommaire {
	position: absolute;
	top: 7em;
	bottom: 3em;
	left: 0em;
	width: 20em;
	overflow-x: hidden;
	overflow-y: auto;
	padding-left: 0.5em;
	font-family: Verdana;
	font-size: 1em;
	cursor: pointer;
}

.groupement > label {
	display: block;
	width: 100%;
	padding: 0.2em;
	text-align: center;
	background-color: lime;
}

.groupement > label > span {
	position: absolute;
	right: 0em;
	transition: transform 0.5s;
}

.groupement > label:hover {
	background-color: green;
	font-weight: bold;
}

.oeuvre > label {
	display: block;
	position: relative;
	width: 100%;
	padding: 0.2em;
	text-align: left;
	background-color: yellow;
}

.oeuvre > label > span {
	position: absolute;
	right: 0.4em;
	transition: transform 0.5s;
}

.oeuvre > label:hover {
	background-color: gold;
	font-weight: bold;
}

.oeuvre li {
	display: block;
	position: relative;
	height: 1.4em;
	width: 100%;
	padding: 0.2em;
	text-align: left;
	background-color: aqua;
}

.oeuvre li:hover {
	background-color: blue;
	font-weight: bold;
}

.oeuvre li > a {
	display: block;
	text-decoration: none;
	color: red;
}

/* Cache le checkbox par défaut */
input {
	opacity: 0;
	height: 0em;
	width: 0em;
}

/* Tourne le span qui suit quand coché */
input:checked + span {
	transform: rotate(90deg);
}

/* Cache les listes par défaut */
.liste {
	display: none;
}

/* Affiche la liste qui suit le label coché */
label:has(input:checked) + .liste {
	display: block;
}


#contact {
	position: absolute;
	bottom: 0.5em;
	left: 0em;
	width: 20em;
	padding-left: 0.5em;
	text-align: center;
	font-family: Verdana;
	font-size: 1em;
	cursor: pointer;
}

#contact > a {
	text-decoration: none;
}

#contact > img {
	height: 1em;
	width: 1em;
}


#contenu {
	position: absolute;
	top: 7em;
	bottom: 0.5em;
	left: 21em;
	right: 0em;
	padding: 0em 0.5em 0.5em 0em;
}

#contenu iframe {
	position: relative;
	height: 100%;
	width: 100%;
}