html, body {
	padding: 0;
	margin: 0;
}
.margin0auto {
	margin: 0 auto;
}
.color1 {
	color: #DF6708;
}
.color2 {
	color: #D8D804;
}
.bold{
	font-weight: bold;
}
.bg-color2 {
	background-color: #D8D804;
}
.colorgris{
	color: #666;
}
.color-white{
	color: white;
}
.bg-color1 {
	background-color: #DF6708;
}
.container-100p{
	width: 100%;
}
.container-90p{
	width: 90%;
}
.center-text{text-align:center}
.left-text{text-align:left}
.pt4{padding-top:20px}
.font-13{
	font-size: 13px;
}
.font-14{
	font-size: 14px;
}
.font-15{
	font-size: 15px;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.flex-container1 {
	display: flex;
	  flex-wrap: nowrap;
	  justify-content: space-around;

}

.flex-container1 div {
  padding:20px 30px;
  padding-bottom:30px;
}
.flex-container3 {
	display: flex;
  flex-wrap: nowrap;
	justify-content: center;
}
.flex-container3 div {
	  padding:20px 15px;
  padding-bottom:30px;
}
.menu1{
	padding: 6px;
	margin: 0 auto;
	font-family: 'Source Sans Pro Regular', Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.menu1 a {color:white;}.menu1 a:hover {color:#D8D804;}
.logo-taille{
	height: 70px;
	padding: 10px;
}
.ul-menu2{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 91px;
  font-family: 'Bigshot One';
}
.ul-menu2 > * {
display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
.ul-menu2 li a {
	color : #666;
  margin-right: 20px;
  font-size: 18px;
  text-decoration: none;
}
.ul-menu2 li a:hover{ color: #D8D804;}
.ul-menu2 li a:active{ color: #D8D804;}
.search {
	line-height: 91px;
}
.search > * {
display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
#namanyay-search-btn {
background:#D8D804;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
-o-border-radius:0 5px 5px 0;
border:0 none;
font-weight:bold;
}
 
#namanyay-search-box {
background: #eee;
padding:10px;
 border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
-o-border-radius:5px 0 0 5px;
border:0 none;
width:160px;
}
.bouton {
	text-align:center;
	background-color:#D8D804;
	width: 100px;
	border-radius:2px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:10px 18px;
	text-decoration:none;
	margin-top:20px;
	margin-right: 12px;
}
.bouton:hover {
	background-color:#5cbf2a;
}
.bouton:active {
	position:relative;
	top:1px;
}
.produits{
text-align: center;
padding: 20px;
}
.box {
	padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(200px, auto);
}
#pomme {
  grid-column: 1 / 3;
  grid-row: 1;
  background-image: url(images/pomme-natvit.jpg);
  background-size:cover;
  width: 100%;
}
.contenu-box{
	background-color:rgba(0,0,0,0.35);
	height:100%;
	color:white;
	display: grid;
		place-items: center;
	height: 100%; /* ou une autre hauteur si nécessaire */
}
#argousier {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  background-image: url(images/argousier.jpg);
  background-size:cover;
  width: 100%;
}
#bouleau {
  grid-column: 1;
  grid-row: 2 / 3;
  background-image: url(images/seve-de-bouleau.jpg);
  background-size:cover;
  width: 100%;
}
#aronia {
  grid-column: 2;
  grid-row: 2;
  background-image: url(images/aronia-branche.jpg);
  background-size:cover;
  width: 100%;
}
#depaletisseur{
	grid-column: 1 / 3;
  grid-row: 1;
  background-image: url(images/depaletisseur.jpg);
  background-size:cover;
  width: 100%;
}
#presse{
	grid-column: 3 / 4;
  grid-row: 1 / 3;
  background-image: url(images/presse-a-bande.jpg);
  background-size:cover;
  width: 100%;
}
#pasterisateur{
	grid-column: 1;
  grid-row: 2 / 3;
  background-image: url(images/pasterisateur.jpg);
  background-size:cover;
  width: 100%;
}
#mise-en-carton{
	grid-column: 2;
  grid-row: 2;
  background-image: url(images/mise-en-carton.jpg);
  background-size:cover;
  width: 100%;
}
.contenu-box div div{
border: solid 1px white;
border-radius: 3px;
padding:5px;
margin:10px auto;
width:200px;
}
.contenu-box div a {
	text-decoration: none;
	color: white;
}
.contenu-box p {
	width: 50%;
	margin: 0 auto;
	font-size:14px;
}
.produit{
	width:15%;
	text-align:center;
}
.produit div{
	margin-top:12px;
	display: flex;
    justify-content: space-between;
}
.produit img {
	height: 215px;
}
.produit div a {
	border: #DF6708 solid 1px;
	text-decoration: none;
	color : #DF6708;
	padding:5px;
	font-weight: bold;
}
.produit h4{
	text-transform: Uppercase;
}
.produit div a:hover {
	border: #D8D804 solid 1px;
	color : #D8D804;
}
.machine{
	width:15%;
	text-align:center;
}
.machine div{
	margin-top:12px;
	display: flex;
    justify-content: space-between;
}
.machine img {
	height: 215px;
}
.machine a {
	border: #DF6708 solid 1px;
	text-decoration: none;
	color : #DF6708;
	padding:5px;
	font-weight: bold;
}
.machine h4{
	text-transform: Uppercase;
}
.machine a:hover {
	border: #D8D804 solid 1px;
	color : #D8D804;
}
.actualite {
	width:23%;
	text-align:left;
}
.actualite img {
	height: 215px;
	width: 100%;
	object-fit: cover;
}
.information {
	width: 15%;
	text-align:center;
}
.information img{
	height: 40px;
	width: 40px;
}
.footer-content a{
	color:white;
	text-decoration: none;
	font-size: 13px;
	
}
.footer-content a p {margin-top:0px;margin-bottom:4px;}
.footer-content a:hover{
	color:#e0e0e0;
}
.menu2-content{
	box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}
#banniere1{
	margin-top:50px;
	background-image: url('images/argousier-des-alpes.jpg');
	height:200px;
}
#banniere1-opacity{
	background-color:rgba(0,0,0,0.35);
	height:100%;
	color:white;
	
}
#banniere1-opacity div{
	padding:10px;
	margin-left:20px;
}
@media (max-width:800px)  {
	.box {
		display: block;
	}
	.flex-container{flex-direction: column;text-align:center;}
	.flex-container1{flex-direction: column;text-align:center;}
	.flex-container3{flex-direction: column;text-align:center;}
	.ul-menu2 > * {
	display: block;
	margin:15px 0px;
	}
	.produit{
		margin: 0 auto;
		width:50%;
		margin-bottom:20px;
	}
	.actualite{
		margin: 0 auto;
		width:50%;
		margin-bottom:20px;
	}
	.machine{
		margin: 0 auto;
		width:50%;
		margin-bottom:20px;
	}
	.information{
		margin: 0 auto;
		width:50%;
		margin-bottom:20px;
	}
	.left-text{margin: 0 auto;}
	#argousier {margin-top: 10px;}
	#bouleau {margin-top: 10px;}
	#aronia {margin-top: 10px;}
	#pomme {margin-top: 10px;}
	#depaletisseur {margin-top: 10px;}
	#presse {margin-top: 10px;}
	#pasterisateur {margin-top: 10px;}
	#mise-en-carton {margin-top: 10px;}
}
@media (max-width:400px)  {
	header{display: none;}
}