body {
 font-family: Arial, "Liberation Sans", Helvetica, sans-serif;
 color:DarkSlateGray;
 margin:0;
 padding:0;
}
body.page { background:WhiteSmoke; }

nav label { display:inline-block; height:1.5em; width:100%; font-size:xx-large; }
nav label::after { font-size:large; content:" Cercle de voile de Jablines"; }
nav input { display:none; }
nav div.menu { display:none; }
nav input#menu_btn:checked + div.menu { display:flex; }

nav div.menu {
 position:absolute;
 z-index:1;
 top:2em;
 left:0.5em;
 flex-direction:column;
 justify-content:flex-start;
 align-items:flex-start;
}
nav div.menu_element {
 background-color:lightgray;
 color:DarkSlateGray;
 width:15em;
 padding:0.5em;
 text-align:left;
 vertical-align:middle;
}
nav div.menu_element:nth-last-of-type(1), nav div.menu_element:nth-last-of-type(2) { flex-shrink:3; }
nav div.menu a {
 text-decoration:none;
 color:DarkSlateGray;
 font-size:large;
}
body.page div.menu a { color:DarkSlateGray; }
nav div.menu a:hover { text-shadow: 0.1em 0.1em white; }
nav div.menu_element a:hover img { box-shadow: 0.1em 0.1em white; }

nav div.menu_element div.sous_menu { display:none; }
nav div.menu_element:hover > div.sous_menu { display:flex; flex-direction:column; position:relative; left:2em; background-color:white; opacity:0.9; }
nav div.sous_menu_element { margin:0.2em; padding:0.2em; text-align:left; vertical-align:middle; }
nav div.sous_menu_element a { font-weight:normal; font-style:italic; }

hr.barre_menu { margin: 0 1em 0 1em; border-top: 0.1em solid DarkSlateBlue; }
hr.barre_article { margin:0; border-top: 0.1em solid DarkSlateBlue; }

div.article { clear:both; margin-left:1em; margin-right:1em; }
div.article h1 { color:DarkSlateGray; font-size:x-large; font-weight:bold; }
div.article ul { list-style:none; }
div.article p { margin-bottom:1em; }
div.article li { padding-left:1em; margin-bottom:1em; }
div.article li::before {content:"-"; display:inline-block; width:1em; margin-left:-1em}
div.article div.img { display:flex; justify-content:center; }
div.article div.img img { max-width:100%; height:auto; }
div.article div.img img#plan { max-width:100%; height:auto; }

div.article div.legal { margin-left:0; height:10em; }
div.article div.legal img#legal { max-height:100%; width:auto; }

div.contact { margin:1em; display:block; }
div.contact div.ligne { clear:both; }
div.contact div.ligne div.label { width:10em; display:block; padding: 0.5em 0.5em 0 0.5em; }
div.contact div.ligne div.input { display:block; padding:0.5em; }
div.contact div.ligne div.message { display:block; padding: 0 0.5em 0.5em 0.5em; }
div.contact div.ligne div.message textarea { height:8em; width:100%; }

div.photos { clear:both; margin-left:0.5em; margin-right:0.5em; text-align:center;}
div.photos div.fleche { position:absolute; top: 50%; }
div.photos div.fleche button { opacity:0.8; padding:1em; border:none; background:darkslategray; font-size:large; color:white; }
div.photos div.notes { position:absolute; right:calc(50% - 13em); top:3em; width:26em; text-shadow: 0 0 0.5em white;}
div.photos div.img {display:block; width:100%; height:100%;}
div.photos div.img img { margin:0em; object-fit:contain; max-width:calc(100vw - 1em); max-height:calc(100vh - 8em); }