@charset "utf-8";

body {
	background-color: #F0F0F0;
	color: #333;
	max-width: 1920px;
	padding: 0;
	margin: 0;
/*	font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif; /*  "Ubuntu",Verdana,Arial,sans-serif; */
	font-family: "Proxima Nova Light","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-style: normal;
	font-weight: 200;
}


h1.parallax, #pixels{
	font-family:"Museo 900", Verdana, serif;
	font-size-adjust:0.40;
	/* font-weight:700; */
	font-style:normal;
}


/*
** Normalisation des couleurs.
*/
.vert {
	color: #717D11;
}

.bleu {
	color: #44808A;
}

.rouge {
	color: #C34A36;
}

.mauve {
	color: #723488;
}

.purple_5 {
	color: #300241;
}
.bg_purple_5 {
	background-color: #300241;
}

.purple_4 {
	color: #480D5D;
}
.bg_purple_4 {
	background-color: #480D5D;
}

.purple_3 {
	color: #5E1F74;
}
.bg_purple_3 {
	background-color: #5E1F74;
}

.purple_2 {
	color: #723488;
}
.bg_purple_2 {
	color: white;
	background-color: #723488;
}

.purple_1 {
	color: #8F58A2;
}
.bg_purple_1 {
	background-color: #8F58A2;
}

.purple {
	color: #A166A3;
}
.bg_purple {
	background-color: #A166A3;
}


.yellow, .jaune {
	color: #FFCC00;
}
.bg_yellow, .bg-jaune {
	background-color: #FFCC00;
}


.orange_normal {
	color: #f0ad4e;
}
.bg_orange_normal {
	background-color: #f0ad4e;
}

.orange_moyen {
	color: #ef971f;
}
.bg_orange_moyen {
	background-color: #ef971f;
}


.blanc {
	color: white;
}

.bg_gris_fonce {
	color: white;
	background-color: #4F4F4F;
}

.gris-fonce {
	color: gray;
}

.gris-normal {
	color: silver;
}

.gris-clair {
	color: #f5f5f5;
}

.bg-gris-clair {
	background-color: #f5f5f5;	
}

.bg-gris-normal {
	background-color: silver;
}


.green {
	color: #9EC630;
}

.bg_green {
	color: white;
	background-color: #9EC630;
}


.blue1 {
	color: #568EB6;
}

.bg_blue1 {
	color: white;
	background-color: #568EB6;
}


/* =============================
** Gestion des tailles d'écran.
*/

/* ==============
** Smartphones
*/
/*@media screen and (min-width: 576px) {*/
@media screen and (min-width: 360px) {
	.information, #premiere .information {
		clear: both;
		width: 100%;
	}

	#presentation, #premiere, #seconde, #troisieme, #quatrieme, #cinquieme, #sixieme {
		margin: 0 auto;
		overflow: hidden;
	}

	#presentation {
		padding: 70px 0 0 0;
	}

	#premiere, #seconde, #troisieme, #quatrieme, #cinquieme, #sixieme {
		padding: 30px 0 0 0;
	}

	.float-right, .float-left {
		padding: 50px 0 0 0;
	}

	#troisieme .float-left {
		padding: 30px 0 0 0;
	}

	#troisieme .float-right {
		padding: 10px 0 0 0;
	}

	#troisieme .float-right div.parallax {
		margin-bottom: 40px;
		clear: both;
	}

	.partenaire-logo {
		text-align: left;
	}

	.partenaire-logo, .partenaire-adresse, .partenaire-description {
		clear: none;
		width: 100%;
		margin-bottom: 20px;
	}

	.bg-blanc {
		margin: 6px auto;
	}

	#sixieme .information .message {
		width: 85%;
	}


	/*
	** Gestion des occurrences de présentation
	*/
	.bloc-presentation p {
		margin-bottom: 0;
	}

	.bloc-presentation p.top {
		margin-top: 30px;
	}

	.bloc-presentation img.bottom {
		margin-bottom: 30px;
	}


	.carousel-item {
		height: 200px;
	}

	.carousel-item .carousel-text {
		position: absolute;
		top: 135px;
		left: 20px;
		background-color: white;
		border: 1px solid silver;
		border-radius: 6px;
		color: black;
		opacity: 0.8;
		padding: 2px 4px;
		font-size: 12px;
	}


	h1.parallax, #pixels{
		font-size: 1.5rem;
	}
}


/* ==============
** Tablettes
*/
@media screen and (min-width: 768px) {
	.information, #premiere .information {
		clear: none;
		width: 50%;
	}


	.bg-blanc {
		margin: 0 auto;
	}

	#sixieme .information {
		clear: none;
		width: 100%;
	}


	#presentation, #premiere, #seconde, #troisieme, #quatrieme, #cinquieme, #sixieme {
		color: gray; /* white; */
		margin: 0 auto;
		padding: 70px 0 0 0;
	}

	#presentation, #presentation-outil {
		background: url(../../Images/bg-presentation-1920x1286.jpg) 50% 0 no-repeat fixed; /* #A166A3; 723488 8F58A2; 300241; /* bg-presentation-1920x2560.jpg */
		/*height: 1050px;*/
		padding: 60px 0 0 0;
	}

	#premiere {
		background: url(../../Images/bg-first-1920x2560.jpg) 50% 0 no-repeat fixed;
		height: 870px;
	}

	#seconde {
		background: url(../../Images/bg-second-1920x831.jpg) 50% 0 no-repeat fixed;
		height: 1100px;
	}

	#troisieme {
		background: url(../../Images/bg-third-1920x1440.jpg) 50% 0 no-repeat fixed; /* flying-colors.jpg   */
		height: 1300px;
	}

	#quatrieme {
		background: url(../../Images/bg-fourth-1920x1440.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 400px;
	}

	#cinquieme {
		background: url(../../Images/bg-fifth-1920x1286.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 950px;
	}

	#sixieme {
		background: url(../../Images/bg-sixth-1920x1253.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 1100px;
	}


	.partenaire-logo {
		width: 30%;
		text-align: center;
	}

	.partenaire-adresse {
		width: 30%;
	}

	.partenaire-description {
		width: 40%;
	}


	/*
	** Gestion des occurrences de présentation
	*/
	.bloc-presentation {
		color: gray;
		margin-bottom: 30px;
	}

	.bloc-presentation p {
		background-color: white; /* darkgrey ; #723488; */
		color: darkgrey;
		border-radius: 10px;
		border: 1px solid darkgrey;
		padding: 10px 20px;
	}

	.bloc-presentation p {
		margin-bottom: inherit;
	}

	.bloc-presentation img.bottom {
		border-top: none;
	}


	/*
	** Carousel
	*/
	.carousel-item {
		height: 500px;
	}

	.carousel-item img.plus-petite {
		margin-top: 30px;
		max-width: 600px;
	}

	.carousel-item img.petite {
		margin-top: 30px;
		max-width: 650px;
	}

	.carousel-item img.haute {
/*		max-width: 500px;*/
	}

	.carousel-item img.large {
		margin-top: 60px;
		max-width: 700px;
	}

	.carousel-item img.logo {
		margin-top: 30px;
		max-width: 800px;
	}

	.carousel-item .carousel-text {
		position: initial;
/*		top: 240px;
		left: 20%; */
		background-color: white;
		font-size: 24px;
		display: block;
		padding: 6px 12px;
		border-radius: 10px;
		color: dimgrey;
		margin: 15px auto !important;
		text-align: center;
	}

	.carousel-caption {
		background-color: black;
		border-radius: 10px;
		opacity: 0.8;
	}


	h1.parallax {
		font-size: 2rem;
	}
}


/* ==============
** PC petit écran
*/
@media (min-width: 992px) {
	#presentation, #premiere, #seconde, #troisieme, #quatrieme, #cinquieme, #sixieme {
		color: gray; /* white; */
		margin: 0 auto;
		padding: 70px 0 0 0;
	}

	#presentation {
		padding: 65px 0 0 0;
	}

	#presentation .container-fluid {
		padding: 0 60px;
	}

	#premiere {
		background: url(../../Images/bg-first-1920x2560.jpg) 50% 0 no-repeat fixed;
		height: 1350px;
	}

	#seconde {
		background: url(../../Images/bg-second-1920x831.jpg) 50% 0 no-repeat fixed;
		height: 950px;
	}

	#troisieme {
		background: url(../../Images/bg-third-1920x1440.jpg) 50% 0 no-repeat fixed; /* flying-colors.jpg   */
		height: 1050px;
	}

	#quatrieme {
		background: url(../../Images/bg-fourth-1920x1440.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 400px;
	}

	#cinquieme {
		background: url(../../Images/bg-fifth-1920x1286.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 850px;
	}

	#sixieme {
		background: url(../../Images/bg-sixth-1920x1253.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 950px;
	}


	/*
	** Gestion des occurrences de présentation
	*/
	.bloc-presentation p {
		font-size: 15px;
	}


	/*
	** Carousel
	*/
	.carousel-item {
		height: 550px;
	}

	.carousel-item img.petite {
		max-width: 750px;
	}

	.carousel-item img.plus-petite {
		max-width: 700px;
	}

	.carousel-item.haut {
		height: 1030px;
	}

	.carousel-item img.large {
		margin-top: 30px;
		max-width: 1100px;
	}

	.carousel-item .carousel-text {
		position: initial;
		background-color: white;
		font-size: 30px;
		display: block !important;
		padding: 6px 12px;
		border-radius: 10px;
		margin: 15px auto !important;
		width: 60%;
		text-align: center;
	}

	.carousel-caption {
		background-color: black;
		border-radius: 10px;
		opacity: 0.8;
	}


	h1.parallax {
		font-size: 2.5rem;
	}

}



/* ==============
** PC grand écran
*/
@media (min-width: 1200px) {
	#sixieme .information .message {
		width: 95%;
	}

	#presentation, #premiere, #seconde, #troisieme, #quatrieme, #cinquieme, #sixieme, #presentation-outil {
		color: gray; /* white; */
		margin: 0 auto;
		padding: 70px 0 0 0;
	}	

	#presentation, #presentation-outil {
		padding: 65px 0 0 0;
	}

	#presentation-outil {
		height: 1200px;
	
}

	#premiere {
		background: url(../../Images/bg-first-1920x2560.jpg) 50% 0 no-repeat fixed;
		height: 1100px;
	}

	#seconde {
		background: url(../../Images/bg-second-3004x1300.jpg) 50% 0 no-repeat fixed;
		height: 1250px;
	}

	#troisieme {
		background: url(../../Images/bg-third-1920x1440.jpg) 50% 0 no-repeat fixed; /* flying-colors.jpg bg-third-1920x1440.jpg  */
		height: 520px;
	}

	#quatrieme {
		background: url(../../Images/bg-fourth-1920x1440.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 1100px;
	}

	#cinquieme {
		background: url(../../Images/bg-fifth-1920x1286.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 600px;
	}

	#sixieme {
		background: url(../../Images/bg-sixth-1920x1253.jpg) 50% 0 no-repeat fixed; /* color-vortex.jpg */
		height: 860px;
	}
}


.bg-blanc {
	background-color: white;
	color: gray;
	padding: 0 6px;
	overflow: auto;
	width: 100%;
	text-align: center;
}

.bg-blanc h1 {
	margin: 20px auto;
	vertical-align: middle;
}

.espace-interne {
	margin-bottom: 30px;
}

.card {
	margin-bottom: 30px;
}

.card-text .row {
	margin-top: 6px;
}

.card-text .row:first-child {
	margin-top: 0;
}


footer {
	padding: 12px 6px;
	font-size: 12px;
	width: 100%;
	z-index: 32;
	background-color: #E9E9E9;
}


.icon {
	width: 16px;
	height: 16px;
}


.grande_icon {
	width: 32px;
	height: 32px;
}


.rond {
	border: 1px solid gray;
	border-radius: 10px;
	padding: 6px;
}

.navbar-light .navbar-nav .nav-link:hover {
	color: white;
	background-color: gray;
}

.navbar-light .navbar-nav .nav-link.active {
	color: white;
	background-color: #44808A;
}

.navbar-nav {
	font-weight: bolder;
}

.bg-light {
	opacity: 0.96;
}


.logo {
	text-align: center;
	vertical-align: middle;
	padding: 10px 10px;
	background-color: #FFF;
	cursor: pointer;
	z-index: 10;
}

.logo img, .logo h3 {
	position: relative;
}

.rotonde {
	margin: 0;
	padding: 0;
	font-size: 34px; /* 24 */
	font-weight: 300;
    letter-spacing: 0;
    line-height: 1.14286;
}


.option {
	position: absolute;
	top: 74px;
	right: 40px;
	width: 120px;
	height: 90px;
	border-radius: 9px;
	background-color: #FFF;
	z-index: 30;
	border: 2px solid #DCDCDC;
	color: gray;
	display: none;
	padding: 25px 6px;
	word-wrap: break-word;
	text-align: center;
	/*opacity: 0.9;*/

	font-family: "Proxima Nova Light","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-style: normal;
	font-weight: 200;
	/* background-image: linear-gradient(to bottom, #FFF, #E0E0E0); */
}

.option:hover, .option.active {
	border: 2px solid silver;
	color: gray;
	cursor: pointer;
	background-color: white; /* #F0F0F0; */
	opacity: 1;
	/* opacity: 0.6; */
}

.option.active {
	background-color: darkgray;
	color: white;
}


.langue {
	position: absolute;
	right: 40px;
	width: 118px;
	text-align: center;
	margin-top: 20px;
	z-index: 31;
	color: silver;
}

#langue_active {
	width: 96px;
}

a {
	color: gray;
}

a:hover, .modal-title {
	color: #C34A36;
}

th, td {
	font-size: 14px;
}

td.titre {
	font-weight: bold;
}

.modal-footer .btn-fermer {
	border-color: #A166A3;
}

#liste_chg_langue li a {
	color: silver;
}

#liste_chg_langue li a:hover {
	color: gray;
}


.card-text a.outil {
	color: silver;
	text-decoration: underline;
	font-weight: bolder;
}

.card-text a.outil:hover {
	text-decoration: none;
	font-weight: bolder;
}

.barre {
	background-color: silver;
	position: relative;
	z-index: 1;
	float: left;
	margin-right: 3px;
}

.barre-vertical-3 {
	width: 3px;
	height: 800px;
}

.barre-vertical-6 {
	width: 6px;
	height: 800px;
}

.barre-vertical-9 {
	width: 9px;
	height: 800px;
}

.barre-vertical-12 {
	width: 12px;
	height: 800px;
}

.barre-vertical-15 {
	width: 15px;
	height: 800px;
}

.barre-vertical-30 {
	width: 30px;
	height: 800px;
}

.barre-vertical-60 {
	width: 60px;
	height: 800px;
}

.barre-vertical-90 {
	width: 90px;
	height: 800px;
}

.jumbotron {
	z-index: 10;
	position: relative;
}

.mot_cle {
	position: absolute;
/*	font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif; */
	font-style: italic;
	display: none;
	z-index: 1;
	font-size: 52px;
    font-weight: 200;
    letter-spacing: -0.016em;
    line-height: 1.07724;
}


/* ==============================
** Gestion de la partie parallax
*/
img.portrait {
	border-radius: 6px;
}

div.parallax{
	margin: 0 0 20px 0;
	padding: 30px 30px;
	border: 1px solid gray;
	border-radius: 6px;
	background-color: white; /* #F0F0F0; */
	/* opacity: 0.9; */
	font-family: "Proxima Nova Light","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-style: normal;
	font-weight: 200;
}

p.parallax, ul.parallax{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
/*	font-size-adjust:0.488; */
	font-weight:200;
	font-style:normal;
}

img.parallax{
	border: 0;
}

h2.parallax{
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
	color: white;
}


h3.header_parallax{
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
	color: white;
	margin-bottom: 0px;
	border-radius: 6px 6px 0px 0px;
}

div.body_parallax{
	margin: 0 0 20px 0;
	padding: 30px 30px;
	border: 1px solid gray;
	border-radius: 0px 0px 6px 6px;
	background-color: white; /* #F0F0F0; */
	/* opacity: 0.9; */
	font-family: "Proxima Nova Light","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-style: normal;
	font-weight: 200;
}


#header h1, #pixels{
	color: #48941A;
}


.float-right, .float-left{
	margin: 0 20px;
}


.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
}

#nav li{
	margin: 0 0 15px 0;	
}


#header, #premiere, #seconde, #troisieme {
	width: 100%;
}


#seconde .bg {
	background: url(../../Images/Portrait_Pierre-Luc.png) 50% 0 no-repeat fixed;
	height: 300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 200px;
	z-index: 200;
}

/* #troisieme h2, #quatrieme h2 {
	background-color: black;
	opacity: 0.7;
	text-align: center;
	border-radius: 6px;
	padding: 3px 10px;
} */


.card {
	background-color: transparent;
}

.card-header {
	background-color: black;
	opacity: 0.7;
	text-align: center;
	color: white;
	font-weight: 500;
	font-size: 2rem;
	font-style: normal;
	font-family: "Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust: 0.531;
}

.card-body {
	background-color: white;
	border-radius: .25rem;
}

.card-header+.card-body {
	background-color: white;
	border-radius: 0 0 .25rem .25rem;
}


#troisieme h3 /*, #quatrieme h3 */ {
	/* color: #D7BCA6; /* 6B8699; */
	background-color: black;
	opacity: 0.7;
	text-align: center;
	/* border-radius: 6px; */
	padding: 3px 10px;
}

#troisieme td {
	vertical-align: top;
}



#fifth {
	background: #ccc;
	height: 400px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}


/*#cinquieme div.card:first-child {
	width: 65%;
	float: left;
	margin-right: 30px;
}

#cinquieme div.card:last-child {
	width: 30%;
	float: left;
}*/

.story {
	margin: 0 auto;
	overflow: auto;
}

.story .float-left, .story .float-right {
	position: relative;
}


.float-center {
	position: relative;
	float: left;
	margin: 0 20px;
	width: 97%;
}


.information {
	position: relative;
	float: left;
	margin-bottom: 15px;
	font-family: "Proxima Nova Light","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-style: normal;
	font-weight: 200;
}

.information .icon {
	position: relative;
	float: left;
	background-color: #717D11;
	color: white;
	opacity: 0.8;
	border-radius: 50px 50px 0 50px;
	width: 40px;
	height: 40px;
	float: left;
	font-size: 26px;
	padding-top: 4px;
	text-align: center;
}

.information .message {
	position: relative;
	float: left;
	margin-left: 10px;
	background-color: white;
	/* opacity: 0.9; */
	width: 83%;
	min-height: 40px;
	padding: 7px 10px;
	border-radius: 3px 20px 3px 10px;
/*	border: 1px solid #723488; */
}


.information p, #sixieme .information ul {
	margin-bottom: 3px;
}

.mon-glyph {
	margin-right: 12px;
	color: #C34A36;
}


.dropdown-item:hover {
	background-color: #A166A3;
	color: white;
}

.logo_reference {
	position: relative;
	z-index: 1;
	float: left;
	margin-right: 15px;
	height: 100px;
}

button#b-g-telecharger:hover, .bg-contact, .bg-primaire {
	color: white;
	background-color: #717D11;
}


.bg-contact:hover, .bg-primaire:hover {
	color: white;
	background-color: #C34A36;
}


/* Gestion des fonctionnalités des outils */
.fonctionnalites .en-place {
	color: #44808A;
}

.fonctionnalites .bientot {
	color: #C34A36;
}

.fonctionnalites .prevue {
	color: silver;
}