@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab&display=swap');
@viewport {  width: device-width; zoom: 1; }
body { overflow-x : hidden; font-size:1rem; }
ol,ul { display:inline; list-style-type:none; margin:0; padding:0;}
a,summary { outline: none; text-decoration: none; cursor: pointer;}
p,a,span,li,text,blockquote,td,th,select,option,text,li, label { font-family: 'Roboto', sans-serif; color:#666;}
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab', sans-serif; margin:0; padding:0; color:#333;}
div { display:block; position: relative; }

#outerContainer { max-width: 1200px; margin: 0 auto; }
#navigation ul { display: flex; justify-content:space-evenly; padding-top:1rem;}
#navigation li { display:inline-flex; font-weight:bold; }
#navigation label { margin-right:0.3rem;}
#navigation select { min-width:50%;border-radius:2px;}

h2#titre { text-align:center; font-size:200%; margin-top:2rem; text-decoration:underline; }
h3#soustitre { text-align:center; }


#selectionItems { display: flex; justify-content:space-evenly; }
#selectionItems p { opacity: 0.3;  cursor:pointer; display:inline-flex; padding:0.5rem 1rem; border: thin solid #eee; border-radius:4px; font-weight:bolder; color:#333; background-color: #fefefe; text-align:center;font-size:16px; }
#selectionItems p.active { opacity:1; }
#selectionItems p span.eye { content:url("../img/eye.png"); display:inline-block; width:16px; height:16px; margin-right:10px;}


svg { width:100%; height:auto; margin:0;}
path {fill: none;   stroke: #000;  stroke-width: 3; }
text { font-size:300%; fill:#333;}
g.grafx { visibility: hidden; }
g.active { visibility:visible; }
g.line path { opacity:0.9; }
g.area path {  opacity:0.3; stroke-width:0; stroke: #fff; }
g.summary text { fill: #DA333E; opacity:0.8; }
g.summary text:first-child { font-weight:bold; opacity:1; }


footer { display: block; position: relative; margin-top:5%;  width:100%; height:4rem; padding-top:6px; border-top: thin solid #ccc; }
footer p { position: relative; font-family: 'Roboto Slab', sans-serif; text-align: right; font-size:100%; margin:0.5rem 5rem 0 0;}
footer p span { font-weight: bold;}
footer img { position: absolute; right:0; top:0; width:4rem; }
footer a { text-decoration: underline gray; color:#888!important;}

@media (min-width: 651px) and (max-width: 850px) {
	body { font-size:0.8rem;line-height:0.95rem; }
	h1,h2 { font-size:170%; line-height:110%; width:100%!important; padding:0!important; margin:0.5rem 0!important; }
}
@media (min-width: 531px) and (max-width: 650px) {
  	body { font-size:0.7rem;line-height:0.8rem; }
  	h1,h2,h1 {  font-size:170%; width:100%!important; line-height:100%; padding:0!important; margin:0.5rem 0!important;}
  	#selectionItems p { font-size:12px; }
	#selectionItems p span.eye { width:12px; height:12px; margin-right:5px;}  	
}
@media (max-width: 530px) {
	body { font-size:0.6rem;line-height:0.7rem; }
  	h1,h2 { width:100%!important; line-height:100%; padding:0!important; margin:0.5rem 0!important; }
  	#selectionItems p { font-size:12px; }
	#selectionItems p span.eye { width:12px; height:12px; margin-right:5px;}  	

}