/*Polices personnalisées*/
@font-face
{
	font-family:'Gabriola';
	src: url('../fonts/Gabriola.eot') format('eot'),
		 url('../fonts/Gabriola.woff2') format('woff2'),
		 url('../fonts/Gabriola.woff') format('woff'),
		 url('../fonts/Gabriola.ttf') format('ttf');
}

@font-face
{
	font-family:'LearningCurve';
	src: url('../fonts/LearningCurve.eot') format('eot'),
 		 url('../fonts/LearningCurve.woff2') format('woff2'),
		 url('../fonts/LearningCurve.woff') format('woff'),
		 url('../fonts/LearningCurve.ttf') format('ttf'),
		 url('../fonts/LearningCurve.svg') format('svg');
}


/*Propriétés générales*/
*
{
	box-sizing: border-box;
}

html
{
	display: flex;
	flex-direction:column;
}

body
{ 
	margin:0;
	font-family: verdana, arial;
	background-color: white;
	position:relative;
	overflow-x: hidden;
	min-height:100vh;
	display: flex;
	flex-direction: column;
}

main
{
	flex:1 0 auto;
}

.hidden
{
	display:none;
}

a
{
	text-decoration:none;
	color:black;
}

a:hover,
a:focus
{
	text-decoration:underline;
}

.retourHtPage
{
	position: fixed;
	right:30px;
	bottom:20px;
	color: #007A86;
	background-color: white;
	width:41px;
	height:41px;
	border-radius: 50%;
	padding:3px;
	z-index:1;
	font-size:0;
	text-decoration:none;
}

.fa-arrow-alt-circle-up
{
	font-size:35px;
}

.button
{
	background:linear-gradient(120deg, #FFF, #007A86 15%, #007A86 90%, #FFF);
	padding:10px;
	border:none;
	color:white;
	font-weight:400;
	font-size:1em;
	text-align:center;
	cursor:pointer;
	margin-left:25px;
	display: inline-block;
	margin-bottom: 10px;
}


/*Page d'accueil */
.mainAccueil
{
	display:flex;
	align-items: center;
	min-height:100vh;
	justify-content: center;
}

.menuAccueil
{
	margin-left:15px;
	margin-top:-60px;
}

.titreMenu
{
	font-family: Gabriola;
	font-size:3.5em;
	margin:0;
}

.lienAccueil:hover,
.lienAccueil:focus
{
	text-decoration: none;
	text-shadow: 2px 2px 2px #5557;
}

.titreDestLR
{
	margin-top:40px;
}	

.titrePortfolio
{
	margin-top:35px;
}

.titreContact
{
	margin-top:33px;
}

.logo,
.logoAccueil
{
	position:relative;
}

.h1Accueil
{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	z-index:1;
}

.spanTitle
{
	font:26px Gabriola;
	color:#007A86;
	height:130px;
	position:absolute;
	width:180px;
	left:180px;
	bottom:57px;
	padding-top:160px;
	transform-origin: top center;
}

.char1 {transform: rotate(19deg);}
.char2 {transform: rotate(15deg);}
.char3 {transform: rotate(11deg);}
.char4 {transform: rotate(8deg);}
.char5 {transform: rotate(5deg);}
.char6 {transform: rotate(1deg);}
.char7 {transform: rotate(-3deg);}
.char8 {transform: rotate(-6deg);}


/* En tête */
.bandeau
{
	position: relative;
	padding-top:21.95%;
	background-image: url(../Photos/photoBandeau.jpg);
	background-size: cover;
}

.bandeau::after
{
	content:"";
	position: absolute;
	width:100%;
	height:0;
	bottom:-2px;
	padding-top:10%;
	background:linear-gradient(176deg, transparent, transparent 49.7%, #FFF 50.3%, #FFF);
}

.titreBandeau
{
	font-family: Gabriola;
	font-size:6em;
	color:white;
	position:absolute;
	top:-34px;
	width:100%;
	font-weight:300;
	text-align:center;
}

.pictoTitre
{
	color:transparent;
	background-image: url(../../public/Illustrations/picto.svg);
	background-repeat: no-repeat;
	padding: 15px 0px 0px 60px;
	margin: 0px 3px 0px 6px;
}


/*Menu*/
.menu
{
	position:relative;
	z-index:2;
	width:300px;
	margin-left:30px;
	background: #007A86;
	border-radius:30px;
	box-shadow: 6px 6px 0px #C2CCC3;
}

.lienMenu
{
	display:flex;
	justify-content:center;
	font-family:Gabriola;
	font-size:2em;
	color:white;
	padding:10px 20px 10px 20px;
}

.crossMenu
{
	display:none;
}

#crossMenu,
.crossPopUp
{
	position:absolute;
	top:10px;
	right:10px;
	border:none;
	background:none;
	color:white;
	font-size:1.3em;
	cursor: pointer;
}


/*Pages*/
.roseVent
{
	background-image: url(../../public/Illustrations/roseVents.svg);
	background-repeat: no-repeat;
	padding:45px 13px 74px 90px;
	margin: -45px 0px 0px -14px;
}

.lienRoseVent
{
	color:transparent;
}

.titresMenu
{
	margin-top:30px;
}

.menuMobile
{
	display:none;
	position:absolute;
	font-family: Gabriola;
	font-size:1.3em;
	color:white;
	right:30px;
	top:165px;
	width:50px;
	height:50px;
	cursor:pointer;
	padding:0;
	padding-top:24px;
	z-index:3;
}

.menuMobile::before
{		
	content:"";
	display:block;
	position:absolute;
	width:30px;
	height:0;
	top:8px;
	margin-right:10px;
	margin-left:10px;
	border-bottom: 1px solid white;
}

.navBtContent::before
{	
	content:"";
	display:block;
	position:absolute;
	width:30px;
	height:0;
	top:17px;
	margin-right:10px;
	margin-left:10px;
	border-bottom: 1px solid white;
}

.navBtContent
{
	position:static;
}

.navBtContent::after
{	
	content:"";
	display:block;
	position:absolute;
	width:30px;
	height:0;
	top:26px;
	margin-right:10px;
	margin-left:10px;
	border-bottom: 1px solid white;
}

.mainPage
{
	display:flex;
}

.titrePage
{
	position:absolute;
	font-family:Gabriola;
	font-size:2em;
	color:#555;
	text-align:right;
	right: 50px;
	top:235px;
	padding-right:10px;
}

.titrePage::before
{
	content:"o";
	position:absolute;
	font-family:arial;
	font-size:0.5em;
	color:#007A86;
	right:132px;
	top:34px;
}

.titrePage::after
{
	content:"";
	position:absolute;
	border-bottom:2px solid #007A86;
	width:123px;
	right:10px;
	top:43px;
}

.fleche
{
	color:transparent;
	background-image: url(../Illustrations/fleche.svg);
	background-repeat: no-repeat;
	padding:0px 0px 10px 105px;
}


/*Pages*/
.sectionsPage
{
	max-width:600px;
	margin:auto;
	padding:20px;
	width:100%;
}

.contentPage
{
	color:#555;
	margin-top:50px;
}

.titreSection::before
{
	content:"O";
	position:absolute;
	font-family:arial;
	font-size:0.5em;
	color:#007A86;
	left:0px;
	bottom:-5px;
}

.titreSection
{
	font-family:Gabriola;
	font-size:1.8em;
	position:relative;
	margin:0;
	padding-left: 10px;
	line-height:1.0;
}

.titreSection::after
{
	content:"";
	position:absolute;
	border-bottom:2px solid #007A86;
	width:160px;
	left:9px;
	bottom:0px;
}

.ssTitreSection
{
	font-family: Gabriola;
	font-size:1.3em;
	margin:0;
	padding-left:178px;
	margin-top:0px;
	line-height:1.0;
}

.listeSection
{
	position:relative;
	padding-left:20px;
}

.listeSection::before
{
	content: "";
  	display: block;
  	position: absolute;
  	left: 0px;
  	top: 5px;
  	width: 0;
  	height: 0;
  	border-top: 5px solid transparent;
  	border-bottom: 5px solid transparent;
  	border-left: 10px solid #007A86;
}

.gpSectionInfo
{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-around;
}

.gpPictoInfo
{
	border:2px solid #007A86;
	border-radius:20px;
	box-shadow: 3px 3px 0px #A5A5A5;
	width:220px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-top:30px;
	padding:10px;
	position:relative;
}

.gpPictoInfoDAO
{
	width:180px;
}

.gpPictoInfoSIG
{
	width:185px;
	height:100px;
}

.gpPictoInfoCarto
{
	width: 240px;
	margin-left:75px;
}

.gpPictoInfoWeb::before,
.gpPictoInfoBDD::before,
.gpPictoInfoDAO::before,
.gpPictoInfoSIG::before,
.gpPictoInfoCarto::before
{
	position:absolute;
	color:#007A86;
	font-weight:600;
	background-color:white;
	padding:0px 8px 0px 8px;
	top:-10px;
}

.gpPictoInfoWeb::before
{
	content:"WEB";
}

.gpPictoInfoBDD::before
{
	content:"Base de données";
}

.gpPictoInfoDAO::before
{
	content:"DAO";
}

.gpPictoInfoSIG::before
{
	content:"SIG";
}

.gpPictoInfoCarto::before
{
	content:"Cartographie dynamique";
	top:-20px;
	text-align:center;
}

.imgPictoInfo
{
	width:40px;
	margin:10px;
}

.imgPictoWP
{
	width:80px;
}

.imgPictoPHP
{
	width:60px;
}


/*Portfolio*/
.sectionPortfolio
{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
	max-width:880px;
	margin:auto;
	margin-top:30px;
	width:100%;
	flex:1 1 0;
}

.imgPortfolio
{
	display: block;
	border-radius:50%;
	width:150px;
	height:150px;
	border:1px solid #555;
	box-shadow:4px 4px 0px #C2CCC3;
}

.lienPortfolioRea
{
	display: flex;
	background-color: white;
	box-shadow: 3px 3px 0px #A5A5A5;
	width:402px;
	height:200px;
	padding:9px;
	align-items:center;
	border: 1px solid transparent;
}

.lienPortfolioRea:hover,
.lienPortfolioRea:focus
{
	text-decoration: none;
	box-shadow: 5px 5px 0px #A5A5A5;
	border: 1px solid #A5A5A5;
}

.lienPortfolioRea:hover .titreLienPortfolio,
.lienPortfolioRea:focus .titreLienPortfolio
{
	text-decoration: underline;
}

.detailsPortfolio
{
	margin:auto;
	text-align:center;
	flex:1 1 0%;
}

.cadrePortfolio
{
	margin-top:20px;
	margin-bottom:20px;
}

.titreLienPortfolio
{
	font-family: Gabriola;
	font-size:1.7em;
	line-height:25px;
	margin:auto;
	color:#007A86;
	text-align:center;
}

.descriptionPortfolio
{
	padding:10px;
	margin:0;
	text-align:center;
}

/* PortFolio Cartographie */
.popUp
{
	position: absolute;
	background: #007A86;
	border-radius: 30px;
	box-shadow: 6px 6px 0px #C2CCC3;
	width:60%;
	z-index:1;
}

.summaryCarto
{
	display: flex;
	background-color: white;
	border-radius:5px;
	margin:35px;
	padding:30px;
}

.contentSummary
{
	display: flex;
	flex-direction: column;
	width:70%;
}

.txtSummary,
.lienSummary
{
	width:100%;
	align-content: center;
	margin:auto;
	margin-left:10%;
	padding-top:10px;
}

.lienSummary
{
	color: #007A86;
}

/* Page contact */
.contentContact
{
	max-width:700px;
	margin:auto;
	margin-top:50px;
	padding:0px 30px 0px 30px;
	flex:1 1 0;
}

.mailContact
{
	color:#007A86;
	font-weight:600;
}

.signature
{
	font-family:LearningCurve;
	font-size:2em;
}


/* Formulaire de contact */
.formContact
{
	padding:50px;
	padding-bottom:160px;
	margin-top:50px;
	background: linear-gradient(140deg, #FFF, #007A86 15%, #007A86 80%, #FFF,#007A86);
}

.labelContact
{
	height:35px;
    line-height:35px;
    color:white;
	font-size:1.2em;
	margin-right:15px;
}

.inputContact
{
	flex:1 1 0;
	height:35px;
    line-height:35px;
    padding:0 5px;
	background:none;
	border:0;
	border-bottom:1px solid white;
	color:white;
	font-size:1.2em;
}

.txtContact
{
	width:100%;
	height:280px;
	padding:5px;
	border:0;
	border-left:1px solid white;
	border-bottom:1px solid white;
	color:white;
	font-family:verdana,Arial;
	font-size:1.2em;
	resize:none;
	background:none;
}

.gpLabelContact
{
	padding-bottom:40px;
}

.inputContact:focus,
.txtContact:focus,
.inputContact:hover,
.txtContact:hover
{
	border:2px solid white;
	color:white;
}

.contactInfoMsg:empty
{
    display:none;
}

.contactInfoMsg
{
    margin-top:15px;
    padding:15px;
    border-radius:3px;
    border:1px solid #667a81;
    color:#667a81;
    background:#FFF;
    font-size:.9em;
}

.contactInfoMsg.contactSuccessMsg li::before
{
    top:4px;
    border-left-color:#488f06;
}

.contactInfoMsg.contactSuccessMsg
{
    border-color:#488f06;
    color:#488f06;
    background:#f1fbd1;
}

.contactInfoMsg.contactErrorMsg
{
    border-color:#b50303;
    color:#b50303;
    background:#fee5e2;
}

.contactInfoMsg.contactErrorMsg li::before
{
    border-left-color:#b50303;
}

.contactInfoMsg p,
.contactInfoMsg ul 
{
    margin-top:0;
}

.contactInfoMsg p:not(:last-child),
.contactInfoMsg ul:not(:last-child) 
{
    margin-bottom:10px;
}

.contactInfoMsg p:last-child,
.contactInfoMsg ul:last-child,
.contactInfoMsg ul li:last-child 
{
    margin-bottom:0;
}

.formContact .formLoading 
{
    flex: 1 1 0;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 1.5em;
    color: #fff;
}

.btSend
{
	background:linear-gradient(120deg, #007A86, #FFF 15%, #FFF 90%, #007A86);
	color:#007A86;
	margin-left:0px;
}


/*Page erreur*/
.mainError
{
	width:100%;
	display:flex;
}

.titreError
{
	font-family:Gabriola;
	font-size:2.5em;
	color:white;
	font-weight:400;
	text-align:right;
	padding-right:60px;
	background:linear-gradient(120deg, #FFF,#007A86 40%, #007A86 95%, #FFF);
}

.contenuError
{
	width:100%;
	margin:auto;
}

.gpButton
{
	margin-top:7%;
	text-align:center;
}


/*Propriétés du pied de page*/
footer
{
	position:relative;
}

.contacts
{
	position:relative;
	color:white;
	line-height:10px;
	top:20px;
	background:#007A86;
	width:100%;
	max-width: 1275px;
	padding:36px 0px 10px 20px;
}

.contacts::after
{
	content:"";
	position:absolute;
	width:100%;
	top:-2px;
	right:-1px;
	height:1px;
	padding-top:11%;
	background:linear-gradient(6deg, transparent, transparent 48.9%, #FFF, #FFF 51.1%);
	pointer-events:none;
}

.mentionsLegales a
{
	color:white;
}

.mailFooter
{
	color:white;
}


/*Mentions légales*/
.mainMLegales
{
	max-width:700px;
	margin:auto;
	color:#555;
}

.sectionML
{
	margin:50px;
}

.titreML
{
	margin-top:30px;
}

.accueilML
{
	text-align: right;
	margin-right:50px;
	margin-top:25px;
}


/*Responsive*/
@media(min-width: 1800px)
{
	.titrePage
	{
		top:350px;
	}

	.menu
	{
		margin-left:10%;
	}

	.titreBandeau
	{
		top:0;
		font-size:8em;
	}

	.pictoTitre
	{
		background-size:125px;
	}
}

@media(max-width:1300px)
{
	.titrePage
	{
		top:180px;
	}
}

@media(max-width:1130px)
{
	.titrePage
	{
		top:160px;
	}

	.titreBandeau
	{
		top:-50px;
	}
}

@media(max-width:1025px)
{
	.titreMenu
	{
		font-size:2.8em;
		line-height:95px;
	}
}

@media(max-width:930px),(max-height:550px)
{
	.logo
	{
		width:450px;
	}

	.titreMenu
	{
		font-size:2.8em;
		line-height:73px;
	}

	.spanTitle
	{
		width:160px;
		left:163px;
		bottom:47px;
	}
}

@media(max-width:930px)
{
	.titreBandeau
	{
		font-size:5em;
		top:-40px;
	}

	.pictoTitre
	{
		background-size:90px;
		margin-right:-5px;
	}

	.menuMobile
	{
		display: block;
	}

	.ferme
	{
		transform:translateX(-350px);
	}

	.ouvre
	{
		transform:translateX(0px);
	}

	.menuPage
	{
		transition:all 0.5s ease-out;
		position: absolute;
	}

	.crossMenu
	{
		display:block;
	}

	.titrePage
	{
		top:140px;
		right:110px;
	}
}

@media(max-width:825px),(max-height:430px)
{
	.logo
	{
		width:400px;
	}

	.titreMenu
	{
		font-size: 2em;
		line-height: 57px;
	}

	.spanTitle
	{
		width:170px;
		left:145px;
	}
}

@media(max-width:825px)
{
	.titreBandeau
	{
		top:-50px;
	}

	.titrePage
	{
		top:120px;
	}

	.menuMobile
	{
		top:150px;
	}

	.sectionPortfolio
	{
		margin-top: 50px;
	}

	.sectionML
	{
		margin:100px;
		margin-bottom: 50px;
	}

	.cadrePortfolio
	{
		margin:20px;
	}

	.imgPopUp
	{
		display: none;
	}

	.contentSummary
	{
		width:100%;
	}

	.txtSummary
	{
		margin-left:0;
	}

	.summaryCarto
	{
		margin:10px;
		border-radius:20px;
	}

	.crossPopUp
	{
		color:#007A86;
		top:15px;
		right:15px;
	}

	.popUp
	{
		width:90%;
	}
}

@media(max-width:680px),(max-height:380px)
{
	.logo
	{
		width:300px;
	}

	.titreMenu
	{
		line-height: 34px;
	}

	.spanTitle
	{
		width:120px;
		left:109px;
		bottom:26px;
		font-size:0.5em;
		padding-top:123px;
	}

	.menuAccueil
	{
		margin-top:-28px;
	}
}

@media(max-width:680px)
{
	.titreBandeau
	{
		font-size:4em;
		top:-30px;
	}

	.pictoTitre
	{
		background-size:70px;
		margin-right: -18px;
	}

	.menuMobile
	{
		top:130px;
	}

	.titrePage
	{
		top:103px;
	}

	p
	{
		font-size:0.8em;
	}
}

@media(max-width:575px),(max-height:300px)
{
	.logo
	{
		width:250px;
	}

	.titreMenu
	{
		line-height: 21px;
	}

	.spanTitle
	{
		width:95px;
		left:92px;
		bottom:-6px;
		font-size:0.4em;
		padding-top: 97px;
	}

	.menuAccueil
	{
		margin-top:-25px;
	}
}

@media(max-width:575px)
{
	.titreBandeau
	{
		top:-47px;
	}

	.titrePage
	{
		top:87px;
		font-size:1.7em;
	}

	.titreSection
	{
		font-size:1.5em;
	}

	.ssTitreSection
	{
		padding-left:145px;
		margin-top:6px;
	}

	.menuMobile
	{
		top:110px;
	}

	.fleche
	{
		background-size:80px;
		padding-left:75px;
	}

	.gpPictoInfoCarto,
	.gpPictoInfoSIG
	{
		width:100%;
		margin-left: 0px;
	}
}

@media(max-width:450px),(max-height: 270px)
{
	.logo
	{
		width:200px;
	}

	.titreMenu
	{
		font-size:1.5em;
		line-height: 10px;
	}

	.spanTitle
	{
		width:98px;
		left:77px;
		bottom:-8px;
	}
}

@media(max-width:450px)
{
	.titreBandeau
	{
		font-size:3em;
		top:-33px;
	}

	.titrePage
	{
		top:67px;
		font-size:1.6em;
		right:90px;
	}

	.fleche
	{
		background-size:65px;
		padding-left: 60px;
	}

	.ssTitreSection
	{
		padding-left:8px;
	}

	.pictoTitre
	{
		background-size:50px;
		margin-right: -30px;
		padding-top:7px;
	}

	.menuMobile
	{
		top:88px;
	}

	.gpSectionInfo
	{
		flex-direction:column;
		align-items: center;
	}

	.lienPortfolioRea
	{
		width:325px;
		height:175px;
	}

	.titreLienPortfolio
	{
		font-size:1.5em;
	}

	.imgPortfolio
	{
		width:100px;
		height:100px;
	}
	
	.sectionML
	{
		margin-left:50px;
		margin-right:50px;
	}
}
@media(max-width:390px),(max-height: 220px)
{
	.logo
	{
		width:150px;
	}

	.spanTitle
	{
		width:74px;
		left:59px;
		bottom:-26px;
		padding-top: 81px;
	}

	.titreMenu
	{
		font-size:1em;
		line-height: 0px;
	}

	.menuAccueil
	{
		margin-top:-17px;
	}
}

@media(max-width:390px)
{
	.titreBandeau
	{
		top:-35px;
	}

	.titrePage
	{
		right:75px;
	}

	.fleche
	{
		display:none;
	}

	.ssTitreSection
	{
		display: none;
	}

	.roseVent
	{
		background-size:80px;
		padding-top:34px;
	}

	.menu
	{
		width:280px;
		margin-top:12px;
		z-index:4;
		margin-left: 23px;
	}

	.lienMenu
	{
		font-size: 1.8em;
	}

	.sectionPortfolio
	{
		margin-top:75px;
	}

	.imgPortfolio
	{
		margin-left:-25px;
		display:none;
	}

	.descriptionPortfolio
	{
		padding:0;
		padding-left:10px;
	}

	.lienPortfolioRea
	{
		width:250px;
		height:150px;
	}

	.contentContact
	{
		padding:0px 15px 0px 15px;
	}

	.formContact
	{
		padding:20px;
	}
}

@media(max-width:320px)
{
	.titreBandeau
	{
		top:-42px;
	}

	.titrePage
	{
		top:55px;
		right:57px;
	}

	.menuMobile
	{
		top:73px;
		right:15px;
	}

	.menu
	{
		width:245px;
	}

	.lienMenu
	{
		font-size:1.6em;
	}

	.detailsPortfolio
	{
		padding:0;
	}

	.cadrePortfolio
	{
		margin:15px;
	}

	.sectionML
	{
		margin-left:25px;
		margin-right:25px;
	}
}