/* Notes : 1rem = 12pt = 16px = 100% / L'unité rem est relative à sa définition à la racine (html), donc sa référence de base ne varie pas */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400&display=swap');
html{ width:100%; height:100%; background-color:#FFFFFF; }
body { display:flex; display:-webkit-flex; flex-direction:column; -webkit-flex-direction:column; width:100%; min-height:100vh; margin:0 auto  0 auto; background-color:#FFFFFF; }
.header { position:fixed; display:flex; display:-webkit-flex; flex-direction:row; width:100%; height:70px; margin:0; padding:0; box-shadow:0px 0px 10px 5px rgba(0,0,0,0.3); background-color:#FFFFFF; z-index:1000; }
/*.header_accueil { background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); }*/

.navMenuSite { width:100%;  } 
.menuSite { display:flex; display:-webkit-flex; height:100%; justify-content:space-around; margin:0; padding:0; list-style:none; order:1; font-family:'Gothic A1',"Century Gothic", sans-serif; font-size:1.15rem; /*letter-spacing:-0.06rem;*/ }
.menuSite li { /*margin-left:4%; margin-right:4%;*/ }
.menuSite a { display:flex; display:-webkit-flex; height:100%; align-items:center; justify-content:center; color:#000000; text-decoration:none;  }
/*.menuSite a:not(.accueil a) { margin-top:1rem; }*/
.menuSite .accueil a { display:flex; display:-webkit-flex; height:100%; font-size:0px; color:transparent; background-image:url(menu_accueil_logo.jpg); background-repeat:no-repeat; background-position:50% 40%; width:194px; }
.menuSite a:hover { text-decoration:underline; }
.menuSite .pageActive { text-decoration:underline; color:#000000; }

.langues { display:flex; display:-webkit-flex; height:100%;  align-self:flex-start;  margin:0rem 1rem 0 0; padding:0; list-style:none; color:#000000; font-family:'Gothic A1',"Century Gothic", sans-serif; font-size:0.8rem; }
.langues .lgSeparateur { display:flex; display:-webkit-flex; height:100%; align-items:center; justify-content:center; margin-left:0.1rem; margin-right:0.1rem; } 
.langues a { display:flex; display:-webkit-flex; text-decoration:none; color:#000000; height:100%; align-items:center; justify-content:center; }
.langues .lgActive { opacity:0.3; cursor:default; }

/* BOUTON MENU INIT */
.btnMenu { position:fixed; width:40px; height:40px; background-color:transparent; border:0; background-image:url(menu.svg); background-size:86%; background-repeat:no-repeat; background-position:50% 50%; z-index:10000; }
.show-menu-btn { display:none; font-size:0px; cursor:pointer; transition:0.2s; }
#chk{ position:absolute; visibility:hidden; z-index:-1111; }

/* PAGE ACCUEIL */
.mainAccueil { display:flex; display:-webkit-flex; flex-direction:column; align-items:center; }
.mainAccueil .ban { display:flex; width:100%; min-height:60px; background-color:#e7e1da; align-items:center; justify-content:center; box-shadow:inset 0px -5px 10px -5px rgba(0,0,0,0.2); z-index:1; }
.mainAccueil .ban b { margin-right:0.5rem; }
.accueilInfos { margin:0; padding:0; list-style:none; width:80%; }
.accueilInfos div { }
.accueilInfos .agence { display:flex; display:-webkit-flex; align-items:center; justify-content:space-between; }
.accueilInfos .agence .presentation { width:50%; display:flex; display:-webkit-flex; flex-direction:column; }
.accueilInfos .agence .presentation p { display:flex; display:-webkit-flex; margin:0; padding:0; text-align:center;  }
.accueilInfos .agence .presentation .logo { height:140px; background-image:url(accueil_logo.jpg); background-repeat:no-repeat; background-position:50% 50%; background-size:70%; }
.accueilInfos .agence .presentation .titre { display:flex; display:-webkit-flex; align-items:center;justify-content:center; font-family:'Gothic A1',"Century Gothic", sans-serif; font-size:1.6rem; letter-spacing:-0.03rem; }
.accueilInfos .agence .presentation .contact { display:flex; display:-webkit-flex; align-items:center; justify-content:center; margin-top:1.5rem; font-family:'Gothic A1',"Century Gothic", sans-serif; }
.accueilInfos .agence .presentation .contact a { color:#333333; text-decoration:none;  }
.accueilInfos .agence .presentation .contact a:hover { color:#8e6b45; }
.accueilInfos .agence .presentation .contact a:nth-child(1) { padding-left:1.3rem; background-image:url(tel.jpg); background-repeat:no-repeat; background-size:contain; } 
.accueilInfos .agence .presentation .contact a:nth-child(2) { margin-left:2rem; padding-left:1.5rem;  background-image:url(email.jpg); background-repeat:no-repeat; background-size:contain; font-size:1.1rem; } 
.accueilInfos .agence .photo { display:flex; display:-webkit-flex; margin-left:2rem; width:50%; height:350px; background-repeat:no-repeat; background-position:50% 50%;  }
.accueilInfos .piliers { display:flex; display:-webkit-flex; flex-wrap: wrap; justify-content:space-around; }
.accueilInfos .piliers h3 { width:100%; margin:4rem 0 2rem 4rem; padding:0; text-align:center; font-family:'Gothic A1',"Century Gothic", sans-serif; font-size:2.5rem; color:#333333; }
.accueilInfos .piliers div { width:25%; text-align:justify; margin:1rem 1rem 1rem 0rem;  padding:2rem; font-family:'Gothic A1',"Century Gothic", sans-serif; box-shadow:28px -16px 0px -2px rgba(231,225,218,1), 0em 0.2rem 0.2rem rgba(231,225,218,1); }
.accueilInfos .piliers h4 { margin:0 0 1rem 0; padding:0; text-align:center; font-size:1.5rem; }
/*.accueilInfos .adresse {  }
.accueilInfos .adresse p { width:100%; margin-top:2em; margin-bottom:2rem; border:px solid green; text-align:center; font-size:1.2rem;}
.accueilInfos .adresse p span { font-size:2rem; color:#b59881; }
.accueilInfos .adresse .plan { width:100%; min-height:400px; margin-bottom:1rem; background-image:url(accueil_plan.jpg); background-repeat:no-repeat; background-position:50% 50%; }*/

/* PAGES CONTENUS */
.main { display:flex; display:-webkit-flex; display:-webkit-flex; flex-direction:column; flex:1 1 auto; width:100%; margin-top:70px; }
.main>h2 { display:flex; display:-webkit-flex; width:100%; height:200px; align-items:flex-end; margin:0; color:#FFFFFF; box-shadow:inset 0px -5px 10px -5px rgba(0,0,0,0.7); }
.main>h2>div { font-size:2rem; margin-bottom:4rem; margin-left:3%; padding-bottom:0.7rem; border-bottom:2px solid #FFFFFF; font-family:'Gothic A1',"Century Gothic", sans-serif; text-shadow: 0 0 0.5em rgba(0,0,0,1); }
.pageContenu { display:flex; display:-webkit-flex; flex-wrap:wrap; flex-direction:row; justify-content:center; margin:2rem 0 2rem 0; padding:0; list-style:none; }
.pageContenu li { border:1px solid #FFFFFF; flex: 0 0 33.3333%; }
.pageContenu li:nth-child(1) h3 { margin:0 0 0 2rem; padding:0; }
.pageContenu li:nth-child(2) { min-height:200px; background-repeat:no-repeat; background-position:50% 50%; background-size:500px auto; }
.pageContenu li:nth-child(3) { min-height:300px; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; }
.pageContenu li:nth-child(4) h3:not(.mainApropos .pageContenu li:nth-child(4) h3) { margin:5rem 2rem 0 2rem; padding:0; text-align:right; color:#444444; }
.pageContenu h3 { font-family:'Gothic A1',"Century Gothic", sans-serif; color:#333333; font-size:1.4rem; letter-spacing:0.15rem;  }
.pageContenu li .contenu { margin:2rem; padding:0; text-align:justify; font-family:'Gothic A1',"Century Gothic", sans-serif; line-height:1.5rem; }
.pageContenu li:nth-child(1) div { width:30%; margin-left:2rem; border-bottom:2px solid #666666; }
.pageContenu li:nth-child(4) div { float:right; width:30%; margin-right:2rem; border-bottom:2px solid #666666; }

/* A PROPOS */
/*.mainApropos .pageContenu li p { border:1px solid red; }*/
.mainApropos .pageContenu li:nth-child(1) { margin-bottom:2rem; text-align:justify; }
.mainApropos .pageContenu li:nth-child(2) { min-height:500px; background-repeat:no-repeat; background-position:50% 50%; }
.mainApropos .pageContenu li:nth-child(2) a { display:flex; display:-webkit-flex; width:100%; height:100%; }
.mainApropos .pageContenu li:nth-child(3) div { width:auto; padding-bottom:1rem; }
.mainApropos .pageContenu li:nth-child(3) h3 { display:flex; width:100%; margin:0; margin-top:5rem; margin-left:20%; color:#444444; }
.mainApropos .pageContenu li .contact { display:flex; display:-webkit-flex; height:50px; margin-left:7rem; margin-top:2rem; align-items:center;  padding-left:60px; background-repeat:no-repeat; background-position:0% 50%;  font-family:'Gothic A1',"Century Gothic", sans-serif;}
.mainApropos .pageContenu li .contact:nth-child(2) { background-image:url(tel.jpg); }
.mainApropos .pageContenu li .contact:nth-child(3) { background-image:url(email.jpg); }
.mainApropos .pageContenu li .contact:nth-child(4) { background-image:url(linkedin.jpg); }
.mainApropos .pageContenu li .contact:nth-child(5) { background-image:url(adresse.jpg); }
.mainApropos .pageContenu li:nth-child(1) p { margin:2rem; font-family:'Gothic A1',"Century Gothic", sans-serif; line-height:1.5rem; }
.mainApropos .pageContenu li p a { color:#333333; text-decoration:none; }
.mainApropos .pageContenu li p a:hover { color:#8e6b45; }
.mainApropos .pageContenu li:nth-child(1) {  flex:0 1 99%; margin-left:15%; margin-right:15%; }

/* MENTIONS */
.mainMentions { display:flex; display:-webkit-flex; display:-webkit-flex; flex-direction:column; flex:1 1 auto; width:100%; }
.mainMentions .mentions { margin-left:3rem; margin-right:3rem; }

/* BAS DE PAGE */
.footer { display:flex; display:-webkit-flex; justify-content:center; flex-wrap:wrap; width:100%; }
.navBasDePage { display:flex; display:-webkit-flex; align-items:center;  }
.basDePage { display:flex; display:-webkit-flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; font-family:'Gothic A1',"Century Gothic", sans-serif; color:#FF0000; }
.basDePage li { margin-left:.2rem;/* margin-right:.2rem; padding-right:.5rem;*/ }
/*.basDePage li:first-child{ border-right:1px dotted #000000;  }*/
.basDePage p { display:flex; display:-webkit-flex; height:100%; align-items:center; margin:0; padding:0; color:#000000; font-size:0.8rem;}
.basDePage a { display:block; font-size:0.7rem; font-weight:normal; text-decoration:none;   }
.basDePage h1 { padding:0; margin:0; color:#000000;font-weight:normal; text-decoration:none; font-size:0.8rem; color:#000000; transition:0.3s; }

#basDePage h1:before { content:'• \000020 '; color:#000000; } 
/*#basDePage li:last-first a h1:before { content: ''; }*/
/*#basDePage h1 { display:inline; }*/

.basDePage h1:hover { color:#FFCC66; }
.basDePage .accueil { order:-1; }
.basDePage .copyright { order:-2;}

#basDePageLogo { display:flex; display:-webkit-flex; justify-content:center; }
#basDePageLogo a { display:block; width:150px; height:32px; background-image:url(logo-darkenciel.svg);  background-repeat:no-repeat; background-position:50% 50%; background-size:contain;  opacity:1; transition:0.3s; }
#basDePageLogo a:hover { opacity:0.8; }


@media (max-width:840px){
	/* PAGE ACCUEIL */
	.accueilInfos { width:95%; }
	.accueilInfos .agence { width:99%; flex-direction:row; flex-wrap:wrap; }
	.accueilInfos .agence .presentation .logo { margin-top:1rem; background-size:100%; }
	.accueilInfos .agence .presentation { width:99%; }
	.accueilInfos .agence .photo { margin-left:0rem; width:99%; height:350px; background-repeat:no-repeat; background-position:50% 50%; }	
	.accueilInfos .agence .presentation .contact { flex-direction:column; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:0rem; }
	.accueilInfos .agence .presentation .contact a { display:flex; display:-webkit-flex; margin-top:1rem; text-align:center; align-items:center; justify-content:center; font-size:1.2rem; }
	.accueilInfos .agence .presentation .contact a:nth-child(2) { margin-left:0rem; margin-bottom:1rem; }	
	.accueilInfos .piliers { flex-direction:row; flex-wrap:wrap;  }
	.accueilInfos .piliers div { width:99%; }
	.accueilInfos .piliers h3 { width:100%; margin:0rem 0 2rem 4rem; }
	
	/* PAGES */
	.pageContenu { flex-direction:column; margin:2rem 0 2rem 0; }
	.pageContenu li { flex: 0 0 99%; }
	.pageContenu li:nth-child(2) { background-size:95%; }
	.pageContenu li:nth-child(3) { order:20; }
	
	
	/*A PROPOS */
	.mainApropos .pageContenu li .contact { margin-left:4rem; }
	.mainApropos .pageContenu li:nth-child(1) { margin-left:0%; margin-right:0%; }
	.mainApropos .pageContenu li:nth-child(2) { order:21; width:99%; background-position:50% 10%; }
	.mainApropos .pageContenu li:nth-child(2) a { width:99%; height:300px;  } /*100vh*/
	.mainApropos .pageContenu li:nth-child(3) h3 { margin-left:0%; margin-top:0rem; justify-content:center; }
	
	
	/* BAS DE PAGE */
	.footer { justify-content:center; align-items:center; }
	.navBasDePage { justify-content:center; align-items:center; }
	.basDePage { justify-content:center; align-items:center; }
	
	/*BOUTON MENU MOBILE*/
	.btnMenu { display:block; top:0rem; right:0.2rem; border-radius:5px; cursor:pointer; } 
	.show-menu-btn { display:block; }
	#chk:checked ~ .navMenuSite { right:0; } /* top:0;si de haut en bas et vice versa top:0 */
	#chk:checked+label .btnMenu { width:40px; height:40px; border:0; background-image:url(fermer.svg); background-color:transparent; background-size:86%; background-repeat:no-repeat; background-position:50% 50%;}
	
	.navMenuSite {
		position:fixed;
		display:flex; display:-webkit-flex; display:-webkit-flex;
		width:100%;
		height:100%;
		background-color:#FFFFFF;		
		right:-100%;/*right: -100%; 100% si gauche->droite */
		top:0; /*top:-100%; 100% si haut en bas et vice versa */
		text-align:center;   
		line-height:normal;
		transition: 0.3s;
	   /* overflow-x:none; */
		overflow-y:none; /* fixe modal menu pour Android */
		scrollbar-color:#333 #999; /* fixe modal menu pour Android */
		scrollbar-width:thin;  /* fixe modal menu pour Android */	
		z-index:1005;		
	}
	.navMenuSite #menuSite
	{
		margin-left:0px;
		display:flex; display:-webkit-flex;
		display:-webkit-flex;
		flex-direction:column; -webkit-flex-direction:column;
		-webkit-flex-direction:column; -webkit-flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		width:100%;
		height:100vh;
		padding:0;
		margin:0;
		list-style:none;
		font-size:auto; 
	}
	.menuSite li { display:flex; display:-webkit-flex; width:100%; height:100%; margin:0; border-top:1px dotted #8e6b45;}
	
	.menuSite a:not(.accueil a) { margin-top:0rem; }
	.menuSite .accueil a { display:flex; display:-webkit-flex; font-size:1.4rem; color:#000000; background-image:none; width:100%; height:auto; }
	.menuSite a { display:flex; align-items:center; justify-content:center; width:100%; height:100%;  }
	.menuSite #menuSiteAccueil { order:-50; }
	.menuSite .pageActive { text-decoration:none; color:#FFFFFF; background-color:#8e6b45; }
	.menuSite .pageActive a {color:#000000; }

	}
}


/*
Jusqu’à 479px : smartphone en portrait
De 480px à 959px : smartphone en paysage, tablette en portrait et petite tablette en paysage
De 960px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne
1281px et au delà : grand écran d’ordinateur (21″ et + en plein écran )
*/