*	{ box-sizing:border-box; }

/*______________________en général_______________________________________________________________________________________________________*/
html	{ font-size:90%; font-family:Georgia, serif; }
body	{ width:80%; margin:1rem auto; background-image:url('../images/ble.jpg'); background-attachment:fixed; background-size:100%; }
::-moz-selection 	{ color: darkgoldenrod; background: yellow; }
::selection 	{ color: darkgoldenrod; background: yellow; }

/*______________________header__________________________________________________________________________________ */
header	{ background-color:hsla(0,0%,30%,0.7); padding:1rem; border-radius:5px; margin-top:1rem; position:relative; }

/*______________________footer_________________________________________________________________________________________________*/
footer	{ background-color:hsla(0,0%,30%,0.7); padding:1rem; border:2px solid darkgoldenrod; border-radius:20px; margin-top:2rem; 
	color:yellow; text-shadow:1px 1px darkred; }
footer p	{ margin:0; padding:0; display:inline-block; }
address	{ display:inline-block; font-style:normal; }

/*______________________navigation_____________________________________________________________________________________________ */
nav	{ color:black; }
nav p	{ color:white; 
	text-shadow:1px 0px black; 
	font-weight:bold; }
ul	{ border-left:1px solid darkgoldenrod; border-top:1px solid darkgoldenrod; padding:0; margin:0; }
li	{ display:inline-block; width:calc(100% / 9); min-width:60px; }
li a	{ display:block; border-right:1px solid darkgoldenrod; border-bottom:1px solid darkgoldenrod; font-weight:bold; padding-left:0.5rem; height:3rem; padding-top:1rem; }
li a:hover	{ background-color:darkgoldenrod; }

/*______________________éléments individuels____________________________________________________________________ */
h1, h2	{ color:darkgoldenrod; text-shadow:1px 1px black; text-transform:uppercase; }
h1	{ background-color:goldenrod; padding:1rem; border:2px solid darkgoldenrod; border-radius:20px; 
	text-align:center; font-size:140%; }
h2	{ font-size:120%; text-decoration:underline; }
/*h2:after	{ content:url(lepetitprince.png); position:absolute; right:0; top:0; }*/

a.top	{ display:inline; }
a.top:after	{ content: " (" attr(href) ")"; display:inline-block; width:5rem; text-align:right; }
a.top:after:hover	{ background-color:gray; font-weight:bolder; }

section	{ background-color:hsla(0,0%,30%,0.7); padding:1rem; border:1px solid darkgray; border-radius:5px; margin-top:1rem; position:relative; }
dl	{ border:1px solid darkgray; border-top:0; }
dt, dd	{ padding:0.5rem; color:yellow; background-color:inherit; display:inline-block; vertical-align:top; margin:0; border-top:1px solid darkgray; }
dt	{ font-weight:bold; letter-spacing:0.1em; width:30%; min-width:150px; text-decoration:underline; border-right:1px solid darkgray; }
/*dt::after	{ content:" : "; }*/
dd	{ text-shadow:0px 1px darkgoldenrod; width:70%; }
dt:empty, dd:empty	{ display:none; }

a:link	{ color:inherit; }
a:visited	{ color:inherit; }
a:hover	{ color:inherit; }

iframe	{ border:0; }

/*______________________vidéos_____________________________________________________________________________________*/
.videocontainer 	{ position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.videocontainer iframe 	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*______________________media queries___________________________________________________________________________ */
@media (max-width:679px)
{
dd, dt	{ display:block; width:100%; }
dt	{ border-right:0; }
dd	{ border-top:0px; }
}

/*______________________________________________________________________________________________________________________________*/