@import url('https://fonts.googleapis.com/css2?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');

/*style.css CSS3*/


* {
	margin:0;
	padding:0;
	box-sizing:border-box;
  	font-family:"Poppins", sans-serif;
  	font-weight: 400;
 	font-style:normal;

}

/*flèche scroll*/

.scroll-haut {
	position:fixed;
	bottom:20px;
	right:20px;
	padding: 10px;
	background-color:white;
	color:black;
	border-radius:15px;
	font-size:30px;
	border: thin solid black;
	animation:fade;
	animation-timeline:scroll(y root);

}

@keyframes fade{
	0%{opacity:0;}
	25%{opacity:1;}
}



/*fin flèche scroll*/

/*Menu burger*/

#burger {
	position: absolute;
	width:100%;
	font-size:20px;
	right:0;
	top:0;
	display:none;
}

#burger .nav {
	text-align:center;
	background:lightgrey;
	width:100%;
	padding:20px 0;
	transition:transform 1s;

}

#open, #close {
	position:absolute;
	height:44px;
	font-size:50px;
	right:20px;
	z-index:1;
}

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

/*Fait disparaitre ou apparaitre le button*/

#burger:target #open, #burger:not(:target) #close {
	display:none;
}

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

#burger:target .nav {
		transform:translate3d(0,0,0);
}

/*fin menu burger*/

header {
	background-color:rgb(228,227,225) ;
	padding:40px;
}

.container {
	width:1000px;
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap: 50px;
}

header nav a{
	color:black;
	font-size:18px;
	text-decoration: none;
	padding:20px;
	transition: 0.5s;
}

header nav a:hover {
	color:rgb(220,127,83);
}

.menu-actif {
	color:rgb(220,127,83);
}

#banner {
	background:url(images/fond.jpg) center/cover;
	/*background-position: center;
	background-size: cover;*/
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;

}

#banner h1 {
	font-size:72px;
	font-weight:600;
	text-align:center;
}


h2  {
	font-size:50px;
	font-weight:400;
/*	margin-top:40px;
	margin-bottom:40px;*/
	margin:40px 0;

}

h3 {
	font-size:28px;
	font-weight:400;
	margin: 40px 0 40px 0;
}
#product h2, #new h3{
	text-align:center;
}

#gallery {
	display:flex;
	gap:10px;
	margin-bottom:40px;
}

#gallery img {
	width:50%;
}

.button {
	border: thin solid black;
	text-decoration: none;
	color: black;
	padding:15px;
}

#product {
	display:flex;
	flex-direction:column;
	align-items:center;
}

.col {
	text-align: center;
}

.col-img {
	height:330px;
	width:100%;
	border-radius:15px;
	margin-bottom:20px;
}

.img1 {
	background:url(images/bloc1.jpg) center/cover;
}

.img2 {
	background:url(images/bloc2.jpg) center/cover;
}

.img3 {
	background:url(images/bloc3.jpg) center/cover;
}

#mission {
	margin-top:40px;
}

#mission article {
	display:flex;
	flex-direction: column;
	align-items:start;
	width:42%;
}
#mission p {
	margin-bottom: 20px;
}

#mission img {
	border-radius:50%;
	height:450px;
	width:450px;
}

#contact {
	background-color:rgb(220,127,83);
	padding:50px;
	margin-top:80px;
}

h4 {
	font-size:48px;
	color:white;
	font-weight:500;
}

.white-button {
	color:white;
	border-color:white;
	width:220px;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.white-button:hover {
	font-size:18px;
}

footer {
	background-color: rgb(228,227,225);
	padding:50px;
}

footer a {
	color:black;
	text-decoration:none;
	display:block;
	padding:10px 20px;
	font-size:17px;
/*	font-weight:;*/
}

address {
	font-style:normal;
	text-align:right;
}

address img {
	width:30px;
	margin-left:6px;
}
address a {
	padding:0;
	display:inline;
}

/*special a propos*/

#banner2 {
	background:url(images/fond-propos.jpg) center/cover;
}

.banniere {
	display:flex;
	justify-content:center;
	align-items:center;
	height:50vh;
}

.banniere h1 {
	font-size:72px;
	font-weight:400;
	text-align:center;
	color:white;
}

.banniere h1::first-letter{
	text-transform:capitalize;
}

#propos p {
	margin-bottom:30px;
}

#propos article {
	flex-basis:0;
	flex-grow:2;
}

.aligne-haut {
	align-items:start;
}

/*part product*/

#banner3 {
	background:url("images/fond-produit.jpg") center/cover;
}

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

.img-pdt1 {
	background:url("images/produit1.jpg") center/cover;
}

.img-pdt2 {
	background:url("images/produit2.jpg") center/cover;
	order:-1;
}

.img-pdt3 {
	background:url("images/produit3.jpg") center/cover;
}

.img-pdt4 {
	background:url("images/produit4.jpg") center/cover;
	order:-1;
}

.txt-pdt {
	width:45%;
}
.grey {
	background-color:rgb(228,227,225);
}

.section-pdt {
	padding:30px;
}

/*.reverse {
	flex-direction:row-reverse;
}*/

/*part contact*/

#banner4 {
	background:url(images/fond-contact.jpg) center/cover;
}

.tocenter {
	text-align: center;
}

.contact-col {
	flex-basis:0;
	flex-grow:1;
}

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

iframe {
	margin:20px 0;
	border-radius:15px;
}

/*part form*/

input{
	width:100%;
	margin-bottom:20px;
	height: 30px;
}

textarea {
	width:100%;
	margin-bottom:20px;
}

.button-send {
	width:150px;
	height:50px;
	background-color:rgb(220, 127, 83);
	color: white;
	border:none;
	font-size: 16px;
	cursor:pointer;
}

.img-contact {
	border-radius:15px;
}

/*horaires*/

hr {
	margin:10px 0;
}
.heures {
	flex-basis:0;
	flex-grow:1;
}

.no-gouttiere {
	gap:0;
	margin-bottom:40px;
}


@media screen and (max-width:1000px){
	#burger {
		display:block;
	}

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

	#banner {
		background-size:270%;
		background-repeat:no-repeat;
		height:350px;
	}

	#banner h1 {
		font-size:30px;
	}

	#mission article {
		width: 100%;
		align-items: center;
	}

	#mission img{
		width:350px;
		height:350px;
	}

	h4 {
		font-size:35px;
		text-align:center;
	}

	footer {
		text-align:center;
	}

	footer a {
		padding:10px 0;
	}

	address {
		text-align:center;
	}

	.banniere {
		text-align:center;
	}

	.banniere h1 {
		font-size:40px;
	}

	h2{
		font-size:35px;
	}

	#propos .container {
		gap:0;
	}

	.txt-pdt {
		width:100%;
		text-align:center;
	}

	.img-pdt {
		width:300px;
		height:250px;
		order:0;
	}

	h3 {
		padding:20px 0;
	}

	img-contact {
		width: 100%;
	}

	#ouverture .container {
		flex-direction:row;
		flex-wrap:wrap;
		gap:20px;
	}

	header nav {
		display:none;
	}
}