body {
	padding: 0 auto;
	color: #000;
	font-family: Arial, sans-serif;
	background-image: url(/images/fond-v.webp);
	background-repeat:repeat-y;
	background-position: center;
	background-size: cover;
	height: 100vh;
	width: 100vw;
}
.accueil {
	background-image: url(/images/vignes-accueil.webp);
	background-repeat: no-repeat;
}
main {
	font-size:medium;
	padding: 0;
	margin: 0 auto;
	width:100%;
	max-width:1200px;
}

#logo{  /*	positionne la boite pour le logo sur la page d'accueil; */
	display:block;
	position:fixed;
	height:40vh;
	width:50vw;
	left:0vw;
	padding:2vh 2vw 2vh 2vw;
	border: 0;
}
#logo img {max-height: 50vh;
	max-width: 100%;
	height: auto;
	width: auto;
	margin: 0 auto;
	display: block;
	border-radius: 20%;
}
#titre {
	display: block;
	position: fixed;
	height: 10vh;
	left: 0vw;
	width: 50vw;
	top: 50vh;
	padding: 2vh 2vw 2vh 2vw;
	text-align: center;
	font-family: 'Caveat', cursive;
	color: #003332;
}
	#titre h1 {
		font-size: xx-large;
		font-weight: bolder;
	}

#menu-accueil{  /*	positionne la boite pour le menu sur la page d'accueil; */
	display:block;
	position:fixed;
	height:40vh;
	top:30vh;
	width:48vw;
	left:52vw;
	padding:2vh 2vw 2vh 2vw;
	font-family: 'Caveat', cursive;
	font-size: larger;
	color:rgb(53, 4, 4);
	}
#menu-accueil ul {
	list-style-type: none;
	font-size:x-large;
	margin: 0;
	padding: 0;
}

#menu-accueil a {
	display: block;
	cursor: pointer;
	color: #003332;
	padding: 0.1vh 15px;
	text-decoration: none;
	background-image: url(/css/pucebleue.gif);
	background-repeat: no-repeat;
	background-position:left;
}

#menu-accueil a:hover {
	color: #888;
	background-image: url(/css/pucerouge.gif);
}
#motto{
	display:block;
	position:fixed;
	height:fit-content;
	width:46vw;
	top: 60vh;
	padding-left:1vw;
	font-family: 'Caveat', cursive;
	font-size: 200%;
	color: #003332;
	padding:2vh 2vw 2vh 2vw;
	text-align: center;
}


header {
	width: 100%;
	position: relative;
	text-align: center;
	color: white;
	display: inline-flex;
	line-height: 0.1;
	font-size: 0;
}
.headlogo {
	float: left;
	width: 12.5%;
	height: 100%
}
.headlogo img{
	object-fit: scale-down;
	max-width: 100%;
	max-height: auto;
	border-radius: 1vw;
}
.headband {
	float: right;
	padding: 0;
	width: 87.5%;
	max-width: 1050px;
}
.headband img{
	object-fit: cover;
	max-width: 100%;
	max-height: auto;
	border-radius: 1vw;
	position: relative;
}	

article {
	width: 94%;
	padding: 3%;
	margin: 0 auto;
}
h1 {
	position: absolute;
	top: 0;
    left: 0;
    width:100%;    
    height:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	font-size: xx-large;
	margin: 0;
}
h2	{
	padding: 0 0 0 75px;
	font-size: large;
	color: #223F4E;
}
.fauxtitre {
	padding: 0 0 0 25px;
	font-size: x-large;
	color: #223F4E;
}
h3 {
	padding: 0 0 0 75px;
	font-size: medium;
	color: #223F4E;
}
.ibouteille {
	max-width:10%;
	float:left;
	padding-right: 10px;
	max-height: 250px;
}
.i20l {
	max-width:20%;
	float:left;
	padding-right: 10px;
}
.i40r {
	max-width:40%;
	float:right;
	padding-left: 10px;
}
.i90c {
	max-width:90%;
	display:block;
	margin: auto;
	border-radius:5px;
}
.right {	
	clear: right;
}
.left {
	clear: left;
}
.clear {
	clear: both;
}
.carte{
	width: 450%;
	height: auto;
	display: block;
	margin: 0 auto;
}
footer {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto auto;
	grid-gap: 10px;
	text-align: center;
	padding: 1vh 0;
}

@media all and (max-width: 720px) /*	pour les écrans étroits téléphone portrait; */
{
	main {
	font-size:small;
	}
	#titre {
		width: 90vw;
	}
	#motto {
		width:auto;
	}
	#menu-accueil{ 
		height:30vw;
		top:10vw;
	}
	h1 {
		font-size: large;
	}	
	h2 {
		font-size: medium;
		padding: 0 0 0 0;
	}
	/*header {
	height: 50px;}

	.headlogo {
	float: left;
	width: 50px;
	height: 50px;
}
	.headlogo img{
		width: 50px;
		height: 50px;
	}

	.headband {
		max-width: calc(100vw - 50px);
		height: 50px;
	}
	.headband img{
		visibility: hidden;
		/*width: calc(100vw - 50px);
		height: 50px;
	}*/
	article {
	width: 98%;
	padding: 1%;
	margin: 0 auto;
	}

}
@media all and (max-height: 600px) /*	pour les écrans étroits téléphone paysage; */
{
	.logo {max-height: 25vh;
	border-radius: 20%;
	}
	#menu-accueil{ 
		height:20vw;
		top:0vw;
	}
	#menu-accueil ul {
	font-size:medium;
	margin: 0;
	padding: 0;
}
	#motto {
		font-size: 120%;
		padding:2vh 2vw 2vh 2vw;
	}
	#titre h1 {
		font-size: large;
	}
	h2 {
		font-size: small;
		padding: 0 0 0 0;
	}
	h3 {
		font-size: x-small;
		padding: 0 0 0 0;
	}	
}