/*RESET*/
/*le reset me permet d'enelver toute les marges de mon document si le rest est deja fait sur le site il faudra donc supprimer tout le style*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}
/*STYLE GENERIQUE*/
#wrapper-widget-mo {
	width: 100%;
	max-width: 1365px; /* sur le max-width c'est la largeur maximal du document il est possible de le modifier*/
	margin: 0 auto;
	font-family: 'Poppins', sans-serif; /*Typo de la page s'il est deja chargé supprimer cette ligne*/
	font-weight: 400;
	padding: 10px; /*espace intérieur du conteneur*/
}
#wrapper-widget-mo img {
	display: block;
	width: 100%;
	height: auto
}
#wrapper-widget-mo strong {
	font-weight: 500
}
/*TITRE*/
#wrapper-widget-mo .widget-mo-title p {
	position: relative;
	margin: 50px 0 20px 0; /* espace exterieur du titre de 50px en haut et 20px en bas*/
	color: #2E5485; /* couleur de la typo */
	font-size: 40px; /* taille de la typo */
	text-transform: uppercase; /* texte en majuscule*/
	line-height: 56px /* interlignage*/
}
/* le trait apres le titre */
#wrapper-widget-mo .widget-mo-title p:after {
	content: "";
	display: block;
	width: 44px; /* largeur du trait sous le titre */
	height: 4px; /* hateur du trait sous le titre */
	margin-top: 5px;
	background-color: #000; /* couleur de fond du trait */
}
/*BLOC PRODUIT*/
#wrapper-widget-mo .widget-mo-content {
	margin-bottom: 50px; /*espace en dessous du widget*/
}
#wrapper-widget-mo .widget-mo-content, #wrapper-widget-mo .widget-mo-content .widget-mo-content-four {
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	flex-wrap: wrap
}
#wrapper-widget-mo .widget-mo-content > div {
	width: 49.5%
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd {
	overflow: hidden;
	position: relative
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd img {
	transition: all ease 0.5s
}
/* effet de zoom sur l'image au survol valeur par defaut 1*/
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
/* titre sur l'image */
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd h2, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd h2 {
	position: absolute;
	left: 50%;
	bottom: 20px; /* positionnement du titre à 20px du bas*/
	transform: translate(-50%, 0%);
	z-index: 1;
	text-align: center; /* l'alignement du texte */
	font-size: 48px; /* taille du taille */
	text-transform: uppercase;
	line-height: 54px; /* hauteur de ligne*/
	color: #000; /* couleur de la typo*/
	font-weight: 300; /* graisse de la typo pour du gras changer la valeur par 500*/
	transition: all ease 0.5s;
	width: 100%
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd a, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	transition: all ease 0.5s
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd:hover a, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd:hover a {
	background-color: #000; /* couleur de fond quand on survol le produit */
}
/* style du texte qui apparait au survol du bloc produit */
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd p, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd p {
	font-size: 14px; /* taille de la typo*/
	color: #fff; /* couleur de la typo*/
	line-height: 20px; /* hauteur de ligne*/
	padding: 0 15%; /* espace a l'intérieur du bloc pour que le texte ne soit pas coller au bord le 15% représente l'espace a gauche et a droite*/
	font-weight: 300; /* graisse de la typo pour du gras changer la valeur par 500*/
	position: absolute;
	z-index: 1;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center; /* alignement du texte */
	overflow: hidden
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd a p span, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd a p span {
	transition: all ease 0.5s;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	max-height: 80px;
	display: inline-block
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd:hover a p span, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd:hover a p span {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd .widget-mo-content-prd-btn, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd .widget-mo-content-prd-btn {
	position: absolute;
	top: auto;
	bottom: 15%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	padding-bottom: 5px;
	line-height: 22px;
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd p:first-child, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd p:first-child {
	bottom: auto;
	top: 50%
}
/* bouton découvrir */
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd .widget-mo-content-prd-btn span, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd .widget-mo-content-prd-btn span {
	font-weight: 500; /* graisse */
	text-transform: uppercase;
	position: relative;
	letter-spacing: 1px; /* espacement entre les lettres*/
}
/* trait sous le bouton */
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd .widget-mo-content-prd-btn span:after, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd .widget-mo-content-prd-btn span:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -3px; /* positionnement du trait sous le texte */
	right: 0;
	width: 100%;
	height: 3px; /* hauteur du trait */
	background-color: #fff; /* couleur d'arrière plan du trait */
	-webkit-transition: width .5s;
	transition: width .5s;
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd .widget-mo-content-prd-btn span:hover::after, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd .widget-mo-content-prd-btn span:hover::after {
	width: 0
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-four .widget-mo-content-prd {
	width: 49%;
	height: 49%
}
#wrapper-widget-mo .widget-mo-content .widget-mo-content-four .widget-mo-content-prd + .widget-mo-content-prd + .widget-mo-content-prd {
	margin-top: 2%
}
/* titre qui est dans le grand bloc a droite */
#wrapper-widget-mo .widget-mo-content .widget-mo-content-four .widget-mo-content-prd h2 {
	font-size: 21px; /* taille typo */
	line-height: 25px; /* hauteur de ligne */
}
/*BLOC FULL SCREEN*/
#wrapper-widget-mo.wrapper-widget-mo-full-screen {
	max-width: 100%;
	padding: 0
}
#wrapper-widget-mo.wrapper-widget-mo-full-screen .widget-mo-title {
	max-width: 1367px;
	width: 100%;
	margin: 0 auto
}
/*BLOC VISUEL*/
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content {
	position: relative
}
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-content > div {
	width: 100%;
}
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content a {
	text-indent: -99999px;
}
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-content-prd:hover a {
	background-color: transparent;
}
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc {
	position: absolute;
	z-index: 1;
	right: 96px;
	top: 50%;
	transform: translate(0, -50%);
	width: 360px;
	text-align: center
}
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc h2 {
	text-align: center;
	left: auto;
	bottom: auto;
	transform: translate(0%, 0%);
	position: relative
}
/*BOUTON SUR LE BLOC VISUEL ET SUR LE BLOC SQUARE*/
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc p {
	text-transform: uppercase;
	color: #000; /*couleur de la typo*/
	font-size: 24px; /* taille de la typo */
	font-weight: 500; /* graisse de la typo*/
	background-color: #fff; /* couleur d'arrière plan*/
	padding: 12px 22px; /* espace intérieur du bouton 8px en haut et en bas et 20px a gauche et à droite*/
	display: inline-block;
	position: relative;
	top: auto;
	left: auto;
	transform: translate(0, 0);
	width: auto;
	margin-top: 55px; /* espace au dessus du bouton*/
	text-decoration: none;
	transition: all ease 0.2s
}
/*BOUTON AU SURVOL*/
#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content:hover .widget-mo-content-prd-desc p {
	background-color: #000; /*couleur de fond du bouton*/
	color: #fff; /*couleur de typo du bouton*/
}
/*BLOC SQUARE*/
#wrapper-widget-mo.wrapper-widget-square .widget-mo-visuel-content .widget-mo-content-prd-desc {
	right: 50%;
	top: auto;
	transform: translate(50%, 0%);
	width: 360px;
	bottom: 20px;
}
/*BLOC MULTI*/
#wrapper-widget-mo.wrapper-widget-mo-multi {
	max-width: 100%;
	padding: 0;
	margin-bottom: 50px
}
#wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-title {
	width: 100%;
	max-width: 1365px;
	margin: 0 auto
}
#wrapper-widget-mo.wrapper-widget-mo-multi .slick-slide {
	margin: 0px 10px;
}
#wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd {
	position: relative
}
#wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd h2 {
	font-size: 21px;
	line-height: 30px;
}
#wrapper-widget-mo.wrapper-widget-mo-multi button {
	position: absolute;
	text-indent: -9999px;
	z-index: 10;
	top: 50%;
	width: 70px;
	height: 70px;
	transition: all ease 0.2s;
	cursor: pointer;
	transform: translate(0%, -50%);
	bckground-color: #fff;
	border: solid 1px #000
}
#wrapper-widget-mo.wrapper-widget-mo-multi button:hover {
	background-color: #000
}
#wrapper-widget-mo.wrapper-widget-mo-multi button:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-indent: 0;
	font-size: 30px
}
#wrapper-widget-mo.wrapper-widget-mo-multi .slick-prev:after {
	content: "\2190";
}
#wrapper-widget-mo.wrapper-widget-mo-multi .slick-next {
	right: 0
}
#wrapper-widget-mo.wrapper-widget-mo-multi .slick-next:after {
	content: "\2192";
}
#wrapper-widget-mo.wrapper-widget-mo-multi button:hover::after {
	color: #fff
}
/*RESPONSIVE*/
/* Appareils de taille moyenne (tablettes, moins de 991 pixels) */
@media all and (max-width: 991px) {
	#wrapper-widget-mo .widget-mo-content {
		flex-direction: column
	}
	#wrapper-widget-mo .widget-mo-content > div {
		width: 100%
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-one {
		margin-top: 2%
	}
	#wrapper-widget-mo.wrapper-widget-moII .widget-mo-content {
		flex-direction: row
	}
	#wrapper-widget-mo.wrapper-widget-moII .widget-mo-content > div {
		width: 49.5%;
	}
}
/* Petits appareils (téléphones paysage, moins de 768 pixels) */
@media all and (max-width: 768px) {
	#wrapper-widget-mo .widget-mo-title p{
		margin-top: 0;
		font-size: 18px;
		font-weight: 700;
		line-height: 20px;
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd h2, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd h2 {
		bottom: 50px
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd:hover a, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd:hover a {
		background-color: transparent
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd p:first-child, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd p:first-child {
		display: none
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd p.widget-mo-content-prd-btn, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd p.widget-mo-content-prd-btn {
		display: block;
		top: auto;
		bottom: 0px;
		color: #000
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd .widget-mo-content-prd-btn span:hover::after, #wrapper-widget-mo .widget-mo-content .widget-mo-content-prd .widget-mo-content-prd-btn span::after, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd .widget-mo-content-prd-btn span:hover::after, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd .widget-mo-content-prd-btn span::after {
		width: 100%;
		background-color: #000
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd:hover a p span, #wrapper-widget-mo .widget-mo-content .widget-mo-content-prd a p span, #wrapper-widget-mo.wrapper-widget-mo-multi .widget-mo-multi-content .widget-mo-content-prd a p span {
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-prd:hover img {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	#wrapper-widget-mo.wrapper-widget-moII .widget-mo-content {
		flex-direction: column
	}
	#wrapper-widget-mo.wrapper-widget-moII .widget-mo-content > div {
		width: 100%;
	}
	#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc p {
		opacity: 1;
		margin-top: 30px;
		font-size: 20px;
		padding: 10px 22px;
	}
	#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc {
		right: 50%;
		transform: translate(50%, 0%);
		width: 100%;
		text-align: center;
		bottom: 20px
	}
	#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-content .widget-mo-content-prd h2 {
		font-size: 28px;
		line-height: 27px;
	}
	#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-content .widget-mo-content-prd h2{
		transform: translate(0%, -70%);
	}
	#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc p {
		margin-top: -5px;
		transform: translate(0,-65%);
	}
	#wrapper-widget-mo.wrapper-widget-visuel.wrapper-widget-mo-full-screen .widget-mo-visuel-content .widget-mo-content-prd-desc p {
		transform: translate(0,-100%);
}
	#wrapper-widget-mo.wrapper-widget-square .widget-mo-visuel-content .widget-mo-content-prd-desc h2{
		transform: translate(0%,0%);
	}
	#wrapper-widget-mo.wrapper-widget-square .widget-mo-visuel-content .widget-mo-content-prd-desc p{
	transform: translate(0,60%);
	}
		#wrapper-widget-mo.wrapper-widget-square.wrapper-widget-mo-full-screen .widget-mo-visuel-content .widget-mo-content-prd-desc h2{
		transform: translate(0%,0%);
	}
		#wrapper-widget-mo.wrapper-widget-square.wrapper-widget-mo-full-screen .widget-mo-visuel-content .widget-mo-content-prd-desc p {
		transform: translate(0,60%);
}


}
/* Petits appareils (téléphones paysage, 576 pixels et plus) */
@media all and (max-width: 576px) {
	#wrapper-widget-mo .widget-mo-content .widget-mo-content-four .widget-mo-content-prd h2, #wrapper-widget-mo .widget-mo-content .widget-mo-content-prd h2, #wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc h2 {
		font-size: 20px; /*taille de la typo*/
		line-height: 24px; /*interlignage*/
	}
	#wrapper-widget-mo.wrapper-widget-visuel .widget-mo-visuel-content .widget-mo-content-prd-desc p {
		font-size: 14px; /*taille de la typo*/
		padding: 5px 20px /*espace intérieur*/
	}

}