* { margin:0; padding:0; }
html { background-color:#fcfcfc; }
body { font-family: Verdana, Helvetica, sans-serif; margin:0 }
a { color:#990000; }
a:hover { text-decoration:none; }

::-webkit-scrollbar { width:13px; background-color:#fff; }
::-webkit-scrollbar-track { box-shadow:inset 0 0 5px red; border-radius:15px; }
::-webkit-scrollbar-track:hover { box-shadow:inset 0 0 8px red; }
::-webkit-scrollbar-thumb { background: #990000; border-radius:15px; border:1px solid #fff; }
::-webkit-scrollbar-thumb:hover { box-shadow:inset 0 0 8px white; }

#header { display:flex; align-items:center; /*border-radius:0 0 8px 8px;*/ /*box-shadow: 0 1px 10px #990000;*/ background-image: linear-gradient(to bottom, #990000, #fff); }
#header #logo { width:25%; }
#header #hdl { width:55%; text-align:center; font-family: 'Tangerine', cursive; color:#990000; font-size:3em; font-weight:bold; letter-spacing:1px; }
#header #hdl::first-letter { font-size:150%; }
#header #hdl h1 { margin:0; font-size:1em; text-shadow:-1px -1px 8px #fff, 1px 1px 1px #fff; }
#header #socials { width:20%; /*text-align:right;*/ }
#header #socials ul { list-style-type:none; }
#header #socials ul li { float:right; width:20%; }
#header #socials ul li img { border-radius:50%; box-shadow:2px 2px 5px #fff; }
#header #socials ul li img:hover { box-shadow:1px 1px 12px #fff; }

nav { width:100%; margin:0 auto; position:sticky; top:0px; background-image: linear-gradient(to top, #990000, #fff); border-radius:0 0 8px 8px; box-shadow: 0 1px 12px #990000; }
nav ul { list-style-type:none; }
nav ul::after { content:""; display:table; clear:both; }
nav li { float:left; width:20%; text-align:center; position:relative; }
nav a { display:block; text-decoration:none; color:#fff; font-weight:bold; padding:15px 0px; text-shadow:-1px -1px 3px #000; }
nav a:hover { color:#990000; text-shadow:1px 1px 8px #fff; }

.undernav { display:none; position:absolute; background-image: linear-gradient(to bottom right, #990000, #d08888); width:100%; z-index:1000; border-radius:8px; }
.roll:hover .undernav { display:block; }
.roll > a::after { content:' ▼'; }
.undernav a:hover { color:#fbd8c5; }

.undernav li { float:none; width:100%; text-align:left; }
.undernav a { padding:10px; font-weight:normal; }

.menuperiode > a::after { content:' »'; float:right; }

#footer
{
	/*display:flex;
	align-items:center;
	justify-content:center;*/
	margin-top:35px;
	background-image:linear-gradient(to top, #990000, #fff);
	padding:10px 0;
	text-shadow:-1px -1px 3px #fff;
	width:100%;
	text-align:center;
	border-radius:8px 8px 0 0;
	box-shadow: 0 -1px 5px #990000;
}
/*#footer a { color:#fbd8c5; text-shadow:none; }
#footer a:hover { color:#fff; }*/

/*#fleft { width:50%; }
#fcenter, #fright { width:25%; }
#fright { text-align:center; }
#fleft ul, #fcenter ul, #fright ul { list-style-type:none; }
#fleft ul li, #fcenter ul li, #fright ul li { margin-bottom:10px; }*/

.fmentions { width:100%; margin-top:20px; }
.fmentions ul { list-style-type:none; }
.fmentions ul li { display:inline-block; margin:0 5em; }
.fmentions a { /*color:#fbd8c5;*/ text-shadow:1px 1px 1px #fbd8c5; }
.fmentions a:hover { color:#fbd8c5; text-shadow:none; }
#foothdl a { color:#990000; font-size:1.5em; text-decoration:none; letter-spacing:0.5em; font-weight:bold; text-shadow:1px 1px 2px #fff, 2px 2px 1px #990000; transition: text-shadow 0.5s;}
#foothdl a:hover { text-shadow:-1px -1px 2px #fff, -2px -2px 1px #990000; }



#contenu { margin:18px 10px; line-height:1.5; max-width:1200px; margin:0 auto; }

h1 { color:#990000; text-shadow:8px 8px 22px #835e5e; font-family: 'Tangerine', cursive; font-size:3em; margin:0 0 10px 0; letter-spacing:1px; }
h1::first-letter { font-size:200%; }

h2 { color:#996633; text-shadow:8px 8px 12px #aaa; font-family: 'Tangerine', cursive; font-size:2.5em; margin:15px 0 10px 0; letter-spacing:1px; }
h2::first-letter { font-size:200%; }

.flexy { display:flex; align-items:center; justify-content:space-evenly; margin:0 auto; }

.fw { width:100%; border-radius:5px; padding:10px; background-image: linear-gradient(to bottom, #fbd8c5, #fff); box-shadow:1px 1px 5px #aa0000; outline:#fff solid 1px; text-align:justify; }
.fw:hover, #infos:hover, #cover:hover, #avis:hover { box-shadow:1px 1px 12px #f77005; }

#chapo { font-weight:bold; }
#infos { width:70%; border-radius:5px; padding:10px; box-shadow:1px 1px 5px #aa0000; outline:#fff solid 1px; background-image: linear-gradient(to bottom, #fbd8c5, #fff); line-height:normal; }
#infos p { margin:1em 0; }
#cover { width:20%; border-radius:5px; padding:50px 10px; background-image: linear-gradient(to bottom, #fbd8c5, #fff); box-shadow:1px 1px 5px #aa0000; outline:#fff solid 1px; text-align:center; }
#cover img { box-shadow:1px 1px 12px #fff, 5px 5px 12px #990000, 10px 10px 12px #fff; }
#cover img:hover { box-shadow:1px 1px 12px #990000, 5px 5px 12px #fff, 10px 10px 12px #990000; }
#coup_de_coeur
{
	background-image:url('../img/coup_de_coeur.png');
	background-repeat:no-repeat;
	width:167px;
	height:157px;
	float:right;
	margin-right:150px;
}
#citation { margin:20px auto; width:100%; line-height:normal; }
#extrait { margin:0 auto; text-align:justify; font-size:1.2em; color:#9c9c9c; font-style:italic; /*line-height:180%;*/ width:80%; /*position:relative;*/ }
#start_quotes { font-size:5em; margin:0; }
#end_quotes { font-size:5em; margin:0; text-align:right; }
#start_quotes, #end_quotes { font-family: Trebuchet MS, sans-serif; }
/*#extrait::before { content:'“ '; vertical-align:super; font-size:5em; border:1px solid green; } /* “ */
/*#extrait::after { content:' „'; vertical-align:sub; font-size:5em; }/* „ */
#avis { border-radius:5px; padding:10px; background-image: linear-gradient(to bottom, #fbd8c5, #fff); box-shadow:1px 1px 5px #aa0000; outline:#fff solid 1px; text-align:justify; min-height:240px; }
#avis ul { margin-left:20px; list-style-type:circle; }
#avis ul li::marker { color:#990000; }
#note
{
	color:#990000;
	font-weight:bold; 
	font-family: 'Tangerine', cursive;
	letter-spacing:5px;
	font-size:6em;
	width:360px;
	height:240px;
	background-image:url('../img/kitten.png');
	background-repeat:no-repeat;
	border-radius:5px;
	float:right;
	margin-left:15px;
	margin-bottom:15px;
	text-align:center;
	text-shadow:1px 1px 5px #fff, -1px -1px 5px #fff, 2px 2px 5px #990000, -2px -2px 5px #990000;
	box-shadow:1px 1px 12px #f77005;
}
#note #position { position:relative; top:100px; left:30px; }

.affi img { border-radius:5px; box-shadow:1px 1px 12px #000; }
.affi img:hover { box-shadow:2px 2px 12px #f77005; }