@charset "UTF-8";

/* ENTETE */
body {
	min-height: 100vh; /*Toute la hauteur de la page (vertical height)*/
	display: flex; /*body est le parent qui va gérer la répartition des enfants verticalement*/
	flex-direction: column;/*par défaut c'est en ligne (row)*/
	font-family: Roboto;
	font-weight: 300;
	background: #dfdfdf;
}
/* - - -  - -  - - - - - - - - - - ENTÊTE -  - - - - - - - - -  - - - - - - - - -  - - - -- */

header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 50px;
	z-index: 10;
	background: #000;
}
nav#principale {
	margin: 0 auto;
	font-weight: 700;
}
li#logo {
	width: 126px;
	height: 23px;
	background: url(../images-site/logo-haut.png); background-repeat: no-repeat;
}


#banner {
	position: relative; top: 50px; /* la bannière commence juste après le header qui a 50px de haut*/
	width: 960px;
	height: 360px;
	margin: 0 auto;
	background: url(../images-site/bandeau-banniere.jpg); background-repeat: no-repeat;
}
#banner h1 {
	color: #00a1f2;
	padding: 1em 0 0.5em;
	font-size: 3.5em;
	font-weight: 900;
	text-align: center;
	text-shadow: 2px 2px 2px rgba(255,255,255, 1), 2px 2px 4px #00a1f2;

}
#banner h2 {
	width: 35%;
	line-height: 2;
	margin: 0.5em auto;
	padding: 0.15em;
	border-radius: 0.4em;
	font-size: 1.8em;
	font-weight: 900;
	color: #00a1f2;
	text-align: center;
	letter-spacing: 0.1em;
	text-shadow: 2px 0px 0px rgba(5,65,90, 1);
	background: linear-gradient(rgba(0, 161, 242, 0.8) 10%, rgba(0, 161, 242, 0.2) 0);
}
a.class-action {
	text-decoration: none;
}

/* - - -  - -  - - - - - - - - - - MAIN -  - - - - - - - - -  - - - - - - - - -  - - - -- */
main {
	flex: 1 1 auto;
	width: 960px;
	margin: 0 auto;
}
ul#bandeau-bracelets {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5em 0 0;
	background: repeating-linear-gradient(rgba(0,70,100,0.8) 0, rgba(190,230,251,0.8) 2px, rgba(130,210,250,0.3) 0, rgba(130,210,250,0.3) 15px);
}

section#contenu {
	display: flex;
	justify-content: space-between;
}
article.module1, article.module2, article.module3 {
	width: 320px;
	height: 198px;
}
article.module1 {
	background: url(../images-site/sport-smartphone-petite.jpg); background-size: cover;
}
article.module2 {
	background: tan;
}article.module3 {
	background: url(../images-site/courir-sur-la-plage_petite.jpg); background-size: cover;
}
article.module1 h2, article.module3 h2 {
	padding: 15px;
	line-height: 1.25;
	font-size: 1.3em;
}
article.module1 p, article.module3 p {
	padding: 15px;	
}
article.module2 h2 {
	padding-top: 60px;
	text-align: center;
	font-size: 2.5em;
}
article.module2 h2::before {
	content: "# ";
	color: #FFF;
	font-weight: 900;
}


/* - - -  - -  - - - - - - - - - - FOOTER -  - - - - - - - - -  - - - - - - - - -  - - - -- */



footer {
	display: flex;
	flex: 0 0 auto; /* 0 pour flex-grow (pas de grossissement - 0 pour flex-shrink (pas de rétrécissement) - auto pour flex-basis (pourcentage partagé avec les autres items enfants et en fonction de la surface totale. La valeur auto spécifie que la dimension de l'élément n'est pas modifiée (80px pour le footer spécifié dans la liste)) */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
	background: #000;
}


ul#reseaux-sociaux {
	display: flex;
	align-items: center;
	margin-bottom: 0.4em;
}
ul#reseaux-sociaux li {
	padding: 0 0.5em;
}
	
footer p a {
	font-size: 0.8em;
	color:#FFF;
	text-decoration: none;
}

/* - - -  - -  - - - - - - - - - - LIENS -  - - - - - - - - -  - - - - - - - - -  - - - -- */
a.decouverte {
	text-decoration: none;
	font-weight: 700;
	color: antiquewhite;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.7)
}
article.modules:hover {
	filter:  drop-shadow(4px 4px 4px #FFF) brightness(80%);
}


h2.titre2-banner:hover {
	filter:  drop-shadow(4px 4px 4px #FFF) brightness(80%);
}

li.bracelet img:hover {
	filter:  drop-shadow(0px 0px 18px #FFF) opacity(60%) contrast(200%);
}

/* - - -  - -  - - - - - - - - - -  CSS Styles phablettes et bureau  - - - - - - - - -  - - - - - - - - -  - - - -- */
@media (min-width: 769px) {
	
	#show-menu {
		display: none;
	}
	
	ul#menu {
		text-align: center;
	}
	ul#menu li {
		display: inline-block;
		line-height: 50px;
	}
	ul#menu li a {
		display: block;
		padding: 0 20px;
		color: #FFF;
		text-decoration: none;	
	}
	ul#menu li.active a {
		background: #FFF;
		color: #00a1f2;
}
	ul#menu li.items a:hover {
	background: #FFF;
	color: #00a1f2;
}
	#menu li.items a i {
		display: none;
	}
	
}