@charset "utf-8";
body, nav, ul, li, img, a, div {margin:0px;
	padding:0px;}
	
body {
	background-color: rgba(159,34,66,1);
	background-image: url(../ressources/toile5.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	font-family:Verdana, Geneva, sans-serif;

	}
h1{
	font-family:Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	}
figcaption{
	font-size: 1em;	
	font-weight:bold;}
h2{font-size: 0.8em; /* .....légende tableaux............. */	
font-weight:normal;}
h3{font-size: 1.2em; /* .....légende tableaux............. */	
font-weight:normal;}

p{font-size: 1em;
font-weight:normal;}



/* ................Header....................... */	
#menuretractable{display:none;}
header{
	height: 80px;
	width: 100%;
	padding-top:5px;
	position: fixed;
	top: 0;
	left:0;
	background: rgba(0,0,0,0.8);
 	border-bottom:3px solid rgba(255,255,255,0.2);
	font-size: 1.1em;
	font-family:Verdana, Geneva, sans-serif;
} 
#logo{ 
float:left;
width: 25%;
margin:0;
padding:0;

}
#logo img {
height:108px;
margin-left:7%;
}
nav{ 
float:right;
width: 75%;
padding-top:20px;


}
#menu{
	float:right;
	width:90%;
	margin:auto;
	
	}
	
#reseaux { 
position: fixed;
z-index:10;
	top: 2px;
	right:2px;
width:5%;
}
#reseaux img{ 
float:right;
margin-right:0%;}

#menupartenaires{ /* ............partenaires.......... */
position: fixed;
z-index:10;
bottom: 80px;
right:2px;
width:5%;
}

#menupartenaires img{ 
float:right;
margin-right:0%;}


.partenaires{
	/* Menu rétractable >ouvert au survol */
	background: rgba(0,0,0,0.8);
 	border-bottom:3px solid rgba(255,255,255,0.2);
	display:none;}
	

.partenaires a{
text-decoration: none;
font-size: 0.8em;
font-family:Verdana, Geneva, sans-serif;
color:white;}

@media screen and (max-width:480px){.partenaires a{font-size: 0.7em;}}

#menupartenaires li:hover ul{
	display:block;
	position: absolute;
	width:180px;
	padding:5px;
	right:0px;
	top:-30px;
			}
#menupartenaires li ul li {
/* sous Menu VERTICAL (block)  */
    	display:block;
		border-bottom:3px solid rgba(255,255,255,0.2);
		margin-bottom:10px;
     		
}


	
	


/* ..............................................Menu ..............*/
li {
	list-style: none;
}

#menu li{
	display:inline-block; /*......... Menu HORIZONTAL.........*/
	margin-right:8%;
	text-align: center;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:3px solid rgba(255,255,255,0.2);
		
	
	
}


/* .................................liens du menu : état initial puis état hover .........*/
#menu a{
color: #fff; 
text-shadow: 2px 2px 2px #000;
text-decoration:none;
}

#menu a:hover{
color:#893747; 
text-shadow: 4px 4px 4px #000;
text-decoration:none;
}



/* ................Contenu page peintures..... */	


.global{
	display:flex;
	flex-wrap: wrap; /* ..aller à la ligne lorsqu'il n'y a plus de place. */	
	justify-content: space-between; /* .s'étalent et s'espacent. */
	align-items: strech; /* axe secondaire : étiré */
	align-content: space-between;	
	width:80%;
	margin:auto;
	margin-top: 130px;
	margin-bottom:20px;
	padding:30px;
	height:auto;
	background-color:rgba(255,255,255,0.8);}
	
.rubrique {
width:32%;
background-color:rgba(255,255,255,1);
text-align:center;
margin-bottom:5px;
margin-top:5px;
}
.rubriqueintro {
width:100%;
background-color:rgba(255,255,255,1);
text-align:center;
margin-bottom:5px;
margin-top:5px;
}
#entete2{
	width:100%;
}

#entete{
	width:32%;
}

.global .rubrique a{
	text-decoration:none;
	color:rgba(0,0,0,1);}




figure{
	margin:0px;
	padding:0px;
	padding-bottom:10px;}

article img{
max-width:80%;
max-height:300px;
margin-left:10%;
margin-right:10%;
margin-top:20px;
margin-bottom:10px;
transition:all 0.2s;
}
.rubriqueintro img{
max-width:92%;
margin-left:4%;
margin-right:4%;
}
article img:hover{  /* au survol : grossir l'image */
max-width:90%;
max-height:350px;
margin-left:5%;
margin-right:5%;
margin-top:20px;
margin-bottom:10px;
}
.rubriqueintro img:hover{
max-width:96%;
margin-left:2%;
margin-right:2%;
}
	

	

/* ................Responsive Design tablette smartphone*/	
@media screen and (max-width:1100px){
/* Placer les items du menu les uns en dessous des autres */
header{
	height: 70px;
	font-size: 0.9em;

} 
#logo{ 
width: 30%;}
nav{ 
width: 70%;}

#logo img {
height:95px;
margin-left:0%;}

#menu{
		width:100%;
		Float:right;
	
	}
#menu li{
	
	margin-right:0%;
	margin-left:3%;}
#reseaux{ 
width:50%;


}

.global{
		padding-left:20px;
		padding-right:20px;
		
		}
#entete,.rubrique {
width:48%;
}

}




/* ................Responsive Design Smatphone */	
@media screen and (max-width:650px){
/* Gérer la taille du logo */
#menuretractable{display:block;
position:fixed;
z-index:10;
top:60px;
right:2px;}

header{
	height: 70px; /* Menu rétractable >fermé */
}
header:hover{
	height: 218px;/* Menu rétractable >ouvert */
}
header:hover nav{
	display:block;/* Menu rétractable >ouvert au survol */
}
header:hover #menuretractable{
display:none;
}
#logo{
	width:30%;
	margin:auto;
	float:none;
	
	}
nav{ 
display:none;/* Menu rétractable >fermé par défaut */
clear:left;
float: none;
width: 100%;
margin:0px;
padding:0px;
}

#menu li{
	margin:0px;
	width: 100%;
	display:block;
	padding-top:5px;
	padding-bottom:5px;
			
	}


.global{
	display:flex;
	flex-wrap: wrap; /* ..aller à la ligne lorsqu'il n'y a plus de place. */	
	justify-content: space-between; /* .s'étalent et s'espacent. */
	align-items: strech; /* axe secondaire : étiré */
	align-content: space-between;	
	width:80%;
	margin:auto;
	margin-top: 130px;
	margin-bottom:20px;
	padding-left:10px;
	padding-right:10px;
	height:auto;
	background-color:rgba(255,255,255,0.8);}

#entete{
	width:90%;
margin:auto;}
.rubrique {
width:90%;
margin:auto;
margin-bottom:5px;
margin-top:5px;
background-color:rgba(255,255,255,1);
text-align:center;
}
#entete2,.rubriqueintro {
width:90%;
margin:auto;}

}

@media screen and (max-width:400px){
/* Gérer la taille du logo */
#logo{
	width:30%;
	margin-left:20%;
	float:none;
	
	}
	#entete2,.rubriqueintro {
width:90%;
margin:auto;
	}}

/* ................Contenu au clic d'une rubrique page peinture....................... */	

.conteneur{
			display: none;
			position: fixed;
			z-index:20;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color:rgba(255,255,255,0.8)		}
.conteneur:target, #coulures:target, #explosion:target {
    display: block;
}
		
.popup_block{
			background: #fff;
			padding: 2%;
			border: 5px solid #ddd;
			position: relative;
			margin-left:auto;
			margin-right:auto;
			margin-top:2%;
			width: 85%;
			height:90%;
			border-radius: 2%;
					
		}
.btn_close {
			position:absolute;
			z-index:5;
			top:-20px;
			right:-20px;
			cursor: pointer;
				
		}
.navprecedent{position:absolute;
			z-index:5;
			bottom:0%;
			left:2%;
			cursor: pointer;
			}
.navsuivant{position:absolute;
			z-index:5;
			bottom:0%;
			right:2%;
			cursor: pointer;
			
		}



		
.diaporama{
	width: 90%;
	height: 100%;
	margin: auto;
	overflow:hidden;
	position:relative;
	}
		
		
.images{
	position:absolute;
	top: 0;               /*on le positionne précisément dans ...*/
    left: 0%; 
	width:400%; /*Valeur à modifier 100xnbr d'imgs (ex: 100%x4images=400%)...*/
	height:100%;
	display:flex;
	justify-content: flex-start;
	align-items: center; /* axe secondaire : étiré */
	align-content: space-between;
			
	margin:0%;
	padding:0%;
	
		}
.images figure{
		position: relative;
		width:25%;/*Valeur à modifier 100/nbr d'imgs (ex: 100%:4images=25%)*/
		height:100%;
		margin:0%;
		padding:0%;

    display: flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
	
	 
}

	
#imgs {
	width:400%;}
#imgs figure{
	width:25%;}
	
#imgs1 {
	width:200%;}
#imgs1 figure{
	width:50%;}
	
	#imgs2 {
	width:500%;}
#imgs2 figure{
	width:20%;}
	
#imgs3 {
	width:900%;}
#imgs3 figure{
	width:11.11%;}
	
#imgs4 {
	width:500%;}
#imgs4 figure{
	width:20%;}
	
	#imgs5 {
	width:1200%;}
#imgs5 figure{
	width:8.333%;}
			
	#imgs6 {
	width:700%;}
#imgs6 figure{
	width:14.28%;}
	
	#imgs7 {
	width:1300%;}
#imgs7 figure{
	width:7.692%;}
	
	#imgs8 {
	width:300%;}
#imgs8 figure{
	width:33.333%;}



	#imgs40 {
	width:3100%;}
#imgs40 figure{
	width:3.226%;}
	
	#imgs50 {
	width:100%;}
#imgs50 figure{
	width:100%;}
	
		#ascensseur {
	width:auto;
	overflow:auto;}


		
		
.images figure img{
	position: relative;
		max-height:90% !important;
		max-width: 99%;
		
			}
	
figcaption p
{
		
		width:100%;
		margin:auto;
		text-align:center;
		max-height:8%;
		
		padding-bottom:40px;
		padding-top:10px;
		
		
		}
		
		

/* ................Responsive Design Smatphone */
	@media screen and (max-width:480px){

figcaption p
{
		
		font-size: 0.9em;
font-weight:normal;
		
		}	
	
}


/* ................Contenu page Demarche..... */
#entetedemarche{
	width:32%;
	}

.demarche{
width:28%;
background-color:rgba(255,255,255,1);
text-align:left;
vertical-align:center;
margin-bottom:5px;
margin-top:5px;
padding:2%;
}

.demarche figcaption{
text-align:center;

}

#cv{
	color:rgba(0,102,153,1);
	text-decoration:underline;}

/* ................Responsive Design tablette smartphone*/	
@media screen and (max-width:780px){
/* Placer les items du menu les uns en dessous des autres */
#entetedemarche{
	width:49%;
	
	}
	
.demarche{
width:43%;
margin:auto;
background-color:rgba(255,255,255,1);
text-align:left;
vertical-align:center;
margin-bottom:5px;
margin-top:5px;
padding:2%;
}}

/* ................Responsive Design Smatphone */	
@media screen and (max-width:900px){
/* Gérer la taille du logo */
.demarche{
width:86%;
margin:auto;
background-color:rgba(255,255,255,1);
text-align:left;
vertical-align:center;
margin-bottom:5px;
margin-top:5px;
padding:2%;
}
#entetedemarche{
	width:90%;
	margin:auto;
	}
	}
	
	
/* ................Contact */	
.contact  {
width:45%;
background-color:rgba(255,255,255,1);
text-align:left;
margin-bottom:20px;
margin-top:5px;
padding:2%;
}
.contact p {
font-size:0.9em;
text-align:center;}
.contact textarea {
width:100%;
background-color:rgba(119,135,189,1);}
 #envoi {
background-color:rgba(119,135,189,1);
padding:5px;}

mark, #textfield{
	display:inline-block;
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
background-color:rgba(187,64,88,1);
}

.contact img{
max-width:90%;
max-height:300px;
margin-left:5%;
margin-right:5%;
margin-top:20px;
margin-bottom:10px;
}
.contact img:hover{  /* au survol : grossir l'image */
max-width:90%;
max-height:300px;
margin-left:5%;
margin-right:5%;
margin-top:20px;
margin-bottom:10px;
}
/* ................Responsive Design Smatphone */	
@media screen and (max-width:480px){
/* Gérer la taille du logo */
.contact  {
width:86%;
margin:auto;
background-color:rgba(255,255,255,1);
text-align:left;
margin-bottom:20px;
margin-top:5px;
padding:2%;
}}
@media screen and (max-width:780px){
.contact p {
font-size:0.8em;}

	}
	
/* ..........Copyright......... */	
#copyright{
	font-size:0.7em;
	background:rgba(255,255,255,0.8);
	width:80%;
	margin:auto;
	text-align:center;
	padding-left:30px;
	padding-right:30px;
	}
	@media screen and (max-width:780px){
/* Placer les items du menu les uns en dessous des autres */
#copyright{
	padding-left:20px;
	padding-right:20px;
	}}

	@media screen and (max-width:480px){
/* Gérer la taille du logo */
#copyright{
	font-size:0.6em;
	padding-left:10px;
	padding-right:10px;
	}}
	
	
	
/* ..........Actualité......... */		
.actu{
	margin-top: 20px;
	margin-bottom:20px;
	}
	
.conteneur2{
			position: fixed;
			z-index:20;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background:rgba(0,0,0,0.5);		}
.popup_block2{
			background:rgba(0,0,0,0.5);
			padding: 2%;
			border: 5px solid #ddd;
			position: relative;
			margin-left:auto;
			margin-right:auto;
			margin-top:2%;
			width: 85%;
			height:90%;
			border-radius: 2%;}
			


#misenavant{
	margin-top:20px;
	margin-bottom:20px;
	}
	
#lienneutre{color:black;
text-decoration:none;}