/*TOOLBOX*/
.flex{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: var(--default-flex-wrap);
}
.flexsep{ margin: auto;}
.f-nowrap{ flex-wrap: nowrap;}
.f-column{ flex-direction: column;}
.f-nowrap{ flex-wrap: nowrap;}
.f-wrap{ flex-wrap: wrap;}

.pads{ padding: var(--padding-small);}
.padm{ padding: var(--padding-medium);}
.padl{ padding: var(--padding-large);}
.mars{ margin: var(--margin-small);}
.marm{ margin: var(--margin-medium);}
.marl{ margin: var(--margin-large);}

._pc{
	display: none;
}

.btn-std{
	border-radius: var(--border-radius-small);
	margin: var(--margin-medium) auto;
	width: fit-content;
	cursor: pointer;
}

.small-link{
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}

/*  ==  GLOBAL  ==  */
body{
	background-color: var(--bg-1st-color);
	color: var(--fg-1st-color);
	font: var(--font-weight-1st) var(--font-size-1st)/var(--line-height-1st) var(--font-family-1st);
}
.lnk1{
	color: var(--fg-1st-color);
}
.lnk2{
	color: var(--fg-2nd-color);
}

/*  ==  LINKBAR  ==  */
.linkbar{
	font-weight: var(--font-weight-2nd);
	background-color: var(--bg-3rd-color);
	display: none;
}
.linkbar .link:hover{
	text-decoration: underline;
}
/*  ==  HEADER  ==  */
header{
	background-color: var(--bg-2nd-color);
	color: var(--fg-2nd-color);
}
header .topline{
	display: flex;
	align-items: center;
}
.logo{
	height: 40px;
	padding: var(--padding-small) var(--padding-small) var(--padding-small) 0;
}
.retrait-mobile{
	background-color: var(--bg-3rd-color);
}
.retrait-mobile .link{
	font-size: 12px;
}
.search{
	margin: 0 0 0 auto;
}
.header-btn{
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
}
.menu-button{
	font-size: 20px;
}
/*  ==  PANIER  ==  */
.panier-viewport{
	position: fixed;
	top: 0;
	right: -100%;
	bottom: 0;
	width: calc(100% - 40px);
	transition-duration: 500ms;
	max-width: 300px;
}
.panier-viewport.panier-open{
	right: 0;
}
.panier{
	width: 100%;
	height: 100%;
	background: var(--bg-5th-color);
	box-shadow: -2px 0 2px #0004;
}
.panier-content{
	height: calc(100% - 150px);
	overflow-y: auto;
}
.panier-recap{
	height: 148px;
	padding: var(--padding-medium);
}
.panier-sep{
	width: calc(100% - 20px);
	margin: auto;
	height: 2px;
	border-radius: 2px;
	background: var(--fg-3rd-color);
}
.panier-vide{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	font-size: 27px;
	font-weight: 600;
}
.panier-vide-img{
	background: url("../../clientside/images/empty_cart.png") no-repeat center /256px;
	width: 256px;
	height: 256px;
	margin: var(--margin-medium) 0;
}
.panier-total{
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	line-height: 20px;
}
.panier-total-payer{
	font-weight: 600;
}
.panier-bouton-valider{
	background: var(--bg-4th-color);
	color: var(--fg-1st-color);
	font-size: 16px;
	font-weight: 600;
	padding: var(--padding-medium) var(--padding-large);
}
.panier-vider{
	font-size: 12px;
}