@charset "utf-8";
/* CSS Document */

	/* police Poppins avec toutes les graisses */

@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');

@import url('https://fonts.googleapis.com/css2?family=Barriecito&display=swap');

.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
  text-shadow: 3px 2px 0px #540B61;
}

.la_carte h5 {
  font-family: "Barriecito", system-ui;
  font-weight: 900;
  font-style: normal;
	font-size: 23px;
}

body {
	font-family: 'Poppins', sans-serif !important;
}

.thin { font-weight: 100; }
.extra-light { font-weight: 200; }
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semi-bold { font-weight: 600; }
.bold { font-weight: 700; }
.extra-bold { font-weight: 800; }
.black { font-weight: 900; }
.italic { font-style: italic; }


			/* ça jcp si c'est utile mais apprement tout le monde le fait */

body {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

.banderole {
	padding-top: 20px;
	background-color: #540B61;
	height: 60px;
	width: 100%;
}

#text_banderole {
	text-align: center;
	color: #FCF3FF;
}

.banderole:hover {			/* hover 1 */
	background-color: #3E0149;
}

							/* Le header */

header {
	position: relative;
	min-height: 550px;
	overflow: hidden;
}

.le_carrousel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.header-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1);
	transform-origin: center left;
	transition: opacity 2s ease-in-out,
				transform 11s ease-in-out;
}

#imgJG {
	background-image: url("../images_projet/JGnul2.jpg");
}

#imgNous {
	background-image: url("../images_projet/Mathisetmoinul.jpg");
}

#imgRosine {
	background-image: url("../images_projet/Rosinenul.jpg");
}

.header-slide.active {
	opacity: 1;
	transform: scale(1.07);}

@keyframes zoomSlide {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.05);
	}
}

							/* ma navbar - menu */

.ma_navbar {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.menu {
	display: flex;
	justify-content: center;
	width: 100%;
}

.bouton_menu {
	margin: 0;
}

.bouton_menu:hover {		/* hover 2 */
	transform: scale(1.03);
}

.bar_menu {
	justify-content: flex-end;
	display: flex;
	list-style: none;
	width: 78%;
	padding: 0;
	margin: 0;
	gap: 20px;
}

.bar_menu .nav-link {
	padding-left: 0;
	padding-right: 0;
}
							/* ma navbar - le reste */
img#logo {
	width: 20%;
	margin: 2% 0% 2% 0%;
}


#OhOui {
	padding-top: 3%;
	padding-bottom: 7%;
	text-align: right;
	position: relative;
	z-index: 2;
	width: 78%;
	margin: 0 auto;
	color: white;
}

.texteohoui {
	font-size: 60px;
}

#blabla {
	width: 45%;
}

.le_blabla {
	margin: 15px 0px 30px 0px;
}

.blabla2 {
	display: flex;
	justify-content: flex-end;
}

.le_bouton {
	background-color: #540B61;
	border: none;
	padding: 4px 50px 4px 50px;
	border-radius: 20px;
}

.le_bouton:hover {				/* hover 3 */
	background-color: #3E0149;
	transform: scale(1.02);
}

.monpanier {
	background-color: #540B61;
	border: none;
	padding: 4px 7px 4px 7px;
	border-radius: 5px;
}

							/* page Produits Oh OUiiii */

.sectionohoui {
	background-image: url("../images_projet/poids.jpg");
	background-size: cover;
	height: 550px;
	padding: 0% 10% 0% 10%;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.nosbestsellers {
	width: 35%;
	padding-top: 18%;
}

.best {
	color: #ff8ce8;
}

.nosbestsellers h1 {
	margin-bottom: 20px;
	font-weight: 700;
}

.nosbestsellers h5 {
	font-weight: 400;
}

.images_fruits {
	display : flex;
	justify-content: space-between;
	width: 65%;
}

.images_fruits h6 {
	font-weight: 200;
}

.images_fruits h5 {
	font-weight: 400;
}

.images_fruits p {
	font-size: 13px;
}

#banane, #fraise {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#texte_banane, #texte_fraise {
	width: 64%;
	height: 30%;
}

img#image_banane, img#image_fraise {
	width: 100%;
}	
							/* page À la carte */

.la_carte {
	padding: 5% 10% 5% 10%;
}

.la_carte h1 {
	font-weight: 700;
	color: #FFD119;
	font-size: 40px;
}

.carte {
	text-align: center;
}

.carte h5 {
	font-weight: 400;
	margin: 6% 0% 4% 0%;
}

img#photo_concombre, img#photo_banane, img#photo_carotte, img#photo_courgette1, img#photo_aubergine, img#photo_courgette2, img#autre, img#autre2, img#autre3, img#photo_tomates {
	width: 100%;
	border-radius: 50px 50px 0px 0px;
}

.produits {
	column-gap: 2%;
}

.couleur {
	padding: 9% 5% 0% 5%;
	height: 140px;
	border-radius: 0px 0px 50px 50px;
}

.la_carte .col:hover {			/* hover 4 */
	transform: scale(1.02);
}

.la_carte .col-3:hover {		/* hover 5 */
	transform: scale(1.02);
}

.couleur p {
	margin-top: 15px;
	font-size: 13px;
}

							/* page Nos engagements */

.nos_engagements {
	background-color: #E4C300; /* #E4C300 fond - #FCCE26 banane*/
	padding: 5% 10% 5% 10%;
}

.nos_engagements h2 {
	font-size: 40px;
	font-weight: 700;
	color: white;
}

.nos_engagements p {
	margin: 0;
	padding : 0;
}

.engagements {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.texte {
	text-align: center;
}

.texte i {
	margin-top: 20px;
	font-size: 25px;
	color: white;
	text-shadow: 3px 2px 0px #540B61;
}

							/* Footer */

footer {
	margin: 0;
	padding: 5% 10% 3% 10%;
	text-decoration: none;
	list-style: none;
	background-color: #540B61;
	width: 100%;
}

.mon_footer {
	display: flex;
	width: 100%;
	margin-bottom: 7%;
	justify-content: space-between;
}

.liste_footer {
	margin : 0;
	padding : 0;
	list-style: none;
	font-size: 14px;
}

.liste_footer li .nav-link {
	margin: 0;
	padding: 0;
	display: inline-block;
}

.marge_en_plus li .nav-link{
	margin-bottom: 9px;
}

h4 {
	color: white;
}

.whatsapp {
	display: flex;
	align-items: center;
	gap: 6px;
}

.LogoBlanc {
	width: 9%;
	height: 9%;
}

.mon_footer h4, a {
	font-weight: 300;
}

.mon_footer h4 {
	font-size: 23px;
	margin-bottom: 25px;
}

.bas_footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: white;
}