@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap');
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}
h1{
	font-size:44px;
}
h1{
	font-size:20px;
}
p{
	font-size:16px;
	line-height: 16px;
}
#panier_{
	display: none;
}
/* Style du menu */
nav {
	background-color: #e0e0de;
	padding: 10px;
	text-align: center;
	display: flex;
	font-family: 'Futura', sans-serif;
	height: 100px;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	transition: box-shadow 0.3s ease; /* Transition pour l'ombre */
}

.nav-shadow {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Ajout d'une ombre lors du scroll */
}


nav .logo {
    position: relative;
    top: 15px; /* Positionnez le logo en haut */
    left: 20px; /* Positionnez le logo à gauche */
    z-index: 2; /* Assurez-vous que le logo apparaît au-dessus des autres éléments */
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex !important;
	justify-content: space-around;
	align-items: center; /* Centre verticalement les éléments du menu */
}
nav ul {display: block}

nav ul li {
	margin-right: 20px;
	text-transform: uppercase; /* Met le texte en majuscules */
	position: relative;
}

nav ul li a {
	text-decoration: none;
	color: #1A0001; /* Couleur de texte par défaut */
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 1.5; /* Centre verticalement le texte dans chaque élément du menu */
	transition: color 0.3s ease; /* Transition pour le changement de couleur */
}
nav ul li a:hover, nav ul li a.active {
	text-decoration: none;
	color: #ff021b; /* Couleur de texte au survol ou lorsqu'actif */
}

nav ul li a.active {
    text-decoration: none;
    color: #ff021b; /* Couleur de texte au survol ou lorsqu'actif */
    position: relative;
}

nav ul li a.active::before {
    content: ""; /* Contenu vide pour créer la barre */
    position: absolute;
    top: -15px; /* Ajustez la position de la barre au-dessus du texte */
    left: 0;
    width: 100%; /* Barre de la longueur du texte */
    height: 5px; /* Épaisseur de la barre */
    background-color: #ff021b; /* Couleur de la barre */
}

.reseaux-sociaux {
	width: 140px;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.reseaux-sociaux i {
	margin-right: 20px;
	font-size: 16px; /* Taille de police personnalisée */
	color: #B04500; /* Couleur d'icône par défaut */
	transition: color 0.3s ease; /* Transition pour le changement de couleur */
}

.reseaux-sociaux i:hover {
	color: #FF9C00; /* Couleur d'icône au survol */
}

.reseaux-sociaux i.active {
	color: #FF9C00; /* Couleur d'icône lorsqu'actif */
}

.reseaux-sociaux i.instagram {
	margin-right: 40px; /* Espacement de 30px pour l'icône Instagram */
}

.panier {
	/* Ajoutez d'autres styles pour le panier si nécessaire */
}

.separateur {
	border-right: 1px solid #B04500;
	height: 50px;
	margin: 0 10px;
}

.titre_p{
	margin-top: 55px; 
	margin-bottom: 50px; 
	color:#b7b1a9
}


/* Ajoutez vos styles CSS pour le bloc "Qui sommes-nous?" ici */
#quisommesnous {
	padding: 50px;
	background-color: #f8f8f8;
	position: relative;
	z-index: 2;
}

#quisommesnous h1 {
	font-family: 'Futura', sans-serif;
	font-size: 44px;
	font-weight: bold;
	text-transform: uppercase; /* Met le texte en majuscules */
	margin-bottom: 20px;

}

#quisommesnous .contenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#quisommesnous .contenu_{display: none;}
#quisommesnous .image {
	flex-basis: 40%;
	margin-right: 20px;
}

#quisommesnous .image img {
	width: 100%;
	border-radius: 8px;
}

#quisommesnous .texte {
	flex-basis: 55%;
	left:-50px;
	background-image: url("../img/triangle_2.png");
	background-size:contain;
	background-position: top left; 
	background-repeat: no-repeat;
	position: relative;
	height: 400px; 
	margin: 0;
	height: 400px;
	z-index: 2; /* Placez le texte au-dessus du triangle */
}

#quisommesnous .Le_txt {
	flex-basis: 67%;

	position: relative;
	left:150px;
	top:150px;
	z-index: 4; /* Placez le texte au-dessus du triangle */
}

#quisommesnous p {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	position: relative; /* Assurez-vous que le texte est au-dessus du triangle */
}

#quisommesnous .bouton {
    position: absolute;
	top: 150px;
    bottom: 20px; /* Ajustez la distance depuis le bas selon vos besoins */
    right: 20px; /* Ajustez la distance depuis la droite selon vos besoins */
}

#quisommesnous .bouton button {
    background-color: #2AA400;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

#quisommesnous .bouton button:hover {
    background-color: #1C7D00; /* Couleur de survol */
}



/* Ajout de styles pour le décalage du contenu lorsqu'il y a une barre fixe */
body {
	padding-top: 70px; /* Ajustez la valeur selon la hauteur de votre barre fixe */
}

/* Ajoutez vos styles CSS pour le diaporama ici */
.slider {
	position: relative;
	height: 100vh;
	width: 100vw;
	background: #777;
	overflow: hidden;
}
.slider__wrap {
	position: absolute;
	width: 100vw;
	height: 100vh;
	transform: translateX(100vw);
	top: 0%;
	left: 0;
	right: auto;
	overflow: hidden;
	transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transform-origin: 0% 50%;
	transition-delay: 450ms;
	opacity: 0;
}
.slider__wrap--hacked {
	opacity: 1;
}
.slider__back {
	position: absolute;
	width: 100%;
	height: 100%;
	margin-right: 50px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: none;
	transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0%;
	background-size: auto 133.3333%;
	background-position: center;
	background-repeat: none;
	transform: scale(0.75);
	transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
	opacity: 0;
	box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
	padding: 15vh;
	box-sizing: border-box;
}
.slider__content {
	position: relative;
	top: 50%;
	width: auto;
	transform: translateY(-50%);
	color: white;
	font-family: "Heebo", sans-serif;
	opacity: 0;
	transition: opacity 450ms;
}
.slider__content h1 {
	font-family: 'Futura', sans-serif;
	font-weight: 400;
	font-size: 9vh;
	line-height: 0.85;
	margin-bottom: 0.75vh;
	pointer-events: none;
	text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
	cursor: pointer;
	font-size: 2.4vh;
	letter-spacing: 0.3vh;
	font-weight: 100;
	position: relative;
}
.slider__content a:after {
	content: "";
	display: block;
	width: 9vh;
	background: white;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 6vh;
	transform: translateY(-50%);
	transform-origin: 0% 50%;
	transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
	content: "";
	border-top: 1px solid white;
	border-right: 1px solid white;
	display: block;
	width: 1vh;
	height: 1vh;
	transform: translateX(0) translateY(-50%) rotate(45deg);
	position: absolute;
	font-family: "Heebo", sans-serif;
	font-weight: 100;
	top: 50%;
	left: 15vh;
	transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
	transform: scaleX(1.5);
	transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
	transform: translateX(6vh) translateY(-50%) rotate(45deg);
	transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
	position: absolute;
	left: 0;
	height: 100vh;
	width: 100vw;
	transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition-delay: 600ms;
	pointer-events: none;
	z-index: 0;
}
.slider__slide--active {
	transform: translatex(0%);
	z-index: 2;
}
.slider__slide--active .slider__wrap {
	transform: translateX(0);
	transform-origin: 100% 50%;
	opacity: 1;
	-webkit-animation: none;
	animation: none;
}
.slider__slide--active .slider__back {
	filter: blur(1.5vh);
	transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
	transform: scale(0.8);
	box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
	pointer-events: auto;
	opacity: 1;
	transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
	transition-delay: 900ms;
}
.slider__slide--active .slider__content {
	opacity: 1;
	transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
	-webkit-animation-name: hack;
	animation-name: hack;
	-webkit-animation-duration: 900ms;
	animation-duration: 900ms;
	-webkit-animation-delay: 450ms;
	animation-delay: 450ms;
	-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	50% {
		transform: translateX(-100vw);
		opacity: 1;
	}
	51% {
		transform: translateX(-100vw);
		opacity: 0;
	}
	52% {
		transform: translateX(100vw);
		opacity: 0;
	}
	100% {
		transform: translateX(100vw);
		opacity: 1;
	}
}
@keyframes hack {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	50% {
		transform: translateX(-100vw);
		opacity: 1;
	}
	51% {
		transform: translateX(-100vw);
		opacity: 0;
	}
	52% {
		transform: translateX(100vw);
		opacity: 0;
	}
	100% {
		transform: translateX(100vw);
		opacity: 1;
	}
}
/* Imags des slide*/

.sig {
	position: fixed;
	bottom: 8px;
	right: 8px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 100;
	font-family: sans-serif;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 2px;
	z-index: 9999;
}

/* Le Carrousel des produits*/
.carousel {
	display: flex;
	overflow: hidden;
}			
.carousel-container {
	position: relative;
	text-align: center;
}
#categories h1 {
	font-family: 'Futura', sans-serif;
	font-size: 44px;
	font-weight: bold;
	text-transform: uppercase; /* Met le texte en majuscules */
	margin-bottom: 20px;

}
.carousel-title {
	margin-top: 20px;
}
.carousel-dots {
	position: relative;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}
.carousel-dots span {
	width: 10px;
	height: 10px;
	background-color: #ddd;
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}
.carousel-dots span.active {
	background-color: #333;
}
.product-details {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(10, 10, 10, 0.7); /* Arrière-plan semi-transparent */
	padding: 20px;
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre derrière les détails du produit */
}
.product-container {
	position: relative;
	overflow: hidden;
	border-radius: 2px; /* Coins arrondis pour le conteneur */
}
.product-container {
	width: 25%; /* Affiche 4 produits en même temps */
	padding: 10px; /* Ajoute de l'espace entre les produits */
	box-sizing: border-box;
}
.product {
	border-radius: 4px; /* Coins arrondis pour le produit */
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre derrière le produit */
	position: relative; /* Ajoutez une position relative au produit parent */
	text-align: left;
}
.product img {
	width: 100%; /* Remplit la largeur du conteneur */
	border-bottom: 1px solid #ddd; /* Ajoute une bordure inférieure */
}
.product h4,
.product p {
	margin: 10px;
}
.product-icons {
	position: absolute;
	bottom: 10px; /* Déplace les icônes vers le bas */
	right: 10px; /* Déplace les icônes vers la droite */
	display: flex;
	justify-content: space-between;
	font-weight: lighter;
}

.product-price {
	position: absolute;
	bottom: 5px; /* Déplace les icônes vers le bas */
	left: 20px; /* Déplace les icônes vers la droite */
	font-size: 25px;
	font-weight: bold;
	color:#555149;
	margin-bottom: 5px;
}
.product-icons i {
	font-size: 20px; /* Taille de police des icônes */
	margin-right: 5px; /* Ajoute de l'espace entre les icônes */
	margin-left: 5px; /* Ajoute de l'espace entre les icônes */
}
.product-icons {
	color:rgba(117,116,114,0.5);
	padding:5px;
	cursor:pointer;
}
.product-icons :hover{
	color:#FF4C79;
}

.heartIcon{
	color:rgba(117,116,114,0.5);
}
/* Ajoutez des styles pour des écrans plus petits (par exemple, moins de 768px) */
@media (max-width: 768px) {
	.carousel {
		flex-wrap: wrap;
	}

	.product-container {
		width: 50%;
	}
  
  
  	

}

/* Ajoutez d'autres styles pour des écrans encore plus petits si nécessaire */
@media (max-width: 480px) {
	.product-container {
		width: 100%;
	}
}

.section-margin{
	margin:45px 0
}

@media (min-width: 980px){
	.section-margin{
		margin:70px 0
	}
}

@media (min-width: 1100px){
	.section-margin{
		margin:120px 0
	}
	.section-margin.calc-60px{
		margin:120px 0 70px 0
	}
}
.section-margin--small{
	margin:35px 0
}

@media (min-width: 1000px){
	.section-margin--small{
		margin:98px 0
	}
}
.owl-carousel {
  display: flex;
  flex-wrap: nowrap; /* Empêche le défilement des éléments sur plusieurs lignes */
  overflow: hidden; /* Masque les éléments en dehors du conteneur */
}
.owl-carousel .owl-stage{
	display:flex
}
.hero-carousel__slide{
	position:relative
}
.hero-carousel__slide::after{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.8);
	transform:translateY(50px);
	opacity:0;
	transition:all .4s ease
}
.hero-carousel__slideOverlay {
	position: absolute;
	text-align: left;
	left:0;
	bottom: 50px;
	background: #95C11F;
	padding: 23px 90px 23px 25px;
	transform: translateY(-100%); /* Déplace le texte vers la gauche */
	opacity: 0;
	z-index: -1;
	transition: all 0.4s ease-in-out;
}
.hero-carousel__slideOverlay h3{
	font-family: 'Futura', sans-serif;
	font-size:20px;
	font-weight:400;
	color:#fff
}
.hero-carousel__slideOverlay p{
	color:#fff;
	margin:0
}
.hero-carousel__slide:hover::after{
	transform:translateY(0);
	opacity:1
}
.hero-carousel__slide:hover .hero-carousel__slideOverlay{
	transform:translateY(0);
	text-decoration: none;
	opacity:1;
	z-index:2
}			
.owl-carousel .owl-item {
	flex: 0 0 auto; /* Empêche le rétrécissement des éléments */
}
.hero-carousel__slide {
	width: 100%; /* Largeur de chaque élément du carrousel */
	margin-right: 15px; /* Marge entre les éléments (ajustez selon vos besoins) */
}


/* Ajoutez les styles pour le carrousel responsive si nécessaire */
@media (max-width: 768px) {
	.owl-carousel .owl-item {
		margin-right: 0; /* Ajustez la marge pour des écrans plus petits si nécessaire */
	}
}

/* Témoignage de clients satisfaits*/			
:root{
	--color: #333; 
	--color1: #00b4ff; 
	--color3: #ff0048; 
}
#temoignage{
	background-color:var(--color);
}
.container {
	position:relative;
	text-align: center;
	color: var(--color);
	width: 100%;
	min-height: 50vh;
	display: flex;
	margin-top:-50px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background-image: url(../img/t01.jpg);*/
	background-size: cover;
	background-position: center;

	/*  this is where the magic happens:  */
	background-attachment: fixed;
}
.blank{
	position: relative;
}
.blank::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 86%;
	background: rgba(0, 0, 0, 0.4); /* Noir avec une opacité de 70% */
	z-index: 1; /* Assurez-vous que le cache est en avant-plan */
}
.blank {
	width: 100%;
	margin-top: -50px;
	min-height: 50vh;
	background-image:url(../img/t07.jpg);
	background-attachment: fixed;
	text-align: center;
}
.other {
	position: relative;
}

.other::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Noir avec une opacité de 70% */
	z-index: 1; /* Assurez-vous que le cache est en avant-plan */
}
.other {
	width: 100%;
	min-height: 70vh;
	margin-top: -50px;
	background-image: url(../img/t05.jpg);
	background-attachment: fixed;
	text-align: center;
	background-color: var(--color);
	display: flex;
	align-items: center;
	justify-content: center;
}
.avatar-container {
	display: flex;
	flex-direction: column;
	align-items: Left;
	justify-content: flex-start;
	position: relative;
	margin-top: 20px; /* Ajustez la marge vers le bas selon vos besoins */
	margin-bottom: 0px;
}
.avatar {
	position: relative;
	width: 70px; /* Ajustez la taille du cercle selon vos besoins */
	height: 70px; /* Ajustez la taille du cercle selon vos besoins */
	border-radius: 50%;
	overflow: hidden;
	background-color: #fff; /* Couleur de fond du cercle */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Ombre du cercle */
	display: flex;
	align-items: center;
	justify-content: center;
}
.avatar-icon {
	font-size: 50px; /* Ajustez la taille de l'icône selon vos besoins */
	color: #333; /* Couleur de l'icône */
}
.info-container {
	margin-top: 10px; /* Ajustez l'espace entre le cercle et les informations */
	text-align: left;
}
.name {
	font-size: 16px; /* Ajustez la taille du nom selon vos besoins */
	font-weight: bold;
	color:#FF9B00;
}
.comment {
	font-size: 12px; /* Ajustez la taille du commentaire selon vos besoins */
	color: #aaa; /* Couleur du commentaire */
}
.bubble-text{
	background:#139ee0;
	color:#fff;
	text-align: left;
	font-style: italic;
	font-weight: lighter;
	line-height: 22px;
	padding:7px 15px;
	border-radius:3px;
	width:300px;
	margin-bottom: 0;
}
.bubble-text::after{
	margin-top: 0;
	border-top: 22px solid ;
	border-left: 0px solid transparent;
	border-right: 22px solid transparent;
	left: 60px;
	bottom: 70px;
	width: 0;
	height: 0;
	content: "";
	display: block;
	position: absolute;
	border-top-color: #139ee0;
	border-left-style: inset;
	border-right-style: inset;
}
.autre {
	width: 100%;
	min-height: 1vh;
	background-color: var(--color1);
}
.second {
	background-image:url(../img/t03.jpg);
	background-attachment: fixed;
	height: 600px;
	margin-top: 0px;
}		
.card > a {
	margin-bottom: 2em;
}
.item {
	display: flex;
	max-width: 320px;
	background-color: white;;
	flex-direction: column;
	align-items: center;
	border-radius: .5em;
	-webkit-box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
	-moz-box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
	box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
}
.img {
	width: 90%;
	height: 200px;
	background-color: lightgrey;
	background-size: cover;
	background-position: center;
	margin-top: 20px;
	border-radius: .3em;;
}
.img-first {
	background-image: url(../img/t02.jpg);
}
.img-second {
	background-image: url(../img/t03.jpg);
}
.img-third {
	background-image: url(../img/t02.jpg);
}
.second {
	flex-direction: row;
	gap: 1.6em;
}		

/* Mon Blog pour mes nouvelles créations */
.blog-container {
	width: 100%;
	max-width: 1200px; /* Ajustez la largeur maximale selon vos besoins */
	margin: 0 auto;
	padding: 50px;
	box-sizing: border-box;
}

.blog-title {
	text-align: center;
	font-size:44px;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.blog-entry {
	display: flex !important;
	margin-top: 20px;
}

.left-block {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-right: 10px; /* Ajustez la marge entre l'image de gauche et la partie droite */
}

.image-container {
	position: relative;
}

.image-container img {
	width: 100%;
	height: 100%; /* Ajustez la hauteur de l'image selon vos besoins */
	object-fit: cover;
}

.entry-info {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-left: 40px;
	margin-bottom: 135px;

	width: 100%;
	/* background: rgba(0, 0, 0, 0.5); Fond semi-transparent noir */
	color: #fff; /* Couleur du texte */
	padding: 10px;
	box-sizing: border-box;
}

.entry-date,
.entry-title {
	margin: 0;
	color:#111;
	}

.right-block {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.right-top img,
.right-bottom img {
	width: 49%;
	max-height: 100%;
	object-fit: cover;
	margin-right: 10px; /* Ajustez la marge entre les images de droite */
}

.entry-date {
	position: relative;
	top:80px;
	font-size: 14px;
	color: #888;
}

.entry-title {
	position: relative;
	top:80px;
	font-size: 20px;
	margin-top: 5px;
	margin-bottom: 0;
}

.entry-info .entry-date {

	position: relative;
	top:80px;
	font-size: 14px;
	color: #888;
}

.entry-info .entry-title {
	position: relative;
	bottom:80px;
	font-size: 20px;
	margin-top: 5px;
	margin-bottom: 0;
	color:#FFF;
}
.left-block:hover .image-container img {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Ajoutez une ombre lorsqu'il est survolé */
}

.left-block .image-container img {
	width: 100%;
	max-height: 100%; /* Ajustez la hauteur de l'image selon vos besoins */
	object-fit: cover;
	transition: box-shadow 0.7s ease; /* Ajoute une transition fluide à l'ombre */
}
.right-top:hover,
.right-bottom:hover {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Ajoutez une ombre lorsqu'il est survolé */
}

.right-top,
.right-bottom {
	display: flex;
	margin-bottom: 10px;
	transition: box-shadow 0.7s ease; /* Ajoute une transition fluide à l'ombre */
}
					
footer {
	width: 100%;
	margin-bottom: 0;
	background-color: #111; /* Changez la couleur de fond selon vos préférences */
	font-size: 13px;
	padding-top: 50px; /* Ajoutez un padding pour ajouter la marge supérieure */
	color: white;
	display: flex;
	justify-content: space-between;
	padding: 20px 30px; /* Ajoutez un espace intérieur selon vos besoins */
}

.footer-section {
	text-align: left;
	position:relative;
	margin-top:50px;
}

.footer-section h4 {
	margin-top: 50px; /* Ajoutez la marge supérieure de 50px aux titres */
	font-weight: 500;
	font-size:14px;
	text-transform: uppercase;
	font-family: 'Futura', sans-serif;
	letter-spacing: 3px;
	margin: 0 0 15px 30px;
}

.footer-section p {
	font-size:14px;
	line-height: 22px;
	font-weight: 100;
	margin: 20px 0 10px 30px;
}

.underline {
	width: 40px;
	height: 2px;
	background-color: #FF9B00; /* Changez la couleur de l'underline selon vos préférences */
	margin-left: 30px;
}

.section-content {
	position: relative;
	z-index: 2;
}

.section-content button {
	background-color: #fff; /* Couleur de fond du bouton */
	color: #333; /* Couleur du texte du bouton */

	padding: 10px 20px; /* Ajustez le rembourrage selon vos besoins */
	font-size: 16px; /* Ajustez la taille du texte du bouton selon vos besoins */
	border: none;
	cursor: pointer;
}
.social-icons a {
	align-items: flex-end;
	color: #333; /* Couleur des icônes */
	margin-left: 10px; /* Ajustez l'espacement entre les icônes selon vos besoins */
	font-size: 20px; /* Ajustez la taille des icônes selon vos besoins */
}
.social-icons {
	border-top: 1px dashed #333; /* Ajoutez une bordure supérieure en pointillés */
	padding-top: 10px; /* Ajoutez un espacement au-dessus de la ligne en pointillés */
	text-align: right; /* Alignez les icônes à droite */
}

/* Ajustements pour les images aimées */
.liked-images {
	display: flex;
	margin-top: 30px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	align-content: center;
}

.liked-images img {
	width: 100px;
	height: 100px;
	margin-left:5px;
	margin-bottom: 5px;
	border-radius: 3px;
}

.popular-products {
	margin-top: 50px; /* Ajustez la marge selon vos besoins */
	margin-left: 30px;
	display: flex;
	flex-wrap: wrap;
}

.popular-products h2 {
	font-size: 24px;
	font-weight: bold;
	width: 100%;
	margin-bottom: 20px;
}
.product-container {
	display: flex;
	flex-wrap: wrap; /* Permet aux produits de passer à la ligne lorsque l'espace est insuffisant */
	flex-direction: row; /* Aligne les produits horizontalement */
	width:100%;
}
.product1 {
	flex: 0 0 calc(20% - 18px); /* Calcule la largeur de chaque produit avec marge */
	align-items: center;
	margin-bottom: 20px;
	width:200px;
	margin-left: 7px;
	margin-right: 7px;
}

.product1 img {
	width: 200px; /* Ajustez la taille de l'image selon vos besoins */
	border-radius: 4px;
}

.product1-details {
	flex-grow: 1;
	width:200px;
	transition: box-shadow 0.7s ease; /* Ajoute une transition fluide à l'ombre */
	font-weight: 500;
	letter-spacing: 0;
	text-transform: uppercase;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.product1-details:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoutez une ombre lorsqu'il est survolé */
	width:200px;
}

.product1 h4 {
	font-size: 18px;
	margin-bottom: 5px;
}

.product1 p.price {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 20px;
}

.product1-details p.price {
	font-size: 20px;
	font-weight: lighter;
	color: #FF7C00;
}

.ss_ttr{
	margin-top: 50px; 
	margin-left: 20px; 
	font-family: 'Futura', sans-serif; 
	letter-spacing: 1px; 
	text-transform: uppercase;
	color:#b7b1a9
}



#cartOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

#cartContent {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#cartItems {
    list-style: none;
    padding: 0;
}

#closeCartBtn {
    background: #333;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Ajoutez ces styles à votre fichier CSS existant */			
#cart {
	position: fixed;
	top: 0;
	right: -120%; /* Initial position, panier caché à droite */
	height: auto;
	width: 800px;
	background-color: rgba(13,5,0,0.90);
	transition: right 0.5s ease-in-out; /* Transition avec un délai de 0.5s et une accélération facile */
	z-index: 9000;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet visuel */
	overflow-y: auto;
}

#cart-left {
	float: left;
	color:#FFFFFF;
	width: 65%;
	padding: 20px;
	box-sizing: border-box;
}

#cart-left h2{
	font-size: 34px;
	margin-bottom: 30px
}

#cart-right {
	float: right;
	width: 35%;
	padding: 20px;
	box-sizing: border-box;
}

#cart-items div {
	margin-bottom: 20px;
}

#cart-total {
	margin-top: 20px;
	text-align: right;
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 40px;
}

#customer-form {
	margin-top: 20px;
}

#customer-form label,
#customer-form input,
#customer-form textarea,
#customer-form button {
	display: block;
	margin-bottom: 10px;
}

.btn_plus{
	border-radius: 3px;
}

.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
	color: #333; /* Couleur du texte pour une meilleure visibilité */
}

.cart-badge {
	background-color: red;
	color: white;
	border-radius: 50%;
	padding: 0.2em 0.5em;
	font-size: 0.8em;
	position: absolute;
	top: 0.2em; /* Ajustez la position verticale en fonction de votre conception */
	right: 0.2em; /* Ajustez la position horizontale en fonction de votre conception */
}


/* Le bandeau en haut de page*/
#bandeau {
	width: 100%;
	height: 267px;
	background-color: #2c3e50; /* Couleur de fond du bandeau, ajustez selon vos besoins */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#bandeau img {
	max-width: 100%; /* Assure que l'image ne dépasse pas la largeur du conteneur */
	max-height: 100%; /* Assure que l'image ne dépasse pas la hauteur du conteneur */
}
#bandeau h1 {
	font-weight: bold;
	text-transform: uppercase; /* Convertit le texte en majuscules */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #ffffff; /* Couleur du texte, ajustez selon vos besoins */
}
#arborescence {
	background-color: #e0e0de; /* Couleur de fond de la bande grise, ajustez selon vos besoins */
	padding: 10px; /* Espacement interne pour améliorer la lisibilité, ajustez selon vos besoins */
	height: 40px;
	text-align: left;
	line-height: 20px; /* Ajustez la hauteur de ligne pour centrer le texte verticalement */
	text-transform: uppercase; /* Convertit le texte en majuscules */
	font-size:12px;
	padding-left: 30px;
	font-weight: 900;
	color:#A4A4A1;
}
#arborescence span{color:#4B4B49}

/* Le bloc des produits*/
#bloc-produits {
	display: flex;
	width: 100%;
	margin-top: 70px;
}

.partie-gauche {
	width: 30%;
	padding: 50px; /* Espacement interne, ajustez selon vos besoins */
}

.ttr_gch{
	text-transform: uppercase; 
	font-size:20px; 
	color:#b7b1a9
}
.men_gch a{
	text-decoration: none;
	margin-left: 30px;
	line-height: 30px;
	font-size: 18px;
	color:#655F58;
}
.men_gch a:hover{
	text-decoration: none !important;
	color:#FF9C00 !important;

}

.partie-droite {
	width: 70%;
	background-color: #ffffff; /* Couleur de fond de la partie de droite, ajustez selon vos besoins */
	padding: 20px; /* Espacement interne, ajustez selon vos besoins */
}
.formulaire-recherche {
	display: flex;
	border: 1px solid #efefef; /* Bordure grise, ajustez selon vos besoins */
	border-radius: 3px; /* Contour arrondi de 3px */
	overflow: hidden; /* Empêche le contenu de déborder à l'extérieur */
	margin-bottom: 40px;
}

.formulaire-recherche input {
	flex: 1; /* Fait en sorte que le champ de texte occupe tout l'espace disponible */
	padding: 8px; /* Espacement interne du champ de texte, ajustez selon vos besoins */
	border: none;
	outline: none;
}

.formulaire-recherche .rech {
	color:#A4A4A1 ; /* Couleur du texte du bouton, ajustez selon vos besoins */
	border: none;
	padding: 16px; /* Espacement interne du bouton, ajustez selon vos besoins */
	cursor: pointer;
}
.bloc-produits-groupe {
	margin-top: 50px; /* Espacement entre le formulaire de recherche et le bloc de regroupement des produits */
}

label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px; /* Espacement entre chaque groupe */
}

input[type="checkbox"] {
	margin-right: 10px; /* Espacement entre le checkbox et le titre */
}

.mnchkbx{
	width:18px;
	height: 18px;
}
.titre-produit {
	margin-right: auto; /* L'auto margin pousse le reste des éléments à l'extrême droite */
	margin-left: 10px; /* Espacement entre le checkbox et le titre */
}

.nombre-produits {
	width: 30px; /* Largeur du cercle */
	height: 30px; /* Hauteur du cercle */
	border-radius: 50%;
	background-color: #FF9C00; /* Couleur de fond du cercle, ajustez selon vos besoins */
	color: #fff; /* Couleur du texte du cercle, ajustez selon vos besoins */
	display: flex;
	align-items: center;
	justify-content: center;
}

.bloc-produits-populaires {
	margin-top: 50px; /* Espacement entre le bloc de regroupement des produits et le bloc des produits populaires */
}

h3 {
	margin-bottom: 10px; /* Espacement entre le titre et la liste des produits populaires */
}

.produit-populaire {
	display: flex;
	align-items: center;
	background-color: #FCF8F4;
	border-radius:5px;
	margin-bottom: 20px; /* Espacement entre chaque ligne de produits */
}

.produit-populaire img {
	width: 80px; /* Largeur de l'image carrée */
	height: 80px; /* Hauteur de l'image carrée */
	border-radius: 5px;
	margin-right: 10px; /* Espacement entre l'image et le texte à droite */
}

.info-produit {
	flex: 1; /* Permet au texte de prendre tout l'espace disponible à droite de l'image */
}

.info-produit h6 {
	margin: 0; /* Supprime la marge du titre */
	text-transform: uppercase;
}

.info-produit p {
	font-size: 14px;
	margin: 0; /* Supprime la marge du paragraphe */
	color: #FF9C00; /* Couleur du texte du prix, ajustez selon vos besoins */
}

.bloc-produits {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px; /* Espacement entre le bloc des produits populaires et le bloc des produits */
}

.produit {
	position: relative;
	width: calc(33.33% - 20px); /* 3 produits par ligne avec espacement entre eux */
	margin-bottom: 20px; /* Espacement entre les lignes de produits */
}

.produit img {
	width: 90%; /* Remplit la largeur du conteneur parent */
	height: auto; /* Ajuste la hauteur proportionnellement à la largeur */
	border-radius: 10px; /* Coins arrondis */
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 90%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Modifier justify-content: flex-start; en justify-content: space-between; */
	align-items: flex-start; /* Ajouter align-items: flex-start; */
	padding: 10px; /* Ajouter une marge intérieure */
	opacity: 0;
	transition: opacity 0.7s ease;
	background-color: rgba(0, 0, 0, 0.4); /* Fond semi-transparent */
	border-radius: 5px; /* Coins arrondis */
}

.produit:hover .overlay {
	opacity: 1;
}

.overlay h6,
.overlay p,
.overlay .icons {
	margin-top: 15px;
	color:#fff;
	line-height: 18px
}
.overlay h3{
	margin-top: -80px;
	font-weight: lighter;
	color: #FF9C00;
	line-height: 14px
}

.overlay h6{
	text-transform: uppercase;
}

.icons {
	display: flex;
	justify-content: flex-end; /* Aligner les icônes à droite */
	width: 100%;
	margin-right: 10px;
}

.icons i {
	font-size: 18px;
	color: rgba(20,20,20,0.5);
	cursor: pointer;
	margin-left: 5px; /* Ajouter une marge entre les icônes */
	padding: 5px;
	background-color: rgba(255,255,255,0.20);
	transition: opacity 0.7s ease;
}

.icons i:hover {
	color: rgba(255,255,255,1)
}

/* Style de la pagination (à ajouter en fonction de vos besoins) */
.pagination-container {
	text-align: center; /* Centrer la pagination */
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	width: 100%; /* Prendre la pleine largeur de la page */
	box-sizing: border-box; /* Inclure les marges et les bordures dans la largeur */
}

.pagination a {
	color: #1A0001;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color 0.7s ease, color 0.3s ease;
	margin: 0 5px;
}

.pagination a:hover {
	background-color: #FF9C00;
	color: #fff;
}

.pagination .active {
	background-color: #FF9C00;
	color: #fff;
	pointer-events: none; /* Désactiver les liens actifs pour éviter les clics */
}

.bloc-images {
	display: flex; /* Utilisez flexbox pour la mise en page */
}

.main-image-container {
	margin-right: 20px; /* Marge entre l'image principale et les vignettes */
}

.vignettes {
	display: flex; /* Utilisez flexbox pour aligner les vignettes verticalement */
	flex-direction: column; /* Alignement vertical des vignettes */
}

.vignettes img {
	margin-bottom: 7px; /* Marge entre les vignettes verticales */
	margin-left: -10px;
}


.bloc-textes {
	text-align: left;
	margin-top: 50px;
	margin-right: 70px
}

h2 {
	font-size: 44px;
}

.commentaire {
	font-size: 16px;
	font-style: italic;
	color: #888;
}

.description {
	font-family: 'Another Shabby', cursive;
	margin-top: 30px;
	font-size: 55px;
	line-height: 25px;
	font-weight:bold;
	color:#FF9C00;
}

.prix {
	margin-top: 50px;
	font-size: 70px;
	float: left;
}

.prix .expo{
	position:relative;
	font-size:30px;
	top:-30px
}

.icones {
	margin-top: 50px;
	float: right;
}

.icones i {
	margin-left: 20px;
	font-size: 20px;
	cursor: pointer;
}

.icones i:hover {
	color: #ff0000; /* Changez la couleur au survol selon vos préférences */
}


nav ul{display: block; /* Masquer le menu par défaut */}
.show-menu{display: none; /* Masquer le menu par défaut */}
.temo{z-index: 20;}
.blog-entry_{display:none;}
.blog-entry{display:block;}

.vignettes img {
	transition: opacity 1s ease-in 0s; 
	opacity: 1;
	width:165px;
}
.main-image-container img {
	transition: opacity 1s ease-in 0s; 
	opacity: 0;
	width:500px;
}
@media only screen and (max-width: 768px) {
	nav {
		height: auto;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px 0 0 10px;
        position:absolute;
        top:-40px;
	}

	nav .logo {
		position: static;
		margin-bottom: 20px;
      	top:40px;
	}
  	.logo img{
  		width:90px;
      	position: relative;
      	top:50px;
  	}
	nav ul {
		display: none !important; /* Masquer le menu par défaut */
		flex-direction: column;
		text-align: right;
		position: relative;
		top: -100px;
	}

	nav ul.show-menu {
		display: none; /* Afficher le menu lorsqu'il a la classe show-menu */
	}

	nav ul li {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.show-menu {
		display: block !important;
		top: -40px;
		right: -170px;
	}


	.reseaux-sociaux {
		position: relative;
		top:-30px;
		right: -180px;
	}
	.separateur {display:none !important;}

	.hamburger {
		display: block;
		position: relative;
		top: -60px;
		right: -290px;
		z-index: 2;
		cursor: pointer;
	}

	.hamburger div {
		width: 25px;
		height: 3px;
		background-color: #333;
		margin: 5px 0;
		transition: transform 0.3s ease;
	}

	#quisommesnous .contenu {display:none}

	#quisommesnous .contenu_ {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	#quisommesnous .image_ {
		flex-basis: 100%;
		margin-right: 20px;
	}

	#quisommesnous .image_ img {
		width: 100%;
		border-radius: 8px;
	}

	#quisommesnous .texte_ {
		flex-basis: 55%;
		left:-180px;
		top:-120px;
		position: relative;
		height: 100vh; 
		margin: 0;
		z-index: 2; /* Placez le texte au-dessus du triangle */
	}

	#quisommesnous .bouton {
		position: relative;
		top: 10px;
		margin-bottom: 10px;
		bottom: 20px; /* Ajustez la distance depuis le bas selon vos besoins */
		right: 20px; /* Ajustez la distance depuis la droite selon vos besoins */
	}

	.product-container{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		width: 290px !important;
		align-items: center;
	}
  .siel{margin-bottom: 20px; margin-left:30px}
	.carousel-container {
        position: relative;
        text-align: center;
        left: -30px;
	}
	.blank {
		width: 100%;
		margin-top: -30px;
		min-height: 40vh;
		background-image:url(../img/t07.jpg);
		background-attachment: fixed;
		text-align: center;
	}

	.temo{
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: -15px;
		flex-direction: column;
		align-items: center;
	}

	.blog-entry_{display:block;}
	.blog-entry{display:none !important;}
	.bubble-text::after{
		margin-top: 0;
		border-top: 22px solid ;
		border-left: 0px solid transparent;
		border-right: 22px solid transparent;
		left: 60px;
		bottom: 132px;
		width: 0;
		height: 0;
		content: "";
		display: block;
		position: absolute;
		border-top-color: #139ee0;
		border-left-style: inset;
		border-right-style: inset;
	}
	/* Ajoutez vos styles CSS pour le diaporama ici */
    .carousel {
        display: flex;
        overflow: hidden;
        margin: 0 -10px; /* Ajoute une marge de -10px à gauche et à droite pour compenser la marge des éléments internes */
    }
    .product-container {
        width: calc(100% / 4 - 20px); /* Calcule la largeur en pourcentage avec une marge de 10px à gauche et à droite */
        margin: 0 10px; /* Ajoute une marge de 10px à gauche et à droite */
        box-sizing: border-box;
    }
	.hero-carousel__slide {
        width: 130%;
        margin-right: -130px;
        margin-bottom: 20px;
    }
	.blog-entry {
		display: flex;
		margin-top: 20px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
	}		

	.left-block,
	.right-block {
		flex-basis: 100%;
		margin-right: 0;
	}


	footer {
		width: 100%;
		margin-bottom: 0;
		background-color: #111;
		font-size: 13px;
		padding-top: 50px;
		color: white;
		display: flex;
		justify-content: center;
		padding: 20px 30px;
		flex-direction: column;
		align-items: center;
	}

	#cart {
		position: fixed;
		display:flex;
		top: 0;
		right: -150%; /* Initial position, panier caché à droite */
		max-height: 100vh; /* Hauteur maximale du panier pour occuper 100% de la hauteur de l'écran */
		height: auto;
		width: 500px;
		background-color: rgba(13,5,0,0.90);
		transition: right 0.5s ease-in-out; /* Transition avec un délai de 0.5s et une accélération facile */
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		z-index: 9000;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet visuel */
		overflow-y: auto;
	}
	#bandeau {
		width: 100%;
		height: auto;
		position: relative;
		top: 167px;
		margin-bottom: 30px;
		background-color: #2c3e50;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#arborescence {
		background-color: #e0e0de;
		position: relative;
		margin-top: 165px !important;
		padding: 10px;
		height: 40px !important;
		text-align: left;
		line-height: 20px;
		text-transform: uppercase;
		font-size: 12px;
		padding-left: 30px;
		font-weight: 900;
		color: #A4A4A1;
	}
	#bloc-produits {
        display: flex;
        width: 107%;
        margin-top: 0px;
        margin-left: -10px !important;
        flex-direction: column-reverse;
        align-items: center;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
	}
	.bloc-produits {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 20px;
		flex-direction: column;
		align-items: center;
	}
	.produit {
		position: relative;
        width: calc(130% - 1px);
        margin-bottom: 20px;
        margin-left: 130px;
	}
	.produit img {
		width: 300%;
		height: auto;
		border-radius: 10px;
	}
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 70%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 10px;
		opacity: 0;
		transition: opacity 0.7s ease;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 5px;
	}
	.pagination-container {
		text-align: center;
		padding: 0 200px 0px 100px;
	}
	.pagination a {
		color: #1A0001;
		padding: 8px 9px;
		text-decoration: none;
		transition: background-color 0.7s ease, color 0.3s ease;
		margin: 0 5px;
	}
	.partie-droite {
		width: 100%;
		background-color: #ffffff;
		padding: 20px;
	}
	
  	.product-container .product img{
  		display: block;
    	max-width: 300px !important;
      	height: auto;
  	}
  
	.partie-gauche {
		width: 100%;
		padding: 20px;
	}
	
	.bloc-textes {
		text-align: left;
		margin-top: 50px;
		margin-right: 10px;
		margin-left: 30px;
	}
	.description {
		font-family: 'Another Shabby', cursive;
		margin-top: 30px;
		font-size: 45px;
		line-height: 40px;
		font-weight: bold;
		color: #FF9C00;
	}
	.bloc-images {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: space-around;
	}
	.vignettes {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
	}
	.main-image-container img {
		transition: opacity 1s ease-in 0s; 
		opacity: 1;
		max-width:500px !important;
	}
	.vignettes img {
		transition: opacity 1s ease-in 0s; 
		opacity: 1;
		max-width:165px !important;
	}
	
    #zoomImg {
      transform: translate(-50%, -50%) !important;
  	}
	
  	.owl-carousel {
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
  }
  
	section {
		margin-bottom: 40px;
		width: 100%;
		height: auto;
		padding-left: 20px !important;
		padding-right: 30px !important;
		margin-left: 40px !important;
		box-sizing: border-box;
	}
	#illustrations {
		position: relative;
		top: -67px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around !important;
		box-sizing: border-box;
	}
	#illustrations img{
		width:140px;
		height:auto !important;
	}
	.zeph{
		display: flex;
		position: relative;
		left: -35px;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	div .zeph {
        max-width: 90% !important;
    }
	.zeph div{
		width: 100% !important;
	}
	.valeur {
		display: flex !important;
		flex-direction: column-reverse !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
	}
	.valeur p{
		width:100% !important
	}
  .myo {
    max-width: 100% !important;
}

	.valeur div{margin-left: -30px !important;}
	section img {
		display: block;
		max-width: 70% !important;
		height: auto;
	}
	.video{display:none;}
	.video-container {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 aspect ratio */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}
	.video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
  
  	.popular-products {
      margin-top: 50px !important;
      margin-left: 30px;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }
}