/**************************** 
 Global
/****************************/
#header,
#presentation,
#citation,
#clients,
#histoire,
#produit,
#action,
#footer {
	padding-left: 5%;
	padding-right: 5%;
}

h1 {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color: #00079b;
	text-shadow: 3px 3px #a8fffb;
	margin-bottom: 30px;
}

h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color: #00079b;
	text-shadow: 3px 3px #a8fffb;
	margin-bottom: 30px;
	text-align: center;
}

.pas-section {
	display: hidden;
}

/**************************** 
 Header
/****************************/
#header {
	padding-top: 10px;
	padding-bottom: 10px;

	background-image: url('assets/header-background.svg');
	background-size: cover;
	background-color: #e5fffd;
	border-bottom: 1px solid #00079b;
}

.brand {
	height: 160px;
}

.brand img,
.slogan img {
	width: 100%;
	height: 100%;
}

/**************************** 
 Presentation
/****************************/
#presentation {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #ffffd5;
}

/* Introduction */
#introduction-box {
	padding: 40px;
	margin-bottom: 20px;
	box-shadow: 5px 5px grey;
	background-color: white;
	border: 3px solid grey;
}
#introduction .btn {
	width: 100%;
	color: white;
	font-weight: bold;

	border-radius: 0;
	background-color: #48aac7;
}

#introduction .btn:hover {
	background-color: #3096b4;
	box-shadow: 3px 3px #a8fffb;
}

#introduction p {
	font-family: "Quicksand", sans-serif;
	font-size: 1.3rem;
}

#introduction .btn {
	width: 100%;
	color: white;
	font-weight: bold;

	border-radius: 0;
	background-color: #48aac7;
}

#introduction .btn:hover {
	background-color: #3096b4;
	box-shadow: 3px 3px #a8fffb;
}

/* Video */
#spray_0 {
	width: 100%;
	-webkit-filter: drop-shadow(15px 15px #a8fffb);
	filter: drop-shadow(15px 15px #a8fffb);
}

/**************************** 
 Citation
/****************************/
.citation {
	color: white;

	padding-top: 40px;
	padding-bottom: 40px;

	background-color: #3b40a1;
	border-top: 2px solid #00079b;
	border-bottom: 2px solid #00079b;
}

.blockquote img {
	width: 150px;
	margin-bottom: 10px;

	border: 1px solid white;
	box-shadow: 6px 6px #a8fffb;
}

.blockquote-footer {
	color: #a8fffb;
}

/**************************** 
 Clients
/****************************/
#clients {
	padding-top: 40px;
	padding-bottom: 40px;

	background-color: #f1f1f1;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
}

.temoignage-box {
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 50px;

	background-color: white;
	border: 1px solid #00079b;
	box-shadow: 6px 6px #f023d6;
}

.temoignage h4 {
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

.temoignage p {
	font-family: "Quicksand", sans-serif;
	font-size: 1.1rem;
}

.temoignage .photo {
	text-align: center;
}

.temoignage .photo img {
	width: 150px;
	height: 150px;
	border-radius: 100px;
}

.temoignage .etoiles {
	text-align: center;
	margin-bottom: 10px;
}

.temoignage .etoiles img {
	width: 30px;
}

/**************************** 
 Histoire
/****************************/
#histoire {
	padding-top: 40px;
	padding-bottom: 40px;

	background-image: url('assets/histoire-background.svg');
	background-size: cover;
	background-color: #abffb9;
	border-bottom: 1px solid #dddddd;
}

.illustration_histoire,
.texte_histoire {
	margin-bottom: 20px;
}

#spray_1 {
	width: 100%;
	max-width: 170px;
	-webkit-filter: drop-shadow(10px 10px #fdff55);
	filter: drop-shadow(10px 10px #fdff55);
}

#spray_2 {
	width: 100%;
	max-width: 300px;
	-webkit-filter: drop-shadow(10px 10px #fdff55);
	filter: drop-shadow(10px 10px #fdff55);
}

.histoire-box {
	padding: 30px;
	margin-bottom: 20px;

	background-color: white;
	border: 1px solid #00079b;
	box-shadow: 10px 10px #fdff55;
}

.texte_histoire h3 {
	font-size: 1.3rem;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color: #00079b;
	text-shadow: 3px 3px #fdff55;
	text-align: center;
}

.texte_histoire p {
	font-family: "Quicksand", sans-serif;
	font-size: 1.1rem;
}


/**************************** 
 Produit
/****************************/
#produit {
	padding-top: 40px;
	padding-bottom: 40px;

	background-color: #e5fffd;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
}

#produit h3 {
	font-size: 1.5rem;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color: #00079b;
	text-shadow: 3px 3px #54ff31;
	text-align: center;
}

#produit p {
	font-family: "Quicksand", sans-serif;
	font-size: 1.2rem;
}

.produit-box {
	padding: 20px;
	margin-bottom: 20px;

	border-radius: 25px;
	background-color: white;
	border: 1px solid #00079b;
	box-shadow: 5px 5px #54ff31;
}

/**************************** 
 Action
/****************************/
#action {
	padding-top: 40px;
	padding-bottom: 40px;

	background-color: #f5f5f5;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
}

#action p {
	font-family: "Quicksand", sans-serif;
	font-size: 1.3rem;
}

#action-box {
	padding: 40px;
	margin-bottom: 20px;

	box-shadow: 5px 5px grey;
	background-color: white;
	border: 3px solid grey;
}

#action .btn {
	width: 100%;
	color: white;
	font-weight: bold;

	border-radius: 0;
	background-color: #48aac7;
}

#action .btn:hover {
	background-color: #3096b4;
	box-shadow: 3px 3px #a8fffb;
}

/**************************** 
 Footer
/****************************/
#footer {
	background-color: #333333;
	padding-top: 7px;
	padding-bottom: 7px;
}

#footer p {
	font-size: 0.9rem;
	color: white;
	margin-bottom: 0;
}

#footer ul li {
	display: inline;
	list-style-type: none;
	margin-right: 5px;
}

#footer-center ul li a,
#footer-left a,
,
#footer-right a {
	text-decoration: none;
}

#footer img {
	width: 20px;
}