@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Light.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}

body,html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto'; 
	font-size: 16px;
	color: #00222e;
	/*line-height: 1.1em;*/
	background-color: #ffffff;
}


/* TYPO ------------------------------------ */
p{ margin: 0; padding: 0; }

.titrePage{
	font-size: 3.5em;
	line-height: 0.8em;
	font-weight: normal;
	color: #029cd2;
	position: relative;
	float: left;
	clear: both;
	margin: 15px 10px 10px 0;
}
.sousTitrePage{
	font-size: 0.5em;
	line-height: normal;
	color: #ffffff;
}

.titrePara{
	font-size: 2em;
	line-height: 1em;
	font-weight: normal;
	color: #029cd2;
	border-bottom: 1px solid #d49d27;
	display: table;
	padding: 5px 0;
	margin-left: 35px;
	position: relative;
	/*float: left;*/
}
.centrage{ position: relative; float: left; left: 50%; transform: translateX(-50%); }
.titrePara::before{
	content:'';
	width: 25px;
	height: 45px;
	background-image: url("img/onde-jaune.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	float: left;
	left: -30px;
}
.titrePara.pair{ color:#ffffff; border-bottom: 1px solid #029cd2; }
.titrePara.pair::before{ background-image: url("img/onde-bleuC.svg"); }

.grand{ font-size: 1.2em; }
.petit{ font-size: 0.9em; }

.bleuC{ color: #029cd2; }
.bleuF{ color: #00222e; }
.jaune{ color: #d49d27; }

.lienStd{ text-decoration: none; color: inherit; }

/* ------------------------------------------*/

/* BOUTONS -------------------------------- */
.boutonTransparent{
	width: 100%;
	height: 100%;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	z-index: 5;
}

.bSavoir{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:10px;
	position: relative;
	float: left;
	cursor: pointer;
	overflow: hidden;
}
.bSavoir.centrer{
	left: 50%;
	transform: translateX(-50%);
	margin: 20px 0;
}
.traitSavoir {
  width:calc(100% - 40px);
  position: absolute;
  bottom: 0;
  right: 0;
  height: 2px;
  background: #d49d27;
}
.traitSavoir::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: -6px;
  width: 15px;
  height: 15px;
  border-bottom: 2px solid #d49d27;
  transform: rotate(45deg);
}

.iconeBSavoir{
	width: 30px;
	height: 30px;
	background-image: url("img/ondeC-jaune.svg");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	float: left;
}
.nomBSavoir{
	color: #029cd2;
	font-size: 1.1em;
	position: relative;
	float: left;
	transition:all 0.4s;
}
.flecheSuite{
	width: 15px;
	height: 20px;
	background-color: #d49d27;
	clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
	position: relative;
	float: left;
	transition:all 0.4s;
}
.bSavoir:hover .nomBSavoir{ margin-left: 5px; }
.bSavoir:hover .flecheSuite{ margin-left: 5px; }

.iconeBSavoir.pair{
	background-image: url("img/ondeC-bleuC.svg");
}
.traitSavoir.pair{
  background: #029cd2;
}
.traitSavoir.pair::before {
  border-bottom: 2px solid #029cd2;
}
.nomBSavoir.pair{
	color: #ffffff;
}
.nomBSavoir.bleuF{
	color: #00222e;
}
.flecheSuite.bleuF{ background-color: #00222e; }
.flecheSuite.blanc{ background-color: #ffffff; }

.iconeBContact{
	width: 70px;
	height: 70px;
	background-image: url("img/ondeC-bleuC.svg");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	float: left;
}
.nomBContact{
	color: #00222e;
	font-size: 2em;
	position: relative;
	float: left;
	transition:all 0.4s;
}
.flecheCtSuite{
	width: 20px;
	height: 27px;
	background-color: #d49d27;
	clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
	position: relative;
	float: left;
	transition:all 0.4s;
}
.flecheCtSuite.blanc{ background-color: #ffffff; }
.traitBContact {
  width:calc(100% - 90px);
  position: absolute;
  bottom: 0;
  right: 0;
  height: 3px;
  background: #029cd2;
}
.traitBContact::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: -14px;
  width: 40px;
  height: 40px;
  border-bottom: 3px solid #029cd2;
  transform: rotate(45deg);
}
.bSavoir:hover .nomBContact{ margin-left: 10px; }
.bSavoir:hover .flecheCtSuite{ margin-left: 10px; }

.nlien-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------- */

#Top{
	width: 100%;
	height: 700px;
	position: relative;
	float: left;
}
#Top.interne{ height: 436px; }
.bandeauTop{
	width: calc(100% - 20px);
	height: 120px;
	background-color: rgba(255,255,255,0.8);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	float: left;
	padding: 0 10px;
	z-index: 2;
}
.logoTop{
	width: 300px;
	position: relative;
	float: left;
}
.logoTop img{ max-width: 100%; height: auto; display: flex; }
.blocTopCoord{
	width: 290px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
	gap:10px;
	position: relative;
	float: left;
}
.caseTopTel{
	width: 200px;
	height: 40px;
	background-color: #029cd2;
	color: #00222e;
	font-size: 1.4em;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
	position: relative;
	float: left;
}
.caseTopContact{
	width: 200px;
	height: 40px;
	background-color: #00222e;
	color: #ffffff;
	font-size: 1.1em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
	position: relative;
	float: left;
	transition:all 0.4s;
}
.caseTopContact:hover{ background-color: #d49d27; color:#00222e;  }

.barreMenuMob{ display: none; }
.barreMenuP{
	width: 100%;
	height: 45px;
	border-bottom: 1px solid #ffffff;
	background-color: #00222e;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	z-index: 3;
}
.boutonMenuP{
	height: 100%;
	padding: 0 20px;
	color: #ffffff;	
	text-align: center;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
}
.boutonMenuP.actif{ color: #d49d27; }
.boutonMenuP p{ position:relative; float: left; z-index: 2; }
.barreFdmenu{
	width: 100%;
	height: 0;
	background-color: #415e67;
	position: absolute;
	float: left;
	transition: all 0.2s;
	z-index: 1;
}

.flecheSsMenu{
	width: 10px;
	height: 10px;
	background-color: #ffffff;
	clip-path: polygon(100% 15%, 100% 65%, 50% 100%, 0 65%, 0 15%, 50% 50%);
	position: relative;
	float: left;
}
.ssMenu{
	width: auto;
	min-width: 100%;
	max-height: 0;
	background-color: #00222e;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	gap:5px;
	position: absolute;
	float: left;
	top:100%;
	overflow: hidden;
	transition: all 0.6s;
}
.ssMenu.ouvert{ max-height: 400px; }
.boutSsmenu{
	width: 100%;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 0;
	position: relative;
	float: left;
	border-bottom: 1px solid #ffffff;
}
.boutSsmenu.actif{ color:#d49d27; }
.boutSsmenu p{
	width: 100%;
	white-space: nowrap;
	text-align: center;
	position:relative;
	float: left;
	z-index: 2;
	transition: all 0.2s;
}
.barreFdSmenu{
	width: 100%;
	height: 0;
	background-color: #415e67;
	position: absolute;
	float: left;
	transition: all 0.2s;
	z-index: 1;
}

.boutDepli:hover .ssMenu{
	max-height: 400px;
}
.boutonMenuP:hover .barreFdmenu{ height: 100%; }
.boutSsmenu:hover .barreFdSmenu{ height: 100%; }


.barreTitrePage{
	width: 100%;
	height: 165px;
	background-color: #00222e;
	background-image: url("img/barre-onde.svg");
	background-size: auto 75%;
	background-repeat: repeat-x;
	background-position: left center;
	position: absolute;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.barreTitrePage.interne{ 
	height: 180px;
	padding-top: 90px;
	background-size: auto 45%;
	background-position: left top 80%;
}
.zoneTitrePage{
	width: 100%;
	max-width: 1300px;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: right;
	position: relative;
	float: left;
}
.traitTitrePage{
	width: 100%;
	height: 1px;
	background-color: #ffffff;
	position: absolute;
	float: left;
	top: 57%;
}
.decoPointeTitre{
	width: 165px;
	height: 200px;
	background-color: #d49d27;
	clip-path: polygon(25% 0, 100% 65%, 65% 100%, 0 100%, 0 0);
	position: absolute;
	float: left;
	bottom: 0;
	left: 0;
}
.decoPointeTitre.interne{
	width: 220px;
	height: 270px;
	clip-path: polygon(25% 0, 100% 72%, 65% 100%, 0 100%, 0 0);
}
.bandGaucheTitre{
	width: calc((100% - 1300px)/2);
	height: 200px;
	background-color: #d49d27;
	position: absolute;
	float: left;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.bandGaucheTitre.interne{ height: 270px; }
.panoAccueil{
	width: 100%;
	height: calc(100% - 165px);
	background-image: url("img/entete-acc.webp");
	background-size: cover;
	background-position: center center;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	z-index: 1;
}

#Bas{
	width: 100%;
	position: relative;
	float: left;
	margin-top: 60px;
	z-index: 1;
}
.decoBasSup{
	width: 100%;
	height: 55px;
	position: relative;
	float: left;
}
.decoPointeBas{
	width: 100px;
	height: 100%;
	clip-path: polygon(100% 0, 100% 100%, 25% 100%, 0 65%, 30% 0);
	background-color: #d49d27;
	position: relative;
	float: right;
	z-index: 2;
}
.traitBasSup{
	width: 100%;
	height: 1px;
	background-color: #d49d27;
	position: absolute;
	float: left;
	top: 65%;
	z-index: 1;
}
.barreInfoBas{
	width: 100%;
	background-color: #00222e;
	color: #ffffff;
	display: flex;
	justify-content: center;
	position: relative;
	float: left;
	padding: 10px 0;
}
.zoneCoordBas{
	width: 100%;
	max-width: 1300px;
	position: relative;
	float: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.colLogoBas{
	width: 300px;
	position: relative;
	float: left;
	margin-left: 5px;
}
.cadreLogoBas{
	width: 250px;
	background-color: #ffffff;
	padding: 10px;
	position: relative;
	float: left;
	margin-bottom: 5px;
}
.cadreLogoBas img{ max-width: 100%; height: auto; display: block; }
.colCoord{
	width: 350px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:20px;
	position: relative;
	float: left;
}
.telBas{
	font-size: 1.8em;
	font-weight: bold;
	color: #ffffff;
	white-space: nowrap;
	height: 40px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
}
.telBas img{ max-height: 100%; width:auto; display: block; }
.emailBas{
	font-size: 1.2em;
	color: #ffffff;
	white-space: nowrap;
	height: 40px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
}
.emailBas img{ max-height: 20px; width:auto; display: block; }
.gpsBas{
	font-size: 0.9em;
	color: #ffffff;
	white-space: nowrap;
	height: 30px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
}
.gpsBas img{ max-height: 100%; width:auto; display: block; }

.colDevisBas{
	width: 300px;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	position: relative;
	float: left;
}
.devisBas{
	font-size: 1.8em;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.visuDevisBas{
	width: 170px;
	position: relative;
	float: left;
}
.visuDevisBas img{ max-width: 100%; height: auto; display: block; }

.copyr{
	width: 100%;
	height: 35px;
	font-size: 0.9em;
	color: #00222e;
	text-align: center;
	border-bottom: 1px solid #00222e;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	float: left;
	margin-bottom: 10px;
}

/* BASE ------------------------------ */

.paraSimple{
	width: calc(100% - 20px);
	max-width: 1280px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: 60px 0;
	overflow: hidden;
}
.paraSimple.coller{ margin: 0 0 60px 0; }
.paraFull{
	width: 100%;
	position: relative;
	float: left;
	margin: 60px 0;
	overflow: hidden;
}
.paraFull.fdBleu{
	background-color: #00222e;
}
.paraFull.fdJaune{
	background-color: #d49d27;
}
.decoAccueil{
	width: 100%;
	height: 100%;
	position: absolute;
	float: left;
	left: 50%;
	z-index: 1;
	background-image: url("img/deco-accueil.webp");
	background-size: contain;
	background-repeat: no-repeat;
}
.zonePara{
	width: calc(100% - 20px);
	max-width: 1280px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: 10px 0;
	z-index: 2;
}
.zonePara.blanc{ color: #ffffff; }

.ligneFlex{
	width: 100%;
	display: flex;
	justify-content:space-between;
	align-items: center;
	position: relative;
	float: left;
	margin: 5px 0;
	z-index: 2;
}
.ligneFlex.bas{	
	align-items: flex-end;
}
.ligneFlex.haut{	
	align-items: flex-start;
}
.ligneFlex.around{	
	justify-content:space-around;
}
.ligneFlexH{	
	width: 100%;
	display: flex;
	justify-content:flex-start;
	align-items: center;
	flex-direction: column;
	gap:10px;
	position: relative;
	float: left;
	z-index: 2;
}
.margeH{ margin-top: 30px; }

.col100{
	width: calc(100% - 30px);
	padding: 0 15px;
	position: relative;
	float: left;
}
.col100.ssmarge{ width: 100%; padding: 0; }
.col50{
	width: calc(50% - 40px);
	padding: 0 20px;
	position: relative;
	float: left;
}
.col50.ssmarge{ width: 50%; padding: 0; }

/* IMAGE ---------------------------- */
.imMW{
	max-width: 100%;
	height: auto;
	display: block;
}
.imMH{
	max-height: 100%;
	width: auto;
	display: block;
}

.decoBasGauche{
	width: 250px;
	height: 180px;
	background-image: url("img/ondeC-bleu.svg");
	background-size: 100% auto;
	position: absolute;
	float: left;
	bottom: 0;
	left: 50px;
	z-index: 1;
}
.decoBasDroite{
	width: 250px;
	height: 180px;
	background-image: url("img/ondeC-jaune.svg");
	background-size: 100% auto;
	background-position: left top;
	position: absolute;
	float: left;
	bottom:0;
	right: 50px;
	opacity: 0.5;
	z-index: 1;
}

.photoHaute{
	width:270px;
	aspect-ratio:3/4;
	border: 8px solid #ffffff;
	box-shadow: 0 0 5px #000000;
	position: relative;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
}
.photoHaute img{ max-height: 100%; width: auto; display: block; }
.photoLarge{
	width:95%;
	max-width:500px;
	aspect-ratio:3/2;
	border: 8px solid #ffffff;
	box-shadow: 0 0 5px #000000;
	position: relative;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
}
.photoPano{
	width:95%;
	max-width:500px;
	aspect-ratio:2/1;
	border: 8px solid #ffffff;
	box-shadow: 0 0 5px #000000;
	position: relative;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
}
.photoCarre{
	width:95%;
	max-width:300px;
	aspect-ratio:1/1;
	border: 8px solid #ffffff;
	box-shadow: 0 0 5px #000000;
	position: relative;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
}

/* ACCUEIL -------------------------- */

.presentLong{
	width: 100%;
	aspect-ratio:7/2;
	border: 1px solid #00222e;
	/*background-image: url();*/
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	float: left;
	margin-bottom: 20px;
	overflow: hidden;
}
.infoPresent{
	width: 180px;
	height: 100%;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 45px;
	padding-right: 5px;
	box-sizing: border-box;
	position: relative;
	float: left;
	transition: all 0.4s;
	z-index: 1;
}
.infoPresent.pair{ background-color: #00222e; } 
.infoPresent::after{
	content:'';
	width: 50px;
	height: 100%;
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	background-color: #ffffff;
	position: absolute;
	float: left;
	left: 100%;
}
.infoPresent.pair::after{ background-color: #00222e; }

.pucePresent{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #d49d27;
	position: absolute;
	float: left;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.titrePresent{
	color: #00222e;
	font-weight: bold;
	font-size: 1.2em;
	position: relative;
	float: left;
}
.titrePresent.pair{ color: #ffffff; }
.detailPresent{
	width: 100%;
	max-height: 0;
	position: relative;
	float: left;
	overflow: hidden;
	opacity: 0;
	transition: all 0.2s;
	transition-delay: 0;
}
.detailPresent.pair{ color: #ffffff; }

.presentLong .bSavoir{ height: 0; opacity:0; transition: all 0.4s; transition-delay: 0s; position: absolute; float: left; right: 0; bottom: 10px; }

.presentLong:hover .infoPresent{ width: calc(100% - 50px); }
.presentLong:hover .detailPresent{ max-height: 50%; opacity: 1; transition: all 0.5s; transition-delay: 0.1s; }
.presentLong:hover .bSavoir{ height: 30px;  opacity:1; transition-delay: 0.5s; }

.doublePhoto{
	width: 100%;
	aspect-ratio:3/1;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	margin-bottom: 10px;
}
.zonePhoto{
	width: calc(50% - 3px);
	height: 100%;
	position: relative;
	float: left;
}
.zonePhoto .visuPhoto{
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
}
.zonePhoto .visuPhoto img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.tramePhoto{
	width: 0;
	height: 100%;
	background-color: rgba(212,157,39,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	color: #ffffff;
	text-shadow: 0 0 5px #000000;
	white-space: nowrap;
	position: absolute;
	float: left;
	transition:all 0.4s;
	overflow: hidden;
	z-index: 2;
}
.zonePhoto:hover .tramePhoto{ width: 100%; }
.tramePhoto.gauche{ right: 0; }
.tramePhoto.droite{ left: 0; }
.rondDoublePhoto{
	width: 65px;
	height: 65px;
	border-radius: 50%;
	border: 8px solid #ffffff;
	background-color: #d49d27;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.nomDoublePhoto{
	min-width: 200px;
	padding: 5px;
	background-color: #d49d27;
	color: #ffffff;
	font-size: 1.3em;
	text-align: center;
	box-shadow: 0 0 3px #000000;
	position: absolute;
	float: left;
	bottom: 10px;
	z-index: 3;
}
.nomDoublePhoto.gauche{ left: -5px; }
.nomDoublePhoto.droite{ right: -5px; }

/* ETUDES ------------------------------ */
.ligneNumero{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	margin-bottom: 10px;
}
.rondNum{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ffffff;
	border:1px solid #d49d27;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4em;
	color:#d49d27;
	transition: all 0.4s;
	flex-shrink: 0;
}
.txtNum{
	font-size: 1.1em;
	font-weight: bold;
	position: relative;
	float: left;
}
.rondNum img{ 
	max-height: 80%;
	width: auto;
}
.rondNum .imLarg{
	max-width: 80%;
	height: auto;
}
.ligneNumero:hover .rondNum{ background-color: #d49d27; color: #ffffff; }
.ligneNumero:hover .flecheSuite{ margin-left: 10px; }
.ligneNumero:hover .rondNum .flecheSuite{ background-color: #ffffff; }

/* PROJETS ----------------------------- */

.menuProjet{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	margin: 15px 0;
}
.nomMenu{
	font-weight: bold;
	color:#d49d27;
	position: relative;
	float: left;
	margin-right: 20px;
}
.bandeauMenuProjet{
	width: 600px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	float: left;
	padding: 0 20px;
}
.bandeauMenuProjet::before{
	content:'';
	width: 30px;
	height: 30px;
	border-left: 1px solid #d49d27;
	border-bottom: 1px solid #d49d27;
	position: absolute;
	float: left;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(45deg);
}
.bandeauMenuProjet::after{
	content:'';
	width: 30px;
	height: 30px;
	border-left: 1px solid #d49d27;
	border-bottom: 1px solid #d49d27;
	position: absolute;
	float: left;
	top: 50%;
	right: 0;
	transform: translateY(-50%) rotate(-135deg);
}
.boutProjet{
	width: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	float: left;
}
.cercleBoutonProjet{
	width: 70px;
	height: 70px;
	border: 1px solid #d49d27;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	transition: all 0.4s;
}
.cercleBoutonProjet img{
	max-width: 45px;
	height: auto;
	display: block;
}
.nomBoutonProjet{
	font-size: 1.1em;
	font-weight: bold;
	color: #00222e;
}
.boutProjet:hover .cercleBoutonProjet{ box-shadow: 0 0 3px #666666; transform: scale(1.1);}

.listeProjet{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:20px;
	position: relative;
	float: left;
}
.zoneProjet{
	width:410px;
	border: 1px solid #00222e;
	position: relative;
	float: left;
}
.zoneProjet.pair{
	color: #ffffff;
	background-color: #00222e;
}
.bandSupProjet{
	width: calc(100% - 20px);
	height: 45px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	float: left;
	margin:5px 10px;
}
.iconeListeProjet{
	height: calc(100% - 10px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color:#d49d27;
	position: relative;
	float: left;
}
.cercleListeProjet{
	height: 100%;
	aspect-ratio:1/1;
	border:1px solid #d49d27;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	margin-right: 5px;
}
.cercleListeProjet img{ max-width: 70%; height: auto; display: block; }
.villeListeProjet{
	font-size: 0.9em;
	color:#d49d27;
	position: relative;
	float: left;
}
.photoListeProjet{
	width: 100%;
	aspect-ratio:3/2;
	background-color: #eeeeee;
	position: relative;
	float: left;
	overflow: hidden;
}
.photoListeProjet img{
	max-width: 100%;
	height: auto;
	display: block;
	position: relative;
	float: left;
	z-index: 1;
}
.txtListeProjet{
	width: calc(100% - 20px);
	position: relative;
	float: left;
	margin: 10px;
}
.titreListe{
	font-size: 1.4em;
	font-weight: bold;
}
.titreListe:first-letter{ color:#d49d27; }
.zoneProjet:hover .tramePhoto{ width: 100%; }


/* SOLUTIONS --------------------------------------------- */
.listeSolution{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:20px;
	position: relative;
	float: left;
}
.zoneSolution{
	width:calc(33% - 40px);
	border: 1px solid #00222e;
	position: relative;
	float: left;
	padding: 5px;
	box-sizing: border-box;
}
.zoneSolution.pair{
	color: #ffffff;
	background-color: #00222e;
}
.titreSolution{
	width: 100%;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	position: relative;
	float: left;
}
.titreSolution:first-letter{ color:#d49d27; }
.galerieSolution{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:5px;
	position: relative;
	float: left;
	margin: 10px 0;
}
.photoSolution{
	width:calc(50% - 10px);
	aspect-ratio:1/1;
	position: relative;
	float: left;
	background-color: #dddddd;
}

/* CONTACT --------------------------- */
.chpStdFull{
	width: calc(100% - 22px);
	/*height: 30px;*/
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #029cd2;
	background-color: #ffffff;
	position: relative;
	float: left;
	left: 50%; 
	transform: translateX(-50%);
	margin: 5px 0;
	padding: 10px 0;
	clear: both;
}
.chpStdFull::placeholder{ color: #666666; }
.chpStdMini{
	width: 80px;
	/*height: 30px;*/
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #029cd2;
	background-color: #ffffff;
	padding: 10px 0;
}

.chpAreaFull{
	width: calc(100% - 22px);
	height: 200px;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #029cd2;
	background-color: #ffffff;
	position: relative;
	float: left;
	left: 50%; 
	transform: translateX(-50%);
	margin: 5px 0;
	padding: 10px 0;
	clear: both;
}
.chpAreaFull::placeholder{ color: #666666; }

.subStd{
	width:250px;
	max-with:calc(100% - 22px);
	border: 1px solid #029cd2;
	border-radius: 8px;
	font-family: 'Roboto';
	color: #ffffff;
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	background-color:#029cd2; 
	position: relative;
	float: left;
	clear: both;
	left: 50%; 
	transform: translateX(-50%);
	margin: 10px 0;
	padding: 10px 0;
	cursor: pointer;
}
.ligneTxtForm{
	width: 100%;
	position: relative;
	float: left;
	margin: 5px 0;
}

.message{
width:350px;
max-width: 90%;
background-color:#ffffff;
border:1px solid #029cd2;
border-radius:8px;
font-size:1em;
color: #000000;
text-align:center;
height:auto;
padding:4px;
box-shadow: 0 0 5px #666666;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:11;
overflow:auto;
}
.closeF{
width:100px;
background-color:#d49d27;
border-radius:8px;
color:#ffffff;
font-size:0.9em;
text-align:center;
line-height:25px;
vertical-align:middle;
position:relative;
float:left;
padding: 4px;
top:0;
left: 50%;
transform: translateX(-50%);
}
.closeF a{
color:#ffffff;
text-decoration:none;
}