/* Paysages couleurs mobile */
html, body, header, #access, #paix, footer, #content, #sidebar, div, img, audio, video, iframe{margin:0;padding:0;border:0;vertical-align:top;}
body{margin:0;padding:0;font-family:Lucida grande,Verdana,Lucida,Helvetica,sans-serif;font-size:115%;line-height:1.6em;font-style:normal;font-weight:normal;color:#333;text-align:center;text-indent:0;background:#aaa;}
header, #content, #sidebar, footer, audio, video, iframe{position:relative;visibility:visible;}
#access, #paix{position:absolute;visibility:visible;}
header{padding:0.7em 0;text-align:left;background:#aaa;z-index:1;}
header img{margin:0 1%; width:0; display:none;z-index:1;}
header h1{margin:0 22% 0 0;padding:0.5em 7%;line-height:1em;vertical-align:bottom;background:#ae2;z-index:2;}
/* vert jaune */
#paix{top:0; left:75%; font-size:0.8em; text-align:center; color:#260; display:none;z-index:1;}
#access{top:0; left:85%; padding:0.1em 1%; font-size:1.1em; text-align:right; z-index:3;}
#content{margin:0; padding:1em 2% 0 2%; min-height:36em; background-color:#fff; z-index:6;}
#sidebar{background:#ff2;z-index:5;}
/* jaune */
footer{padding:1em 3%;background:#aaa;font-size:0.9em;text-align:right;z-index:1;}
audio{display:inline-block;width:30%;margin:0 auto;padding:2em 0;vertical-align:top;}
audio.musiques{display:block;padding:2.5em 0 0 0;}
h1, h2, h3{text-align:left;font-weight:normal;color:#851;}
/* brun */
h1{font-size:1.3em;margin:1em 0 0.5em 0;}
header h1{font-size:1.2em;text-align:center;font-family:Georgia,Times New Roman,New York,serif;font-weight:bold;}
h2{font-size:1.2em;margin:0.6em 0 0.5em 0;padding:0.5em 0 0 0;border-top:2px solid #851;}
h2.nobord{border:none;}
h3{font-size:1.1em;margin:0.6em 0 0.4em 0;}
p{margin:0 0 1em 0;text-align:justify;}
p.haut{font-size:0.9em;margin:0;padding:0.7em 0;text-align:center;border-top:1px solid #851;}
p.it{text-align:left;font-style:italic;}
p.itc{font-size:0.9em;text-align:center;font-style:italic;}
p.poesie{margin:0 0 2em 0;text-align:left;}
#paix p{margin:0; padding:0.1em 5%; font-size:0.8em; color:#00f; vertical-align:middle; border:none; background-color:#fd8; z-index:3;}
iframe{width:560px;height:315px;margin:3em 0 1em 0;} /* YouTube */
video{width:100%;max-width:640px;margin:1em auto 1.5em auto;text-align:center;}
video.hd{max-width:802px;}
img{width:100%;max-width:802px;height:auto;margin:0 auto;}
#paix img{width:100%; max-width:100px;}
img.imag{float:left; width:30%;margin:0 3% 0.8em 0;}
ol{margin:1em 9% 1em 0;}
ul{margin:0 0 0.8em 3%;list-style:none;}
#sidebar ul{margin:0;}
li{margin:0;padding:0 0 0.7em 6%;text-align:left;list-style-position:inside;}
ul li{list-style-image:url(i/pac-brun.gif);}
ol li{list-style-type:decimal;}
#sidebar ul li{padding:0 0 0.7em 0;list-style-image:none;font-size:0.9em;}
a{font-weight:normal;text-decoration:none;color:#274;}
/* vert sombre */
#access a, #access a:link, #access a:visited{color:#444;font-weight:bold;}
header h1 a:link, header h1 a:visited{color:#260;font-weight:bold;}
a:focus, a:hover, a:active, #paix a:focus, #paix a:hover, #paix a:active{color:#0ac;}
/* bleu */
header h1 a:focus, header h1 a:hover, header h1 a:active{color:#0ac;}
#access a:focus, #access a:hover, #access a:active{color:#ddd;}
hr, h2, h3, p.haut{clear:both;}

@media screen and (max-width:669px){body{}
iframe{width:400px;height:225px;}
video{max-width:400px;}
}
@media screen and (min-width:900px){body{}
#paix{left:70%; display:block;}
#paix img, #paix p{display:inline-block;}
#paix img{margin:0 1%; padding:0; width:100%; max-width:80px;}
header h1{margin:0 37% 0 0;font-size:1.5em;}
#content{padding:1em 3% 0 3%;}
}
@media screen and (min-width:900px) and (max-width:1299px){body{font-size:120%;}
header h1{font-size:1.6em;}
#access{left:89%;}
}
@media screen and (min-width:1300px){body{}
header img, header h1{display:inline-block;}
header img{width:100%; max-width:200px;}
header h1{font-size:1.6em;}
#paix img{width:100%; max-width:120px;}
#access{left:93%; font-weight:normal; background:none;}
#sidebar{position:absolute;top:12em;left:3%;width:22%;padding:1em 1%;}
#content{margin:0 5% 0 30%;}
#access a:link, #access a:visited{color:#999;}
#access a:focus, #access a:hover, #access a:active{color:#444;}
}
@media screen and (min-width:1300px) and (max-width:1799px){body{font-size:130%;}
}
@media screen and (min-width:1800px){body{}
header img{max-width:302px;}
header h1{font-size:1.8em;}
}
@media screen and (min-width:1800px) and (max-width:2399px){body{font-size:147%;line-height:1.5em;}
}
@media screen and (min-width:2500px){body{font-size:160%;line-height:1.4em;}
#content{margin:0 15% 0 30%;}
header h1{font-size:2.2em;}
}