/* ---------------reset css--------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*--------------------------fin du reset --------------*/



body {
	font-family: 'Montserrat', sans-serif;	
	width: 100%;
	height:100px;
	overflow-x: hidden;
}

	
/*    navigation  */
.navbar  {
	background-color: white;
}


.dropdown-menu {
    background-color: #FFFA;
	border:none;
	border-radius: 0;
	display: none;
}


.nav-link {
	white-space: nowrap;
	font-size: 15px;
	font-weight: bold;


}

.navbar-light .navbar-nav .nav-link {
    color:#3C6931;
	margin-top: 20px;
}
.navbar-light .navbar-nav .nav-link .dropdown-item { 
    color: #3C6931;
}


.nav-link:hover {
	color: black	
}


.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }

 .navbar-light .navbar-toggler {
	 border:none;
 }

 .dropdown-item {
	color: #3C6931;
 }
 .dropdown-item:active {
	width: auto;
	background-color:transparent;
	}
.dropdown-item:hover{
	color: black	
	}


.offcanvas-end {
	top: 0;
	right: 0;
	width: 240px;
  }

  .offcanvas {
	  background-color: #fff;
  }

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}



/* panier  */

.panier {
	width: 40px;
	height: 20px;

}

.badge {
	letter-spacing: 1px;
	height:2em;
	width:2em;
	padding: .4em;
	font-size: .8em;
	background-color: coral;
	opacity:0.9;
	color: #fff;
	border-radius: 1rem;
	position: relative;
	left:-20px;
	top:-8px;
}



/* --------------------- footer -----------------------------------------------*/


.footer_container {
	position: relative;
	width: 100vw;
	bottom:0;
	background-color:white
	

}
.logo-footer {
	width:150px
}

.contact {
	max-height:400px;
	margin-top: 10px;
	display: flex;
	align-items: start;
}
.rigp {
	max-height:400px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.liens {
	max-height:400px;
	margin-top: 10px;
	display: flex;
	align-items: start;

}
.mail {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.reseaux {
	display: flex;
	flex-direction: column;
	align-items: start;

}
.produits {
	display: flex;
	flex-direction: column;

	align-items: start;

}
.apropos{
	display: flex;
	flex-direction: column;
	align-items: start;

}

.rigp {
	max-height:400px;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}


 .reseaux p, .liens p{
	font-size: 15px;
	color:#3C6931;
	text-align: center;

	
}


.contact a,  .rigp a,  .liens a {
	text-decoration: none;
	font-size: 14px;
	color:#3C6931;
	margin-bottom: 5px;

}
.mail p , .rigp p{
	font-size: 15px;
	color:#3C6931;
	margin-bottom: 10px;

}


.contact .rigp .liens,  a:hover{
	color:#333;

}
.reseaux a{
	font-size: 14px;
	color:#3C6931;

}
.mail a{
	font-size: 15px;
	color:#3C6931;
}

/* --------------------- footer -----------------------------------------------*/

/* iphone */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait)  {

	

	
	}


/* ipad */
	@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (-webkit-min-device-pixel-ratio: 2) {
	
	

	}
/* Galaxy from S6 */
	@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 740px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
	


  }