/* CSS Document Kianfa */
@keyframes hide{
	from{opacity: 0.4}
	to{opacity: 1}
}
@keyframes fade{
	from{opacity: 0}
	to{opacity: 1}
}
@keyframes pulse {
  0% { transform: scale(1); background: seagreen; color: #fff; }
  50% { transform: scale(1.3); background: crimson; color: #fff; }
  100% { transform: scale(1); background: #1e90ff; color: #fff; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Effet de déchirure */
@keyframes tearEffect {
  0% { transform: rotate(0) scale(1); opacity: 1; }
  30% { transform: rotate(-5deg) scale(1.05); }
  60% { transform: rotate(5deg) scale(0.9); }
  100% { transform: rotate(10deg) translateX(200%) scale(0.5); opacity: 0; }
}

.tear-out {
  animation: tearEffect 0.7s ease forwards;
}

body{
	background-color:#fff;
	padding: 0px;
	margin: 0px;
	color: rgb(41,41,48);
    font-family: Montserrat,serif
}
ul,ol{
	margin:0px;
    list-style-type: none
}
button{
	background-color:#030411;
	color: #fff;
	cursor: pointer;
	border: none;
}
input{
	cursor: pointer
}
a{
	text-decoration: none
}
::-webkit-scrollbar{
	width: 10px;
	height: 5px;
}
::-webkit-scrollbar-thumb{
	background-color: rgb(41,41, 48);
	border-radius: 10px
}
::-moz-scrollbar{
	width: 10px;
	height: 5px;
}
::-moz-scrollbar-thumb{
	background-color: rgb(41,41, 48);
	border-radius: 10px
}
::-o-scrollbar{
	width: 10px;
	height: 5px;
}
::-o-scrollbar-thumb{
	background-color: rgb(41,41, 48);
	border-radius: 10px
}
::-ms-scrollbar{
	width: 10px;
	height: 5px;
}
::-ms-scrollbar-thumb{
	background-color: rgb(41,41, 48);
	border-radius: 10px
}
.alert_alert_flash-success{
	position: relative;
	width: 100%;
	min-height: 30px;
	background-color: lightseagreen;
	color: #fff;
	line-height:30px;
	float: ;
	font-size: 16px;
	text-align: center;
	border-radius: 8px
}
.alert_alert_flash-danger{
	position: relative;
	width: 100%;
	min-height: 30px;
	background-color: crimson;
	color: #fff;
	line-height: 30px;
	float: ;
	font-size: 16px;
	text-align: center;
	border-radius: 8px
}
/* Bouton pour fermer les flash messages */
.close-flash {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

/* Animation de disparition */
.alert_flash_hide {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.head{
    width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
.head-mobile{
    display: none;
    width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
.head-one{
    width: 100%;
    height: 130px;
    background-color: #fff;
	z-index:90;
	left :0px;
	line-height: 130px;
	-webkit-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-moz-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-o-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-ms-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	         box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
    position: relative
}
.head-one-mobile{
    text-align: center;
    width: 100%;
    height: 130px;
    background-color: #fff;
	z-index:90;
	left :0px;
	line-height: 130px;
	-webkit-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-moz-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-o-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-ms-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	         box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
    position: relative
}

.nav-cart-mobile{
    display: none!important
}
.con-head-m{
    display: inline-table;
}
.con-head-m-l{
    float: left;
    padding-left: 11px
}
.con-head-m-r{
    float: right;
    padding-right: 21px
}
.c-op-m{
    display: inline-table
}
.c-op-m a i{
    color: #000
}
.user-m{
    margin-left: 21px
}
.cart-m{
    margin-right: 31px
}
.head-pub{
    width: 100%;
    height: 30px;
    background-color: #030411 ;
	z-index:90;
	top:0px;
	left :0px;
	line-height: 30px;
	-webkit-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-moz-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-o-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-ms-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	         box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
    text-align: center;
    position: relative;
}
.head-pub img{
    width: 100%;
    height: 29px;
}
.head-pub span{
    color: #fff
}
.head-two{
    width: 100%;
    height: 50px;
    background-color: #fff ;
	z-index:89;
	top:160.5px;
	left :0px;
	line-height: 50px;
	-webkit-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-moz-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-o-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-ms-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	         box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
    position:absolute;
}
.head-two-mobile{
    width: 100%;
    height: 50px;
    background-color: #fff ;
	z-index:90;
	top:160.5px;
	left :0px;
	line-height: 50px;
	-webkit-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-moz-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-o-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	-ms-box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
	         box-shadow:0px 0.5px 0.5px gainsboro,0px 0.5px 0.5px gainsboro;
    position:absolute;
}
.logo-desck{
    padding-left: 22px;
    padding-top: 18px;
    float: left;
	height: 87%
}
.logo-mobile{
    height: 105px;
    padding-top: 18px;
}
.logo-desck img{
    width: auto;
    height: 105px
}
.logo-mobile img{
    width: auto;
    height: 105px
}
.search-desck{
    padding-left: 31px!important;
    float: left
}
.search-section{
    display: inline-block;
    margin: -6px
}
.input-search{
    width: 500px;
    height: 50px;
    border-radius: 3px;
    border: 1px solid #000;
    padding-left: 21px;
    color: slategray
}
.input-search-head{
    width: 500px;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #000;
    padding-left: 21px;
    color: slategray
}
.btn-search{
    width: 120px;
    height: 50px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    font-weight: bold;
}
.btn-search-head{
    width: 120px;
    height: 40px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    font-weight: bold;
}
.nav-icons{
    float: right;
    padding-right: 22px
}
.nav-nav-icons{
    display: inline-table;
    margin-right: 41px
}
.nav-nav-icons-m{
    display: inline-table;
    margin-right: 41px
}
.nav-nav-icons i{
    color: #030411
}
.nav-nav-icons-m i{
    color: #fff
}
.nav-target-user{
    font-weight: bold;
    color: black!important
}
.nav-target{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    color: #fff;
    text-align: center;
    position: absolute;
    float: left;
    line-height: 20px;
    font-weight: bold;
    margin-top: 68px;
    margin-left: -12px;
    padding: 2px
}
.shop-category{
    float: left;
    padding-left: 43px;
    font-size: 20px;
    font-weight: bold;
	cursor: pointer;
	color: #030411
}
.nav-menu{
    padding-left: 112px;
    float: left
}
.nav-menu-head{
    display: inline-table;
    margin-left: 31px
}

.nav-menu-head a{
    color: slategray
}
.nav-menu-head a:hover{
    color: crimson;
}
#search-head{
    display: none
}
.menu-option-head{
    float: right;
    padding-right: 33px
}
.options-head{
    height: 30px; 
    width: auto;
    border: none;
    border-radius: 2px;
    padding: 4px;
    cursor: pointer
}
.lang{
    display: inline-table;
    margin-right: 11px
}
.active-menu{
    color:crimson!important;
    text-decoration: underline
}
.social-icons-head-pub{
    float: right;
    padding-right: 33px
}
.social-icons{
    display: inline-table;
    margin-right: 11px
}
.social-icons i{
    color: #fff
}
.social-icons .fa-facebook:hover{
    color: #3b5998
}
.social-icons .fa-twitter:hover{
    color: #00aced
}
.social-icons .fa-instagram:hover{
    color: #cd486b
}
.social-icons .fa-pinterest:hover{
    color: #cb2027
}
.social-icons .fa-youtube-play:hover{
    color: #bb0000
}
.container{
	position:relative;
	top: 183px!important;
	margin-bottom: 81px;
    padding: 41px;
}
.footer{
    width: 100%;
    height: auto;
    background-color: #efeee5;
    left: 0px;
    top: 100px;
    position:relative;
    float:left;
    z-index: 100px;
    text-align: center;
}
.nav-menu-footer{
    display: inline-table;
    margin: 31px
}
.nav-menu-footer strong{
    font-size: 20px; 
    color: #000;
}
.nav-menu-footer p a:link{
    font-size: 15px; 
    color: #393737;
    font-weight: 100;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"
}
.inp-subscribe{
    display: inline-table;
    
}
.subscribe{
    width: 450px;
    height: 50px;
    padding-left: 11px;
    border-radius: 3px;
    border: 1px solid #000
}
.sub-text{
    font-size: 22px;
    text-align: left;
    color: #000000;
    font-weight: bold;
    margin-bottom: 12px
}
.sub-text-t{
    width: 500px;
    text-align: left;
    margin-bottom: 8px
}
.sub-text-t a{
    color: #393737;
    font-weight: bold
}
.sub-text-t a:hover{
    color: crimson;
}
.subscribe-btn{
    width: 120px;
    height: 50px;
    font-weight: bold;
    border-radius: 3px
}
.follow-section-footer{
    margin-bottom: 52px
}
.follow{
    display: inline-table;
    margin-left: 55px
}
.follow strong{
    font-size: 20px;
    color: #000;
   
}
.social-icons-footer{
    display: inline-table;
    margin-left: 22px
}
.social-icons-footer i{
    color: #000;
}
.social-icons-footer .fa-facebook:hover{
    color: #3b5998;
}
.social-icons-footer .fa-twitter:hover{
    color: #00aced;
}
.social-icons-footer .fa-instagram:hover{
    color: #cd486b;
}
.social-icons-footer .fa-pinterest:hover{
    color: #cb2027;
}
.social-icons-footer .fa-youtube-play:hover{
    color: #bb0000;
}
.app-store{
    display: inline-table;
    margin-left: 55px;
} 
.app{
    width: 150px;
    height: 70px;
    border: 1px solid #393737;
    line-height: 70px;
    border-radius: 10px;
    color: #393737;
    background-color: #fff
}
.app .fa-apple{
    color: #000
}
.app .fa-android{
    color: forestgreen
}
.footer-separate{
    color: #000
}
.paiement-secure{
    display: inline-table;
    margin: 15px;
    float: left
}
.paiement-method{
    font-size: 20px;
    color: #000;
    
}
.sections-cat{
    display: inline-block;
}
.copyright{
    float: right;
    margin-right: 22px
}
.category{
	position: relative;
    width: 230px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #999;
    float: left;
    text-align: left;
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
	z-index: 20;
	transition: width 0.4s ease, opacity 0.3s ease;
	
}
.cat-hvr{
	display: none;
	position: absolute
}
.category, .banner-cat, .widget-cat, .widget-cat-m {
  flex-shrink: 0;
  box-sizing: border-box;
}
.category.closed {
  width: 0 !important;
  opacity: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* Sous-menu caché par défaut */
.sub-cat {
    position: absolute;
    top: 0;
    left: 228.1px; /* s’aligne à droite du menu */
    width: 720px;
    height: 398px;
    background-color: #fff;
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
    border: 1px solid #999;
    display: none;
    z-index: 30;
    overflow-y: auto;
	margin-top: -1px;
	border-left: none
}

/* Quand on survole une catégorie, afficher le sous-menu */
.nav-cat:hover .sub-cat {
    display: block;
}

/* Contenu interne organisé en colonnes */
.sub-cat-content {
    column-count: 2; /* ou 4 ou auto selon la largeur */
    column-gap: 55px;
    padding: 15px;
    margin-top: -22px;
}

.sub-cat-column {
    display: inline-table;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 20px;
    vertical-align: top;
	float: left
}

.sub-cat-column h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #070707;
}
.sub-cat-column h4:hover {
    color: crimson;
}
.sub-cat-column a {
    display: block;
    color: #000;
    font-size: 14px;
    margin-bottom: 6px;
    text-decoration: none;
    transition: color 0.2s;
	opacity: 0.8
}
.sub-cat-column a:hover {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    text-decoration: none;
    transition: color 0.2s;
	opacity: 1;
	color: crimson!important
}


.banner-cat{
    width: 730px;
    height: 400px;
    background-color: crimson;
    margin-left: 0px;
	transition: width .28s ease;

}

.banner-cat img{
    width: 100%;
    height: 100%;
	object-fit: cover
}

.banner-cat {
    position: relative; 
}

.banner-cat .dots {
    position: absolute;
    bottom: 15px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.banner-cat .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #bbb;
    cursor: pointer;
    display: block;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.banner-cat .dots span.active {
    background-color: crimson;
    transform: scale(1.2);
}

/* Pour s'assurer qu'une seule image s'affiche */
.banner-cat img.slide {
    display: none;
}

.banner-cat img.slide.active {
    display: block;
}
/* Supprime toute animation de chargement implicite sur les dots */
.dots::after {
    content: none !important;
    animation: none !important;
    display: none !important;
}


.widget-cat{
    width: 280px;
    height: 395px;
    border: 1px solid #999;
    background-color: #fff;
    float: right;
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
    padding: 4px;
}
.cat-icon{
    height: 16px;
}
.category .nav-cat{
    float: left;
    padding-left: 11px;
    color: #000;
    font-size: 13px
}
.category .nav-cat a{
    color: rgb(41,41,48)
}
.category .nav-cat a:hover{
    color: crimson!important
}
.con-cat{
    display: inline-table;
}
.nav-cat{
    padding: 5px;
    display: block;
    width: 93%;
    height: 23px;
	cursor: pointer;
	color: #000;
}
.banner-widget{
    width: 100%;
    background-color: #fff;
    text-align: center!important;
    float: left;
    color: #000;
    margin-top: 12px;
    border-radius: 11px
}
.cont-widget{
    margin-top: 20px;
    width: 100%;
    height: 250px;
    border-radius: 11px;
    background-color: coral;
}
.title-widget{
    font-size: 22px;
    text-align: left;
    padding-left: 44px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-weight: 100;
    margin-top: -22px
}
.widget-cont{
    text-align: left;
    padding-left: 11px;
    color: #fff;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 20px;
    padding-top: 11px;
    font-weight: 100
}
.widget-logo{
    width: 100%;
    height: auto
}
.cont-box-widget{
    width: 100%;
    height: 162px;
    text-align: center!important;
    overflow-x: hidden;
    overflow-y: hidden
}
.slid-widget{
    height: 162px
}
.box-widget{
    width: 115px;
    height: 160px;
    display: inline-table;
    margin: 4px;
    border-radius: 3px
}
.box-widget img{
    width: 100%;
    height: 115px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.box-raccourcis{
    width: 225px;
    height: auto;
    display: inline-table;
    margin: 4px;
    border-radius: 3px;
    margin-top: 21px
}
.box-raccourcis img{
    width: 100%;
    height: auto;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid gainsboro
}
.price-widget{
    width: 100%;
    height: 35px; 
    background-color: antiquewhite;
    margin-top: -3px;
    line-height: 35px;
    color: #000;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-weight: bold;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.section-category-wrapper{
	display: flex;
    gap: 20px; /* espace horizontal entre category, banner, widget */
    transition: all 0.3s ease;
}
.section-category{
    margin-bottom: 63px;
    text-align: center;
}
.section-category-wrapper .category {
  lex: 0 0 230px; /* largeur initiale de la colonne catégorie */
  transition: all 0.3s ease;
}
.sections-cat .section-category-wrapper {
  margin-top: 30px;
}

.section-category-wrapper .category.closed {
  flex: 0 0 0;
  overflow: hidden;
  opacity: 0;
}

.section-category-wrapper .banner-cat {
  flex: 1;
  transition: all 0.3s ease;
}
.pagination{
	width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 25px 0;
}
	.btn-act{
		background-color: #fff!important;
		color:#000!important
	}
.pagination-btn {
    margin: 3px;
    border: none;
    border-radius: 4px;
    webkit-box-shadow: 0 2px 3px #ccc;
    -moz-box-shadow: 0 2px 3px #ccc;
    -o-box-shadow: 0 2px 3px #ccc;
    -ms-box-shadow: 0 2px 3px #ccc;
    box-shadow: 0 2px 5px #ccc;
    font-weight: bold;
    cursor: pointer;
	width: 34px;
    height: 34px;
    background-color: #000;
    color: white;
}

.pagination-btn:hover {
    background-color: deepskyblue;
}

.pagination-btn.active {
    background: deepskyblue;
    color: #fff;
    border-color: red;
}
.dawn-soussouscat-filter{
	cursor: pointer;
	margin-left: 18px;
	font-weight: normal!important
}
.dawn-soussouscat-filter span{
	margin-left: 33px;
		font-size: 15px
}
	.dawn-soussouscat-filter.active {
  color: dodgerblue;
  font-weight: normal!important;
}

section-category-wrapper widget-cat {
  flex: 0 0 280px;
  transition: all 0.3s ease;
}
.title-section-cat{
    font-size: 25px;
    font-family: Rubik,sans-serif
}
.cont-title{
    width: 100%;
    height: 35px;
    webkit-box-shadow: 0 -2px crimson inset;
    -moz-box-shadow: 0 -2px crimson inset;
    -o-box-shadow: 0 -2px crimson inset;
    -ms-box-shadow: 0 -2px crimson inset;
    box-shadow: 0 -2px crimson inset;
    display: flex;
    margin-bottom: 6px
}
.btn-wrap{
    padding-right: 22px;
    float: right;
    height: 35px;
    webkit-box-shadow: 0 -2px gainsboro inset;
    -moz-box-shadow: 0 -2px gainsboro inset;
    -o-box-shadow: 0 -2px gainsboro inset;
    -ms-box-shadow: 0 -2px gainsboro inset;
    box-shadow: 0 -2px gainsboro inset;
    text-align: end;
    flex: 1 1 auto;
}
.btn-wrap a{
    color: #393737;
    font-family: Rubik,sans-serif
}
.content-box{
    width: 100%;
    height: 328px;
    text-align: center;
}
.content-box-rl{
    width: 5000px;
    height: 308px;
    position: relative;
    text-align: center;
}
.product-box{
    width: 212px;
    height: 300px;
    background-color: #fff;
    color: #000;
    display: inline-table;
    margin-top: 15px;
    border-radius: 15px;
    margin: 11px;
    border: 1px solid gainsboro;
    float: left;
	padding: 5px
}
.cont-list{
    display: inline-block;
    float: left;
    margin: 11px
}
.product-box-list{
    width: 98%;
    height: 300px;
    background-color: #fff;
    color: #000;
    margin-top: 15px;
    border-radius: 15px;
    margin: 11px;
    border: 1px solid gainsboro;
    margin-right: 27px;
    padding: 4px;
    display: block!important
}
.product-box-list .thumb-product{
    width: auto;
    height: 290px!important;
}
.product-box-list .thumb-product .img-product{
    width: auto;
    height: 260px!important;
}
.det-pr-list{
    margin-top: 22px
}
.product-box:hover{
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
}
.product-box:hover > .title-prd h2{
	color: crimson
}
.product-box:hover > .prices-product-box span{
	color: #000
}
.product-box-rl{
    width: 182px;
    height: 280px;
    background-color: #fff;
    color: #000;
    display: inline-table;
    margin-top: 15px;
    border-radius: 15px;
    margin: 5px;
	padding: 3px;
    border: 1px solid gainsboro;
    webkit-box-shadow: 0 2px 3px #393737;
    -moz-box-shadow: 0 2px 3px #393737;
    -o-box-shadow: 0 2px 3px #393737;
    -ms-box-shadow: 0 2px 3px #393737;
    box-shadow: 0 2px 3px #393737;
    float: left;
    margin-right: 17px
}
.descr-prd-list{
    float: left;
    width: 30%;
    height: 50px;
    position: absolute;
    font-size: 14px;
    line-height: 1.86; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    color: slategray
}
.add-cart-pt-list{
    margin-top: 90px;
    margin-left: 12px;
    display: inline-table
}
.btn-list-card{
    width: 150px; 
    height: 45px;
    border-radius: 4px
}
.thumb-product{
    padding-top: 22px;
    position: relative;
    height: 170px;
}
.img-product{
    width: auto;
    height: 140px;
}
.img-product img{
    width: auto;
    height: 100%;
}
.thumb-product-rl{
    padding-top: 22px;
    position: relative;
    height: 150px;
}
.img-product-rl{
    width: auto;
    height: 120px;
}
.img-product-rl img{
    width: auto;
    height: 100%;
}
.product-box:hover > .thumb-product .img-product{
    -moz-transform: scale(1.20);
    -webkit-transform: scale(1.20);
    -ms-transform: scale(1.20);
    -o-transform: scale(1.20);
    transform: scale(1.20);
    webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
}
.product-box-rl:hover > .thumb-product-rl .img-product-rl{
    -moz-transform: scale(1.20);
    -webkit-transform: scale(1.20);
    -ms-transform: scale(1.20);
    -o-transform: scale(1.20);
    transform: scale(1.20);
    webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
}
.group-option-list{
    float: right;
    margin-top: -173px;
    position: relative;
    margin-right: 11px;
    display:none;
    animation: fadeOut 1.3s forwards;
}
.group-option-list-rl{
    float: right;
    margin-top: -173px;
    position: relative;
    margin-right: 11px;
    display:none;
}
.product-box:hover > .group-option-list{
    display: block;
    animation: fade 1.3s forwards;
}
.product-box-rl:hover > .group-option-list-rl{
    display: block;
    animation: fade 1.3s forwards;
}
.group-option{
    margin-top: 11px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 25px;
    background-color: crimson;
    color: #fff;
    text-align:center;
    cursor: pointer
}
.group-option-lists{
    display: inline-block;
    height: 45px;
    cursor: pointer;
    margin-left: 11px
}
.group-option i{
    font-size: 18px
}
.group-option-lists i{
    font-size: 18px;
    color: slategray
}
.title-prd{
    margin-top: -25px;
    text-align: center;
    margin-bottom: 6px
}
.title-prd h2{
    font-size: 15px;
    text-align: left;
    color: #030411;
    line-height: 20px;
    8font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.stars-box-content {
    display: flex;              /* Met les enfants sur la même ligne */
    align-items: center;        /* Aligne verticalement étoiles + texte */
    flex-wrap: wrap;            /* Permet au texte de passer dessous si trop long */
    gap: 8px;                   /* Espacement entre étoiles et texte */
    margin-top: -25px;          /* Garde ton style actuel */
    width: 100%;
	float: left
}

.stars-box img {
    height: 45px;               /* Taille raisonnable pour les étoiles */
}
.count-reviews-st{
	height: 45px;
	line-height: 52px;
	float: right
}
.stars-box small {
    color: slategray;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 12px
}

.prices-product-box{
    text-align: left;
    margin-left: ;
}

.prices-product-box span{
    font-size: 15px;
    color:crimson;
    font-weight: bold;
}
.prices-product-box small{
    font-weight: bold;
    text-decoration: line-through;
    color: #ccc;
}
.reduction-pourcent{
    text-align: center;
    position: absolute;
    margin: 16px;
    z-index: 3;
    width: 60px;
    height: auto;
    padding: 4px;
    background-color: dodgerblue;
    color: #fff;

    font-weight: bold;
    border-radius: 3px;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"
}
.rupture{
    position: absolute;
    margin: 16px;
    z-index: 3;
    width: auto;
    height: auto;
    padding: 4px;
    background-color: red;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"
}
.time-deals{
    width: auto;
    height: 30px;
    background-color: crimson;
    color: #fff;
    padding: 6px;
    font-size: 16px;
    border-radius: 3px
}
.miss-wrap{
    font-weight: bold;
    font-size: 18px;
    font-family: Rubik,sans-serif
}
.time-calcul{
    display: inline-table;
    margin: 8px
}
.time-calcul small{
    font-weight: 300;
    opacity: .8
}
.top-cat{
    width: 300px;
    height: 150px;
    background-color: cornflowerblue;
    display: inline-block;
    float: left;
    margin-left: 13px;
    margin-top: 11px;
    border-radius: 15px;
    webkit-box-shadow: 0 2px 5px #000;
    -moz-box-shadow: 0 2px 5px #000;
    -o-box-shadow: 0 2px 5px #000;
    -ms-box-shadow: 0 2px 5px #000;
    box-shadow: 0 2px 5px #000;
}
.top-cat img{
    width: 100%;
    height: 100%;
    border-radius: 15px
}
.content-top-cat{
    width: 100%;
    height: 200px;
    text-align: center;
    font-family: Rubik,sans-serif
}
.title-cat-top{
    width: 120px;
    text-align: left;
    padding-left: 31px;
    padding-top: 43px;
    position: absolute;;
    font-weight: bold;
    color: #fff;
    font-size: 15px;
    letter-spacing: -.025em;
}

.nbr-cat-top{
    width: auto;
    text-align: left;
    padding-left: 31px;
    padding-top: 86px;
    position: absolute;;
    color: #fff;
    opacity: .8;
    letter-spacing: -.025em;
    font-size: 14px
}
.section-top-cat{
    margin-bottom: 33px
}
.content-featured{
    width: 100%;
    height: 630px;
    text-align: center;
    font-family: Rubik,sans-serif
}
.content-support{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: Rubik,sans-serif
}
.content-box-recommended{
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    font-family: Rubik,sans-serif;
    margin-bottom: 105px
}
.featured-box{
    width: 720px!important;
    height: 625px!important;
	background-color:  rgba(26,26,31,1.00);
	background: linear-gradient(to left, #000, crimson);
	color: #fff!important
}
.featured-box:hover{
    webkit-box-shadow: 0 2px 5px #fff;
    -moz-box-shadow: 0 2px 5px #fff;
    -o-box-shadow: 0 2px 5px #fff;
    -ms-box-shadow: 0 2px 5px #fff;
    box-shadow: 0 2px 5px #fff;
}
.fea-face:hover{
    background-color: #3b5998;
    color: #fff;
    border:none
}
.fea-twit:hover{
    background-color: #00aced;
    color: #fff;
    border:none
}
.fea-pint:hover{
    background-color: #cb2027;
    color: #fff;
    border:none
}
.fea-what:hover{
    background-color: seagreen;
    color: #fff;
    border:none
}
.bx-effet{
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
}
.bx-effet:hover{
    webkit-box-shadow: 0 2px 5px #fff;
    -moz-box-shadow: 0 2px 5px #fff;
    -o-box-shadow: 0 2px 5px #fff;
    -ms-box-shadow: 0 2px 5px #fff;
    box-shadow: 0 2px 5px #fff;
}
.thumb-featured-product{
    float: left;
    position: relative;
}
.img-featured-product{
    width: 100%;
    height: auto;
    margin-top: 95px;
    margin-left: 22px
}
.img-featured-product img{
    width: 98%;
    height: auto
}
.featured-box:hover> .thumb-featured-product .img-featured-product{
    -moz-transform: scale(1.11);
    -webkit-transform: scale(1.11);
    -ms-transform: scale(1.11);
    -o-transform: scale(1.11);
    transform: scale(1.11);
    webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
}
group-option-list-featured{
    display: none
}
featured-box:hover > .con-fea .group-option-list-featured{
    display: block
}
.featured-box .con-fea .group-option-list-featured .group-option{
    display: inline-block;
    float: none;
    margin-left: 13px;
    color: slategray;
    background-color: transparent
}
.featured-inline{
    display: inline;
    float: left;
}
.img-featured-product{
	width: 400px;
	height: auto
}
.attribut-featured.var-size{
	color: #fff!important
}
.attribut-featured legend{
	color: ivory
}
#fe-var-size{
	color: #fff;
}
.con-fea{
    text-align: left;
    padding-left: 38px;
    width: 230px;
    margin-top: 101px
}
.con-fea .title-prd h2{
    font-size: 20px;
    line-height: 26px;
	color: #fff
}
.detail-featured{
    font-size: 15px;
    color: slategray;
    margin-bottom: 11px;
	width: 91.5%;
	overflow: hidden
}
.attribut-featured{
    margin-bottom: 11px
}
.ty-attribut{
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 11px;
	color: ivory
}
.all-attr{
    width: 35px;
    height: 35px;
    padding: 2px;
    box-shadow: inset 0 0 0 1px slategray;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    margin: 3px;
    cursor: pointer
}
.color-slider {
 overflow-x: auto!important;
  padding: 5px;
  height: 50px!important;
  cursor: pointer;		
}

.color-wrapper {
  display:flex!important;
  flex-wrap: nowrap;
}

.all-attr {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.all-attr:hover {
  transform: scale(1.05);
}


.all-attrs {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.all-attrs:hover {
  transform: scale(1.05);
}

.all-attrs{
    width: auto;
    padding: 5px;
    box-shadow: inset 0 0 0 1px slategray;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    color: slategray;
    margin: 4px;
    cursor: pointer
}
.all-attr:hover{
    box-shadow: inset 0 0 0 2px #000;
}
.all-attrs:hover{
    box-shadow: inset 0 0 0 2px black;
}
.all-attr img{
    width: 98%;
    height: 34px;
    position: relative
}
.sep-fea{
    display: inline-table;
    margin-left: 2px
}
.txt-fea{
    width: 195px;
    line-height: 25px
}
.con-fea .prices-product-box span{
    font-size: 22px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-weight: bold
}
.con-fea .title-prd{
    font-size: 22px
}
.add-fea-card{
    margin-top: 11px;
    text-align: center;
    margin-bottom: 11px
}
.share-fea{
    margin-top: 21px
}
.fea-share{
    width: 38px;
    height: 38px;
    border: 1px solid gainsboro;
    border-radius: 50%;
    background-color: ivory;
    color: rgb(41,41,48);
    margin: 8px;
    font-size: 15px
}
.fea-card{
    width: 210px;
    height: 40px;
    border: none;
    border-radius: 3px;
    background-color: #030411;
    cursor: pointer;
    padding: 4px;
    font-weight: bold
}
.fea-cards{
    width: 210px;
    height: 40px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 4px;
    font-weight: bold;
    background-color: crimson
}
.section-featured{
    margin-bottom: 62px
}
.featured-box .reduction-pourcent{
    margin: 36px!important
}
.popular-product{
    width: 30%;
    height: 250px;
    border-radius: 15px;
    display: inline-table;
    float:left;
    margin-left: 25px;
}
.popular-product:hover > .thumb-popular img{
    -moz-transform: scale(1.11);
    -webkit-transform: scale(1.11);
    -ms-transform: scale(1.11);
    -o-transform: scale(1.11);
    transform: scale(1.20);
    webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
}
.thumb-popular{
    text-align: right;
    height: 250px;
    width: 100%;
    overflow: hidden;
    position: relative
}
.thumb-popular img{
    width: auto;
    height: 200px;
    margin-top: 22px;
}
.popular-cont{
    width: 100%;
    height: 260px;
    font-family: Rubik,sans-serif
}
.section-popular{
    margin-bottom: 31px
}
.popular-one{
    background-color: deeppink;
    border-radius: 15px
}
.popular-two{
    background-color:slategray;
    border-radius: 15px
}
.popular-three{
    background-color:#263c97;
    border-radius: 15px
}
.popular-title{
    float: left;
    position: absolute;
    z-index: 2;
    margin-left: 22px;
    width: 280px;
    margin-top: 32px;
}
.popular-dn-ti{
    float: left;
    position: absolute;
    z-index: 2;
    margin-left: 22px;
    width: 280px;
    margin-top: 177px
}
.popular-title h2{
    line-height: 1.5em;
    letter-spacing: -0.6px;
    white-space: pre-line;
    color: #fff
}
.popular-dn-ti span{
    line-height: 1.5em;
    letter-spacing: -0.6px;
    white-space: pre-line;
    color: #fff;
    font-weight: bold
}
.tp-sp i{
    font-size: 35px;
    color: #fff
}
.tp-sp img{
    height: 32px
}
.desc-tp-sp{
    font-size: 17px;
    color: white;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    opacity: .9;
    font-weight: bold
}
.detail-product{
    width: 100%;
    height: auto;
    background-color: #fff;
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
    display: flex;
    margin-bottom: 21px
}
.content-detail{
    padding: 32px
}
.section-detail-product{
    display: inline-table;
    float: left;
    padding-left: 11px
}
.product-img{
    width: 500px;
    height: auto;
}
.description-product{
    width: 480px;
    height: auto;
}
.product-img img{
    width: 100%;
    height: auto;
}
.title-det-prd{
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-size: 15px
}
.rev-det{
    display: inline-block;
    float: left;
    width: auto;
    padding: 4px;
    height: 50;
    line-height: 50px;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-size: 13px;
    opacity: .8;
    font-weight: bold;
    color: slategray;
}
.rev-det img{
    height: 42px;
    float: left
}
.cont-rev-det{
    margin-top: -31px;
    width: 100%;
    height: 60px;
}
.sep{
    border-right: 1px solid #ccc;
}
.price-prd-det{
    font-size: 26px;
    letter-spacing: -.025em;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    color: crimson
}

.price-prd-det small{
    font-size: 16px;
    letter-spacing: -.025em;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    color: slategray;
    text-decoration: line-through
}
.price-prd-det span{
    font-size: 15px;
    letter-spacing: -.025em;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    color: lightblue;
    margin-left: 22px
}
.det-var{
    display: inline-table;
    color: slategray;
    width: 100%
}

.sec-det-var{
    display: inline-table;
    letter-spacing: -.025em;
    font-family: Rubik,sans-serif;
    font-size: 15px;
    opacity: .8
}
.coch{
    margin-left: 11px
}
.det{
    margin-bottom: 11px
}
.stock{
    font-size: 18px;
    letter-spacing: -.025em;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    margin-top: 25px;
    margin-bottom: 13px
}
.stock small{
    color: cadetblue;
    margin-left: 11px
}
.nice-number input{
    width: 30px!important;
    border: none
}
.variation{
	margin-bottom: 11px!important
}
.variation-color{
	display: inline-block;
	width: 45px;
	height: 45px;
	box-shadow: inset 0 0 0 1px #ccc;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	line-height: 48px;
	margin: 4px;
    padding: 3px;
	border: none
}
.variation-size{
	width: auto;
    padding: 4px;
	box-shadow: inset 0 0 0 1px #ccc;
    cursor: pointer;
    display: inline-block;
    margin: 3px;
    font-weight: bold;
	font-family: Rubik,sans-serif;
	border-radius: 4px;
	border: none
}
.variation-color-m{
	display: inline-block;
	width: 45px;
	height: 45px;
	box-shadow: inset 0 0 0 1px #ccc;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	line-height: 48px;
	margin: 4px;
    padding: 3px;
	border: none
}
.variation-size-m{
	width: auto;
    padding: 4px;
	box-shadow: inset 0 0 0 1px #ccc;
    cursor: pointer;
    display: inline-block;
    margin: 3px;
    font-weight: bold;
	font-family: Rubik,sans-serif;
	border-radius: 4px;
	border: none
}
.var-col{
    height:auto;
    width:98%;
}
.var-col img{
    height:auto;
    width:98%;
}
.var-size{
    font-family: Rubik,sans-serif;
    padding: 2px;
    font-size: 14px;
    font-weight: bold
}
.variation-color label{
	cursor: pointer;
	display: block;
	height: 39px;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	width: 100%;
}
.variation-color div{
    font-size: 19px
}
.variation-color:hover{
	border-color:#000;
	box-shadow: inset 0 0 0 1px #000;
}
.variation-color input[type="radio"]{
	display: none;
}
.variation-color-m label{
	cursor: pointer;
	display: block;
	height: 39px;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	width: 100%;
}
.variation-color-m div{
    font-size: 19px
}
.variation-color-m:hover{
	border-color:#000;
	box-shadow: inset 0 0 0 1px #000;
}
.variation-color-m input[type="radio"]{
	display: none;
}
.all-attr input[type="radio"]{
	display: none;
}
.all-attrs input[type="radio"]{
	display: none;
}

.variation-size label{
	cursor: pointer;
}
.variation-size-m label{
	cursor: pointer;
}
.all-attr label{
	cursor: pointer;
}
.all-attrs label{
	cursor: pointer;
}
.variation-size:hover{
	border-color:#000;
	box-shadow: inset 0 0 0 1px #000;
}
.variation-size input[type="radio"]{
	display: none;
}

.variation-size-m:hover{
	border-color:#000;
	box-shadow: inset 0 0 0 1px #000;
}
.variation-size-m input[type="radio"]{
	display: none;
}

.variation-color.activot,.variation-color.secondary-activot{
	border: solid 2px #000!important;
}
.variation-color-m.activot-m,.variation-color-m.secondary-activot-m{
	border: solid 2px #000!important;
}
.all-attr.activots,.all-attr.secondary-activots{
	border: solid 2px #000!important;
}
.variation-size.active,.variation-size.secondary-active{
	border: solid 2px #000!important;
}
.variation-size-m.active-m,.variation-size-m.secondary-active-m{
	border: solid 2px #000!important;
}
.all-attrs.actives,.all-attrs.secondary-actives{
	border: solid 2px #000!important;
}
.attribut{
    width: 100%;
    height: 45px;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
}
.attributs{
    width: 200px;
    height: 42px;
    overflow: hidden;
    overflow-x: auto;
    position: relative;
}
.sec-var legend{
    font-size: 18px;
    font-family: Rubik,sans-serif;
    line-height: 2.5em;
    letter-spacing: -.025em;
    color:slategray;
    opacity: .8
}
.btn-cart{
    width: 250px;
    height: 40px;
    border-radius: 3px;
    font-weight: bold
}
.btn-add-cart{
    display: inline-table;
    float: left;
}
.btn-cart-cart{
    margin-bottom: 71px
}
.btn-wats-sell{
    margin-bottom: 21px
}
.btn-by{
    width: 217px;
    height: 40px;
    border-radius: 3px;
    font-weight: bold;
    background-color: crimson;
    margin-left: 11px
}
.btn-wats{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    font-weight: bold;
    background-color: forestgreen
}
.op{
    display: inline-table;
    font-family: Rubik,sans-serif;
    line-height: 2.5em;
    letter-spacing: -.025em;
    color:slategray;
    opacity: .8;
    cursor: pointer
}

.cop{
    margin-left: 31px
}
.img-prd{
    display: inline-block;
    width: auto;
    height: 50px;
    border: 1px solid #000;
    margin: 2px;
    cursor: pointer
}
.all-img{
    width: 100%
}
.img-prd img{
    width: auto;
    height: 100%;
}
.recom-widget{
    width: 190px;
    height: 600px;
    text-align: center;
    font-family: Rubik,sans-serif;
    line-height: 2.5em;
    letter-spacing: -.025em;
    font-size: 12px;
    color: slategray
}
.wid-recom{
    padding-left: 43px;
    height: 665px;
    overflow: hidden
}
.box-widget-recom{
    width: 115px;
    height: 160px;
    margin: 4px;
    border-radius: 3px;
    border: 1px solid #ccc
}
.box-widget-recom:hover{
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
}
.box-widget-recom img{
    width: 100%;
    height: 115px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.name-srore{
    width: 1200px;
    height: auto;
    border-radius: 15px;
    background-color: #fff;
    text-align: center;
    font-family: Rubik,sans-serif;
    line-height: 2.5em;
    letter-spacing: -.025em;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 22px
}
.desc-detail{
    background-color: #F4F4F4
}
.section-desc{
    display: inline-block;
    float: left;
}
.raccourcis{
    width: 300px;
    height: auto;
    background-color: #fff;
    border-radius:4px;
    text-align: center
}
.presentation{
    width: 895px;
    background-color: #fff;
    border-radius:4px;
    margin-left: 5px;
    height: auto
}
.price-raccourcis{
    padding-left: 11px
}
.rating-raccourcis{
    text-align: left;
    color: #000;
    font-family: Rubik,sans-serif;
    line-height: 2.5em;
    letter-spacing: -.025em;
    font-weight: bold;
}
.rating-raccourcis i{
    color: orangered
}
.presentation-content{
    padding: 22px;
}
.cont-tit-sec{
    border-bottom: 1px solid gainsboro
}
.section-det-desc-prs{
    display: inline-table;
    margin-top: 10px;
}
.btm-lf{
    margin-left: 31px
}
.title-des-section{
    height: 25px;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-weight: bold;
    color: slategray;
    cursor: pointer;
}
.active-onglet{
    color: #000;
    transition: all 0.3s ease;
    border-bottom: solid 2px crimson;
}
.active-desc-cont{
    animation: fade 0.5s forwards;
}
.active-onglet-user{
    color: #000;
    transition: all 0.3s ease;
    border-bottom: solid 2px crimson;
}
.active-desc-cont-user{
    animation: fade 0.5s forwards;
}
.content-desc{
    width: 100%;
    height: auto;
    display: none
}
.content-reg{
    display: none;
    height: auto;
    width: 100%;
}
.content-desc.active-onglet{
    display: block;
    border-bottom: none
}
.content-reg.active-onglet-user{
    display: block;
    border-bottom: none
}
.cont-prs-desc{
    padding: 11px;
    margin-bottom: 23px;
    width: 100%;
}
.cont-prs-desc p{
	line-height: 31px
}
.cont-prs-desc p img{
    width: 100%
}
.prs-desc{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-size: 16px;
    font-weight: 500;
    color: slategray;
    position: relative;
    float: left;
}
.prs-desc-sp{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-size: 16px;
    font-weight: 500;
    color: slategray;
    width: 300px;
    display: inline-table;
    margin-top: 21px;
    opacity: .9
}
.desc-target2{
    float: left
}

.desc-target3{
    float: left
}
.prc{
    margin-bottom: 11px
}
.note-rating{
    font-size: 88px;
    color: crimson;
    display: inline-table;
    float: left;
    margin-bottom: 11px;
}
.note-rating small{
    font-size: 50px
}
.star-nt-rating{
    width: 176px;
    height: auto;
    margin-left: 33px;
}
.star-nt-rating img{
    width: 100%;
    height: auto;
}
.rat-pourcent{
    width: 100%;
    height: 200px;
    float: left;
}
.count-review{
    font-size: 17px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-weight: bold;
    opacity: .8;
    margin-bottom: 18px
}
.rate-num{
    font-weight: bold;
    font-size: 15px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
}
.five-star{
    width: 250px;
	height: 11px;
	background-color: gainsboro;
	border-radius: 18px;
    margin-left: 11px
}
.five{
    display: inline-flex;
}
.four-star{
    width: 250px;
	height: 11px;
	background-color: gainsboro;
	border-radius: 18px;
    margin-left: 11px
}
.four{
    display: inline-flex;
}
.three-star{
    width: 250px;
	height: 11px;
	background-color: gainsboro;
	border-radius: 18px;
    margin-left: 11px
}
.three{
    display: inline-flex;
}
.two-star{
    width: 250px;
	height: 11px;
	background-color: gainsboro;
	border-radius: 18px;
    margin-left: 11px
}
.two{
    display: inline-flex;
}

.one-star{
    width: 250px;
	height: 11px;
	background-color: gainsboro;
	border-radius: 18px;
    margin-left: 11px
}
.one{
    display: inline-flex;
}
.nt-pourcentage{
    background-color: white;
	border:solid 1px gray;
	width: 50px;
    padding: 1px;
	font-size: 14px;
	border-radius: 8px;
    margin-left: 4px;
    text-align: center!important;
    display: inline-block
}
.vote_progress{
    width: 0%;
	height: 11px;
	background-color: lightseagreen;
	border-radius: 18px
}
.rt-rating{
    width:400px;
    height: 400px;
    float:left;
    margin-tsop: -51px
}
.rt-rt{
    display: inline-block;
    margin-bottom: 13px
}
.add-rt{
    width: 400px;
    height: 200px;
    margin-left: 11px;
    display: none
}
.tit-rev{
    font-size: 17px;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    color: #000;
    margin-bottom: 21px;
    cursor: pointer;
    width: 130px;
}
.tit-rev:hover{
    color: crimson;
    text-decoration: underline
}
.rat-bx-rev{
    display: inline-block;
}
.star-rating-form-data li{
	display: inline-table;
	color: #ccc;
	font-size: 25px;
	background-color: #fff;
	cursor: pointer;
	text-decoration: none;
	list-style-type: none;
}
	
.star-rating-form-data li:hover{
    color: darkorange;
}
.star-rating-form-data li i{
    cursor: pointer
}
.star-rating-form-data li.active,.star-rating-form-data li.secondary-active{
	color: darkorange;
	font-size:26px 
}
.star-rating-form-data li input[type="radio"]{
	outline: none;
	display: none;
}
.bx-rv-label{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    color: #000;
    opacity: .8
}
.bx-rv-label small{
    color: red
}
.box-review{
    margin-bottom: 11px;
}
.box-review span{
    color: slategray
}
.inp-rt{
    width: 100%;
    height: 45px;
    padding-left: 11px;
    border: 1px solid #ccc;
    border-radius: 3px
}
.area-rt{
    width: 100%;
    padding-left: 11px;
    border: 1px solid #ccc;
    border-radius: 3px
}
.btn-submit-rv{
    padding: 11px;
    border-radius: 3px;
    font-family: Rubik,sans-serif;
}
.rt-rt .addRev{
    display: none
}
.best-seller{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-size: 17px;
    color: slategray
}
.customer-review{
    width: 100%;
    margin-top: -22px
}
.customer-bx-rv{
    float: left!important;
}
.cont-customer-rv{
    display: inline-block;
    float: left;
    margin: 11px;
    height: auto
}
.customer-name{
    width: 50px;
    height: auto
}
.user-cust{
    width: 50px;
    height: 50px;
}
.user-country{
    height:auto;
    width: 40px;
    margin-bottom: 11px;
    border-radius: 3px;
    padding-left: 11px
}
.verified{
	color: seagreen!important;
	opacity: 1!important
}
.img-product-verified{
	width: 100%;
}
.verified-img{
	display: inline-block;
	width: auto;
	height: 150px;
	cursor: pointer
}
.verified-img img{
	width: auto;
	height: 100%
}
.user-country img{
    height: auto;
    width: 100%;
}
.user-cust img{
    width: 100%;
    height: 100%;
    border-radius: 50%
}
.nm-cust{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-weight: bold;
    font-size: 17px
}
.nm-cust small{
    opacity: .8;
    color: slategray
}
.nt-cust-rt img{
    height: 40px
}
.customer-note-review{
    width: 700px;
}
.review-cust{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    color: slategray
}
.related-bx{
    width: 95%;
    height: auto;
    float: left;
    padding-left: 31px;
}
.cont-slid{
    height: 308px;
    position: relative;
    overflow: hidden;
    overflow-x: hidden;
    width: 100%
}
.tit-specification{
    font-weight: bold;
    color: #000;
    width: 300px
}
.separate-det{
    width: 100%;
    height: 10px; ;
    border-top-left-radius: -15px;
    background-color: #F4F4F4;

    float: left;
    margin-bottom: 22px
}
.separate-list{
    width: 100%;
    height: 10px; 
}
.related-tit{
    font-size: 18px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-weight: bold;
    margin-bottom: 22px
}
.btn-slid{
    position:absolute;
    display: flex;
}
.button-slid{
    width: 40px;
    height: 40px;
    opacity: .8;
    border-radius: 3px
}
.button-slid:hover{
    width: 40px;
    height: 40px;
    opacity: inherit
}
.next-slid{
    margin-left: -42px
}
.back-slid{
    float: left
}
.direction-slid{
    padding-top: 130px;
    position: absolute;
    z-index: 2
}
.next-slid{
    float:right!important;
    margin: 0 800px;
}
.share-cont-btn{
    display: none;
    animation: fade 1.3s forwards;
}
.share{
    display: inline-block;
    margin: 11px
}
.share button{
    width: 50px;
    height: 35px;
    border-radius: 5px
}
.facebook-share{
    background-color: #3b5998
}
.twitter-share{
    background-color: #00aced
}
.pinterest-share{
    background-color: #cb2027
}
.whatsapp-share{
    background-color: darkgreen
}
.magnifier{
    background-color: #fff
}
.register{
    margin-top: 31px;
    text-align: center;
    justify-content: center;
    display: flex
}
.bx-reg{
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
    width: 500px;
    padding: 15px;
    background-color: #fff;
    float: left;
}
.section-register{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    display: inline-block;
    margin: 20px;
    font-weight: bold;
    font-size: 32px;
    cursor: pointer
}
.box-user{
    float: left!important;
    width: 100%;
    padding: 4px!important;
    margin-bottom: 6px
}
.box-user-reg{
    padding-left: 19px;
    margin-bottom: 22px
}

#password-requirements div {
    color: darkgray;
    opacity: 0.7;
	text-align: left;
	margin-left: 21px
}

#password-requirements div i {
    color: darkgray;
    opacity: 0.7;
}

/* Lorsque la règle est validée */
#password-requirements div.valid {
    color: darkcyan; /* texte devient vert */
	font-weight: bold
}

/* L’icône hérite automatiquement de la couleur du parent */
#password-requirements div.valid i {
    color: inherit; /* donc icône devient aussi verte */
	font-weight: bold
}
.password-requirement{
	margin-bottom: 11px
}
.box-user input{
    width: 90%;
}
.box-user select{
    width: 93%;
	cursor: pointer
}

.box-user textarea{
    width: 91%;
	cursor: pointer;
	border-color: gainsboro
}

.box-user label{
    text-align: left;
    float: left;
    padding-left: 21px;
    width: 90%
}
.lab-bx{
    font-weight: bold;
    opacity: .8;
    font-size: 16px
}
.lab-bx small{
    color: red;
    font-weight: bold
}
.remb{
    margin-left: 11px;
    float: left
}

#submitBtn {
    background-color: gray;
    color: white;
    cursor: not-allowed;
}

#submitBtn.active {
    background-color: #000; /* couleur normale du bouton */
    cursor: pointer;
}
#submitBtna {
    background-color: gray;
    color: white;
    cursor: not-allowed;
}

#submitBtna.active {
    background-color: #000; /* couleur normale du bouton */
    cursor: pointer;
}
.user-check{
    float: left;
    display: inline-table
}
.check{
    display: block;
    z-index: 1
}
.forgot{
    float: right;
    padding-right: 13px
}
.user-btn{
    width: 90%;
    height: 50px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 16px
}
.btn-box-user{
    margin-bottom: 11px
}
.trm{
    color: crimson
}
.cart{
    text-align: center;
    padding-top: 31px
}
.active-cart{
    color: #000;
}
.strg-cart{
    color: slategray;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
}
.strg-cart span{
    font-size: 38px
}
.strg-cart i{
    font-size: 38px
}
.section-cart{
    margin: 7px
}
.cont-cart{
    text-align: center
}
.content-cart{
    display: inline-table
}
.content-detail-cart{
    width: 750px;
    height: auto;
    padding: 11px;
    background-color: #fff;
    text-align: left
}
.detail-checkout-cart{
    width: 420px;
    height: auto;
    text-align: left;
    background-color:#fff ;
    padding: 18px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    float: right;
    border: 1px solid gainsboro;
    border-radius: 3px;
    margin-bottom: 123px
}
.tit-table-cart{
    border-bottom: 1px solid #000;
    height: 30px;
}
.sec-tit-cart{
    display: inline-flex;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    width: 100px;
    text-align: center;
    float: left
}
.trash{
    width: 30px;
    float: right;
    padding-right: 31px
}
.trash i{
    color: red
}
.desc-table-cart{
    padding-top: 11px
}
.sec-cart-product{
    width: 350px;
    text-align: left
}
.img-cart{
    height: 100px;
}
.thumb-cart{
    width: 100px;
    height: 80px
}
.thumb-cart img{
    height: 100%;
    width: auto;
}
.img-tit{
    display: inline-block;
    float: left
}
.title-cart a{
    width: 240px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    color: #333;
    font-size: 15px
}
.options-cart{
    color: slategray;
    font-size: 14px;
    display: inline-block
}
.opt-color{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    border: 1px solid gainsboro
}
.price-cart{
    opacity: .8;
    color:slategray;
}
.desc-table-cart{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid gainsboro;
}
.totals{
    color: #000;
    display: inline-block;
    margin: 11px
}
.tit-totals{
    color: #000;
    font-weight: bold;
    font-size: 27px
}
.detail-final-cart{
    height: 80px;
    line-height: 50px

}
.update-cart{
    float: right;
}
.update-btn-cart{
    width: 180px;
    height: 40px;
    border-radius: 4px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-weight: bold;
    background-color: slategray
}
.update-btn-cart:hover{
    background-color: #000;
    animation: hide 1.5s forwards
}
.subt-tit{
    display: inline-block;
    font-size: 20px;
    color: #333;
    font-weight: bold 
}
.price-sub{
    float: right;
    font-weight: bold
}
.shipping-sub{ 
    float: right;
    font-weight: bold;
    font-size: 16px
}
.ht-cart{
    width: 100%;
    color: gainsboro;
    padding-bottom: 31px!important
}
.subtotal-totals{
    height: 60px;
    line-height: 60px;
}
.coupon-cart{
    padding: 11px;
}
.inp-coupon-cart{
    height: 50px;
    width: 100%;
    border: 1px solid gainsboro;
    border-radius: 4px;
    padding-left: 11px
}
.select-coupon option:checked {
    background-color: crimson; /* bleu */
    color: #fff;              /* texte blanc */
}
.cp-btn-cart{
    width: 160px;
    height: 50px;
    border-radius: 4px;
    font-size: 16px;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    font-weight: bold
}
.btn-cart-prcd-checkout{
    width: 100%;
    height: 50px;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;;
    font-size: 16px
}
.btn-cart-prcd-checkout:hover{
    background-color: crimson;
    animation: hide 2.1s forwards
}
.subtotal-totals i{
    color: #fff
}
.ti-billing{
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
}
.bx-checkout .lab-bx{
    font-weight: 300;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    opacity: inherit;
    color: slategray
}
.bx-checkout span{
    color: red
}
.bx-checkout{
    padding-bottom: 11px
}
.inp-check{
    width:90%;
    height: 45px;
    padding-left: 11px;
    border: 1px solid #ccc;
    border-radius: 3px
}
.iln-check{
    display: inline-block;
    width: 350px;
    margin: 4px;
    float: left
}
.inp-rt-check{
    width: 90.5%;
    height: 45px;
    padding-left: 11px;
    border: 1px solid #ccc;
    border-radius: 3px
}
.inp-rt-sel-check{
    width: 92.5%;
    height: 45px;
    padding-left: 11px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: slategray
}
.desc-payment{
    padding-left: 31px;
    font-size: 15px;
    font-weight: 300;
    font-family: Rubik,sans-serif;
    line-height: 1.5em;
    letter-spacing: -.025em;
    color: slategray;
    opacity: .8;
}
.pay{
    font-size: 17px;
    opacity: .8
}
.pay i{
    opacisty: inherit!important
}
.subtotal-totalss{
    margin-bottom: 11px
}
.tut-prd-chk{
    font-size: 14px;
    color: #666
}
.tut-prd-chk i{
    color: #666;
    padding-left: 11px
}
.tut-prd-chk small{
    padding-left: 11px
}
.tut-prd-chk img{
    width: auto;
    height: 20px;
}
.tut-prd-chk span{
    padding-left: 11px
}
.result-order{
    width: 100%;
    height: 100px;
    border: 3px solid #ccc;
    border-radius: 3px;
    font-size: 24px;
    font-weight: bold;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    line-height: 100px;
    color: seagreen;
    margin-bottom: 52px
}
.stt-pay{
    display: inline-table;
    margin: 44px
}
.cont-odrer-rec{
    width: 100%;
    height: auto;
    border: 3px solid #ccc;
    border-radius: 3px;
    text-align: left;
    padding: 11px
}
.Tit-pay-stt{
    font-size: 22px;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-weight: 500
}
.det-pay-stt{
    font-size: 28px;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-weight: bold;
    margin-top: 6px
}
.cat-prd{
    padding: 11px;
    height: auto
}
.chemin{
    color: slategray;
    letter-spacing: -.025em;
    margin-bottom: 33px
}
.active-chemin{
    color: rgb(41,41,48);
	
}
.section-cat-prd{
    display: inline-grid;
    margin: 11px;
}
.filtre-product{
    width: 350px;
    height: auto;
    background-color: #fff;
    border: 1px solid gainsboro;
    border-radius: 3px;
    padding: 8px;
}
.product-categoery{
    width: 800px;
    height: auto;
    background-color: #fff;
    border: 1px solid gainsboro;
}
.title-filter{
    font-size: 22px;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-weight: bold;
    height: 35px;
    width: 100%!important;
    webkit-box-shadow: 0 -1px gainsboro inset;
    -moz-box-shadow: 0 -1px gainsboro inset;
    -o-box-shadow: 0 -1px gainsboro inset;
    -ms-box-shadow: 0 -1px gainsboro inset;
    box-shadow: 0 -1px gainsboro inset;
    margin-bottom: 23px;
}
.active-filter{
    webkit-box-shadow: 0 -2px crimson inset;
    -moz-box-shadow: 0 -2px crimson inset;
    -o-box-shadow: 0 -2px crimson inset;
    -ms-box-shadow: 0 -2px crimson inset;
    box-shadow: 0 -2px crimson inset;
    height: 35px;
    float:left;
    width: 25%
}
.list-cat-filter{
    width: 100%;
	max-height: 250px;
    padding-left: 11px;
	overflow: hidden;
	overflow-y: auto
}
.cat-filter{
    margin: 11px;
    font-family: Rubik,sans-serif;
    letter-spacing: -.025em;
    font-weight:bold;
    color: #333;
}
.list-pr-cat{
    padding: 11px
}
.dawn-cat-filter{
    padding-left: 22px;
    color: #666;
    font-weight: 300;
	cursor: pointer
}
.option-filter{
    color: #666;
    font-weight: 300
}
.img-filter{
    width: 50px;
    height: auto
}
.img-filter-star{
    width: auto;
    height: 40px;
}
.jauge{
    display: inline-block;
    height: 25px;
    border-radius: 3px;
    border: 1px solid #ccc;
    width: 150px;
    margin-bottom: 33px
}
.jauge-price{
    width: 90%;
    height: 1px;
    background-color: crimson;
    margin-bottom: 23px
}
.cat-filter i{
    color: orangered
}
.end-star{
    color: #999!important
}
.pub-cat-product{
    width: 100%;
    height: 250px;
    text-align: center;
    line-height: 280px;
    margin-bottom: 22px
}
.pub-cat-thumbnail{
    width: 970px;
    height: 250px;
    margin: auto;
}
.pub-cat-thumbnail img{
    width: 100%;
    height: 100%;
}
.title-prd-cat{
    height: 60px;
    width: 100%;
    webkit-box-shadow: 0 -1px gainsboro inset;
    -moz-box-shadow: 0 -1px gainsboro inset;
    -o-box-shadow: 0 -1px gainsboro inset;
    -ms-box-shadow: 0 -1px gainsboro inset;
    box-shadow: 0 -1px gainsboro inset;
    margin-bottom: 11px;
    line-height: 60px
}
.title-prd-cat h1{
    font-size: 23px;
    padding-left: 11px
}
.prd-flt{
    display: inline
}
.style-prd-bx{
    float: right;
    padding-right: 11px
}
.type-style-prd{
    display: inline-block;
    margin-right: 11px
}
.grid{
    height: 13px!important
}
.widget-cat-m{
    display: none
}
.cat-m-box{
    background-color: coral
}
.cat-mobile{
    display: none
}
.top-deals{
    display: none
}

.hot-trading-mobile{
    display: none
}
.featured-mobile{
    display: none
}
.mobil-wrap{
    display: none
}
.mobile-thumbnail-product{
    display: none
}
.cur-m{
    font-size: 16px
}

.cur-m-m{
    font-size: 13px!important
}.nav-nav-icons {
    position: relative; /* IMPORTANT : parent relatif pour positionnement absolu du menu */
    display: inline-block; /* ou inline-flex si nécessaire */
}

.box-menu-auth {
    position: absolute;
    top: 80%; /* juste en dessous du bouton utilisateur */
    left: 0;
    transform: translateY(-10px); /* remonte de 10px */
    width: 320px;
	height: 400px;
    background: #fff;
    box-shadow: 0 2px 5px #393737;
    border-radius: 24px;
    padding: 0; /* padding interne dans les liens */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    z-index: 1000;
    box-sizing: border-box;
	overflow: auto
}

.nav-nav-icons:hover .box-menu-auth {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* revient à sa position normale au hover */
}

.content-box-auth {
    width: 100%;
    padding: 11px 0; /* espace autour des liens */
    margin: 0;
}

.nav-box-auth {
    display: block;
    width: 90%;
    height: 45px;            /* hauteur fixe */
    line-height: 45px;       /* centre le texte verticalement */
    padding: 0px;         /* padding horizontal seulement */
    font-size: 16px;        /* épaisseur du texte */
    text-decoration: none;
    color: #000;
    box-sizing: border-box;
    transition: background 0.3s;
	margin-left: auto;
	margin-right: auto;
	padding-left: 11px;
	border-radius: 11px
}

.nav-box-auth:not(.btn-deconnexion) {
    color: #222;
	opacity: 0.9;
}
.nav-box-auth:not(.btn-deconnexion):hover {
    background: #f0f0f0;
    color: crimson;
	font-weight: 600
}
.nav-box-auth button{
	width: 80%;
	height: 40px;
	border-radius: 11px;
}
.btn-deconnexion{
	text-align: center;
	height: 70px;
	line-height: 60px;
	margin-bottom: 11px;
	border-bottom: 1px solid gainsboro
}
.nm-auth-s{
	border-bottom: none!important;
	margin-bottom: -10px!important;
}
.nm-auth-s strong{
	color: crimson!important
}
.end-mn-box-auth{
	border-bottom: 1px solid gainsboro;
	border-bottom: 22px
}
.stkout{
	color: crimson!important;
}
.auto_saves{
	color: dodgerblue;
	font-weight: bold
}
.auto_save{
	color: dodgerblue;
	font-weight: bold
}
.load-more-content {
    text-align: center;       
    margin: 20px auto 0 auto; 
    clear: both;              
}
.load-more{
	padding: 11px;
	font-weight: bold
}
.price-mob{
	width: 100%;
	float: left
}
.flash-error {
  animation: flash 0.9s ease;
}
@keyframes flash {
  0% { box-shadow: 0 0 0 rgba(255,0,0,0); }
  30% { box-shadow: 0 0 12px rgba(255,0,0,0.45); }
  100% { box-shadow: 0 0 0 rgba(255,0,0,0); }
}

/* spinner small (simple) */
.spinner-small {
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-right:6px;
  vertical-align:middle;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* popup show */
#success-popupMob.show { opacity:1; transform:translateY(0); pointer-events:auto; }
#success-popupMob { transition: all .25s ease; opacity:0; transform:translateY(10px); pointer-events:none; }
.error-message {
    color: #e74c3c;
    font-size: 16px;
	font-weight: bold;
    display: none;
}
.error-messageMob{
	color: #e74c3c;
	font-size: 16px;
	font-weight: bold
}
.error-messageDesck{
	color: #e74c3c;
	font-size: 16px;
	font-weight: bold
}
.inline-msg{
	display: inline-block
}
.popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  z-index: 10000;
}
.popupMobile {
  position: fixed;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  z-index: 10000;
}

.popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.popup.error {
  background: #c0392b;
}
.spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #333;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  margin-right: 5px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes loadingDots {
    0% { content: ""; }
    33% { content: "."; }
    66% { content: ".."; }
    100% { content: "..."; }
}

.dots::after {
    content: "...";
    display: inline-block;
    animation: loadingDots 1.5s infinite steps(1);
}

        /* Styles pour le popup */
        .popup-cm {
    display: none; /* Masquer par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond sombre transparent */
    z-index: 1000; /* Placer au-dessus des autres éléments */
    overflow: auto;
    justify-content: center;
    align-items: center; /* Centrer verticalement et horizontalement */
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 45%;
    position: relative;
    flex-direction: column;
    align-items: center;
	margin: 10px auto;
	overflow: auto;
}

#progressBarContainer {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    margin-top: 20px; /* Espacement pour ne pas coller au contenu */
}

#progressBar {
    width: 0%;
    height: 20px;
    background: linear-gradient(90deg, black, crimson, dodgerblue) !important;
    transition: width 1s;
}


        .popup-content h2 {
            margin-top: 0;
        }

        /* Style du formulaire */
        .popup-content input[type="text"],
        .popup-content input[type="email"],
        .popup-content input[type="tel"] {
            width: 95%;
            height: 45px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
			padding-left: 4px
        }
					 
			.popup-content select{
			width: 96%;
			height: 49px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
			padding-left: 4px
					 }

        .popup-content button {
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 98%;
        }

        popup-content button:hover {
            background-color: #45a049;
        }

        /* Close button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 28px;
            cursor: pointer;
        }
				
.var-colN label{
	cursor: pointer;
}
.var-msrN label{
	cursor: pointer;
}
.var-colN:hover{
	border-color:#080B1B;
	box-shadow: inset 0 0 0 2px #080B1B;
}
.var-colN input[type="radio"]{
	display: none;
}
.var-colN.activotN,.var-colN.secondary-activotN{
	border: solid 3px #080B1B;
}
.var-msrN input[type="radio"]{
	display: none;
} 
.var-msrN.activotsN,.var-msrN.secondary-activotsN{
	border: solid 3px #080B1B;
}
.var-msrN{
    width: auto;
    padding: 6px;
    border: 1px solid gainsboro;
    cursor: pointer;
    display: inline-block;
    margin: 3px;
    font-weight: bold;
    opacity: .8
}
.var-colN:hover{
    border: 1px solid #080B1B;
}
.var-msrN:hover{
    border: 1px solid #080B1B;
}
.var-colN img{
    width: 100%;
    height: 100%;
}	 
.var-colN{
    width: 50px;
    height: 50px;
    border: 1px solid gainsboro;
    cursor: pointer;
    display: inline-block;
    margin: 3px;
    padding: 2px
}
.statusN{
	display: block;
	height: 26px;
	line-height: 26px
}
   .error {
        color: red;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .loading-animation {
        font-weight: bold;
        color: green;
        animation: blink 1s infinite;
    }
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
		@media only screen and (min-width: 200px) and (max-width: 750px){
			.popup-cm {overflow: auto}
			.popup-content{width: 90%}			 
		}
.tit-var{
	margin-bottom: 11px
}
.auto_savesMob{
	color: dodgerblue;
	font-weight: bold
}
.auto_savemob{
	color: dodgerblue;
	font-weight: bold
}
#errorTailleMob{
	color: #e74c3c;
	font-size: 16px;
	font-weight: bold!important
}
#errorColorMob{
	color: #e74c3c;
	font-size: 16px;
	font-weight: bold!important
}

#errorColorDesck{
	color: #e74c3c;
	font-size: 16px;
	font-weight: bold
}
#errorTailleDesck{
	color: #e74c3c;
	font-size: 16px;
	font-weight: bold
}
.texTrait{
	margin-top: 11px;
	display: none;
	color: dodgerblue;
	font-weight: bold
}
.progressBarContainer{
	display: none;
	width: 98%;
	background-color: #f3f3f3;
	border-radius: 5px;
	overflow: hidden;
	height: 20px;
	margin-top: 11px
}
.progressBar{
	width: 0%;
	height: 20px;
	background: linear-gradient(90deg, black, crimson, dodgerblue)!important;
	transition: width 1s;
}
#cart-count.highlight {
  animation: pulse 0.6s ease-in-out;
}
#cart-count-mob.highlight {
  animation: pulse 0.6s ease-in-out;
}
.icon-user-connected {
  position: relative;
  display: inline-block;
}

.icon-user-connected .fa-circle-check {
    position: absolute;
    bottom: 68px;
    right: -12px;
    color: green;
	float: left
}

.suggestions {
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    max-height: 450px;
    overflow-y: auto;
    display: none;
    z-index: 999;
}
.sec-serch{
	display: inline-block;
	height: 100px
}
.tit-serch strong{
	font-size: 14px;
}
.tit-serch p{
	font-size: 14px;
	margin-top: 23px
}
.cont-serch{
	height: 100px;
	line-height: 0px;
	margin-top: 40px
}
.suggest-item {
    cursor: pointer;
	margin-bottom: 11px;
	height: 100px;
	padding: 9px
}
.img-serch img {
    width: 40px; 
	height: 40px;
    object-fit: cover;
    margin-right: 8px;
}
.suggest-item:hover {
    background: #f5f5f5;
}
.content-box-search{
	width: 100%;
    height: auto;
    background-color: #fff;
    border: 1px solid gainsboro;
}
.prd-serch{
	text-align: left;
	padding-left: 11px
}
.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-left: 8px;
}

.popups-confirm {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popups-contents {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.popup-actions {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.btn-delete {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
}
.btn-cancel {
  background: #bdc3c7;
  color: black;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
}
.error-msg {
  display: none;
  color: red;
  font-size: 13px;
  margin-top: 5px;
}
.price-subs{
	float: right
}
.subtotals{
	float: right
}
.tut-prd-chk .qt-st{
	
}
.content-bn-img-ml{
	width: 100%;
	height: auto;
}
.content-bn-img-ml img{
	width: 100%;
	height: auto;
	object-fit: cover
}
#offre-du-jour-sectionDeals{
	background: linear-gradient(to top, crimson, rgb(41,41,48));
	padding: 11px;
	color: #fff;
	border-radius: 4px
}
#offre-du-jour-section{
	webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
	background-color: ivory;
	padding: 11px;
	border-radius: 4px
}
.list-support{
	background: linear-gradient(to left, black, dodgerblue);
	color: #fff!important;
	display: inline-table;
    width: 250px;
    height: 100px;
    border-radius: 15px;
    margin: 11px;
    webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
}
.sc-tt-sp{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: linear-gradient(to left, DodgerBlue, crimson);
	color: #fff;
	font-size: 22px;
	font-weight: bold
}
.name-hello{
	color: crimson!important
}
.favoris-box-list{
	width: 98%;
	height: 150px;
	border: 1px solid gainsboro;
	margin: 11px;
	border-radius: 11px
}
.content-favoris-box{
	padding: 11px
}
.content-favoris-box .tit-prd-fav {
    color: #000;
}

.sec-fav{
	display: inline-block;
}
.wish-img{
	width: auto;
	height: 130px;
	float: left;
}
.wish-img img{
	width: auto;
	height: 100%;
}
.wish-det{
	width: 86%;
	margin-left: 11px;
	height: 130px
}
.tit-prd-fav{
	margin-left: 11px;
	margin-bottom: 11px
}
.price-fv{
	margin-left: 11px;
	font-weight: bold;
	font-size: 18px;
	color: crimson;
	margin-bottom: 11px
}
.price-fv small{
	color: slategray;
	text-decoration: line-through
}
.start-fav{
	margin-left: 11px;
	margin-bottom: 11px;
	font-weight: bold
}
.start-fav i{
	color: orange
}
.fav-stock{
	margin-left: 11px;;
	color: dodgerblue;
	font-weight: bold
	
}
.option-fav{
	float: right;
	margin-top: -40px
}
.option-content-fav{
	display: inline-block;;
	margin: 11px
}
.fav-card{
	padding: 11px;
	border-radius: 8px
}
.vide-msg{
	width: 100%;
	height: auto;
	background-color: ivory;
	border: 1px solid gainsboro
}
.content-vide-msg{
	padding: 11px;
	text-align: center;
	font-weight: bold;
}
.heart-i{
	margin-bottom: 22px
}
.heart-i i{
	color: crimson;
	font-size: 58px
}
.ti-vide{
	font-size: 28px;
	margin-bottom: 22px
}
.btn-vd button{
	padding: 22px;
	border-radius: 8px;
	font-weight: bold
}
.btn-vd button:hover{
	background-color: crimson;
	color: #fff
}
.removeFavoriteBtn{
	color: crimson;
	font-weight: 500
}
.pr-cnt-cp{
	text-align: center
}
.coupon-box-list{
	display: inline-block;
	margin: 11px;
	width: 250px; 
	height: 100px;
	line-height: 100px;
	border-radius: 11px;
	background: linear-gradient(to right, crimson, rgb(41,41,48));
	webkit-box-shadow: 0 2px 5px #393737;
    -moz-box-shadow: 0 2px 5px #393737;
    -o-box-shadow: 0 2px 5px #393737;
    -ms-box-shadow: 0 2px 5px #393737;
    box-shadow: 0 2px 5px #393737;
	color: #fff
}
.cp-tt{
	margin-left: 8px;
	font-size: 13px
}
.cp-tp{
	margin-top: -32px;
	display: inline-block;
	float: left;
}
.cp-lg{
	position: absolute;
	margin-right: 8px;
	height: 25px;
	margin-top: -24px
}
.con-cp-tt{
	margin-top: -13px;
	margin-bottom: 11px;
}
.cp-lg img{
	height: 100%;
	width: auto;
	object-fit: cover
}
.con-cp-ml{
	height: 30px;
	width: 100%;
	float: left;
	margin-top: -65px;
}
.cp-ml{
	display: inline-block
}
.sim-cp{
	float: left;
	margin-left: 14px;
	transform: rotate(-90deg);
}
.sim-cp i{
	font-size: 20px;
	color: orange;
	webkit-box-shadow: 0 1px 5px #393737;
    -moz-box-shadow: 0 1px 5px #393737;
    -o-box-shadow: 0 1px 5px #393737;
    -ms-box-shadow: 0 1px 5px #393737;
    box-shadow: 0 1px 5px #393737;
}
.cp-vl{
	margin-top: 2px;
	font-weight: bold
}
.con-cp-nm{
	height: 30px;
	float: left;
	width: 100%;
	margin-top: -32px
}
.cp-nm{
	display: inline-block;
	font-size: 12px;
}
.date-cp{
	float: right!important;
	margin-right: 8px
}
.nm-cp{
	float: left!important;
	margin-left: 11px
}
.coupon-box-list.expired {
    opacity: 0.5;
    filter: grayscale(1);
}
.already-used{
	color: green
}
.ref-cm{
	margin-left: 11px;
	color: slategray;
	font-weight: 500;
	margin-bottom: 11px
}
.statut-cm-attente{
	background-color: orange;
	padding: 11px;
	border-radius: 8px;
	margin-left: 8px;
	width: auto;
	float: left;
	color: #fff;
	font-weight: bold
}
.statut-cm-ship{
	background-color: dodgerblue;
	padding: 11px;
	border-radius: 8px;
	margin-left: 8px;
	width: auto;
	float: left;
	color: #fff;
	font-weight: bold
}
.statut-cm-success{
	background-color: lightseagreen;
	padding: 11px;
	border-radius: 8px;
	margin-left: 8px;
	width: auto;
	float: left;
	color: #fff;
	font-weight: bold
}
.statut-cm-annuller{
	background-color: Red;
	padding: 11px;
	border-radius: 8px;
	margin-left: 8px;
	width: auto;
	float: left;
	color: #fff;
	font-weight: bold
}
.delivery-bike {
    position: relative;
    display: inline-block;
}

.box-icon {
    position: absolute;
    font-size: 0.5em;
    top: -0.4em;     /* ajuste verticalement */
    right: 1.8em;
}
.date-cm{
	margin-left: 11px;
	margin-bottom: 11px;
}
.date-cm span{
	font-weight: bold
}
.entt-det-cm{
	margin-left: 11px;
	height: auto;
	width: 98%;
}
.password-container {
  position: relative;
  width: 100%;
}


.toggle-password {
  position: absolute;
  right: 33px;
  top: 42%;
  transform: translateY(-40%);
  cursor: pointer;
  font-size: 18px;
  color: #555;
	color: #000
}

.lign-cm{
	font-weight: 600;
	color: rgb(41,41,48); 
	margin-bottom: 15px
}
.cm-n{
	color: dodgerblue!important
}
.hr-cm{
	margin-bottom: 20px
}
.lign-track-cm{
	float: right;
}
.lign-track-cm button{
	padding: 11px;
	border-radius: 8px
}
.toto-cm{
	color: slategray
}
.tt-ccm{
	color: dodgerblue!important;
	border-bottom: 1px solid gainsboro;
    height: 28px;
	font-weight: bold
}
.cn-dt-pm{
	display: inline-block;
	float: left;
	width: 47%;
	padding: 11px;
	border: 1px solid gainsboro;
	margin: 4px;
	height: 200px
}
.stp-trrak{
	margin-right: 4px
}
.sepa-track{
	width: 50%;
	text-align: center;
	color: #d9d9d9
}
.completedi i{
	color: #28a745!important
}
.step {
    width: 50%;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

/* Zig-zag alternation */
.step:nth-child(odd) {
    left: 0;
    text-align: right;
}

.step:nth-child(even) {
    left: 50%;
    text-align: left;
}

.circle {
    width: 40px;
    height: 40px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    z-index: 2;
}

.step .content {
    padding: 10px 15px;
    border-radius: 8px;
    background: #f6f6f6;
    margin: 0 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}

/* Completed steps */
.completed .circle {
    background: #28a745;
}

.completed .content {
    background: #eaffea;
    border-left: 4px solid #28a745;
}

/* Current active step */
.active .circle {
    background: #ffc107;
    animation: pulse 1.2s infinite;
}

.active .content {
    border-left: 4px solid #ffc107;
    background: #fff8d6;
}

/* Future steps */
.step:not(.completed):not(.active) .circle {
    background: #bbb;
}

/* Pulse animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}


.lign-addr{
	line-height: 37px
}
.fav-bx-list-he{
	height: 184px!important
}
.tk-im{
	width: 150px;
	height: 120px;
	background-color:beige;
	line-height: 120px;
	text-align: center
}
.tk-im span{
	font-weight: bold;
	color: dodgerblue;
}
.det-msg{
	line-height: 30px
}
.hh-msg{
	height: auto!important;
	width: 98%
}
.msg-content{
	margin-bottom: 11px
}
.stt--msg-d{
	height: 100px
}
.reply-form textarea{
	width: 98%;
	height: 150px;
	padding: 11px;
	border-radius: 8px;
	border: 1px solid gainsboro
}
.reply-form button{
	padding: 11px;
	border-radius: 8px;
}
.msg {
  margin-bottom: 12px;
  padding: 10px 15px;
  border-radius: 12px;
  line-height: 1.5;
  max-width: 65%;
}
.support-msg {
  background: rgb(41,41,47);
  color: #fff;
  border: 1px solid #c5ddff;
}
.user-msg {
  background: slategray;
  color: #fff;
  border: 1px solid #c5ddff;
  margin-left: auto;
	width: 45%!important
}
.msg-date {
  font-size: 12px;
  color: #888;
}
.notif-badge{
	color: crimson;
	font-size: 18px
}
	.review-container{
    width: 95%;
    max-width: 700px;
    margin: 30px auto;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

.product-review-box{
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.prd-img{
    width: 90px;
    height: 90px;
    border-radius: 12px;
    object-fit: cover;
}

.prd-info .prd-name{
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.prd-ref{
    font-size: 14px;
    color: #888;
}

/* Section Form */
.label-title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.rating-box{
    margin-top: 20px;
}

.stars{
    direction: rtl;
    display: flex;
    gap: 5px;
}

.stars input{
    display: none;
}

.stars label{
    font-size: 35px;
    color: #ccc;
    cursor: pointer;
    transition: .3s;
}

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label{
    color: orangered;
}

.field-box{
    margin-top: 20px;
}

.text-area{
    width: 97%;
    min-height: 130px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    resize: vertical;
}

.upload-section{
    margin-top: 20px;
}

.upload-box{
    margin-top: 10px;
}

.upload-box input{
    display: none;
}

.upload-label{
    display: inline-block;
    padding: 12px 15px;
    background: #f7f7f7;
    border: 1px dashed #888;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    width: 96%;
    text-align: center;
    transition: .3s;
}

.upload-label:hover{
    background: #eee;
}

.preview-img{
    width: auto;
    max-height: 200px;
    margin-top: 10px;
    border-radius: 12px;
    object-fit: cover;
    display: none;
}

.submit-btn{
    width: 100%;
    margin-top: 25px;
    background: #222;
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    border: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.submit-btn:hover{
    background: #000;
}
.det-faq p{
	line-height: 30px
}
/* GENERAL */
.section-title{
    text-align:center;
    font-size:32px;
    margin-bottom:35px;
    font-weight:700;
}

/* HERO */
.hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:60px 10%;
    background:#f9f9f9;
    gap:30px;
    flex-wrap:wrap;
}
.hero-content h1{
    font-size:45px;
    font-weight:800;
}
.hero-content p{
    font-size:18px;
    margin:15px 0 25px;
    color:#555;
}
.cta-btn{
    padding:12px 25px;
    background:crimson;
    color:white;
    text-decoration:none;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}
.cta-btn:hover{
    background:#000;
}
.hero-img img{
    width:420px;
    max-width:100%;
}

/* ADVANTAGES */
.advantages{
    padding:60px 10%;
}
.adv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:25px;
}
.adv-card{
    padding:25px;
    border-radius:15px;
    background:white;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    text-align:center;
}
.adv-card i{
    font-size:38px;
    color:crimson;
    margin-bottom:15px;
}

/* STEPS */
.steps{
    padding:60px 10%;
    background:#f8fbff;
}
.steps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:25px;
}
.step-card{
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    text-align:center;
    position:relative;
}
.step-card .num{
    width:40px;
    height:40px;
    border-radius:50%;
    background:crimson;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:19px;
    margin:0 auto 15px;
}

/* CTA FINAL */
.cta-final{
    text-align:center;
    padding:70px 10%;
}
.cta-final h2{
    font-size:34px;
    font-weight:800;
}
.cta-final p{
    color:#666;
    margin:10px 0 25px;
}
.cta-btn-lg{
    padding:14px 35px;
    background:crimson;
    color:#fff;
    border-radius:8px;
    font-size:18px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}
.cta-btn-lg:hover{
    background:#000;
}
/* ======================================= */
/* Vendor Form Hero - Kianfa Modern Style */
/* ======================================= */

.vendor-hero {
    position: relative;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.hero-bg img {
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    opacity: 0.15;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.form-card {
    position: relative;
    z-index: 2;
    background: linear-gradient(145deg, crimson, dodgerblue);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 450px;
    color: #fff;
    text-align: center;
    animation: fadeIn 1s ease;
}

.form-card h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.form-card p {
    font-size: 16px;
    margin-bottom: 30px;
}

.vendor-form .form-group {
    position: relative;
    margin-bottom: 20px;
}

.vendor-form .form-group i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #fff;
}

.vendor-form input,
.vendor-form select,
.vendor-form textarea {
    width: 90%;
    padding: 12px 15px 12px 40px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transition: background 0.3s, box-shadow 0.3s;;
	cursor: pointer
}

.vendor-form select {
    width: 102%;
    padding: 12px 15px 12px 40px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transition: background 0.3s, box-shadow 0.3s;
	cursor: pointer
}
.vendor-form select option{
   color: #000
}

.vendor-form input::placeholder,
.vendor-form textarea::placeholder {
    color: rgba(255,255,255,0.7);
}

.vendor-form input:focus,
.vendor-form select:focus,
.vendor-form textarea:focus {
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 8px dodgerblue;
}

.checkbox-group {
    display: flex;
    align-items: center;
    font-size: 14px;
	width: 100%
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    accent-color: dodgerblue;
	width: 10%
}

.checkbox-group label a {
    color: #fff;
    text-decoration: underline;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit:hover {
    background: dodgerblue;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
/* ====== UPLOAD LOGO ====== */

.upload-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Zone d’upload */
.upload-area {
    border: 2px dashed #4A90E2;
    padding: 25px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
    transition: 0.3s;
    background: #;
}

.upload-area:hover {
    background: #eef5ff;
    border-color: #2d7be5;
	color: #000!important
}

.upload-icon {
    font-size: 45px;
    color: #2d7be5;
    margin-bottom: 10px;
}

.upload-text {
    color: #fff;
    font-size: 15px;
}

/* Preview */
.preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.preview-img {
    width: 140px !important;
    height: 140px !important;
    display: block !important;
    object-fit: contain !important;
    background: #fff;
}


/* Boutons actions */
.preview-actions {
    display: flex;
    gap: 10px;
}

.btn-change,
.btn-remove {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-change {
    background: #2d7be5;
    color: #fff;
}

.btn-change:hover {
    background: #1b5dcc;
}

.btn-remove {
    background: #f44336;
    color: #fff;
}

.btn-remove:hover {
    background: #d32f2f;
}
.password-strength ul {
    list-style: none;
    padding-left: 0;
}
.password-strength li {
    margin-bottom: 5px;
    color: crimson;
    font-size: 14px;
}
.password-strength li.valid {
    color: dodgerblue;
}
.password-strength li.invalid {
    color: crimson;
}
/* ================= HERO ================= */
.hero-partner {
    background: linear-gradient(135deg, #000, dodgerblue);
    color: #fff;
    padding: 80px 20px 60px;
    text-align: center;
    position: relative;
}
.hero-partner h1 {font-size: 3rem; margin-bottom: 15px;}
.hero-partner p {font-size: 1.2rem; margin-bottom: 30px; max-width: 700px; margin-left:auto; margin-right:auto;}
.hero-partner .cta-btn {
    background: crimson; color:#fff; padding:15px 35px; border:none; border-radius:8px;
    font-size: 1.1rem; cursor:pointer; transition:0.3s;
}
.hero-partner .cta-btn:hover {background:#ff0033;}

/* ================= AVANTAGES ================= */
.advantagess {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 60px 20px;
}
.adv-cards {
    background: #fff; padding:19px; border-radius:12px; flex:1 1 250px; max-width:300px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); text-align:center; transition:0.3s;
}
.adv-cards:hover {transform: translateY(-5px);}
.adv-cards i {font-size:2.5rem; color: crimson; margin-bottom:15px;}
.adv-cards h3 {margin-bottom:10px; font-size:1.3rem;}
.adv-cards p {font-size:0.95rem; color:#555;}

/* ================= TYPES DE PARTENAIRES ================= */
.partner-types {
    padding:60px 20px;
    background:#fff;
    text-align:center;
}
.partner-types h2 {margin-bottom:40px; font-size:2rem;}
.partner-grid {display:flex; flex-wrap:wrap; gap:25px; justify-content:center;}
.partner-card {
    background:#f1f1f1; padding:25px; border-radius:12px; flex:1 1 220px; max-width:250px; transition:0.3s;
}
.partner-card:hover {transform: translateY(-5px);}
.partner-card h4 {font-size:1.2rem; margin-bottom:10px; color:dodgerblue;}
.partner-card p {font-size:0.9rem; color:#333; margin-bottom:15px;}
.partner-card button {
    padding:10px 20px; background:crimson; color:#fff; border:none; border-radius:6px; cursor:pointer; transition:0.3s;
}
.partner-card button:hover {background:#ff0033;}

/* ================= PROCESSUS ================= */
.steps {padding:60px 20px; text-align:center;}
.steps h2 {margin-bottom:40px; font-size:2rem;}
.steps-grid {display:flex; flex-wrap:wrap; gap:25px; justify-content:center;}
.step-card {
    background:#fff; padding:25px; border-radius:12px; flex:1 1 220px; max-width:250px; box-shadow:0 6px 15px rgba(0,0,0,0.1); transition:0.3s;
}
.step-card:hover {transform: translateY(-5px);}
.step-card .num {
    font-size:1.8rem; font-weight:bold; color:#fff; margin-bottom:10px; 
}
.step-card h3 {margin-bottom:10px;}
.step-card p {font-size:0.9rem; color:#555;}

/* ================= FORMULAIRE ================= */
.partner-form-section {
    padding:60px 20px;
    background: linear-gradient(135deg, #000, #111);
    color:#fff;
    text-align:center;
}
.partner-form-section h2 {font-size:2rem; margin-bottom:10px;}
.partner-form-section p {margin-bottom:30px; color:#ccc;}
.vendor-form {max-width:600px; margin:0 auto; text-align:left;}
.form-groups {margin-bottom:20px; position:relative;}
.form-groups input, .form-groups textarea {
    width:100%; padding:12px 15px; border-radius:8px; border:none; font-size:1rem;
}
.form-groups select{
	width: 105%; padding:12px 15px; border-radius:8px; border:none; font-size:1rem;
}
.form-groups textarea {resize:none;}
.vendor-form .btn-submit {
    width:100%; padding:15px; background:crimson; border:none; border-radius:10px; color:#fff; font-size:1.1rem; cursor:pointer; transition:0.3s;
}
.vendor-form .btn-submit:hover {background:#ff0033;}
.form-groups label {font-size:0.9rem; display:block; margin-bottom:5px;}
.form-groups input[type=checkbox] {width:auto; margin-right:10px;}

/* ================= UPLOAD ================= */
.upload-group {position:relative;}
.upload-area {
    border:2px dashed dodgerblue; padding:25px; border-radius:10px; text-align:center; cursor:pointer; transition:0.3s;
    background:#111; color:#fff;
}
.upload-area:hover {background:#222;}
.upload-area i {font-size:2rem; margin-bottom:10px;}
.preview-wrap {display:flex; flex-direction:column; align-items:center; gap:10px;}
.preview-img {width:150px; height:150px; object-fit:cover; border-radius:10px;}
.preview-actions {display:flex; gap:10px;}
.preview-actions button {padding:6px 12px; border:none; border-radius:6px; cursor:pointer;}
.btn-change {background:dodgerblue; color:#fff;}
.btn-remove {background:crimson; color:#fff;}


/* ==== TOAST MODERNE ==== */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 280px;
    max-width: 350px;
    background: #222;
    color: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateX(120%);
    transition: all .35s ease;
    z-index: 999999;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    background: #0abf58; /* vert moderne */
}

.toast.error {
    background: #e63946; /* rouge moderne */
}

.toast.hidden {
    display: none;
}


/* ================= RESPONSIVE ================= */


/* Animation fadeIn */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Responsive */
@media (max-width: 600px) {
    .form-card {
        padding: 30px 20px;
        border-radius: 15px;
    }
    .form-card h2 {
        font-size: 24px;
    }
}