body{
    background-color: black;
    margin: 0; 
}

/*  Entete ------------------------------------------------*/
.entete{
    background-image: url("img/background02.avif");
    background-size: 100%;
	min-height: 8em;
    padding-top: 6em;
    padding-left: 15%;
	letter-spacing: 0.4em;
    }
.entete h1{
    color:#efefef;
    margin: 0;
    font-family: 'dosis', sans-serif;
	font-size: 40px;
}
.entete h2{
    color: #2eb7bd;
    margin: 0;
    font-family: 'dosis', sans-serif;
	font-size: 16px;
}
/* -------------------------------------------------------*/
/* Par ici le Menu !--------------------------------------*/
nav{
    background-color: #2eb7bd;
    font-family: 'Abel', sans-serif;
    font-size: 16px;
}

nav ul{
    list-style-type: none;    
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

nav ul li{
    float: left;
}

nav a{
    color: black;
    text-decoration: none;
    display: block;
    padding: 1em;    
}
.sous {
	display:none;
}

/* ------------------------------------------------------*/
/* Menu en div !-----------------------------------------*/
.sousnav{
	width:100%;
	display:flex;
	justify-content:space-around;
}
.sousnav p{
    font-family: 'Open Sans', sans-serif;
}
/* ------------------------------------------------------*/
/* Culte du corp-----------------------------------------*/

.corp{    
    background-color: #1C1C1C;
    min-height: 20em;
    padding-top: 3em;
	padding-bottom: 3em;
	text-align:justify;  
    text-justify:auto;
}

.corp h2{
    text-align: center;
    color: #efefef;
    font-family: 'Dosis', sans-serif;
}
.corp h3{
    text-align: center;
    color: #2eb7bd;
    font-family: 'Dosis', sans-serif;
}

.corp a{
    text-decoration: none;
    color: #2eb7bd;
}
.miniature{
	display:none;
}
.miniature img{
	max-width:100%;
	max-height:100%;	
}

.text{
    color: #efefef;
    display: flex;
    justify-content: center;
}

.text p{
    width: 70%;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.image{
    height: 250px;
    width: 250px;
}

.image img {
	max-width:100%;
	max-height:100%;
}
.miniaturetexte{
    height: 250px;
    width: 250px;	
}
.miniaturetexte img{
	max-width:100%;
	max-height:100%;	
}

.lien {
	float:left;
	height:35px;
	width:35px;
	margin:10px;
	padding-top:20px;
}
.lien img {
	max-width:100%;
	max-height:100%;
}

.vendeur {
	float:left;
	background-color:white;
	height:50px;
	width:100px;
	margin:10px;
}
.vendeur img {
	max-width:100%;
	max-height:100%;
}

/*--------------------------------------------------------*/
/* zoom Image --------------------------------------*/
.zoom{
	background-color:black;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content:center;
}

.zoombouton{
	height:60px;
	width:60px;
	 flex: 1 0 100%;
}

.zoombouton img{
	max-width:100%;
	max-height:100%;
}

/* -------------------------------------------------------*/
/* Bare qui ne sert à rien -------------------------------*/
.barre{
    background-color: #2eb7bd;
    height: 2em;
}

/* --------------------------------------------------------*/
/* A MOI--------------------------------------------------*/
.copyright{
	background-image: url("img/background02bis.avif");
    background-size: 100%;
	min-height: 12em;
    text-align: center;
}

.copyright p{    
    margin: 0;   
	padding-top:50px;
    color: #efefef;
	font-family: 'dosis', sans-serif;
}

.copyright a{
	text-decoration: none;
    color: #2eb7bd;
}
/* ------------------------------------------------------*/
/*Test ------------------------------------------------*/

@media all and (min-width: 1024px) {  
	nav a:hover{
		color: ghostwhite;
	}

	.sous{
		position: absolute;
		background-color: #5fdde3;
		display: none;
	}

	nav > ul li:hover .sous{
		display: flex;
		flex-flow: column wrap; 
	}
}

@media all and (max-width: 1024px) {
	@media screen and (orientation: portrait) {	
		.entete h1{
			font-size: 60px;
		}
		.entete h2{
			font-size: 28px;
		}
		nav{
			font-size:30px;
		}
		.corp h2{
			font-size:50px;
		}
		.corp h3{
			font-size:40px;
		}		
		.text p{
			width: 85%;
			font-size:40px;
		}
		.image{
			height: 400px;
			width: 400px;
		}
		.miniature{
			display:inline-block;
			margin-left:30%;
			height: 400px;
			width: 400px;
		}
		.miniaturetexte img{
			max-width:100%;
			max-height:100%;	
		}
		.miniaturetexte{
			display:none;
		}
		.vendeur {
			height:100px;
			width:200px;
		}
		.lien {
			height:65px;
			width:65px;
		}
		.sousnav p{
			font-size:28px;
		}
	}
}