/* -----Eléments principaux de la page----- */
body
{
	background-color:white;
    font-family: Calibri, Tahoma, Arial, sans-serif;
    position: relative;
    font-size:1em;
}
img{
	width:100%;
}


html,body,#bloc_page
{
    width: 100%;
    margin: 0px;
    padding:0px;
    height: 100%;
}
.wrapper{
	min-height: 100%;
	height: auto !important;
	height:100%;
	margin:0 auto -100px;
	
}
section{
	width:90%;
	margin: auto;
	//background-color:#f0f0f0;
	padding:10px;
	position:relative;
}
.noBackground{
	background-color:white;
}
article{
	width:90%;
	margin: auto;
}

/* -------------------------------------entête-------------------------------- */
#entete{
	background-style:solid;
	background-color:white;
}
#logo{
	width: 150px;
	margin-left:10%;
}
#signature{
	color:#696969;
	border-bottom: 1px solid ;
	border-bottom-color:#e46c0a;
	padding-bottom:4px;
	font-size:1.8em;
	margin-left:8%;
}
#logo, #signature{
	display:inline-block;
	vertical-align:middle;
}
#logoSignatureConteneur{
	width:100%;
	margin-left: auto;
  	margin-right: auto;
}
@media (max-width: 600px) {
	#logo{
		display:block;
		margin:auto;
	}
	#signature{
		display:none;
	}		
}

/* -------------------------------Navigation ------------------------------*/

.topnav {
  overflow: hidden;
  background-style:solid;
  background-color:#CECECE;
  margin-bottom:10px;
  margin-top:20px;
  position:relative;
}
.topnav .icon {
    display: none;
}
.topnav ul{
	width:90%;	
	margin: auto;
	display: flex;
	justify-content:space-around;
	align-items:center;
	margin-top:10px;
	margin-bottom:10px;
}
.topnav li {
  display: inline;
  width:150px;
}
.topnav a {
  color:#696969;
  text-decoration: none;
  font-size: 1.2em;
  font-weight:bold;
  margin:auto;
  padding-right:7px;
  padding-left:7px;
}
.topnav a:hover {
  color:#e46c0a;
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:#696969;
}
@media (max-width: 800px) {
	#signature{
		display:none;
	}
}
@media (max-width: 600px) {

  	.topnav li:not(:first-child) {
  		display: none;
	}
  	.topnav a.icon {
   	 	float: right;
    	display: block;
  	}
	.topnav ul{
		display:block;
		padding:0px;
		margin:0px;
		width:100%;
	}
	.topnav.responsive li {
		width:100%;
		padding-top:10px;
		padding-bottom:10px;
    	display: block;
		margin:0px;
		border-top-style:solid;
		border-top-color:#696969;
		border-top-width:2px;
		text-align:center;
  	}
	.topnav.responsive li:nth-last-child(2) {
		border-bottom-style:solid;
		border-bottom-color:#696969;
		border-bottom-width:2px;
  	}	
	.topnav.responsive a {
		font-size:1.5em;
		width:100%;
		margin:0px;
		padding-right:0px;
		padding-left:0px;
  	}	
	
	
	.topnav.responsive li:hover{
		background-color:#696969;
		color:#e46c0a;
	}
		
}


/* ----------------------------------Footer---------------------------*/
#footer{
	height:100px;
}

.bottomnav{
	display: flex;
	justify-content:center;
	margin-top:120px;
	margin-bottom:10px;
}
.bottomnav ul{
	width:400px;
	margin:auto;
}
.bottomnav li {
	width:150px;
  	display: inline;
}
.bottomnav li:not(:last-child){
	border-right-style:solid;
	border-right-color:#696969;
	border-right-width:1px;
}
.bottomnav a {
  color:#696969;
  text-decoration: none;
  font-size: 1em;
  font-weight:normal;
  padding:10px;
}
.bottomnav a:hover {
  color:#e46c0a;
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:#696969;
}
@media (max-width: 600px) {
	.bottomnav ul{
		border-style:solid;
		border-color:#696969;
		border-width:1px;
		padding:0px;
	}
	.bottomnav li {
		width:100%;
		border:none;
		display:block;
		text-align:center;
		margin-left:0px;
		padding:0px;
	}
	.bottomnav a {
		padding:0px;
	}
}


/* ---------------------------------Accueil --------------------------------------*/
	
#texte_accueil{
	width:100%;
	margin:auto;
    background-repeat:no-repeat;
    background-attachment : fixed;
    background: url(images/ImageAccueil.jpg) no-repeat top center  fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  text-align:center;
  height:400px;
  position:relative;
}
#texte_accueil #contenu{
	position: absolute;
    bottom: 0;
    left: 0;
	width:100%;
	margin:auto;
	background-color:rgba(105,105, 105,0.7);
}

#texte_accueil p, #texte_accueil a{
	font-size:25px;
	color:white;
	font-style: italic;
}
#texte_accueil .orange{
	color:#e46c0a;
}

@media (max-width: 600px) {
	#texte_accueil {
		width:100%;
		height:500px;
	}
	
}
@media (min-height: 800px) {
	#texte_accueil{
		height:500px;
	}
}
#texte_accueil a{
	text-decoration:none;
}

/* -----------------------------------Projets --------------------------------*/
#panel p{
	text-align: justify;
}
.accordion {
	width:100%;
	border-radius:5px;
	background-color:#CECECE;
	padding:5px;
	margin-top:30px;
	margin-bottom:30px;
	cursor:pointer;
	transition: 0.4s;
	text-decoration: none;
	font-size: 1.3em;
	color:white;
}
.accordion:hover {
  color:#e46c0a;
}
.accordion :before {
    content:'\25B6';
    color: white;
    float: left;
    margin-left: 5px;
	margin-right:10px;
	font-size: 1em;
	vertical-align: middle;
}

.accordion.active:before {
    content: '\25BC';
    color: white;
    float: left;
    margin-left: 5px;
	margin-right:10px;
	font-size: 1em;
	vertical-align: middle;
}
.img_projet{
	width:100%;
	margin: auto;
}
#vsm1{
  	display: inline-block;
	width:49%;
	text-align:center;
}
#vsm2{
  	display: inline-block;
	width:49%;
	text-align:center;
	float:right;
}
#img_minicentre{
	width:100%;
	magin:auto;	
}
.miniature{
	width:19%;
	padding:1%;
	cursor:pointer;
}
#img_grandcentre{
	width:100%;
	margin:auto;
	cursor:pointer;
}

/* -------------------------------------------Offre ----------------------------------------*/

#titre_offre1 p{
	font_size:1.2em;
	color: #696969;
}
#texte_offre1{
	color: #696969;
	width : 100%;
}
#titre_offre2 p{
	font-size:1.2em;
}
#titre_offre2 .first{
	font-size:1.4em;
	font-style:italic;
	color:#696969;
}
#titre_offre2 .second{
	color:#e46c0a;
}
#titre_offre2 .third{
	color:#696969;
}
#titre_offre2 .forth{
	font-size:1.1em;
	color:#696969;
}
#titre_offre2 .fifth{
	color:#e46c0a;
}
#texte_offre1 li{
	width:100%;
	margin:auto;
	padding:auto;
}
#images_offre{
	color:#e46c0a;
	display:flex;
}
#images_offre div{
	display: inline-block;
	position:relativ;
	text-align:center;
	height:80px;
	margin:auto;
	cursor:pointer;
}
#texte_offre2 li{
	color:#e46c0a;
	width:100%;
	margin:auto;
	padding:auto;
}
@media (max-width: 600px) {
	#texte_offre1 p,#texte_offre2 li{
		text-align: justify;
	}
	#images_offre img{
		width:50px;
		height:50px;
	}
	#images_offre p{
		font-size:0.8em;
	}
}





/* -------------------------------------------Méthode----------------------------------------*/

#methode_block1{
	width:100%;
	margin:auto;
    background-repeat:no-repeat;
    background-attachment : fixed;
    background: url(images/ImageMethode.jpg) no-repeat top center  fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
    outline: 30px solid white;
    outline-offset: -15px;
	position: relative;
	z-index: 1;
	
	display: flex;
    
}

#methode_block1 div{
	vertical-align:top;
	display:inline-block;
	background-color:rgba(255, 102, 0,0.7);
	width:180px;
	height:400px;
	color:white;
	text-align:center;
	font-weight:bold;
	background-clip: border-box;
	position: relative;
	z-index: 2;
	margin:auto;
	padding:2px;
}

#methode_block1 .first{
	font-size:1.8em;
}
#methode_block1 .second{
	font-size:1.5em;
}
#methode_block1 div:hover{
	background-color:rgba(105,105, 105,0.7);
	z-index:3;
}
#methode_block1 p{
	height:38px;
}
#methode_block1 p:not(:first-child):not(:nth-child(2)):hover{
	color:#e46c0a;
}

#methode_block1 p #infobulle{ 
     position:absolute;
	 width:450px;
     margin-top:25px; 
     margin-left:5px;
     color:#fff; 
     background:rgba(0, 0, 0,1); 
     padding:25px; 
     border-radius:3px;
     transform:scale(0) rotate(-180deg);
     transition:all .25s;
     opacity:0;
	 font-style:oblique;
}
#methode_block1 div:nth-child(4) p #infobulle,#methode_block1 div:nth-child(5) p #infobulle{
	margin-left:-550px;
}
#methode_block1 p:last-child #infobulle{
	margin-top:-100px;
}
#methode_block1 div:nth-child(3) p:nth-child(4) #infobulle{
	margin-left:-250px;
	margin-top:-150px;
}
#methode_block1 div:nth-child(3) p:last-child #infobulle{
	margin-left:-250px;
	margin-top:50px;
}

#methode_block1 p:hover #infobulle, p:focus #infobulle{
	
   transform:scale(1) rotate(0);
   opacity:0.9;
}
@media (max-width: 1050px) {
	#methode_block1 div{
		border-style:solid;
		border-width:1px;
	}
}

@media (max-width: 800px) {
	#methode_block1{
		border-opacity:0;
		display:block;
		
	}
	#methode_block1 div{
		display:block;
		width:80%;
		background-color:rgba(105,105, 105,0.7);
	}
	#methode_block1 p #infobulle{
		display:none;
	}
}

@media (min-height: 800px) {
	#methode_block1 div{
		height:600px;
	}
	#methode_block1 div p{
		height:70px;
	}
}
@media (max-width: 600px) {
	#methode_block1{
		background-image:none;
	}
}




/* ------------------------------------------- Contact ----------------------------------------*/

#miniblocs{
	display:flex;
}
#miniBloc_contact{
	display: inline-block;
	position:relativ;
	text-align:center;
	height:150px;
	margin:auto;
	margin-top:30px;
}
#miniBloc_contact a{
		text-decoration: none;
		color:black;
}
#miniBloc_contact img{
	width:50px;
}
#miniblocs div:last-child{
	cursor:pointer;
}
#map_Contact{
	margin-top:20px;
	width:100%;
	height:400px;
}

@media (max-width: 600px) {
	#miniblocs{
		display:block;
	}
	#miniBloc_contact{
		display:block;
		height:80px;
	}
}

/* ------------------------------------------- QuiSommesNous ----------------------------------------*/
#CV{
	position:relative;
}

#CV #blocGauche,#CV #blocDroite{
	display:inline-block;
	vertical-align:top;
	padding:3px;
}
#blocGauche{
	width:30%;
	border-style:solid;
	border-width:3px;
	border-color:#e46c0a;
}
#blocDroite{
	width:65%;
	margin-left:2%;
}
#CV #blocGauche h3, #CV #blocGauche h2{
	width:80%;
	margin:auto;
	text-align:center;
}
#CV #blocGauche #imageCV{
	width:150px;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
}
#CV h3{
	background-color:#e46c0a;
	color:white;
	text-align:center;
}
#CV #Mot{
	style:italic;
	color:#696969;
}
@media (max-width: 600px) {
	#CV #blocGauche,#CV #blocDroite{
		display:block;
		width:95%;
	}	
}