/*-----------------------
Elements communs
-------------------------*/

.comfortaa-<uniquifier> {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

p {
	margin:0 0 16px 0;
}

img{
	border:0;
	width: 100%;
}
img.no-size{	
	width: initial;
}

.clear {
	clear: both;
	display: hidden;
	background-color:#fff;
}

a{
	Color:#ffffff;
}

a:hover{
	Color:#ffffff;	
}

h1 {	
	font-size: 4rem;
	color:#ffffff;
	font-weight:bold;
	margin-bottom: 15px;
}

h2 {	
	font-size:2rem;	
	font-weight:normal;
}



/*-----------------------
Structure de la page
-------------------------*/

body {
	background-color:#1b1b1a;
	margin:0;
	padding:0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-family: "Comfortaa", sans-serif;
	font-size:0.875em;
	color: #ffffff;
}

header {
	margin:0;
	padding:0;
	width: 100%;
	background: rgba(106,20,209,1);
}

main {
	margin:0;
	padding:0;
	width: 100%;
	display: flex;
	justify-content: center;
	background: rgb(106,20,209);
	background: linear-gradient(180deg, rgba(45,212,212,1) 10%, rgba(3,69,107,1) 90%);
}

#site {
	margin:0;
	padding:0;
	width: 100%;
	display: flex;
	justify-content: center;
	background: rgb(3,60,90);
	padding: 50px 20px;
}

footer {
	margin:0;
	padding:30px;
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	line-height: 1.4rem;
}

.svg {	width: 30px; margin-right: 10px}
.mt02 { margin-top: 2px;}


/* __________________________________________________________________________*/


.container {	
	margin:0;
	padding:0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 960px;
}


#icons, #logo, #btApp, #BlocText, #mobile, #Site, #titreSite, #btSite { 
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#icons { 
	padding: 30px 0 20px;	
	justify-content: right;
}
#logo {	
	background: rgba(255, 255, 255, 0.2);
	border-radius: 15px;
	padding: 20px;
	justify-content: left;
}
#logo img { max-width: 777px;}
#btApp { padding: 40px 0 70px;}
#btApp img { margin: 0 20px; max-width: 240px;}
#BlocText {	width: 70%;	text-align: center; margin-bottom: 60px;}
#BlocText p { font-size:1.1rem; }
#mobile { flex-wrap: nowrap; text-align: center; margin-bottom: 60px;}
#mobile img { padding-bottom: 10px;}

#btSite { flex-wrap: nowrap; align-content: space-between; padding: 20px;}
#btSite img { max-width: 220px; margin: 0 15px;}


@media (max-width: 992px) {

	* { box-sizing: border-box;}
	body { width: auto;	margin: 0;	padding: 0;}	
	.container { margin:20px;}
	#btApp img { margin-bottom: 10px;}
}

@media (max-width: 640px) {

	* { box-sizing: border-box;}
	body { width: auto;	margin: 0;	padding: 0;}
	#site {	padding: 20px 0;}
	.container { margin:10px;}
	h1 { font-size: 2rem;}
	h2 { font-size:1.6rem;}
	.svg {	margin-right: 20px}
	#icons { padding: 0 0 5px;}
	#logo {	margin-left: 15px; margin-right: 15px; justify-content: center;}
	#btApp { padding: 20px 0 0 0;}
	#btApp img { margin: 0 10px 10px; width: 100%; max-width: 140px;}	
	#BlocText {	width: 90%;	text-align: center; margin-bottom: 20px;}
	#BlocText p { font-size:.875rem; }
	#mobile { flex-wrap: wrap; text-align: center; margin-bottom: 40px;}
	#mobile img { max-width: 170px;}
	#btSite { flex-wrap: wrap; align-content: center; padding: 20px 0 0 0;}
	#btSite img { width: 140px; padding-bottom: 20px;}
}