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

@import url('https://fonts.googleapis.com/css2?family=Fuggles&family=Mali:ital,wght@1,700&display=swap');

/* -------------------------------- Caroussel derniers ajouts ------------------------------------- */

.shop .carousel, .account .carousel{
	width: 100%;
	background-color: white;
	border-radius: 10px;
}

.shop .carousel p, .account .carousel p{
	color: var(--violet);
}

.shop .carousel a, .account .carousel a{
	color: var(--violet) !important;
}

.shop p.price, .account p.price{
	padding: 5px 10px;
	background-color: var(--red);
	border-radius: 4px;
	color: white;
	margin-bottom: 3px;
}

.shop .carousel .slide, .shop .news .slide,
.account .carousel .slide, .account .news .slide{
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: 200ms opacity ease-in-out;
}

.shop .carousel .slide[data-active], .shop .news .slide[data-active],
.account .carousel .slide[data-active], .account .news .slide[data-active]{
	opacity: 1;
}

.shop .carousel > ul, .shop .news > ul,
.account .carousel > ul, .account .news > ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop .carousel .before,.shop .news .before,
.shop .carousel .after,.shop .news .after,
.account .carousel .before,.shop .news .before,
.account .carousel .after,.shop .news .after{
	z-index: 50;
	background-color: var(--violet);
    border: none;
    border-radius: 4px;
    padding: 3px 5px;
}

.shop button:focus-visible{
	border: unset;
}

.shop button:focus{
	outline: none;
}

.shop .enAvant img{
	width: auto;
	height: 250px;
}

.account .enAvant img{
	width: 100%;
	height: auto;
}

.shop .before, .account .before{
	left: 20px;
}

.shop .after, .account .after{
	right: 30px;
}

.shop .after img, .shop .before img{
	width: 65px;
	height: auto;
}

.shop .before, .shop .after,
.account .before, .account .after{
	top: 50%;
	transform: translateY(-50%);
}

.shop .carousel .slide, .shop .news .slide,
.account .carousel .slide, .account .news .slide{
	position: absolute;
	inset: 0;
	display: none;
	transition: 200ms opacity ease-in-out;
}

.shop .carousel .slide[data-active], .shop .news .slide[data-active],
.account .carousel .slide[data-active], .account .news .slide[data-active]{
	display: block;
}

.shop .carousel > ul, .shop .news > ul,
.account .carousel > ul, .account .news > ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop th, .shop td{
	padding: 4px 4px;
	border-right: 1px solid white;
	border-bottom: 1px solid white;;
}

.shop th:last-child, .shop td:last-child{
	border-right: none;
}

.shop .live, .account .live{
	padding: 0 10px;
	background-color: red;
	font-size: 20px;
	border-radius: 5px;
	color: white;
}

.productColor{
	border-radius: 50%;
	border: 2px solid white;
	color: var(--violet);
}

.shop .product input[type="radio"]{
	display: none;
}

input:checked[type="radio"] + .checked{
    border: 4px solid red;
	border-radius: 50%;

}

input[type="radio"] + .sizeChecked{
    border: 4px solid white;
	border-radius: 3px;
}



input:checked[type="radio"] + .sizeChecked{
    border: 4px solid red;
	border-radius: 3px;
}

.shop #errors{
	background-color: rgba(255, 0, 0, .5);
}



.afficheTaille .union:last-child{
	display: none;
}

.emptyShelf{
	background-color: white;
	border-radius: 5px;
	width: 60%;
	height: auto;
}

ul li{
	list-style-type: none;
}

/*.shop ul li{
	list-style-type: disc !important;
}*/

.shop .imgSize{
	background-color: white;
	position: relative;
	border-radius: 3px;
}

.shop .productSize{
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--violet);
	font-weight: bold;
}

.shop form .color{
	color: var(--violet);
}

.shop .zoneConnect{
	padding: 0 30px;
}

.shop .zoneConnect .form-horizontal{
	width: 100%;
}

.shop .form-check-label, .shop .signup{
	color: var(--violet);
}

.account .delivery-choice label {
	color: var(--violet);
}

.account .container table span, .account .container.mobile p span{
	display: inline;
}

.shop .imgProduct{
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.account .orderStatus{
	background-color: white;
	padding: 15px 10px;
	margin: 5px 0;
	color: var(--violet);
	border-radius: 5px;
}

.message #cke_1_top, .message #cke_1_bottom, .message #cke_66, .message #cke_editor_arialbl, .message #cke_editorMes_arialbl{
	display: none !important;
}

.message #cke_editor, .message .cke_reset{
	border-radius: 5px;
}

.message #cke_1_contents{
	height: 400px !important;
}

.message_view{
	background-color: white;
	color: var(--violet);
	padding: 5px;
	border-radius: 4px;
}

.account .message_view div:first-child .mailSeparate{
	display: none;
}

.account .message_view p{
	margin: 0;
}

/* -------------------------------- Menu Front Office ------------------------------------- */

barnav *{
	font-family: 'poppins' sans-serif;

}

barnav {
	padding:0;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
}

barnav ul{
	list-style: none;

}

barnav a{
	text-decoration: none  !important;
	font-weight: 600;
}

barnav header{
	position: sticky;
	background-color: rgba(233,33,99,1);
	top: 0;
	width: 100%;
	z-index: 1000;
}

barnav>main>section{
	position: relative;
	height: calc(100vh - 3rem);
	width: 100%;
	background: url('ecomAdmin/imgs/test/ferrari.jpg') no-repeat top center / cover;
	overflow: hidden;
	z-index: 500;
}

.overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-color: rgba(238, 56, 86, 0.384);
}

.imageNav{
	position: absolute;
	top:-3%;
	width: 100%;
	background: url('ecomAdmin/imgs/test/ferrari.jpg') no-repeat top center / cover;
	overflow: hidden;
}

barnav .container{
	max-width: 100%;
	padding: 0 2rem;
	margin: 0 auto;
	display: flex;
	position: relative;
}

barnav .container .logo{
	font-size: 30px;
}

.logo-container{
	flex: 0.7;
	display: flex;
	align-items: center;
}

.log-sign{
	display: flex;
	justify-content: right;
	align-items: center;
	flex: 1;
}

.log-sign > .panier_space > a{
	text-decoration: none;
	color: #fff;
	align-items: center;
}

.log-sign > .panier_space > .logo-panier > svg{
	height: 20px;
	align-items: center;
}

.log-sign .logo_panier{
	margin-left: 20px;
}

.panier_space{
	position: relative;
}

.rond_panier{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--red);
	position: absolute;
	top:-10px;
	left: 38px;
}

.qty_panier{
	text-align: center;
	margin-top: 2px;
	width: 26px;
	height: 26px;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
}

.logo{
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 3rem;
	margin: 0;
	flex: 1;
}

.socials{
	flex: 0.6;
	display: flex;
	justify-content: space-around;
	position: relatif;
	align-items: center;
	padding: 0 20px;;
}

.logo span{
	font-weight: 300;
	font-size: 26px;
}

.btn{
	display: inline-block;
	padding: 10px 10px;
	font-size: 0.8rem;
	border: 2px solid #fff;
	border-radius: 2rem;
	line-height: 1;
	margin: 0 1.2rem;
	transition: .3s;
	text-transform: uppercase;
	width: 160px;
	font-weight: 600;
}

.btn.solid, .btn.transparent:hover{
	background-color: #fff;
	color: rgba(238, 56, 86, 0.384);

}

.btn.transparent, .btn.solid:hover{
	background-color: transparent;
	color: #fff;

}

.marked{
	padding: 5px 0;
}

.nav-link > ul{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.nav-link{
	padding: 0 !important;
}

.nav-link > a{
	line-height: 3rem;
	color: #fff;
	padding: 0 .8rem;
	letter-spacing: 1px;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 0.5s;
}

.nav-link > a > svg{
	margin-left: .2rem;
}

.dropdown{
	position: absolute;
	top: 100%;
	left: 0;
	width: 12rem;
	transform: translateY(9px);
	opacity: 0;
	pointer-events: none;
	transition: .5s;
}

.dropdown ul{
	position: relative;
	padding-left: 0px;
}

.dropdown-link > a{
	display: flex;
	background-color: #fff;
	padding: .5rem 1rem;
	font-size: .9rem;
	align-items: center;
	justify-content: space-between;
	transition: .3s;
	color: var(--violet) !important;
}

.dropdown-link:hover > a{
	background-color: rgb(233, 86, 135);
	color:#fff;
}

.dropdown-link{
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(15,27,56), rgba(255,0,0), rgba(15,27,56,0));
	border-image-slice: 1;
}

.dropdown-link:last-child{
	border-bottom: none;
}

.arrow{
	position: absolute;
	width: 11px;
	height: 11px;
	top:-5.5px;
	left: 30px;
	background-color: #fff;
	transform: rotate(45deg);
	cursor: pointer;
	transition: .3s;
	z-index: -1;
}

.dropdown-link:first-child:hover ~ .arrow{
	background-color: rgb(236, 133, 168,1);
}

.dropdown-link{
	position: relative;
}

.dropdown .second{
	top: 0;
	left: 100%;
	padding-left: .8rem;
	cursor: pointer;
	transform: translateX(9px);
}

.dropdown .second .arrow{
	top: 10px;
	left: -5.5px;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown,
.topMenu:hover > .dropdown{
	transform: translate(0, 0);
	opacity: 1;
	pointer-events: auto;
}

.hamburger-menu-container{
	flex: 1;
	display: none;
	align-items: center;
	justify-content: flex-end;
}

.hamburger-menu{
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hamburger-menu div{
	width: 1.6rem;
	height: 3px;
	border-radius: 3px;
	background-color: #fff;
	position: relative;
	z-index: 1001;
	transition: .5s;
}

.hamburger-menu div:before, .hamburger-menu div:after{
	content: '';
	position: absolute;
	width: 25px;
	height: inherit;
	background-color: #fff;
	border-radius: 3px;
}

.hamburger-menu div:before{
	transform: translateY(-7px);
}

.hamburger-menu div:after{
	transform: translateY(7px);
}

#check{
	position: absolute;
	top: 10%;
	right: 1rem;
	transform: translate(-50%);
	width: 2.5rem;
	height: 2.5rem;
	z-index: 90000;
	cursor: pointer;
	opacity: 0;
	display: none;
}

#check:checked~ .hamburger-menu-container .hamburger-menu div{
	background-color: transparent;
}

#check:checked~ .hamburger-menu-container .hamburger-menu div:before{
	transform: translateY(0) rotate(-45deg);
}

#check:checked~ .hamburger-menu-container .hamburger-menu div:after{
	transform: translateY(0) rotate(45deg);
}

.dropdown .third{
	width:644px;
	background-color: rgb(240, 240, 240);
	position: sticky;
	display: block;
	cursor: pointer;
	border: 2px solid rgba(233,33,99,1);
	top: -100px;
    left: -640px;
}

.third .list-group{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.third .list-group a{
	text-decoration: none;
	height: 60px;
	border-right: 2px solid rgba(233,33,99,1);
	text-align: center;
	color: rgb(70, 70, 70);
}

.third .list-group a:nth-child(n){
	border-right: 2px solid rgba(233,33,99,1);
}

.third .list-group a:first-child{
	border-top: 2px solid rgba(233,33,99,1);
	border-right: 2px solid rgba(233,33,99,1);
	border-bottom: 2px solid rgba(233,33,99,1);
}

.third .list-group a:last-child{
	border-top: 2px solid rgba(233,33,99,1);
	border-right: 2px solid rgba(233,33,99,1);
}

.third .list{
	padding: 0;
}

.third h3{
	color: rgb(70, 70, 70);
	text-align: center;
	text-transform: uppercase;
	padding: 10px 0;
	margin: 0;
	background-color: rgb(240, 240, 240);
	border-top: 2px solid rgba(233,33,99,1);
}

.third .list-group a p{
	margin: 15px 0;
	color: rgb(70, 70, 70);
}

#nav-tabContent .tab-pane{
	margin: 10px;
}

.third .slidersheet{
	border-top: 2px solid rgba(233,33,99,1);
}

.third .map{
	width: auto;
	height: 280px;
	position: absolute;
	top: -15px;
	left: 0px;
	transform: rotate(-5deg);
}

.third .radioContainer{
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
	padding-left: 30px;
	margin-bottom: 0;
}

.third .circle{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: rgba(233,33,99,1);
    position: absolute;
    border-radius: 50%;
}



.third .groupMap{
	position: relative;
}


#nav-tabContent .caractcar{
	margin: 0;
	flex-wrap: wrap;
	justify-content: space-around;
}

.third #list-profile .caractbox{
	position: relative;
	height: 178px;
	background-color: green;
	margin: 0;
	cursor: default;
	padding: 10px 0;
	text-align: center;
}

.third .show_product{
	padding: 0;
}

#list-profile{
	margin:0 !important;
}

#list-profile .list{
	height: 100%;
}

/* -------------------------------- vues ------------------------------------- */

.view h1{
	margin-bottom: 50px;
}

/* -------------------------------- Vue Login ------------------------------------- */

.login{
	margin: 12em 0;
}

.loginTunnel{
	margin: 2em 0 2em 0;
	width: 100%;
}

.form-container .form-icon{
	color: #fff;
	font-size: 13px;
	text-align: center;
	text-shadow: 0 0 20px rgba(0,0,0,0.2);
	padding: 20px 0;
	vertical-align: top;
}


#login .form-container .form-icon{
	width: 39%;
	display: inline-block;

}

.form-container .form-icon i{
	font-size: 124px;
	margin: 0 0 15px;
	display: block;
}

.form-container .form-icon .signup a{
	color: #fff;
	text-transform: uppercase;
	transition: all 0.3s ease;
	text-decoration: none;
	font-size: 15px;
}

.form-container .form-horizontal{
	background-color: rgba(255, 255, 255, 0.99);
	margin: -20px 0;
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

#login .form-container .form-horizontal{
	display: inline-block;
	padding: 60px 30px;
}

#login .form-icon svg{
	margin-bottom: 30px;
}

.form-container .title{
	font-size: 23px;
	text-align: center;
	text-transform: capitalize;
	letter-spacing: 0.5px;
	margin: 30px 0 30px 0;
	font-weight: 900;
	text-transform: uppercase;
}

.form-container .title{
	color: #454545;
}

.form-horizontal .form-group{
	background-color: rgba(255, 255, 255, 0.15);
	border: 1px solid #b5b5b5;
	border-radius: 20px;
}

.form-horizontal .input-icon{
	color: #b5b5b5;
	font-size: 15px;
	text-align: center;
	height: 35px;
	width: 40px;
	vertical-align: top;
	display: inline-block;
}

.form-horizontal .form-control{
	color: #4e4d4d;
	background-color: transparent;
	font-size: 14px;
	letter-spacing: 1px;
	width: calc(100%- 55px);
	height: 33px;
	padding: 2px 10px 0 10px;
	box-shadow: none;
	border: none;
	border-radius: 0;
	display: inline-block;
	transition: all .3s;
}

input::placeholder{
	color: #b5b5b5;
}

.form-horizontal .form-control:focus{
	outline: none;
	background-origin: none;
}

.form-horizontal .form-control::placeholder{
	color: #b5b5b5;
	font-size: 13px;
	text-transform: capitalize;
}

.form-horizontal .btn{
	color: rgba(255, 255, 255, 0.8);
	background: linear-gradient(to right, rgba(233,33,99,1),rgb(248, 162, 162));
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: 100%;
	margin: 20px 0 10px 0;
	border: none;
	border-radius: 20px;
}

.form-horizontal a{
	margin: 0 0 10px 0;
	text-decoration: none;
	color: darkgray;
}

.form-horizontal .forgot-pass{
	font-size: 12px;
	text-align: center;
	display: block;
}

.form-horizontal .forgot-pass a{
	color: #999;
	transition: all .3s ease;
}

.form-horizontal .forgot-pass a:hover{
	color: #777;
}

/* -------------------------------- Vue Register ------------------------------------- */

#register{
	margin: 5em 0;
}

#register .form-container .form-horizontal{
	width: 100%;
	padding: 30px 30px;
}

#register .form-container .title{
	color: #fff;
}

#register .form-container{
	padding: 0 15px 33px 15px;
}

/* -------------------------------- vues panier ------------------------------------- */

.filTunnel{
	height: 100px;
}

.filTunnel .tunnelCircleActive{
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-color: var(--red);
	margin: auto;
	position: relative;
	border: 3px solid white;
}

.filTunnel .tunnelCircleStandard{
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-color: white;
	margin: auto;
	position: relative;
	border: 3px solid rgba(140, 140, 140, 0.3);
}

.tunnel{
	margin: 20px 0;
}

.traitActive{
	border: 2px solid rgba(140, 140, 140, 1);
	position: relative;
	top:32px;
	width: 31%;
	margin: 0 15px;
}

.traitStandard{
	border: 2px solid rgba(140, 140, 140, 0.3);
	position: relative;
	top:32px;
	width: 31%;
	margin: 0 15px;
}

.tabPanier h2{
	margin-bottom: 30px;
}

.bulleActive{
	line-height: 54px;
	text-align: center;
	font-weight: bold;
	color: white;
}

.bulleStandard{
	line-height: 54px;
	text-align: center;
	font-weight: bold;
	color: var(--red);
}

.prevNext .button, .view .button{
	height: 50px;
	line-height: 46px;
	padding: 0 20px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: bold;
	border: 2px solid var(--red);
	color:rgb(41, 41, 41);
	margin-top: 40px;
	font-size: 25px;
}

.prevNext .button:hover, .view .button:hover{
	background-color: var(--red);
	color: white;
	border: 2px solid var(--red);
}

.guest .title{
	font-size: 23px;
	text-align: center;
	text-transform: capitalize;
	letter-spacing: 0.5px;
	margin: 30px 0 30px 0;
	font-weight: 900;
	text-transform: uppercase;
}

.delevery-choice{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.delevery-choice :before, .delevery-choice :after{
	box-shadow: border-box;
	padding: 0;
	margin: 0;
}

.delivery-choice .delivery-card{
	height: 125px;
	position: relative;
	margin: 10px 0;
	background-color: white;
	border-radius: 10px;
}

.delivery-choice input[type="radio"], .delivery-choice .addressUser{
	-webkit-appearance: none;
	appearance: none;
	background-color: white;
	height: 100%;
	width: 100%;
	border-radius: 10px;
	position: absolute;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	cursor: pointer;
	outline: none;
}

.delivery-choice input[type="radio"]:before{
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	background-color: #f9fafd;
	border: 1px solid #e2e6f3;
	top: 18px;
	right: 18px;
}

.delivery-choice input[type="radio"]:after{
	content: "";
	position: absolute;
	height: 13px;
	width: 13px;
	background-color: transparent;
	border-radius: 4px;
	top: 22.5px;
	right: 22.5px;
}

.delivery-choice input[type="radio"]:hover{
	transform: scale(1.02);

}

.delivery-choice input[type="radio"]:checked{
	border: 3px solid rgba(233,33,99,1);

}

.delivery-choice input[type="radio"]:checked:after{
	background-color: rgba(233,33,99,1);
}

.delivery-choice label h2 span{
	position: absolute;
	top: 50px;
	right: -392px;
}

#delivery button{
	width: 600px;
	margin-top: 40px;
}

.guest .listAddress .delivery-choice .delivery-card{
	height: 170px;
}

.guest .listAddress .delivery-choice .delivery-card p{
	margin-bottom: 0;
	font-family: 'Courier New', Courier, monospace !important;
}

.guest .addDelivery, .thanks .addDelivery{
	text-align: right;
	margin-right: 10px;

}

.guest .addDelivery a:hover{
	color: rgb(78, 78, 78);
	font-weight: bold;
}

.totalPrice{
	font-size: 17px;
}

.list-group-paiement{
	display: flex;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--white);
	background-color: var(--red);
	font-weight: bold;
	border: 2px solid var(--violet);
}

.nav-pills .nav-item a{
	color: rgb(255, 0, 0);
	border: 2px solid var(--violet);
	padding: 5px 10px !important;
}

.nav-item:hover, .nav-item.active:hover, .nav-pills .nav-link.active:hover{
	background-color: var(--red);
	color: var(--white);
}

.nav-item a.nav-link{
	list-style-type: none;
}

#paiement{
	padding: 0;
}

.paiement-choice{
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
	right: 30px;
	padding: 15px;
	background-color: white;
	color: var(--violet);
}

.paiement-choice .btn{
	padding: 10px 40px;
	margin: 10px 0 20px 0;
	font-weight: bold;
}

.imgEmptyBasket{
	height: 400px;
	width: auto;
}

.thanks{
	height: calc(100% - 124px);
	padding-top: 40px;
}

.thanksH2, .thanksUl{
	margin-top: 80px;
}

.thanksCheck{
	width: 160px;
	color: green;
	margin: auto;
}

.thanksLink a{
	text-decoration: none;
	color: black
}
.thanksLink p{
	margin: 0 10px;	
}

/* ----------------------------- vue account -------------------------------------- */

.accountForm{
	height: calc(100% - 174px);
}

.mySpaceH1{
	margin-bottom: 40px;
}

.mySpaceH2{
	margin-bottom: 30px;
}

.mySpaceH3{
	margin-bottom: 20px;
}

.delivery-choice .addressUser p{
	margin: 0 0 2px 0;
	font-size: 20px;
}

#addressUser{
	height: 215px;
	padding: 15px 15px;
}

.mySpace hr{
	border-top: none !important;
	margin: 30px 0;
}

.mySpace .accountAddress .listAddress .delivery-card p{
	font-family: 'Courier New', Courier, monospace !important;
}

.accountAddress .delivery-choice .delivery-card a{
	text-decoration: none;
	color: black;
}

.accountAddress .delivery-choice .delivery-card{
	height: 215px;
}

/* ----------------------------- vue dashboard myspace -------------------------------------- */

.personnal, .address, .password{
	height: 500px;
	width: calc(100% / 3);
	-webkit-appearance: none;
    appearance: none;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
	outline: none;
	padding: 30px 0 0 0;
}

.personnal, .password{
	margin: 0 30px;
}

.dispoSvg{
	height: 500px;
	margin: auto;
}

.dispoSvg svg{
	color: rgba(233,33,99,1);
	margin-bottom: 50px;
	margin: auto;
}

.accountForm a{
	text-decoration: none;
	color: black;
}

/* -------------------------------- vue index ------------------------------------- */

#carouselindex .carousel{
	position: relative;
	width: 100%;
	height: 300px;
}

#carouselindex .carousel-item{
	position: relative;
	height: 500px;
}

.imgPres{
	position: absolute;
	top:-50%;
	display: block;
}

.lastbuyblock .btn.transparent, .btn.solid:hover{
	background-color: rgba(233,33,99,1);
	color: #fff;
}

.lastbuyblock .btn{
	width: 100px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	border-color: rgba(233,33,99,1);
    padding: 5px;
}

.form-guest{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.99);
    border-radius: 15px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.visibleDesktop{
	display: block;
}

.page-wrap-front {
	min-height: 72%;
	/* equal to footer height */
		margin-bottom: 0px; 
}
.page-wrap-front:after {
	content: "";
	display: block;
}
.site-footer-front, .page-wrap-front:after {
	/* .push must be the same height as footer */
}

.page-wrap {
	min-height: 83%;
	/* equal to footer height */
		margin-bottom: 0px; 
}
.page-wrap:after {
	content: "";
	display: block;
}
.site-footer, .page-wrap:after {
	/* .push must be the same height as footer */
	height: 100px; 
}

.visibleMobile{
	display: none;
}

h5{
	margin: 0px;
}

form{
	margin: 0 0;
}

.headhead{
	padding: 20px;
	height: 100px;
	padding: 20px;
	margin-bottom:30px;
}

.aConnect{
	margin: 0px 20px;
}

.connect{
	text-align: right;
}

.connect, .home{
	line-height: 100px;
}

.footer h5{
	color: white;
	padding: 10px 40px;
}

.homeSidebar{
	margin-top: 30px;
	background-color: #3f8ebf;
	float: right;
	width: 351px;
	color: white;
	padding: 10px 5px;
}

.homeSidebar h4{
	text-align: center;
	line-height: 40px;
}

.p_center{
	text-align: center;
}

.img_center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.navbar-brand{
	margin-left:15px;
}

.small{
	width: 60px;
	height: auto;
}

.medium{
	width: 300px;
	height: auto;
}

.marginBottom{
	margin-bottom: 10px;
}

.message_error{
	width: 100%;
	height: 30px;
	display: inline;
	position: absolute;
	top:0;
	background-color: red;
	color: white;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
}

.message_good{
	width: 100%;
	height: 30px;
	display: inline;
	position: absolute;
	top:0;
	background-color: green;
	color: white;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
}

.error{
	border : solid red 1px;
}

.normalList .col1{
	width: 10%;
}

.normalList .col2{
	width: 25%;
}

.normalList .col3{
	width: 48%;
}

.normalList .col4, .col5, .col6{
	width: 9%;
}

.conteneur>img{
	padding: 30px;
	vertical-align: middle;
	border: 2px solid darkgrey;
	width: 100%;
}

#productImage{
	margin-top:20px;
}

.form_height{
	margin-top: 20px;
}

.checkbox_slider{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.form_height input[type="checkbox"]{
	position: relative;
	width: 120px;
	height: 40px;
	-webkit-appearance: none;
	background: linear-gradient(0deg, #999, #fff);
	outline: none;
	border-radius: 20px;
	box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,.5), 0 5px 20px rgba(0,0,0,.2), inset 0 0 15px rgba(0,0,0,.1);
}

.form_height input:checked[type="checkbox"]{
	background: linear-gradient(0deg, #6dd1ff, #20b7ff);
	box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);
	transition: .5s;
}

.form_height input[type="checkbox"]:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 40px;
	background: linear-gradient(0deg, #000, #6b6b6b);
	border-radius: 20px;
	box-shadow: 0 0 0 1px #232323;
	transform: scale(.98,.96);
	transition: .5s;
}

.form_height input:checked[type="checkbox"]:before{
	left: 40px;
}

.form_height input[type="checkbox"]:after{
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	left: 65px;
	width: 4px;
	height: 4px;
	background: linear-gradient(0deg, #6b6b6b, #000);
	border-radius: 50%;
	transition: .5s;

}

input:checked[type="checkbox"]:after{
	background: #63cdff;
	left: 105px;
	box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff;
}

.form_height span > h4{
	margin: 8px 15px 0 15px;
}

.form_height h3, .form_height h4{
	margin: 3px 0 5px 0;
}

#carouselindex .carousel-indicators{
	bottom: 30px !important;

}

.insurance{
	z-index: 500;
	height: 150px;
	position: relative;
	top: -30px;
	justify-content: center;
	overflow: hidden;
}

.insurance .insurblock, .insurance .lastbuyblock{
	width: calc(100%/3);
	background-color: rgb(252, 233, 246);
	color: rgb(70, 70, 70);
	border-top: 2px solid rgba(233,33,99,1);
	border-bottom: 2px solid rgba(233,33,99,1);
	border-left: 2px solid rgba(233,33,99,1);
	text-align: center;
	justify-content: space-around;
	position: relative;
}

.insurance .insurblock{
	border-top: 2px solid rgba(233,33,99,1);
	border-bottom: 1px solid rgba(233,33,99,1);
}

.insurance .lastbuyblock{
	border-top: 1px solid rgba(233,33,99,1);
	border-bottom: 2px solid rgba(233,33,99,1);
}

.insurance .insurblock:last-child{
	border-right: 2px solid rgba(233,33,99,1);
	border-radius: 0 15px 0 0;
}

.insurance .lastbuyblock:last-child{
	border-right: 2px solid rgba(233,33,99,1);
	border-radius: 0 0 15px 0;
}

.insurance .insurblock:first-child{
	border-radius: 15px 0 0 0;
}

.insurance .lastbuyblock:first-child{
	border-radius: 0 0 0 15px;
}

.insurblock p, .lastbuyblock p{
	font-size: 25px;
	margin: 0;
}

.insurblock, .lastbuyblock{
	padding: 0 10px;
}

.heightfont{
	margin-bottom: 0px !important;
	display: inline;
}

span>.flexcol{
	padding: 0;
}

.heightfont>label{
	margin: 0;
}

/* -------------------vue review-------------------- */
.graphAdmin{
	border: 1px solid red;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 30px;
	margin-right: 100px;
}

.nbrIp{
	font-size: 120px;
}

/* -------------------Menu Admin-------------------- */

.headerDecal{
	height: 80px;
}

.wrapper li{
	list-style-type: none;
}

.wrapper .header{
	z-index: 1;
	background: #22242A;
	position: fixed;
	width: calc(100% - 0%);
	height: 70px;
	display: flex;
	top: 0;
}
  
.wrapper .header .header-menu{
	width: calc(100% - 0%);
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}

.wrapper .header .header-menu>a{
	text-decoration: none;
}

.wrapper .header .header-menu .title{
	color: #fff;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: 900;
}

.wrapper .header .header-menu .title span{
	color: #4CCEE8;
}

.wrapper .header .header-menu .sidebar-btn{
	color: #fff;
	position: absolute;
	margin-left: 240px;
	font-size: 22px;
	font-weight: 900;
	cursor: pointer;
	transition: 0.3s;
	transition-property: color;
}

.wrapper .header .header-menu .sidebar-btn:hover{
	color: #4CCEE8;
}

.wrapper .header .header-menu ul{
	display: flex;
	margin-bottom: 0px;
}

.wrapper .header .header-menu ul li a{
	background: #fff;
	color: #000;
	display: block;
	margin: 0 10px;
	font-size: 18px;
	width: 34px;
	height: 34px;
	text-align: center;
	border-radius: 50%;
	transition: 0.3s;
	transition-property: background, color;
}

.wrapper .header .header-menu ul li a svg{
	margin-top: 7px;
}

.wrapper .header .header-menu ul li a:hover{
	background: #4CCEE8;
	color: #fff;
}

.wrapper .sidebar{
	z-index: 1;
	background: #2F323A;
	position: fixed;
	top: 70px;
	height: 100%;
	transition: 0.3s;
	transition-property: width;
	overflow-y: auto;
}

.wrapper .sidebar .sidebar-menu{
	overflow: hidden;
}

.wrapper .sidebar .sidebar-menu .profile p{
	color: #bbb;
	font-weight: 700;
	margin-bottom: 10px;
	margin: 20px 20px;
}

.wrapper .sidebar .sidebar-menu .item{
	width: 250px;
	overflow: hidden;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn{
	display: block;
	color: #fff;
	position: relative;
	padding: 20px 20px;
	transition: 0.3s;
	transition-property: color;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn:hover{
	color: #4CCEE8;
	text-decoration: none;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn svg{
	margin:0px 10px;
	font-size: 25px;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn span svg{
	font-size: 10px;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn .drop-down{
	float: right;
	font-size: 12px;
	margin-top: 3px;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu{
	background: #3498DB;
	overflow: hidden;
	max-height: 0;
	transition: 0.3s;
	transition-property: background, max-height;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a{
	display: block;
	position: relative;
	color: #fff;
	white-space: nowrap;
	font-size: 15px;
	padding: 20px 20px 20px 30px;
	transition: 0.3s;
	transition-property: background;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a:hover{
	background: #55B1F0;
	text-decoration: none;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a:not(last-child){
	border-bottom: 1px solid #8FC5E9;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu i{
	padding-right: 20px;
	font-size: 10px;
}

.wrapper .sidebar .sidebar-menu .item:target .sub-menu{
	max-height: 500px;
}

.wrapper .main-container{
	width: (100% - 250px);
	margin-top: 70px;
	margin-left: 250px;
	padding: 15px;
	background: url(background.jpg)no-repeat;
	background-size: cover;
	height: 100vh;
	transition: 0.3s;
}

.wrapper.collapse .sidebar{
	width: 70px;
}

.wrapper.collapse .sidebar .profile img,
.wrapper.collapse .sidebar .profile p,
.wrapper.collapse .sidebar a span{
	display: none;
}

.wrapper.collapse .sidebar .sidebar-menu .item .menu-btn{
	font-size: 23px;
}

.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu i{
	font-size: 18px;
	padding-left: 3px;
}

.wrapper.collapse .main-container{
	width: calc(100% - 70px);
	margin-left: 70px;
}

.wrapper .main-container .card{
	background: #fff;
	padding: 15px;
	margin-bottom: 10px;
	font-size: 14px;
}

/* ------------------- Entete views Admin -------------------- */

.enteteViewAdmin{
	padding: 5px 10px;
	background-color: rgba(135, 206, 250, 0.3);
	border-top: solid 2px rgb(135,206, 250);
	border-bottom: solid 2px rgb(135,206, 250);
	margin-bottom: 10px;
}

.enteteViewAdminP{
	font-size: 12px;;
}

.countTableau{
	background-color: #343a40;
	height: 50px;
}

.countTableau div span{
	color: white;
	font-size: 15px;
	line-height: 50px;
	padding-left: 10px;
}

.countTableau div .p{
	color: #343a40;
	padding: 2px 10px;
	background-color: white;
	border-radius: 20px;
}

.recapOrder{
	height:80px;
	padding: 5px 10px;
	background-color: rgba(38, 116, 165, 0.1);
	border: solid 2px rgb(135,206, 250);
	margin-bottom: 10px;
}

.recapOrder .align-items-center{
	height: 60px;
	margin: 0;
}

.recapOrder .recapOrderP{
	margin-left: 5px;
	font-weight: bold;
	font-size: 15px;
}

.recapOrder .recapOrderH3{
	font-size: 18px;
	margin-top: 10px;
	font-weight: bolder;
	color: darkgreen;
}



/* -------------------responsive-------------------- */

/*--------------- Mobile --------------------*/

@media only screen and (max-device-width : 767px){

	.card-cvc{
		margin-top: 16px;
	}

	.shop .formAdress{
		width: 100%;
	}

	.shop .form-guest{
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
	}

	.delivery-choice label{
		position: absolute;
		padding: 15px 5px 0 5px;
		cursor: pointer;
	}

	.shop .blueCard{
		width: 100%;
	}

	.account .form-guest{
		width: 100%;
	}

	.guest .listAddress .delivery-choice .delivery-card label{
		margin: 0;
	}

	.basket img{
		width: 100%;
		height: auto;
	}

	.form-guest{
		width: 100%;
	}

	.delivery-choice{
		width: 100%;
	}

	.form-horizontal{
		width: 100%;
	}

	.view{
		margin-top: 0;
	}

	.thanksH1{
		font-size: 40px;
		margin-bottom: 50px;
	}

	.thanksH2{
		font-size: 30px;
	}

	.thanksH3{
		margin-top: 20px;
	}

	.shop .zoneConnect{
		width: 100%;
	}

	.decalHead{
		margin-top: 40px;
	}

}

@media only screen and (min-device-width : 768px){

	.shop .formAdress{
		width: 80%;
	}

	.shop .form-guest{
		width: 80%;
	}

	.delivery-choice label{
		position: absolute;
		padding: 20px;
		cursor: pointer;
	}

	.shop .blueCard{
		width: 60%;
	}

	.account .form-guest{
		width: 80%;
	}

	.guest .listAddress .delivery-choice .delivery-card label{
		margin: 10px 20px;
	}

	.form-guest{
		max-width: 670px;
	}

	.delivery-choice{
		max-width: 400px;
	}

	.view{
		margin-top: 50px;
		padding-top: 80px;
	}

	.thanksH1{
		font-size: 100px;
		margin-bottom: 50px;
	}

	.thanksH2{
		font-size: 50px;
	}

	.thanksH3{
		margin-top: 20px;
	}

	.shop .zoneConnect{
		width: 50%;
	}

	.footerBasket{
		display: block;
		position: fixed;
		bottom: 50px;
		background-color: var(--red);
	}

	.decalHead{
		margin-top: 285px;
	}

}

@media only screen and (min-device-width : 821px){

	.shop .enAvant img{
		width: auto;
		height: 250px
	}

	.shop .imgProduct{
		width: 50%;
		height: 500px;
	}
	
	.shop .productDesc{
		width: 50%;
	}

	.shop .paiement-choice{
		width: 550px;
	}

	.imgCB{
		width: auto;
		height: 180px;
	}

	.footerBasket{
		display: none;
	}

	.message_view{
		width: 60%;
		margin: auto;
	}

}

@media only screen and (max-device-width : 820px){

	.shop .imgProduct{
		width: 100%;
		height: 250px;
	}
	
	.shop .productDesc{
		width: 100%;
	}

	.shop .enAvant img, .account .enAvant img{
		width: auto;
		height: 230px
	}

	.shop .before img, .shop .after img,
	.account .before img, .account .after img{
		width: 30px;
	}

	.shop .before .account .before{
		left: 10px;
	}
	
	.shop .after, .account .after{
		right: 10px;
	}

	.shop .carousel, .account .carousel{
		height: 450px;
	}

	.shop .paiement-choice{
		width: 100%;
	}

	.imgCB{
		width: 100%;
		height: auto;
	}

	.mobilMargin{
		margin-bottom: 80px;
	}

	.footerBasket{
		display: block;
		position: fixed;
		bottom: 0;
		background-color: var(--red);
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}

	.message_view{
		width: 100%;
	}

}

@media screen and (max-width: 1140px) {

	.hamburger-menu-container{
		display: flex;
	}

	#check{
		display: block;
	}

	.imageNav{
		height: 50%;
		width: auto;
		transform: translateX(-25%);
	}

	.nav-btn{
		position: fixed;
		height: calc(100vh - 3rem);
		top: 3rem;
		left: 0;
		width: 100%;
		background-color: rgb(233, 86, 135);
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		overflow-x: hidden;
		overflow-y: auto;
		transform: translateX(100%);
		transition: .65s;
	}

	#check:checked ~ .nav-btn{
		transform: translateX(0);
	}

	.nav-link{
		flex: initial;
		width: 100%;

	}

	.nav-link > ul{
		flex-direction: column;
		padding: 0;
	}

	.nav-link{
		width: 100%;
		padding: 0;
	}

	.nav-link > a{
		line-height: 1;
		padding: 1.5rem 2rem;
	}

	.nav-link:hover > a{
		background-color: rgba(233,33,99,1);
		transition: .3s;
	}

	

	.dropdown, .dropdown.second{
		position: initial;
		top: initial;
		left: initial;
		transform: initial;
		opacity: 1;
		pointer-events: auto;
		width: 100%;
		padding: 0;
		background-color: rgb(226, 133, 164);
		display: none;
	}

	.nav-link:hover > .dropdown,
	.dropdown-link:hover > .dropdown{
		display: block;
	}

	.dropdown-link > a{
		background-color: transparent;
		color: #fff;
		padding: 1.2rem 2rem;
	}

	.dropdown.second .dropdown-link > a{
		padding: 1.2rem 2rem 1.2rem 3rem;
	}

	.dropdown.second .dropdown.second .dropdown-link > a{
		padding: 1.2rem 2rem 1.2rem 4rem;
	}

	.arrow{
		display: none;
	}

	.dropdown-link.dropdown-link:not(:nth-last-child(2)){
		border-bottom: none;
	}
	
	.nav-link:hover > a .arrow{
		background-color: rgba(233,33,99,1);
		transition: .3s;
	}

	.log-sign{
		flex: initial;
		width: 100%;
		background-color: rgba(233,33,99,1);
		height: 90px;
	}

	.container > .nav-link{
		padding: 0;
	}

	.nav-link > .nav-link{
		padding: 0;
	}


	.dropdown-link:hover > a{
		background-color: rgb(235, 76, 129);
	}

	.dropdown-link > a > svg{
		transform: rotate(90deg);
		transition: .7s;
	}




}

@media screen and (max-width: 768px) {

	/* ------------------- login -------------------- */

	.form-container{
		padding-bottom: 15px;
	}

	.form-container .form-icon{
		width: 100%;
		padding: 20px 0;
	}

	.form-container .form-horizontal{
		width: 100%;
		margin: 0;
	}

	.form-bg{
		margin:30px 0;
	}


	/* -------------------Menu-------------------- */

	.navbar{
		position: fixed;
		z-index: 100;
		width: 100%;
		top:0px;
	}

	.marginBottom{
		margin-bottom: 30px;
	}

	.visibleDesktop{
		display: none;
	}
	
	.visibleMobile{
		display: block;
		margin-top:20px;
	}

	.topMobSpace{
		margin-top: 60px;;
	}

	.hCenter{
		text-align: center;
		margin-bottom: 15px;;
	}

	.enteteMobile p{
		margin:0px;
		line-height: 30px;
	}

	.phpMobile{
		height: 60px;
		border: 2px solid darkgrey;
		vertical-align: middle;
	}

	.phpMobileImg{
		height: 190px;
		border: 2px solid darkgrey;
		text-align: center;

	}

	.phpMobile p{
		padding: 5px;
	}

	html{
		width: 100vw;
	}

	.top{
		border-radius: 5px 5px 0px 0px;
	}

	.bottomLeft{
		border-bottom-left-radius: 5px;
		border-left: 2px solid darkgrey;
		border-bottom: 2px solid darkgrey;
		border-right: 1px solid darkgrey;
	}

	.bottomRight{
		border-bottom-right-radius: 5px;
		border-left: 1px solid darkgrey;
		border-bottom: 2px solid darkgrey;
		border-right: 2px solid darkgrey;
	}

	.phpMobileImage{
		height: 75px;
		text-align: center;
	}

	.phpMobileImageCenter{
		height: 75px;
		border-left: 1px solid darkgrey;
		border-bottom: 2px solid darkgrey;
		border-right: 1px solid darkgrey;
		text-align: center;
	}

	.entetebtn{
		padding: 0px;
		margin-bottom: 20px;;
	}

	.smallMobile{
		width: 60px;
		height: auto;
		margin: 5px;
	}

	.smallImgMobile{
		width: 165px;
		margin-top: 10px;

	}

	.img_mobile{
		text-align: center;
		position: relative;
		top: 50%;
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.bottomTableMobile{
		width: 33%;
	}

	.bottomCenterTableMobile{
		width: 34%;
	}

	.lienAction{
		z-index: 50;
	}

	.bottomLeft p{
		margin-bottom: 0;
		padding: 5px;
		text-align: center;
		position: relative;
		top: 50%;
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.entLeft{
		width: 70%;
	}

	.contLeft{
		width: 70%;
	}

	.entRight{
		width: 30%;
	}

	.contRight{
		width: 30%
	}

}