@charset "utf-8";

/*

	--colorBeige: rgb(223, 207, 185);
	--colorBleu: rgb(60, 85, 100);
	--colorGris: rgb(100, 100, 100);
	--colorTxt: rgb(0, 0, 0);
	--colorWhite: white;
	--ecartDixPx: 10px;

*/

body {
	max-width: 1700px;
	margin: auto;
}


#AD_loader {
	display: flex;
	width: 100%;
	height: 100vh;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	align-content: center;
}


#AD_loader .div1 {
	max-width: 70vmin;
	width: 20em;
	max-height: 70vmin;
	height: 20em;
	margin: auto;
	overflow: hidden;
}

.AD_loader_bandes {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100vh;
	z-index: 999999;
	background: linear-gradient(45deg, rgba(223, 207, 185, 1) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgba(223, 207, 185, 1) 75%);
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	align-content: center;
	border-bottom: 7px solid var(--colorBleu);
}


#AD_loader .div1 img {}


/*******************************************************/
/***********   section1   *************/
/*******************************************************/
#container {}

#section1_Presentation,
#section3_Rubriques {
	position: relative;
	width: 100%;
	height: auto;
	background: var(--colorBleu);
	color: var(--colorBeige);
	margin-top: -3px;
}

.sectionTitre {
	padding: 1.8em 1em;
	font-size: 1.6em;
	color: var(--colorBleu);
	background-color: var(--colorBeige);
}

.blocPresentation {
	position: relative;
	width: 100%;
}

.blocPresentationTitre {
	width: 100%;
	padding: 6em 1em 2em;
}

.blocPresentationTitre h1 {
	width: 30em;
	max-width: 96%;
	margin: auto;
	padding-bottom: 2em;
	font-family: "Poiret One";
	text-transform: inherit;
	font-size: 2em;
	line-height: 1.5em;
	text-align: center;
}

.blocPresentationTitre h2 {
	width: 96%;
	margin: auto;
	font-family: "Montserrat";
	text-transform: inherit;
	font-size: 1.2em;
	line-height: 1em;
	text-align: center;
	/* padding: 3em 3em 0; */
}

/*
https://vue-grid-generator.netlify.app/

{"areas":[["un","deux","trois"],["image1","image2","image3"],["txt1","txt2","txt3"]],"columns":["1fr","1fr","1fr"],"rows":["4fr","7fr","1fr"],"gridWidth":"100%","gridHeight":"100%"}

@media
{"areas":[["un","image1"],["txt1","image1"],["deux","image2"],["txt2","image2"],["trois","image3"],["txt3","image3"]],"columns":["1fr","2fr"],"rows":["1fr","2fr","1fr","2fr","1fr","2fr"],"gridWidth":"100%","gridHeight":"100%"}
*/

/******************************/
.Grid_1-2-3 {
	display: grid;
	margin: 5vh auto 10vh;
	max-width: 1400px;
	grid-gap: 1em;
	width: 95%;
	height: 100%;
	grid-template-areas:
		"un deux trois"
		"image1 image2 image3"
		"txt1 txt2 txt3";
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
}

.un {
	grid-area: un;
}

.deux {
	grid-area: deux;
}

.trois {
	grid-area: trois;
}

.image1 {
	grid-area: image1;
}

.image2 {
	grid-area: image2;
}

.image3 {
	grid-area: image3;
}

.txt1 {
	grid-area: txt1;
}

.txt2 {
	grid-area: txt2;
}

.txt3 {
	grid-area: txt3;
}


/******************************/

.Grid_1-2-3 .chiffre img {
	width: auto;
	margin: auto;
	height: 6.5em;
	padding-bottom: 1em;
}

.Grid_1-2-3 .image img {
	width: 100%;
	height: 60vmin;
	object-fit: cover;
}

.Grid_1-2-3 .txt {
	width: 100%;
	font-size: 0.9em;
}

.blocPresentation hr {
	width: 70%;
	max-width: 10em;
	border-top: 1px solid;
	margin: auto;
}

.blocPresentationTitre ul {
	column-count: 2;
	width: 44em;
	max-width: 96%;
	margin: auto;
	padding: 0 0 4em 9em;
	text-transform: uppercase;
	font-size: 1em;
	line-height: 1.6em;
	text-align: center;
	text-align: left;
	list-style-type: disc;
}

.blocPresentationTitre h3 {
	font-family: "Poiret One";
	text-transform: inherit;
	font-size: 1.7em;
}

.lesDiaporamas {
	width: 100%;
	border: 10px solid var(--colorBeige);
	display: flex;
	justify-content: space-between;
	background: var(--colorBeige);
}

/*******************************************************/
/***********   section2   *************/
/*******************************************************/

#section2_Prestation .sectionTitre {
	color: var(--colorBeige);
	background-color: var(--colorBleu);
}

.blocPrestation {
	position: relative;
	width: 100%;
}

/****************************************/

/*
https://vue-grid-generator.netlify.app/

{"areas":[["blocListHaut","blocListHaut","blocListHaut","NOP3","NOP3","NOP3"],["blocListHaut","blocListHaut","blocListHaut","NOP3","NOP3","NOP3"],["NOP1","NOP1","NOP1","blocListBas","blocListBas","blocListBas"],["NOP2","NOP2","NOP2","blocListBas","blocListBas","blocListBas"],["NOP2","NOP2","NOP2","blocListBas","blocListBas","blocListBas"]],"columns":["1fr","1fr","1fr","1fr","1fr","1fr"],"rows":["1fr","1fr","1fr","1fr","1fr"],"gridWidth":"100%","gridHeight":"100%"}


zone 8 x 6
{"areas":[["ZONE-0","ZONE-1","ZONE-2","ZONE-3","ZONE-4","ZONE-5","ZONE-6","ZONE-7"],["ZONE-8","ZONE-9","ZONE-10","ZONE-11","ZONE-12","ZONE-13","ZONE-14","ZONE-15"],["ZONE-16","ZONE-17","ZONE-18","ZONE-19","ZONE-20","ZONE-21","ZONE-22","ZONE-23"],["ZONE-24","ZONE-25","ZONE-26","ZONE-27","ZONE-28","ZONE-29","ZONE-30","ZONE-31"],["ZONE-32","ZONE-33","ZONE-34","ZONE-35","ZONE-36","ZONE-37","ZONE-38","ZONE-39"],["ZONE-40","ZONE-41","ZONE-42","ZONE-43","ZONE-44","ZONE-45","ZONE-46","ZONE-47"]],"columns":["1fr","1fr","1fr","1fr","1fr","1fr","1fr","1fr"],"rows":["1fr","1fr","1fr","1fr","1fr","1fr"],"gridWidth":"100%","gridHeight":"100%"}


{"areas":[["ZONE-8-0","blocListHaut","blocListHaut","zone-1","zone-2","ZONE-13-4","ZONE-6","ZONE-7"],["ZONE-8-1","blocListHaut","blocListHaut","zone-3","blocListBas","blocListBas","blocListBas","blocListBas"],["ZONE-24","ZONE-25","ZONE-26","ZONE-27","blocListBas","blocListBas","blocListBas","blocListBas"],["ZONE-24","ZONE-25","ZONE-26","ZONE-27","blocListBas","blocListBas","blocListBas","blocListBas"],["ZONE-32-0","blocTitre","blocTitre","ZONE-35","blocListBas","blocListBas","blocListBas","blocListBas"],["ZONE-32-1","blocTitre","blocTitre","ZONE-43","ZONE-44","ZONE-45","ZONE-46","ZONE-47"]],"columns":["1fr","1fr","1fr","1fr","1fr","1fr","1fr","1fr"],"rows":["1fr","1fr","0.75fr","0.75fr","1fr","1fr"],"gridWidth":"100%","gridHeight":"100%"}

*/

.PrestationGrid {
	position: relative;
	display: grid;
	max-width: 100%;
	height: 100%;
	grid-template-areas: "ZONE-8-0 blocListHaut blocListHaut zone-1 zone-2 ZONE-13-4 ZONE-6 ZONE-7"
		"ZONE-8-1 blocListHaut blocListHaut zone-3 blocListBas blocListBas blocListBas blocListBas"
		"ZONE-24 ZONE-25 ZONE-26 ZONE-27 blocListBas blocListBas blocListBas blocListBas"
		"ZONE-24 ZONE-25 ZONE-26 ZONE-27 blocListBas blocListBas blocListBas blocListBas"
		"ZONE-32-0 blocTitre blocTitre ZONE-35 blocListBas blocListBas blocListBas blocListBas"
		"ZONE-32-1 blocTitre blocTitre ZONE-43 ZONE-44 ZONE-45 ZONE-46 ZONE-47";
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}


.gridDiagonale {
	display: block;
	grid-area: ZONE-8-0;
	grid-column: 1/9;
	grid-row: 1/5;
	z-index: -1;
	filter: drop-shadow(10px 0px 8px rgba(0, 0, 0, 0.7));
}

.gridDiagonale div {
	width: 100%;
	height: 100%;
	background: var(--colorBeige);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
}

.blocListHaut {
	grid-area: blocListHaut;
	grid-column: 2/7;
	grid-row: 1/4;
	padding-right: 2em;
	margin-top: 3em;
	margin-bottom: 3em;
}

.blocListHaut ul {
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1.5em;
	text-align: left;
	text-transform: uppercase;
}

.blocListHaut li {
	list-style: outside;
	font-size: 0.8em;
	line-height: 1.5em;
	font-weight: 400;
	padding-bottom: 0.5em;
	margin-left: 2em;
}

.blocListBas {
	grid-area: blocListBas;
	grid-column: 5/9;
	grid-row: 2/6;
	text-align: left;
	padding-right: 1em;
	margin: auto;
}

.blocListBas ul {
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1.5em;
	text-align: left;
	text-transform: uppercase;
}

.blocListBas li {
	list-style: outside;
	font-size: 0.8em;
	line-height: 1.5em;
	font-weight: 400;
	padding-bottom: 0.3em;
	margin-left: 2em;
}

.blocListBas span {
	color: red;
}

.blocTitre {
	position: absolute;
	bottom: 3em;
	left: 0;
	font-size: 1.8em;
	color: var(--colorBeige);
	z-index: 9;
	width: 40%;
	padding: 0 1em;
	text-align: left;
}

.blocTitre h1 {
	text-align: left;
}

.blocTitre hr {
	width: 100%;
	margin: auto;
	border-top: 1px dashed var(--colorBeige);
	margin-top: 1em;
}


/*****************************************************************/
/*****************************************************************/
/************** SECTION 3 ************/
/*****************************************************************/
/*****************************************************************/

#section3_Rubriques:before {
	content: "";
	display: block;
	position: absolute;
	top: -22em;
	z-index: 999;
	width: 100%;
	height: 24em;
	background: var(--colorBleu);
	-webkit-clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);
	z-index: -9;
}

#section3_Rubriques {
	position: relative;
	display: block;
	width: 100%;
	max-width: 2000px;
	height: auto;
	margin: 5em auto 0;
	padding-bottom: 5em;
}

.section3_decallage {
	position: relative;
	width: 100%;
	height: auto;
	top: -6em;
}

#titre1_realisation {
	display: block;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: left;
	font-size: 1.8em;
	letter-spacing: 0.2em;
}



/**********************************************/
/* * * * ecran SANS hover - *************************/
/**********************************************/
@media (any-hover: none) {}


/**********************************************/
/* * * * ecran AVEC hover - *************************/
/**********************************************/
@media (any-hover: hover) {}


/*********************************************/
/*********************************************/
/* * * * * * * * * @ASPECT RATIO  * * * * * * * * * */
/*********************************************/
/*********************************************/


@media screen and (max-aspect-ratio: 1/1) {}


/**************************************************************/
/* * * * * * * * * @MEDIA SCREEN  *****************************/
/*  *    +17 par rapport au breakpoint de fenetre    *****************/
/* * * * * * * * * @MEDIA SCREEN  *****************************/
/**************************************************************/

/* * * au dessus de 2000px ********/
@media screen and (min-width: 2000px) {
	#titre1_realisation {
		font-size: 30px;
	}

	.btn_images_realisation[value="+"] {
		right: calc(50% - 850px);
	}

	.item-aveclick:before {
		right: calc(50% - 800px);
	}

}


/******************************************************/
/******************************************************/
/******************************************************/
/******************************************************/


/* * * au dessous de 2000px ********/
@media screen and (max-width: 2000px) {}

/*********************************************/
/*********************************************/

/* * * au dess0us de 1150px *****/
@media screen and (max-width: 1150px) {}

/*********************************************/
/*********************************************/

/* * * au dessous de 950px ********/
@media screen and (max-width: 950px) {}

/*********************************************/
/*********************************************/

/* * * au dessous de 703px ***/
@media screen and (max-width: 703px) {

	.Grid_1-2-3 {
		grid-template-areas:
			"un image1"
			"txt1 image1"
			"deux image2"
			"txt2 image2"
			"trois image3"
			"txt3 image3";
		grid-template-columns: 1fr 2fr;
	}

	.Grid_1-2-3 .chiffre img {
		margin-top: 2em;
	}

	.Grid_1-2-3 .image img {
		height: 90vmin;
		width: 100%;
	}

	.Grid_1-2-3 .txt {
		width: 100%;
		font-size: 0.95em;
		text-align: right;
		letter-spacing: 0;
			padding-bottom: 2em;

	}

	.blocPresentationTitre ul {
		column-count: 1;
		padding-left: calc(50% - 4em);

	}
	.Grid_1-2-3 .chiffre img {
		margin-top: 0;
		height: 100%;
		max-height: 30vmin;
		padding: 0;
	}

	.un, .deux, .trois {
	}


	/*********************************************/
	/*********************************************/
	.gridDiagonale {
		filter: drop-shadow(-5px 5px 8px rgba(0, 0, 0, 0.7));
	}

	.gridDiagonale div {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 0 70%);
		clip-path: polygon(0 0, 100% 0, 100% 40%, 0 70%);
	}

	.PrestationGrid {
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	}
	
	.blocListHaut {
		grid-column: 1/8;
		grid-row: 1/3;
		padding-left: 3em;
		margin-bottom: 0;
	}

	.blocListBas {
		padding-top: 6em;
		padding-bottom: 0;
		grid-column: 4/9;
	}


	#section3_Rubriques:before {
		-webkit-clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);
		clip-path: polygon(0 20%, 100% 70%, 100% 100%, 0% 100%);
	}

	/*************************************/

	#titre1_realisation {
		display: block;
		padding: 1em 1em 1em 0;
		font-family: "adano_regular";
		font-size: 6vw;
		font-weight: 700;
		letter-spacing: 3vw;
	}

}

/*********************************************/
/*********************************************/

/* * * au dessous de 450px ***/
@media screen and (max-width: 450px) {

	.PrestationGrid {
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 0.5fr 0.25fr;
	}


	.blocListBas {
		padding-top: 0;
		grid-column: 2/9;
		grid-row: 3/7;
	}

}