/*pour insérer une police : inspecter : chercher policei sur internet : get embed : import : copy code et enlever <style> avant et après*/
@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');

*{
/*pour garder la taille du contenu et annuler les marges du navigateur*/
	box-sizing: border-box;
	margin: 0;
/*intégrer la police en regular depuis google font*/
 	 font-family: "Poppins", serif;
 	 font-weight: 400;
 	 font-style: normal;
/* 	 pour ajouter une animation sur le scroll, smooth=douce*/
 	 scroll-behavior: smooth;

}

/*----------------------MENU BURGER---------------------------*/
#burger{
/*	pour choisir la position en priorité des autres*/
	position: absolute;
/*	pour prendre 100% de la div*/
	width: 100%;
	right: 0;
	top: 0;
	font-size: 20px;
/*	pour faire disparaitre sur le bureau (sur pc)*/
	display: none;
}

#burger nav{
	background-color: lightslategrey;
	width: 100%;
	text-align: center;
/*	pour faire une marge en haut et dessous : 20px à droite et gauche : 0*/
	padding: 20px 0;
/*	pour faire une animation sur le bouton burger*/
	transition: transform 1s;

}

/*pour faire les boutons*/
#open, #close{
	position: absolute;
	height: 40px;
	font-size: 50px;
/*	pour caler à 20px du bord droit de la fenetre*/
	right: 20px;
/*	pour forcer le bouton burger à rester au premier plan*/
	z-index: 1;

}

#burger a{
	color: black;
/*	pour enelever soulignement*/
	text-decoration: none;
/*	pour que les liens passent à la oigne automatiquement*/
	display: block;
	padding: 10px 0;
}

/*faire apparaitre ou disparaitre le bouton*/
/*créer une condition, target pour aller chercher ce qui est mentionné #burger dans l'url*/
#burger:target #open, #burger:not(:target) #close{
	display: none;
}

#burger:not(:target) .nav{
/*	pour changer le position de la nav : x, y, z pour la profondeur, et ne plus la voir*/
	transform: translate3d(0px, -300px, 0px);
}

/*pour faire la position quand la nav réapparait*/
#burger:target .nav{
	transform: translate3d(0px, 0px, 0px);
}


/*----------------------FIN MENU BURGER---------------------------*/

a{
/*	pour que tous les liens (a) soient en noir et non surlignés*/
	text-decoration: none;
	color: black;
}

h1{
	font-size: 72px;
	font-weight: 500;
/*pour centrer le texte dans le H1	*/
	text-align: center;
}

h2{
	font-size: 60px;
	text-align: center;
	margin: 40px 0px 40px 0px;

}

h3{
	font-size: 28px;
	text-align: center;
	/*marge externe*/
	margin: 40px 0px 20px 0px;

}

.h3{
	margin-bottom: 70px;

}

/*pour donner une couleur de fond au header*/
header{
	background-color: rgb(228, 227, 225);
	/*pour mettre une marge interne de tous les côtés*/
	padding: 20px;
}
/*pour créer la classe contenu lié au html*/
.contenu{
	width: 1000px;
	/*pour centrer la div sur la page*/
	margin: auto;
	/* pour aligner sur une ligne	*/
	display: flex;
	/*pour que les espaces soient proportionnelles dans le contenu	*/
	justify-content: space-between;
}

.gouttiere{
	gap: 15%;
}

/*pour lier à l'ID on met un # devant*/
#menu{
	/*pour centrer le menu en vertical dans le header	*/
	align-items: center;
}

/*pour viser uniquement les balises a et toutes les balises a qui sont à l'intérieur de l'id menu'*/
#menu a{
	/*pour changer taille typo*/
	font-size: 23px;
	/*pour mettre des marges entre les balises a du menu*/
	padding: 10px;
	/*pour enlever le soulignement automatique*/
	text-decoration: none;
	color: black;
	/*mettre une propriété de transition quand on survol les balises a*/
	transition: color 0.8s;


}

/* pour créer des propriétés quand on passe sur le lien */
#menu a:hover{
	color: orange;

}

/*pour changer la couleur quand la page est active*/
.active{
	/*pour que cette couleur passe en priorité	*/
	color: orange !important;
}
#menu img{
	width: 150px;
}

#banniere{
	height: 780px;
	background-image: url(images/fond.jpg);
	/*pour que l'image de fond couvre la hauteur de la bannière	*/
	background-size: cover;
	/*pour recentrer horizontalement et verticalement*/
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;

}

.banniere{
	height: 480px;
	/*pour que l'image de fond couvre la hauteur de la bannière	*/
	display: flex;
	/*centrer horizontalement, mais uniquement avec display: flex	*/
	justify-content: center;
	/*centrer verticalement, mais uniquement avec display: flex	*/
	align-items: center;
	color: white;
}





#cont-propos{
	padding: 40px 0 40px 0;
}

#banniere-propos{
/*cover pour couvrir toute la div*/
	background: url(images/fond-propos.jpg) center/cover;
}

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

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

.galerie{
	/*pour que les images se placent les unes à côté des autres	*/
	display: flex;
	/*pour ajouter une gouttière entre les images, ne fonctionne qu'avec display flex*/
	gap: 2%;
}

.galerie img{
	width: 49%;
}

.champs{
		margin: 10px;
		
}

.bouton{
	
	text-decoration: none;
	/*pour mettre un contour fin et continu	*/
	border: thin solid black;
	/*pour créer une marge autour	*/
	padding: 20px;
	

}

.boutoncontainer{
	padding: 30px 0px 30px 0px;
	text-align: center;
	margin-top: 40px 0 40px 0;
}


.bouton-envoi{
	color: white;
	background-color: orange;
	border: 0;
	width: 150px;
	height: 50px;
	margin-top: 20px;
/*	Pour forcer l'affichage avec la main sur le bouton?*/
	cursor: pointer;

}

.align-gauche{
	text-align: left;
}

.jour{
	font-weight: bold;

}

.heures{
	text-align: center;
/*	pour remplir le contenu de la div*/
	flex-grow: 1;
	}

#horaires{
	margin-bottom: 40px;
}

hr{
		margin: 10px 0 10px 0;
	}

.col-img{
	width: 300px;
	height: 330px;
	/*pour ne pas répéter background, on peut faire en une seule ligne au lieu de faire comme au dessus)	*/
	margin-bottom: 20px;
	/*pour faire bord arrondi*/
	border-radius: 10px;

}

.col-img2{
	width: 300px;
	height: 330px;
	/*pour ne pas répéter background, on peut faire en une seule ligne au lieu de faire comme au dessus)	*/
	margin: 40px 40px 40px 40px;
	/*pour faire bord arrondi*/
	border-radius: 10px;

}

.col-img3{
	
	/*pour ne pas répéter background, on peut faire en une seule ligne au lieu de faire comme au dessus)	*/
	
	/*pour faire bord arrondi*/
	border-radius: 10px;
	width: 45%;
	display: flex;
	justify-content: center;
	align-items: center;

}

.col-img4{

	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;

}

.col{
	width: 300px;
	text-align: center;
}

.col2{
	width: 45%;
}

.col3{
	width: 35%;
}



#missions{margin-top: 60px}

#savoir-plus{
	background-color: orange;
	color: white;
	margin-top: 40px;
}

#savoir-plus h2{
	font-size: 40px;

}

.align-vertical{
	align-items: center;}


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

footer nav a{
	display: block;
	text-decoration: none;
	color: black;
	font-size: 16px;
	padding: 10px 0 0 20px;

}

.footer-d{
text-align: right;
}

footer a{
	text-decoration: none;
}

footer p{
	margin: 10px 0 20px 0;
}

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

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

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

.img4{
	background: url(images/chaise2.jpg) center/cover;
	width : 400px;
	height: 400px;
	border-radius: 10px;
}

.img5{
	background: url(images/produit2.jpg) center/cover;
	width : 400px;
	height: 400px;
	border-radius: 10px;
}

.img6{
	background: url(images/produit3.jpg) center/cover;
	width : 400px;
	height: 400px;
	border-radius: 10px;
}

.img7{
	background: url(images/produit4.jpg) center/cover;
	width : 400px;
	height: 400px;
	border-radius: 10px;
}




.img-rond{
	border-radius: 50%;
	width: 400px;
	height: 400px;
	background: url(images/bloc4.png) center/cover;
}

.bouton-blanc{
	
	text-decoration: none;
	/*pour mettre un contour fin et continu	*/
	border: thin solid white;
	/*pour créer une marge autour	*/
	padding: 20px;
	color: white;
}

.reseau{
	width: 30px;
}

.section-pdt{
	padding: 30px;
}
.section-pdt h3{
	margin: 0 0 30px 0;
}

.gris{
	background-color: rgb(228, 227, 225);
}

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

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

.img-pdt2{
	background: url(images/produit2.jpg) center/cover;
/*	Pour inverser l'ordre des contenus (image à gauche, texte à droite). Ne fonctionne qu'avec display flex mais déjà dans la class contenu)*/
	order: -1;
}

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

}

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

.img-produit3{
	background: url(images/produit3.jpg) center/cover;
	border-radius: 10px;
	width: 433px;
	height: 650px;



}

#map{
	margin-top: 40px;
	margin-bottom: 40px;
}
iframe{
	border-radius: 15px;
}

/*quand on met des virgules, ils ont tous les mêmes attributs*/
label, input, textarea{
	width: 100%;
}

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

/*-----------------------RESPONSIVE--------------------------------------*/
/*ne rien mettre d'autre après cette ligne là*/
/*on va modifier les class et id existants uniquement pour le responsive, tout ce qui est sous 1000px*/
/*faire des essais dans 'linspecteur pour voir avant de modifier dans le fichier'*/

/*pour affichage sur ecran smartphone*/
@media screen and (max-width: 1000px){
	#burger{
/*	pour faire apparaitre sur responsive*/
	display: block;
}
  .contenu{
    width: 100%;
    /*    pour passer une ligne sur une colonne*/
    flex-direction: column;
/*    quand on inverse le sens (colonne au lieu de ligne) ça inverse les fonctionnalités de justfiy content et align items)*/
    align-items: center;
	}

	#banniere{
		height: 500px;
	}

	h1{
		font-size: 40px;
	}
	.col p{
		margin-bottom: 20px;
	}
	.col2{
		width: 90%;
	}
	.img-rond{
		width: 300px;
		height: 300px;
		margin: auto;
	}
	#savoir-plus h2{
		font-size: 28px;
	}
	#savoir-plus{
		padding-bottom: 20px;
	}
	footer, .footer-d{
		text-align: center ;
	}
	footer nav a{
		padding-left: 0;
	}
	.footer-d{
		margin-top: 20px;
	}
	h2{
		text-align: center !important;
		font-size: ;40px	
	}
	.boutoncontainer{
		text-align: center !important;
	}

	.img-pdt{
		width: 350px;
		height: 350px;
	}

	.img-pdt2, .img-pdt4{
		order: 1;
	}
	.img-contact{
		width: 350px
	}

	.col2{
		text-align: center;
	}

	.heures{
		margin-bottom: 20px;
	}


.menu{
	display: none;
}