@import url('https://fonts.googleapis.com/css2?family=Asimovian&family=Noto+Sans+Pahawh+Hmong&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

/*---------------------------------------menu-burger--------------------------*/

	#burger{
	width: 100%;
	font-size: 20px;
	position: absolute;
/*	position: absolute = passe par dessus la page;*/
	left: 0;
	top: 0;
	display: none;
}

#open,#close{
	height: 45px;
	font-size: 50px;
	position: absolute;
	z-index: 1;
	right: 20px;
	color: black !important;
}

#burger nav{
	text-align: center;
	background: black;
	transition: 1s;
}

#burger a{
	display: block;
	padding: 10px;
	text-decoration: none;
	color: white;
}

/*fait apparaitre ou disparaitre le bouton*/
#burger:target #open, #burger:not(:target) #close{
	display: none;
}

#burger:target #close{
	color: white !important;
}


#burger:not(:target) nav{
	transform: translate3d(0px, -250px, 0px);
}


/*----------------------------------fin-menu-------------------------------*/

header{
/*	padding: 40px 0px;*/
	/*ou*/
	min-height: 100px;
	display: flex;
	align-items: center;
}

header,footer{
		background-color: #e4e3e1;
}

.contenu{
/*class*/
	width: 1000px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.logo{
/*ID*/
	width: 155px;
	height: 33px;
	background:url(../images/logo.webp) ;
	display: block;
}

header nav{
	display: flex;
	gap: 40px;
}

header nav a{
	font-size: 1.2rem;
/*	font-size: 1.2rem où 1rem est égale à la taille de base, cet à dire 16px,(donc 2rem = 32px)
 utile pour le responsif(version tel);*/
 transition: 0.5s;
}

a{
	text-decoration: none;
	color: black;
}

header nav a:hover{
	color:#dc7f53;
}

.active{
	color:#dc7f53;
}

#bannière-accueil{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86vh;
/*	height: 86vh; où vh équivot à un pourcentage*/
	background: url(../images/fond.webp) center/cover no-repeat;
	text-align: center;
}

#bannière-accueil h1{
	font-size: 4.5rem;
	font-weight: 600;
/*	font-weight: 600 = graisse;*/
	line-height: 1.3;
/*	line-height: = interligange;*/
}

#produits{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
/*ce ID prend en compte tous les h2 de toutes les pages*/


#produits h2{
	margin: 0;
}

section,footer{
	padding: 30px 0px;
}

h2{
	font-size: 3rem;
	font-weight: 500;
	text-align: center;
	margin-bottom: 40px;
}

.bton{
	border: thin solid black;
/*	bordure: thin(fin) solid(entier) black;*/
	padding: 12px;
	color: black;
}

.bloc-img1{
	background: url(../images/bloc1.webp) center/cover no-repeat;
}

.bloc-img2{
	background: url(../images/bloc2.webp) center/cover no-repeat;
}

.bloc-img3{
	background: url(../images/bloc3.webp) center/cover no-repeat;
}

.bloc-img1,.bloc-img2,.bloc-img3{
	height: 330px;
	border-radius: 15px;
}

#nouveautés p{
	text-align: center;
	margin-top: 20px;
}

#mission h2{
	text-align: left;
}

#mission p{
	margin-bottom: 40px;
}

#mission-img {
	height: 480px;
	background: url(../images/bloc4.webp) center/cover no-repeat;
	border-radius: 50%;
}

#mission div{
	flex-basis: 0;
	flex-grow: 1;
}

#savoir{
	background-color: #dc7f53;
	color: white;
}

#savoir .bton{
	color: white;
	border-color: white;
}

#savoir h2{
	margin: 0;
}

footer nav{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
	padding-left:20px ;
}

footer p{
	text-align: right;
}

footer img{
	width: 40px;
}

.social{
	display: flex;
	gap: 15px;
	justify-content: end;
	margin-top: 15px;
}

/*-----------------------------------------a propos----------------------------------------------*/

/*.bannière{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 480px;*/
}

#bannière-apropos{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45vh;
/*	height: 86vh; où vh équivot à un pourcentage*/
	background: url(../images/fond-propos.webp) center/cover no-repeat;
	text-align: center;
	}
	
#bannière-apropos h1{
	font-size: 4.5rem;
	font-weight: 400;
/*	font-weight: 600 = graisse;*/
	line-height: 1.3;
/*	line-height: = interligange;*/
	color: white;
}

.existe p{
	margin-bottom: 40px;
	text-align: left;

}

/*.existe div{
	flex-basis: 0;
	flex-grow: 1;
}*/

/*------------------------------------------nos produits-----------------------------------------*/

#bannière-nosproduits{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45vh;
/*	height: 86vh; où vh équivot à un pourcentage*/
	background: url(../images/fond-produit.webp) center/cover no-repeat;
	text-align: center;
	}
	
#bannière-nosproduits h1{
	font-size: 4.5rem;
	font-weight: 400;
/*	font-weight: 600 = graisse;*/
	line-height: 1.3;
/*	line-height: = interligange;*/
	color: white;
}

#produit-img1{
	width: 480px;
	height: 480px ;
	background: url(../images/produit1.webp) center/cover no-repeat;
	border-radius: 15px;
}

.test{
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	background-color: #e4e3e1;
}

#brac h2{
	text-align: left;
}

#brac p{
	margin-bottom: 40px;
}

h2 .pro{
	font-size: 2rem;
	font-weight: 400;
	margin-bottom: 20px;
	text-align: left;
}

/*------------------------------------------contact-----------------------------------------*/

#bannière-contact{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45vh;
/*	height: 86vh; où vh équivot à un pourcentage*/
	background: url(../images/fond-contact.webp) center/cover no-repeat;
	text-align: center;
	}

#bannière-contact h1{
	font-size: 4.5rem;
	font-weight: 400;
/*	font-weight: 600 = graisse;*/
	line-height: 1.3;
/*	line-height: = interligange;*/
	color: white;
}

/*.icone-img1{
	background: url(images/phone.webp) center/cover no-repeat;
}*/


p{
	margin-bottom: 20px;
}

.contenu div{
	flex-basis: 0;
/*	réinitialise les marges*/
	flex-grow: 1;
}

.haut{
	align-items: start;
}

.img-pdt{
	height: 400px;
	border-radius: 15px;
}

#b{
	background: url(../images/produit1.webp) center/cover no-repeat;
/*	cover = l'intégraliter de la div*/
}

/*.gout-pdt{
	gap: 150px;
}*/

.col-contact{
	text-align: center;
/*	text-align: center;marche aussi pour les images*/
}

.col-contact img{
	width: 75px;
}

label,input,textarea{
	width: 100%;
}

input,textarea{
	margin-bottom: 20px;
}

input{
	height: 30px;
}

textarea{
	height: 100px;
}

.bton-envoie{
	width: 150px;
	height: 50px;
	background-color: #dc7f57;
	color : white;
	border: 0;
	font-size: 1.1rem;
}

.img-form{
	text-align: right;
}

.img-form img{
	border-radius: 15px;
	height: 650px;
}

#formu h2{
text-align: left;
}

.heures{
	text-align: center;
}

hr{
	margin: 10px 0px;
}

#horaires .contenu{
	gap: 0;
}

/*-----------------------------------responsive------------------------------------------*/

@media screen and (max-width:1000px){

	#burger{
		display: block;
	}

	.contenu{
		width: 100%;
		flex-direction: column;
		padding: 0 20px;
	}

	#bannière-accueil{
	height: 40vh;
/*	height: 86vh; où vh équivot à un pourcentage*/
	
	}

	#bannière-accueil h1,h2{
	font-size: 2rem;
	}

	header nav{
		display: none;
	}

	#mission,#mission h2{
		text-align: center;
	}

	#mission-img{
		width: 250px;
		height: 250px;
	}

	.contenu div{
		flex-basis: auto !important;
/*		flex-basis: auto !important = oblige a le passer devant;*/
	}

	/*#savoir.contenu{
		padding: 40px;
	}*/

	footer,footer p{
		text-align: center;	
	}

	.social{
		justify-content: center;
	}

	footer nav{
     padding-left: 0px;
    }

/*    --------------------------essaie autres pages responsive-----------------------------*/
	
	#banniere-nosproduits{
		height: 40vh;
		}
		
	#banniere-nosproduits h1{
		font-size: 2rem;
	}

	#pro{
		text-align: center;
	}
/* ----------------------------------*/
	/*p{
		width: 250px;
		height: 250px;
	}
*/

	/*.img-pdt{
		width: 90%;
		height:300px
	}*/

	/*.gouts-pdt{
		gap:30px
	}*/

	#moderna, #donna{
		order: 0;
/*		dépend du display flex*/
	}

	#banniere-contact{
	height: 40vh;
	}

	#banniere-contact h1{
	font-size: 2rem;
	display: none;
	}

	#horaires .contenu {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 40px;
		}
	}
/*[media queri]

--------------------*/