@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; box-sizing: border-box }
html, body { height: 100%; }
#conteneur { height: auto; overflow: hidden; }

body, nav, header, ul, li, img, a, div, section, article, figure {margin:0px;
padding:0px;}

strong{font-weight:bold;}	

body {
	background-color: rgba(190,213,235,1);
	background-image: url(ressources/visu2b.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	font-family:Verdana, Geneva, sans-serif;

	}
#projet{background-color:rgba(255,234,234,0.8);}
	
footer img{position:fixed;
bottom:50px;
right:20px;
}
footer a{position:fixed;
bottom:10px;
right:20px;
}
footer a {
	background-color:rgba(51,51,51,0.5);
	color:rgba(255,255,255,1);
font-size: 0.8em;}

	

h1{
	font-family:"police2";
	font-size: 1.8em;
	font-weight:bold;
	}

h3{font-size: 0.8em; /* .....légende tableaux............. */	
font-weight:bold;}
figcaption{
	font-size: 1em;	
	font-weight:bold;
	color:rgba(255,255,255,1);
	text-align:center;}
	



header{
	height:80px;
	margin-bottom:20px;
	
}

@font-face{
font-family:"police1"; 
src:url('ZAMRACK-Regular.ttf');
}


@font-face{
font-family:"police0"; 
src:url('kinder Boy font.otf');
}
@font-face{
font-family:"police2"; 
src:url('Champagne & Limousines Bold.ttf');
}
@font-face{
font-family:"police3"; 
src:url('Champagne & Limousines.ttf');
}

#logo{
	font-family:"police0"; 
	color:#893747;	
	font-size: 2.5em;
	float:left;
text-align:center;
width:20%;
padding-top:30px;
}
h2{font-family:"police1";   /* .....légende tableaux............. */
color:#893747;	
font-size: 1.5em;
}
#dina{font-family:"police1";
color:#893747;}
article{font-size: 1.2em;
font-weight:normal;
font-family:"police3"; }

#conteneur {
	margin-top:80px;
	padding:0px;
	width:80%;
	background-color:rgba(255,255,255,0.6);
		}

#titrerea{
	height:50px;
	padding-top:5px;
	text-align:center;
	
}
section{
	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:100%;
	margin:auto;
	height:auto;
	}

.artgauchevisu{
	margin-left:0px;
	
	margin-bottom:0px;
	padding:2%;
	width:56%;
	background-color:rgba(204,204,204,1);
	
	
	margin-bottom:20px;}
.artdroitvisu{
	margin-right:0px;
	margin-bottom:0px;
	padding:2%;
	width:56%;
	margin-bottom:20px;
	background-color:rgba(204,204,204,1);}
	.artgauchevisu figure, .artdroitvisu figure{
	margin:0px;
}
.artgauchevisu figure img, .artdroitvisu figure img{
	margin:0px;
	width:100%;}

	
.artdroittexte{
	
	margin-right: 0px;
	padding: 2%;
	margin-bottom: 0px;
	width: 44%;
	margin-bottom: 20px;
	vertical-align: middle;
		}
.artgauchetexte{
	
	margin-left: 0px;
	padding: 2%;
	margin-bottom: 0px;
	width: 44%;
	margin-bottom: 20px;
	vertical-align: middle;
		}
.arttexte{
	
	margin-left: 0px;
	padding: 2%;
	margin-bottom: 0px;
	width: 96%;
	margin-bottom: 20px;
	vertical-align: middle;
		}
		
		
		
#projet{background-color:none;	}
		

	
/* ..............................................Menu ..............*/
li {
	list-style: none;
	font-weight:bold;
	font-size: 1.2em;
	font-weight:bold;
	font-family:"police2"; 
	
			}

#menu li{
	display:inline-block; /*......... Menu HORIZONTAL.........*/
	margin-right:3%;
	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:#893747; 
text-decoration:none;
}

#menu a:hover{
color:rgba(19,45,48,1);
text-decoration:none;
}

nav{ 
float:right;
text-align:right;
width:80%;
padding-top:20px;
padding-right:0px;


}

	
#menuretractable{display:none;}
	
/* ................Responsive Design tablette smartphone*/	
@media screen and (max-width:800px){
/* Placer les items du menu les uns en dessous des autres */

#menu li{
	
	margin-right:0%;
	margin-left:3%;}
	
footer a {
font-size: 1em;}
.artgauchevisu, .artdroittexte, .artdroitvisu, .artgauchetexte{
	
	width:100%;}
	
.artgauchevisu,  .artgauchetexte{
	margin-bottom:0px;}


/* ................Responsive Design Smatphone */	
@media screen and (max-width:800px){
/* Gérer la taille du logo */
#menu{
		width:100%;
		Float:right;
		position:fixed;
		background-color:rgba(255,255,255,0.7);
		padding-right:4%;}
		
#logo{
	position: absolute;
	top:0px;
	left:5px;
	font-size: 2em;}

#menuretractable{display:block;
position:fixed;
z-index:10;
top:45px;
right:5%;}

header{
	height: 100px; /* Menu rétractable >fermé */
}
header:hover{
	height: 300px;/* Menu rétractable >ouvert */
}
header:hover nav{
	display:block;/* Menu rétractable >ouvert au survol */
}
header:hover #menuretractable{
display:none;
}

nav{ 
display:none;/* Menu rétractable >fermé par défaut */
clear:left;
position: absolute;
	top:0px;
	right:5px;
float: none;
width: 70%;
margin:0px;
padding:0px;
}

#menu li{
	margin:0px;
	width: 100%;
	display:block;
	padding-top:5px;
	padding-bottom:5px;
			
	}
.artgauchevisu, .artdroittexte, .artdroitvisu, .artgauchetexte{
	
	width:100%;}
	
.artgauchevisu,  .artgauchetexte{
	margin-bottom:0px;}
figcaption {display:none;}


footer img, footer a{position:fixed;
right:5%;
}

footer a {
font-size: 1em;}
}