/********************************************
	* Domaine : pleyad.fr
	*
	* Exploitant : UBS
	*
	* Rôle : Feuille de style principale 
	*
	* Auteur : Ultra-Fluide, copyright 2017
********************************************/

/**** classique  ********/
/************************/
* {margin: 0px; padding: 0px; box-sizing: border-box;}
p, li, table, a , h4, h1, h2, h3, h5, dl{
	font-family: 'Roboto', sans-serif;
}
a:hover { 
	text-decoration: none;
}
/* Pour contourner le problème des espaces entre élément inline-block*/
/* voir : https://github.com/patrickkunka/zero-width et */
/* http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html */
@font-face{ 
	font-family: 'NoSpace';
	src: url('fonts/zerowidthspaces.eot');
	src: url('fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
	url('fonts/zerowidthspaces.woff') format('woff'),
	url('fonts/zerowidthspaces.ttf') format('truetype'),
	url('fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
	url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), 
	url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), 
	url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), 
	url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
}
html {
	background-size: contain;
	background-image: url("images/vagues.jpg");
	background-position:0 20px;
	background-repeat: no-repeat;
	
	
}
body {
    max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 0 0 10px #555;
	background:rgba(255, 255, 255, 0.6);
	font-family: NoSpace;
}
/**** Header  *****************/
/*****************************/

header {
	width:100%;
	height:125px;
	padding:1% 2.54237288% 0 2.54237288%;
	color:#008b9f;
	position:relative;
	text-align: right;
}
header  h1  {
	position:absolute;
	text-align: left;
}
header h1 span {
	vertical-align: 15%;
	font-size: 1.6rem;
	font-weight:100;
	padding-left:20px;
}
header  h1  img{
	max-width:100px;
	vertical-align: middle;
}
header  p {
	font-style: oblique;
	margin-top:25px;
	font-size: 1.1rem;
	font-weight:300;
}
/**** le menu langue   *********/
/*******************************/
header   li{
	margin-left:10px;
	display:inline-block;
	font-size: .9rem;
	vertical-align: top;
}
header ul li:nth-of-type(1):after {
	content:"|";
	margin-left:10px;
	color:#888;
}
header li a{
	text-decoration:none;
	color:#888;
	font-weight:300;
}
header li{
	color:black;
	text-transform: uppercase;
}
/**** menu principal *********/
/*****************************/    
body > ul {
	border-bottom:10px solid #00aac3;
	background:#006a7b;
	height:70px;
	align-items:center;
	list-style-type: none;
	padding:0 2.54237288%;
	z-index:2;
	position:relative;
	position:sticky !important;
	position: -webkit-sticky;
	top: 0;
}
body > ul ul  {
	display:none;
	position:absolute;
	top:40px;
	z-index:1;
	background-color:white;
	list-style-type: none;
	box-shadow: 0 3px 5px 0px #444;
}
body > ul > li{
	margin-right:3%;
	position:relative;
	padding:11px 0;
	display:inline-block;
	vertical-align:middle;
}
body > ul > li:last-child{
	margin-right:0;
	text-align:right;
	position:absolute;
	right:2.54237288%;
	top:10px;
}
body > ul > li a{
	color:white;
	text-transform: uppercase;
	font-weight:300;
	text-decoration:none;
	display:block;
}
body > ul  > li > a:after{
	content: url(images/fleche-bas.svg);
	display:inline-block;
	vertical-align:-15%;
	width:14px;
	line-height:100%;
	margin-left:12px;
	height:100%;
}
body > ul  > li > a:last-child:after{
	content: none;
}
body > ul > li:hover  > a:after{
	filter: brightness(150%);
	-webkit-filter: brightness(150%);
}
body > ul > li img {
	height: 40px;
	vertical-align:bottom;
}
body > ul > li:hover > a,  body > ul > li.active > a {
	color:#ffde00;
}
body > ul > li:hover ul  {
	display:block;
}
body > ul > li ul li {
	border-bottom:1px solid #ddd;
	padding:8px 20px;
	white-space: nowrap;
}
body > ul > li ul li:last-child {
	border-bottom:none;
}
body > ul > li ul li a {
	color:black;
	text-transform: none;
	font-weight:400;
	font-size:.95rem;
}
body > ul > li ul li:hover a, body > ul > li ul li.active a {
	color:white;
}
body > ul > li ul li:hover, body > ul > li ul li.active {
	background-color:#00aac3;
}
/**** contenus principaux ****/
/*****************************/
section {
	font-family: NoSpace;
	position :relative;
	padding:2.54237288%;
}
section + section {
	padding-top:0;
}
section article{
	position:relative;;
}
section > img {
	display:block;
}
section img, aside img {
	width:100%;
	display:block;
}
/**** footer */
footer {
	background: #006a7b ;
	height:70px;
}
footer > ul {
	display: flex;
	height:70px;
	align-items:center;
	list-style-type: none;
	padding:0 2.54237288%;
}
footer > ul > li{
	margin-right:3%;
}
footer > ul > li:last-child{
	flex: 1;
	margin-right:0;
	text-align:right;
}
footer > ul > li{
text-transform: uppercase;
font-weight:300;
padding-left:20px;
}
footer > ul > li:nth-of-type(1){
background: url("images/picto-galerie.png") 0 3px no-repeat;
}
footer > ul > li:last-child{
text-transform: none;
padding:0;
}
footer > ul > li a{
color:white;
text-decoration:none;
}
footer p{
margin-top:30px;
text-align: center;
font-size:0.8rem;
}
footer a{
color:#92dde8;
}