@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body {
	margin:0;
	padding:0;
}

/* NAVBAR */

header {
	background-color: white;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 100px;
	box-shadow: 0px 4px 16px 1px black;
}

.menu_logo {
	float: left;
	text-align: left;
}

.menu_logo img {
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 50px;
	height: 60px;
	width: auto;
}

.menu_liens {
	text-align: center;
	display: inline-block;
	vertical-align: top;
	margin-top: 40px;
}

.contact {
	float: right;
	display: flex;
	align-items: center;
	vertical-align: top;
	margin-top: 5px;
	margin-right: 10px;
	font-family: Raleway, sans-serif;
	color: #3f3f3e;
}

.contact img {
	height: 60px;
	margin-right: 5px;
}

.contact a {
	color: #007393;
}

.menu_liens > ul {
	margin: 0;
	padding-left: 0;
}

.menu_liens ul li {
	display: inline;
	margin-right: 40px;
}

.menu_liens ul li:last-child {
	margin-right: 0px;
}

.menu_liens ul li a {
	color: #007393;
	font-family: Raleway, sans-serif;
	font-weight: 700;
	text-decoration: none;
}

.menu_liens ul li a:hover {
	text-decoration: underline;
}

.only_mobile {
	display: none;
}

.lignes_menu {
	color: #3f3f3e;
	padding: 16px 16px 24px 16px;
	border: none;
	background: none;
}

.ligne_picto_uti {
	display: inline;
}

.lignes_menu div {
	width: 35px;
	height: 4px;
	background-color: #3f3f3e;
	margin: 6px 0;
}

.dropdown {
	position: relative;
	float: right;
	margin: 20px 20px 0 0;
}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 2;
	top: 0;
	right: 0;
	background-color: #494949;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}
  
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 15px;
	font-family: Raleway, sans-serif;;
	color: #a0a0a0;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover {
	color: #f1f1f1;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

@media all and (max-width: 350px) {
	.menu_logo img {
		height: 50px;
	}
}

@media all and (max-width: 1600px) {
	header {
		background-color: white;
		position: sticky;
		top: 0;
		z-index: 9999;
		width: 100%;
		height: 100px;
		box-shadow: 0px 4px 16px 1px black;
	}

	.only_mobile {
		display: block;
	}

	.no_mobile {
		display: none;
	}

	.contact {
		display: none;
	}

	.menu-icon {
		display: inline;
		min-width: 3%;
		margin-right: 10px;
		margin-left: auto;
	}

	.navbarList {
		display: none;
    	overflow: hidden;
    	transition: max-height 0.3s;
	}

	#menuToggle:checked ~ .navbarList {
		display: block;
		max-height: 800px;
    }
}


@media all and (max-width: 320px) {
	.menu_logo img {
		height: 40px;
	}
}

/* CAROUSEL */

.swiper-container {
	width: 100%;
	display: block;
	position: relative;
}

.swiper-slide img {
	width: 100%;
	display: block;
	min-height: 275px;
	object-fit: cover;
}

.swiper-slide a {
	display: block;
	pointer-events: none;
}

.over_header {
	position: absolute;
    top: 25%;
	background-color: rgba(63, 63, 62, 0.8);
	color: white;
	z-index: 9;
	margin-left: 15%;
	width: 40%;
	height: 35%;
	padding: 1%;
	border-bottom: 6px solid orange;
	font-size: 80%;
	font-family: Raleway, sans-serif;
}

.over_header h1 {
	font-weight: 300;
	font-size: 1.6vw;
	margin-bottom: 0px;
}

.over_header p {
	font-weight: bold;
	font-size: 1.2vw;
}

.over_header button {
	position: relative;
	background-color: rgb(76, 144, 175);
	width: 40%;
	left: 80%;
	border: none;
	color: white;
	padding: 10px 30px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	pointer-events: all;
}

@media all and (max-width: 1300px) {
	.over_header button {
		display: none;
	}

	.swiper-slide a {
		pointer-events: all;
	}
}

@media all and (max-width: 1150px){
	.over_header h1 {
		margin-top: 0px;
	}
}

@media all and (max-width: 600px) {
	.over_header {
		top: 25%;
		width: 60%;
		height: 40%;
	}

	.over_header h1 {
		font-size: 100%;
	}
	
	.over_header p {
		font-weight: normal;
		font-size: 70%;
	}
	
}

/* CONTENT INDEX */


/* 
	La majorité des pages du site fonctionnent avec un système de grid pour la disposition des élements.
	Les grid sont déclarées sur chaque parent div avec 'diplay: grid' avec lequel on défini le nbr de lignes et de colonnes.
	L'unité fr spécifique aux grilles permet de diviser les lignes/colonnes en fractions. 
	Ici, 'grid-template-columns: repeat(5, 1fr);' revient à diviser nos colonnes en 5 parts égales sur la largueur du site.
	A noter que IE10/11 utilise l'ancien système/notation de grid (suffixé -ms) et ne dispose pas de la fonction repeat().
*/


.content {
	height: 1626px;
	background-color: #ebeaeb;
	font-family: Raleway, sans-serif;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
	grid-template-rows: repeat(43, 2fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

/*
	Pour la diposition des élements enfants sur la grid, on utilise l'attribut 'grid-area'
	grid-area : <ligne de début> / <colonne de début> / <ligne de fin> / <colonne de fin>
	Toujours à noter que IE10/11 utilise l'ancienne notation: 
		Par exemple:
			'-ms-grid-row' pour définir le ligne de début de l'élément
			'-ms-grid-row-span' pour définir le br de ligne sur lequel l'élément va s'étaler.
*/

.content .firstBackground {
	-ms-grid-row: 1;
	-ms-grid-row-span: 9;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 1 / 1 / 10 / 6; 
	background-color: #3f3f3e;
}

.content .intro {
	-ms-grid-row: 2;
	-ms-grid-row-span: 5;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 2 / 2 / 6 / 5; 
	color: white;
	font-size: 200%;
	text-align: center;
}

.content .intro p {
	margin: 0px;
	padding: 0px;
}

.carac {
	-ms-grid-row: 7;
	-ms-grid-row-span: 6;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 7 / 2 / 13 / 5;
	background-color: white;
	display: flex;
	justify-content: space-between;
	color: #007393;
	text-align: center;
	align-items: center;
}

.carac img {
	max-width: 25%;
}

.pictures { 
	-ms-grid-row: 14; 
	-ms-grid-row-span: 11; 
	-ms-grid-column: 2; 
	-ms-grid-column-span: 3; 
	grid-area: 14 / 2 / 25 / 5;
	display: flex;
	justify-content: flex-start;
}

.pictures a {
	width: calc(100% / 3);
	position: relative;
}

.pictures img {
	width:100%;
	height:100%;
}

.pictures a {
	transition: all 300ms ease-in-out;
}

.imgDescLayer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	color: #fff;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: opacity 0.2s, visibility 0.2s;
}

.imgDesc {
	transition: .2s;
	transform: translateY(1em);
}

.pictures a:hover {
	transform: translate(0, -7px);
	box-shadow: 0 32px 25px -15px rgba(0, 0, 0, 0.63);
}

.pictures a:hover .imgDescLayer {
	visibility: visible;
	opacity: 1;
}

.process { 
	-ms-grid-row: 26; 
	-ms-grid-row-span: 11; 
	-ms-grid-column: 2; 
	-ms-grid-column-span: 3; 
	grid-area: 26 / 2 / 37 / 5;
	background-color: white;
	padding: 20px;
	color: #3f3f3e;
}

.process img {
	float: right;
	max-width: 35%;
}

.processContent h1 {
	margin-top: 0px;
	font-weight: 400;
	color: #007393;
}

.processContent p > ul {
	color: #3f3f3e;
	font-weight: 500;
}

.prefooterContent {
	-ms-grid-row:  2;
	-ms-grid-row-span:  1;
	-ms-grid-column:  2;
	-ms-grid-column-span:  3;
	grid-area:  2 / 2 / 3 / 5;
	color: white;
	text-align: center;
}

.prefooterContent button {
	background-color: rgb(76, 144, 175);
	border: none;
	color: white;
	padding: 10px 30px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}

.prefooterBackground { 
	-ms-grid-row: 32; 
	-ms-grid-row-span: 12; 
	-ms-grid-column: 1; 
	-ms-grid-column-span: 5; 
	grid-area: 32 / 1 / 44 / 6;
	background: url("../img/pre-footer-isupervize.jpg") no-repeat center top fixed;
	background-size: cover;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 1fr 1fr;
	grid-template-rows: repeat(2, 1fr);
}


/* RESPONSIVE INDEX */

@media all and (max-width: 1500px) {
	.content {
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
	}

	.content .prefooterBackground { 
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
		-ms-grid-rows: 1fr 1fr;
		grid-template-rows: repeat(2, 1fr);
	}
}

@media all and (max-width: 1400px) {
	.content {
		-ms-grid-columns: 0.2fr 1fr 1fr 1fr 0.2fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
	}

	.content .prefooterBackground { 
		-ms-grid-columns: 0.2fr 1fr 1fr 1fr 0.2fr;
		grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
		-ms-grid-rows: 1fr 1fr;
		grid-template-rows: repeat(2, 1fr);
	}
}


@media all and (max-width: 900px) {

	.pictures { 
		-ms-grid-row: 14; 
		-ms-grid-row-span: 11; 
		-ms-grid-column: 2; 
		-ms-grid-column-span: 3; 
		grid-area: 15 / 2 / 24 / 5;
		display: flex;
		justify-content: flex-start;
	}

	.content .intro {
		font-size: 150%;
	}

	.prefooterContent {
		font-size: 90%;
	}
}


@media all and (max-width: 510px) {
	.content .intro {
		font-size: 110%;
	}

	.processContent ul {
		padding-left: 5px;
	}
}

@media all and (max-width: 464px) {

	.content {
		height: 2000px;
		grid-template-rows: repeat(55, 2fr);
	}

	.content .prefooterBackground {
		-ms-grid-row: 32; 
		-ms-grid-row-span: 12; 
		-ms-grid-column: 1; 
		-ms-grid-column-span: 5; 
		grid-area: 44 / 1 / 56 / 6;
	}

	.carac {
		-ms-grid-row: 7;
		-ms-grid-row-span: 6;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: 7 / 2 / 15 / 5;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 60%;
		color: #007393;
		text-align: center;
		align-items: center;
	}

	.carac div {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
	}

	.carac p {
		min-width: 50%;
	}

	.carac img {
		max-width: 12%;
	}

	.pictures { 
		-ms-grid-row: 14; 
		-ms-grid-row-span: 11; 
		-ms-grid-column: 2; 
		-ms-grid-column-span: 3; 
		grid-area: 16 / 3 / 38 / 4;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.pictures a {
		width: 60vw;
	}

	.process { 
		-ms-grid-row: 26; 
		-ms-grid-row-span: 11; 
		-ms-grid-column: 2; 
		-ms-grid-column-span: 3;
		grid-area: 39 / 2 / 49 / 5;
		background-color: white;
		padding: 20px;
		font-size: 76%;
	}

	.process img {
		display: none;
	}

	.content {
		height: 2000px;
	}

	.prefooterContent {
		font-size: 75%;
	}

	.prefooterContent h1 {
		margin-top: 0px;
	}

	.prefooterContent button {
		font-size: 12px;
	}

	.intro {
		font-size: 120%;
	}

}

/* EOLIENS - TRANSPORTS ET ENVIRONNEMENT : Ces pages partagent la même disposition */

.contentEolien, .contentTransportEnvironnement {
	height: 2904px;
	background-color: #ebeaeb;
	font-family: Raleway, sans-serif;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
	grid-template-rows: repeat(75, 2fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.contentEolien h1, .contentTransportEnvironnement h1  {
	font-weight: 400;
}

.firstBackgroundEoliensTransEnv {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 1 / 1 / 3 / 6;
	background-color: #3f3f3e;
}

.pageTitleEoliensTransEnv {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 4;
	grid-area: 1 / 2 / 3 / 6;
	display: flex;
	align-items: center;
	color: white;
	font-weight: 100;
}

.pageTitleEoliensTransEnv h1 {
	font-weight: 200;
}

.secondBackgroundEoliens, .secondBackgroundTransEnv {
	-ms-grid-row: 3;
	-ms-grid-row-span: 14;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 3 / 1 / 17 / 6;
	background-image: url("../img/eolienne-background.jpg");
	background-size: cover;
	background-position: center;
}

.secondBackgroundTransEnv {
	background-image: url("../img/environnement-background.jpg");
}

.firstArticleEoliensTransEnv {
	-ms-grid-row: 4;
	-ms-grid-row-span: 12;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 4 / 2 / 16 / 5;
}

.firstArticleEoliensTransEnvP > h1 {
	color: #007393;
}

.firstArticleEoliensTransEnvP > p {
	color: #3f3f3e;
	font-weight: 500;
}

.firstArticleEoliensTransEnv img {
	max-width: 43%;
	float: right;
	margin-left: 50px;
}

.videoBackground {
	-ms-grid-row: 17;
	-ms-grid-row-span: 18;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 17 / 1 / 35 / 6;
}

.videoBackground video {
	-o-object-fit: cover;
	   object-fit: cover;
	height: 100%;
	width: 100%;
}

.videoTitle {
	-ms-grid-row: 24;
	-ms-grid-row-span: 3;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 24 / 2 / 27 / 5;
	text-align: center;
	color: white;
	font-size: 20px;
	font-weight: 100;
	position: relative;
	z-index: 2;
}

.adaptationBackground {
	-ms-grid-row: 35;
	-ms-grid-row-span: 13;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 35 / 1 / 48 / 6;
	background-color: white;
}

.adaptationTitle {
	-ms-grid-row: 36;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 36 / 2 / 38 / 5;
	text-align: center;
	color: #007393;
}

.adaptationSchema {
	-ms-grid-row: 39;
	-ms-grid-row-span: 8;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 39 / 2 / 47 / 5;
	display: flex;
	color: #007393;
	text-align: center;
}

.adaptationSchema img {
	max-width: 60%;
	width: 100%;
}

.secondArticleEoliensTransEnv {
	-ms-grid-row: 49;
	-ms-grid-row-span: 13;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 49 / 2 / 62 / 5;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.secondArticleEoliensTransEnv img {
	max-width: 32%;
	flex-shrink: 0;
}

.contentTransportEnvironnement .secondArticleEoliensTransEnv img {
	max-width: 45%;
}

.secondArticleEoliensTransEnvP {
	max-width: 50%;
}

.secondArticleEoliensTransEnvP > h1 {
	color: #007393;
}

.secondArticleEoliensTransEnvP p, .secondArticleEoliensTransEnvP ul {
	color: #3f3f3e;
	font-weight: 500;
}

.prefooterBackgroundEoliens {
	-ms-grid-row: 66;
	-ms-grid-row-span: 10;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 66 / 1 / 76 / 6; 
	background: url("../img/pre-footer-isupervize.jpg") no-repeat center top fixed; 
	background-size: cover;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 1fr 1fr;
	grid-template-rows: repeat(2, 1fr);
}

.prefooterBackgroundEoliens .prefooterContent h1 {
	margin-top: 0px;
	font-weight: bold;
}

.contentEolien .carac, .contentTransportEnvironnement .carac {
	-ms-grid-row: 63;
	-ms-grid-row-span: 6;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 63 / 2 / 69 / 5;
	background-color: white;
	display: flex;
	justify-content: space-between;
	color: #007393;
	text-align: center;
	align-items: center;
}


@media all and (max-width: 1500px) {

	.contentEolien, .contentTransportEnvironnement {
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
	}

	.prefooterBackgroundEoliens { 
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
		-ms-grid-rows: 0.8fr 1fr;
		grid-template-rows: 0.8fr 1fr;
	}
}


@media all and (max-width: 1400px) {

	.contentEolien, .contentTransportEnvironnement {
		-ms-grid-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
	}

	.prefooterBackgroundEoliens { 
		-ms-grid-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
		-ms-grid-rows: 0.8fr 1fr;
		grid-template-rows: 0.8fr 1fr;
	}
}

@media all and (max-width: 950px) {
	.contentTransportEnvironnement .secondArticleEoliensTransEnvP, .contentEolien .secondArticleEoliensTransEnvP {
		font-size: 80%;
	}
}


@media all and (max-width: 640px) {
	.contentEolien, .contentTransportEnvironnement {
		height: 3000px;
	}

	.pageTitleEoliensTransEnv h1 {
		font-size: 150%;
	}

	.firstArticleEoliensTransEnv {
		grid-area: 3 / 2 / 16 / 5;
		font-size: 100%;
	}


	.contentTransportEnvironnement .firstArticleEoliensTransEnvP {
		font-size: 90%;
	}

	.contentEolien .firstArticleEoliensTransEnvP {
		font-size: 85%;
	}

	.firstArticleEoliensTransEnv img {
		display: none;
	}

	.firstArticleEoliensTransEnvP h1 br {
		display: none;
	}

	.secondArticleEoliensTransEnv {
		display: block;
	}

	.secondArticleEoliensTransEnv img {
		float: right;
		max-width: 30%;
	}

	.secondArticleEoliensTransEnvP {
		max-width: 100%;
	}

	.secondArticleEoliensTransEnvP h1 {
		margin-top: 0px;
	}

	.contentTransportEnvironnement .secondArticleEoliensTransEnvP {
		font-size: 83%;
	}

	.contentEolien .secondArticleEoliensTransEnvP {
		font-size: 90%;
	}

	.videoTitle h1 {
		font-size: 150%;
	}

	.adaptationTitle h1 {
		font-size: 130%;
	}

	.adaptationSchema {
		grid-area: 38 / 2 / 47 / 5;
		flex-direction: column;
		justify-content: space-around;
	}

	.adaptationSchema div {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.adaptationSchema p {
		margin: auto;
		font-size: 70%;
		min-width: 60%;
	}

	.adaptationSchema img {
		max-width: 15%;
	}

	.adaptationSchema div:nth-of-type(2) img {
		max-width: 30%;
	}

	.contentEolien .carac, .contentTransportEnvironnement .carac {
		grid-area: 62 / 2 / 69 / 5;
		justify-content: space-around;
	}
}

@media all and (max-width: 400px) {

	.contentTransportEnvironnement .secondArticleEoliensTransEnvP {
		font-size: 75%;
	}

	.contentEolien .secondArticleEoliensTransEnvP {
		font-size: 80%;
	}

}


/* CHANTIER */

.contentChantiers {
	height: 2200px;
	background-color: #ebeaeb;
	overflow: hidden;
	font-family: Raleway, sans-serif;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;;
	grid-template-rows: repeat(53, 2fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.firstBackgroundChantiers {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 1 / 1 / 3 / 6;
	background-color: #3f3f3e;
}

.pageTitleChantiers {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 4;
	grid-area: 1 / 2 / 3 / 6;
	display: flex;
	align-items: center;
	color: white;
}

.pageTitleChantiers h1 {
	font-weight: 200;
}


.secondBackgroundChantiers {
	-ms-grid-row: 3;
	-ms-grid-row-span: 14;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 3 / 1 / 17 / 6;
	background-image: url("../img/background-chantier.jpg");
	background-size: cover;
}

.surveillanceAcoustique {
	-ms-grid-row: 4;
	-ms-grid-row-span: 12;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 4 / 2 / 16 / 5;
}

.surveillanceAcoustiqueP {
	margin: 15px;
}

.surveillanceAcoustiqueP > h1 {
	color: #007393;
	font-weight: 400;
}

.surveillanceAcoustiqueP > p > ul {
	color: #3f3f3e;
	font-weight: 500;
}

.surveillanceAcoustique img {
	float: right;
	max-width: 50%;
	margin: 15px;
}

.contentChantiers .adaptationBackground {
	-ms-grid-row: 17;
	-ms-grid-row-span: 12;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 17 / 1 / 29 / 6;
	background-color: rgb(235, 235, 235);
}

.contentChantiers .adaptationTitle {
	-ms-grid-row: 17;
	-ms-grid-row-span: 3;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 17 / 2 / 20 / 5;
	text-align: center;
	color: #007393;
}

.contentChantiers .adaptationTitle h1 {
	font-weight: 400;
}

.contentChantiers .adaptationSchema {
	-ms-grid-row: 20;
	-ms-grid-row-span: 8;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 20 / 2 / 28 / 5;
	display: flex;
	color: #007393;
	text-align: center;
}

.thirdBackgroundChantiers {
	-ms-grid-row: 29;
	-ms-grid-row-span: 16;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 29 / 1 / 45 / 6;
	background-image: url("../img/background-chantier-sono-blue.jpg");
	background-size: cover;
}

.fonctionnement {
	-ms-grid-row: 30;
	-ms-grid-row-span: 10;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 30 / 2 / 40 / 5;
	color: white;
	display: flex;
	align-items: center;
}

.fonctionnementP {
	max-width: 65%;
}

.fonctionnementP > h1 {
	font-weight: 400;
}

.fonctionnement img {
	-ms-flex: 1;
	max-width: 50%;
	margin: 15px;
}

.contentChantiers .carac {
	-ms-grid-row: 42;
	-ms-grid-row-span: 6;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 42 / 2 / 48 / 5;
	background-color: white;
	display: flex;
	justify-content: space-between;
	color: #007393;
	text-align: center;
	align-items: center;
}

.prefooterBackgroundChantier {
	-ms-grid-row: 45;
	-ms-grid-row-span: 9;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 45 / 1 / 54 / 6; 
	background: url("../img/pre-footer-isupervize.jpg") no-repeat center top fixed; 
	background-size: cover;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 1fr 1fr;
	grid-template-rows: repeat(2, 1fr);
}

.prefooterBackgroundChantier .prefooterContent h1 {
	margin-top: 0px;
}

@media all and (max-width: 1600px) {
	.contentChantiers {
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
	}

	.prefooterBackgroundChantier { 
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
		-ms-grid-rows: 0.8fr 1fr;
		grid-template-rows: 0.8fr 1fr;
	}
}


@media all and (max-width: 1400px) {
	.contentChantiers {
		-ms-grid-columns: 0.2fr 1fr 1fr 1fr 0.2fr;
		grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
	}

	.prefooterBackgroundChantier { 
		-ms-grid-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
		-ms-grid-rows: 0.8fr 1fr;
		grid-template-rows: 0.8fr 1fr;
	}
}

@media all and (max-width: 1150px) {
	.fonctionnement {
		display: block;
		-ms-grid-row: 29;
		-ms-grid-row-span: 11;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: 29 / 2 / 40 / 5;
	}

	.fonctionnementP {
		max-width: none;
	}

	.fonctionnement img {
		float: right;
	}
}

@media all and (max-width: 650px) {
	.contentChantiers {
		height: 2300px;
	}

	.pageTitleChantiers h1 {
		font-size: 150%;
	}

	.surveillanceAcoustique {
		text-align: center;
		-ms-grid-row: 3;
		-ms-grid-row-span: 13;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: 3 / 2 / 16 / 5;
	}

	.surveillanceAcoustique img {
		max-width: 40%;
	}

	.surveillanceAcoustiqueP {
		text-align: left;
	}

	.surveillanceAcoustiqueP h1 {
		font-size: 150%;
	}

	.surveillanceAcoustiqueP h1 br {
		display: none;
	}


	.fonctionnementP {
		font-size: 90%;
	}

	.fonctionnementP h1 br {
		display: none;
	}

	.contentChantiers .carac {
		justify-content: space-around;
	}
}

@media all and (max-width: 600px) {
	.fonctionnementP {
		font-size: 75%;
	}
}

@media all and (max-width: 380px) {
	.surveillanceAcoustiqueP {
		font-size: 80%;
	}
}

/* ABOUT US */

.contentAboutUs {
	height: 1700px;
	background-color: #ebeaeb;
	font-family: Raleway, sans-serif;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
	grid-template-rows: repeat(43, 2fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.venathecBackground {
	-ms-grid-row: 1;
	-ms-grid-row-span: 11;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 1 / 1 / 12 / 6; 
	background-image: url("../img/groupe-venathec-background.jpg");
	background-position: bottom;
	background-size: cover;
}


.aboutUsIntro {
	-ms-grid-row: 1;
	-ms-grid-row-span: 6;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 1 / 2 / 8 / 5;
	color: white;
}

.aboutUsIntro h1 {
	font-weight: 200;
}

.aboutUsIntro hr + p {
	text-align: center;
}

.aboutUsIntro hr {
	width: 50%;
	margin-top: 40px;
	margin-bottom: 40px;
}

.aboutUsTrombinoscope {
	-ms-grid-row: 8;
	-ms-grid-row-span: 29;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 8 / 2 / 37 / 5;
	background-color: white;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: repeat(3, 1fr);
	-ms-grid-rows: 1fr 1fr 1fr 1fr auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: repeat(14, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	color: #007393;
}

.pCornuIntro {
	-ms-grid-row: 1;
	-ms-grid-row-span: 4;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: 1 / 1 / 5 / 4;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px;
}

.quoteCornu {
	max-height: 100%;
	max-width: 70%;
	overflow: auto;
}

.quoteCornu p {
	position: relative;
	color: #3f3f3e;
	font-style: italic;
	font-size: 90%;
	margin-left: 2%;
	z-index: 2;
}

.quoteCornu img {
	position: absolute;
	max-width: 3%;
}

.pCornuImg  {
	margin: auto;
	text-align: center;
}

.trombiImg {
	max-width: 30%;
}

.titleTrombinoscope {
	-ms-grid-row: 5;
	-ms-grid-row-span: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: 5 / 1 / 6 / 4;
	text-align: center;
}

.titleTrombinoscope h1 {
	font-weight: 300;
}

.titleTrombinoscope hr {
	width: 50%;
}

.MFA {
	-ms-grid-row: 6;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-area: 6 / 1 / 8 / 2;
	text-align: center;
}

.EMA {
	-ms-grid-row: 6;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-area: 6 / 2 / 8 / 3;
	text-align: center;
}

.TMA {
	-ms-grid-row: 6;
	-ms-grid-row-span: 2;
	-ms-grid-column: 3;
	-ms-grid-column-span: 1;
	grid-area: 6 / 3 / 8 / 4;
	text-align: center;
}

.SBU {
	-ms-grid-row: 9;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-area: 9 / 1 / 11 / 2;
	text-align: center;
}

.FAL {
	-ms-grid-row: 9;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-area: 9 / 2 / 11 / 3;
	text-align: center;
}

.KRO {
	-ms-grid-row: 9;
	-ms-grid-row-span: 2;
	-ms-grid-column: 3;
	-ms-grid-column-span: 1;
	grid-area: 9 / 3 / 11 / 4;
	text-align: center;
}

.JMA {
	-ms-grid-row: 12;
	-ms-grid-row-span: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-area: 12 / 1 / 15 / 2;
	text-align: center;
}



/* ABOUT US RESPONSIVE */

@media all and (max-width: 1600px) {
	.contentAboutUs {
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
		grid-template-rows: repeat(43, 2fr);
	}
}

@media all and (max-width: 1400px) {
	.contentAboutUs {
		grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
		grid-template-rows: repeat(43, 2fr);
	}
}

@media all and (max-width: 680px) {
	.contentAboutUs {
		height: 2200px;
	}

	.aboutUsIntro {
		-ms-grid-row: 2;
		-ms-grid-row-span: 6;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: 1 / 2 / 7 / 5;
	}
	

	.aboutUsTrombinoscope {
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: repeat(2, 1fr);
		-ms-grid-rows: 1fr 1fr 1fr 1fr auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: repeat(17, 1fr);
	}

	.pCornuIntro {
		flex-direction: column;
		grid-area: 1 / 1 / 7 / 4;
		justify-content: flex-start;
	}

	.trombiImg {
		max-width: 60px;
	}

	.quoteCornu img {
		max-width: 5%;
	}


	.pCornuImg img {
		max-width: 25%;
	}

	.pCornuImg p {
		margin-top: 0px;
	}

	.quoteCornu {
		max-width: 100%;
		font-size: 90%;
		flex-grow: 2;
	}

	.titleTrombinoscope {
		grid-area: 7 / 1 / 8 / 4;
	}

	.titleTrombinoscope h1 {
		font-size: 130%;
	}

	.trombi p {
		font-size: 75%;
	}

	.JCH {
		grid-area:  8 / 1 / 10 / 2;
	}
	
	.MFA {
		grid-area: 8 / 2 / 10 / 3;
	}
	
	.EMA {
		grid-area: 10 / 1 / 12 / 2;
	}
	
	.TMA {
		grid-area: 10 / 2 / 12 / 3;
	}
	
	.SBU {
		grid-area: 12 / 1 / 14 / 2;
	}
	
	.FAL {
		grid-area: 12 / 2 / 14 / 3;
	}
	
	.KRO {
		grid-area: 14 / 1 / 16 / 2;
	}
	
	.AFA {
		grid-area: 14 / 2 / 16 / 3;	
	}
	
	.JMA {
		grid-area: 16 / 1 / 18 / 3;
	}
}

/* CONTACT */

.contentContact {
	height: 1300px;
	background-color: #ebeaeb;
	font-family: Raleway, sans-serif;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
	grid-template-rows: 1.5fr 1.5fr repeat(22, 2fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.firstBackgroundContact {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 1 / 1 / 3 / 6;
	background-color: #3f3f3e;
}

.pageTitleContact {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 4;
	grid-area: 1 / 2 / 3 / 6;
	display: flex;
	align-items: center;
	color: white;
}

.pageTitleContact h1 {
	font-weight: 200;
}

.secondBackgroundContact {
	-ms-grid-row: 3;
	-ms-grid-row-span: 15;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 3 / 1 / 18 / 6;
	background-image: url("../img/contact-background.jpg");
	background-size: cover;
	background-position: right;
}

.contactFormSection {
	-ms-grid-row: 4;
	-ms-grid-row-span: 8;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 4 / 2 / 12 / 5;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.ouNousTrouver {
	max-width: 40%;
	height: 80%;
	background-color: #3f3f3e;
	padding-top: 10px;
	padding-left: 35px;
	padding-right: 20px;
	color: white;
	border-bottom: 10px solid orange;
}

.telSection {
	display: flex;
	align-items: center;
}

.telSection a {
	color : white;
}

.telSection img {
	max-width: 7%;
	margin-right: 10px;
	flex-shrink: 0;
}

.contactForm {
	margin-left: 5%;
	flex-grow: 2;
}

.contactForm .formBoxes {
	position: relative;
}

.userInfo {
	display: flex;
	justify-content: space-between;
}

.userInfo .formBoxes {
	flex-basis: 47%;
}

.contactForm .formBoxes input {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #007393;
	outline: none;
	background: transparent;
}

.contactForm .formBoxes textarea {
	width: 100%;
	height: 15em;
	padding: 10px 0;
	font-size: 16px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #007393;
	outline: none;
	background: transparent;
	resize: none;
}

.contactForm .formBoxes label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	font-size: 16px;
	color: #007393;
	pointer-events: none;
	transition: .5s;
}

.contactForm .formBoxes input:focus ~ label,
.contactForm .formBoxes input:valid ~ label,
.contactForm .formBoxes textarea:focus ~ label,
.contactForm .formBoxes textarea:valid ~ label {
  top: -20px;
  left: 0;
  color: #007393;
  font-size: 12px;
}

.formBoxesCheckbox {
	text-align: right;
	color: #3f3f3e;
}

.formBoxesCheckbox label a {
	color: #007393;
}

.contactForm button {
	margin-top: 20px;
	float: right;
	background-color: rgb(76, 144, 175);
	border: none;
	color: white;
	padding: 10px 30px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	width: 50%;
	cursor: pointer;
}

#email_verif {
	display: none;
}

.message_nok, .message_ok {
	width: 100%;
	text-align: right;
	color: rgb(165, 48, 48);
}

.contentContact .carac {
	-ms-grid-row: 16;
	-ms-grid-row-span: 4;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 15 / 2 / 19 / 5;
	background-color: white;
	display: flex;
	color: #007393;
	text-align: center;
	align-items: center;
}


.prefooterBackgroundContact {
	-ms-grid-row: 18;
	-ms-grid-row-span: 8;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 17 / 1 / 25 / 6; 
	background: url("../img/pre-footer-isupervize.jpg") no-repeat center top fixed; 
	background-size: cover;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 0.6fr 1fr;
	grid-template-rows: 0.6fr 1fr;
}

@media all and (max-width: 1600px) {
	.contentContact {
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
	}

	.prefooterBackgroundContact { 
		-ms-grid-rows: 0.8fr 1fr;
		grid-template-rows: 0.8fr 1fr;
	}

	.ouNousTrouver {
		height: 75%;
	}
}

@media all and (max-width: 1500px) {
	.prefooterBackgroundContact {
		-ms-grid-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
	}
}

@media all and (max-width: 1400px) {
	.contentContact {
		-ms-grid-columns: 0.2fr 1fr 1fr 1fr 0.2fr;
		grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
	}
}

@media all and (max-width: 1160px) {
	.contentContact {
		overflow: hidden;
	}

	.firstBackgroundContact {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
		grid-area: 1 / 1 / 2 / 6;
		background-color: #3f3f3e;
	}

	.pageTitleContact {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 4;
		grid-area: 1 / 2 / 2 / 6;
	}

	.contentContact {
		height: 1900px;
	}

	.ouNousTrouver {
		max-width: 100%;
		max-height: 35%;
	}

	.telSection img {
		max-width: 4%;
	}

	.contactFormSection {
		-ms-grid-row: 4;
		-ms-grid-row-span: 11;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: 3 / 2 / 14 / 5;
		flex-direction: column;
		justify-content: space-between;
	}

	.contactForm {
		flex-grow: 0;
		margin-left: 0px;
	}

	.contactForm .formBoxes textarea {
		height: 15em;
	}
}

@media all and (max-width: 750px) {
	.ouNousTrouver hr, .ouNousTrouver .telSection {
		display: none;
	}
}

@media all and (max-width: 500px) {
	.contactFormSection {
		-ms-grid-row: 3;
		-ms-grid-row-span: 12;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: 3 / 2 / 14 / 5;
	}
}

@media all and (max-width: 420px) {
	.ouNousTrouver {
		max-height: 40%;
	}
}

@media all and (max-width: 370px) {
	.ouNousTrouver p {
		font-size: 85%;
	}
}


/* MON COMPTE */ 

.contentConnexion {
	height: 1300px;
	background-color: #ebeaeb;
	font-family: Raleway, sans-serif;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 1.5fr 1.5fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
	grid-template-rows: 1.5fr 1.5fr repeat(22, 2fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.firstBackgroundConnexion {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 1 / 1 / 3 / 6;
	background-color: #3f3f3e;
}


.pageTitleConnexion {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 4;
	grid-area: 1 / 2 / 3 / 6;
	display: flex;
	align-items: center;
	color: white;
}

.pageTitleConnexion h1 {
	font-weight: 200;
}


.connexionSection {
	-ms-grid-row: 3;
	-ms-grid-row-span: 14;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 3 / 1 / 17 / 6;
	background-image: url("../img/login-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	font-family: Raleway, sans-serif;
}


.connexionForm {
	margin-top: 5%;
	min-width: 25%;
	margin-left: 15%;
	margin-right: 15%;
}

.connexionForm .formBoxes {
	position: relative;
}

.userInfo {
	display: flex;
	justify-content: space-between;
}

.userInfo .formBoxes {
	flex-basis: 47%;
}

.connexionForm .formBoxes input {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #007393;
	outline: none;
	background: transparent;
}

.connexionForm .formBoxes textarea {
	width: 100%;
	height: 15em;
	padding: 10px 0;
	font-size: 16px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #007393;
	outline: none;
	background: transparent;
	resize: none;
}

.connexionForm .formBoxes label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	font-size: 16px;
	color: #007393;
	pointer-events: none;
	transition: .5s;
}

.connexionForm .formBoxes input:focus ~ label,
.connexionForm .formBoxes input:valid ~ label {
  top: -20px;
  left: 0;
  color: #007393;
  font-size: 12px;
}

.connexionForm button {
	margin-top: 20px;
	background-color: rgb(76, 144, 175);
	border: none;
	color: white;
	padding: 10px 30px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	width: 100%;
	cursor: pointer;
}

.connexionForm p {
	color: #3f3f3e;
}

.connexionForm p a {
	color: #007393;
}

.contentConnexion .carac {
	-ms-grid-row: 15;
	-ms-grid-row-span: 4;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: 15 / 2 / 19 / 5;
	background-color: white;
	display: flex;
	color: #007393;
	text-align: center;
	align-items: center;
}


.prefooterBackgroundConnexion {
	-ms-grid-row: 17;
	-ms-grid-row-span: 8;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	grid-area: 17 / 1 / 25 / 6; 
	background: url("../img/pre-footer-isupervize.jpg") no-repeat center top fixed; 
	background-size: cover;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-rows: 0.6fr 1fr;
	grid-template-rows: 0.6fr 1fr;
}


@media all and (max-width: 1600px) {
	.contentConnexion {
		-ms-grid-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-template-columns: 0.5fr repeat(3, 1fr) 0.5fr;
	}

	.prefooterBackgroundConnexion { 
		-ms-grid-rows: 0.8fr 1fr;
		grid-template-rows: 0.8fr 1fr;
	}

	.ouNousTrouver {
		height: 75%;
	}
}

@media all and (max-width: 1500px) {
	.prefooterBackgroundConnexion {
		-ms-grid-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
		grid-template-columns: 0.1fr repeat(3, 1fr) 0.1fr;
	}
}

@media all and (max-width: 1400px) {
	.contentConnexion {
		-ms-grid-columns: 0.2fr 1fr 1fr 1fr 0.2fr;
		grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
	}
}

@media all and (max-width: 600px) {
	.pageTitleConnexion h1 {
		font-size: 190%;
	}
}


/* MENTIONS LEGALES */

.contentMentionsLegales {
	font-family: Raleway, sans-serif;
}

.titleMentionsLegales {
	background-color: #494949;
	display: flex;
	align-items: center;
}

.titleMentionsLegales h1 {
	color: white;
	font-weight: 200;
	margin-left: 20%;
}

.texteMentionsLegales {
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 2%;
	color: #3f3f3e;
}

.texteMentionsLegales h2 {
	text-align: center;
	color: #ebbd61;
}

.texteMentionsLegales img {
	max-width: 18%;
	margin-bottom: -5px;
}

.prefooterBackgroundMentionsLegales {
	background: url("../img/pre-footer-isupervize.jpg") no-repeat center top fixed; 
	background-size: cover;
	height: 275px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media all and (max-width: 900px) {
	.texteMentionsLegales {
		margin-left: 5%;
		margin-right: 5%;
	}

	.texteMentionsLegales h2 {
		text-align: left;
	}

	.titleMentionsLegales h1 {
		margin-left: 5%;
	}
}


/* FOOTER */

footer {
	background-color: #3f3f3e;
	height: 125px;
}

.footerContent {
	position: relative;
	top: 10%;
	color: white;
	font-family: Raleway, sans-serif;
	margin-left: 15%;
	margin-right: 15%;
	display: flex;
	justify-content: space-around;
}

.footerContent p {
	align-self: center;
}

.footerContent p a {
	color: inherit;
}

.footerContent img {
	width: 15%;
	align-self: flex-start;
}

.introBackground {
	background-image: url("../img/groupe-venathec-background.jpg");
	color:white;
	height: 410px;
	padding-top: 100px;
}

@media all and (max-width: 1500px) {
	.footerContent img {
		display: none;
	}

	.footerContent p {
		text-align: center;
	}
}