#widthDisplay, #heightBlock {
	color: red;}

html {
	margin: 0 !important;}

body {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: calc(100vh - var(--marginBold));
	background: var(--back-color);}

:root {
  --back-color: #0D0D0D;
  --color2: #F4F0E7;
  --invert-txt-color: #F2F2F2;
  --txt-color: #F4F0E7;
  --txt-color2: #5A6EFF;
  --invert-txt-color2: #A59100;	
  --risoYel: #FFE800;
  --risoGre: #00a95c;
  --risoFlP: #FF48B0;
  --risoBlu: #5A6EFF;
  --risoMeB: #324BA5;
  --risoGol: #B49B55;
  --risoHuG: #296961;
  --risoRed: #FF5F5F;
  --risoBro: #915F52;
  --risoBrR: #915F52;
  --risoFeB: #3C5087;
  --risoMaR: #D2515E;
  --risoPur: #785AA5;
  --risoBur: #9B587D;
  --risoTea: #00828C;
  --risoGrey: #928D88;
  --risoOra: #FF7835;
  --risoCri: #E65F50;
  --risoFlO: #FF7378;
  --risoMeG: #b59f7a;
  --risoLiG: #969696;
  --marginLight: 5px;
  --marginBold: 25px;
  --padding: 10px;
  --minHeightHeader: 33px;}

* {
	-webkit-tap-highlight-color: var(--txt-color2) !important;}

::selection {
	background: var(--txt-color);
	color: var(--back-color);}

::marker {
	color: var(--back-color);}

.controls *::selection, #number::selection, .controls::selection, #number::selection {
	background: transparent !important;
	color: var(--txt-color) !important;}

.message2 a::selection, .message2 span::selection {
	background: var(--back-color) !important;
	color: var(--txt-color) !important;}

*:not(.header *) {
    -moz-transition: all 0s;
	-webkit-transition: all 0s;
	-ms-transition: all 0s;
	transition: all 0s;}

.colorFiche, .reStock, .outOfStock, .addActive, .add, .backHome, .buttonSend, .buttonOrder, .additionalColor, .colorFicheActive {
    -moz-transition: transform 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: transform 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: transform 0.25s cubic-bezier(.55,0,.29,.99) !important;
	transition: transform 0.25s cubic-bezier(.55,0,.29,.99) !important;}

.arrow, .plus, .moins, .hidden {
    -moz-transition: opacity 0.25s cubic-bezier(.55,0,.29,.99), visibility 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: opacity 0.25s cubic-bezier(.55,0,.29,.99), visibility 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: opacity 0.25s cubic-bezier(.55,0,.29,.99), visibility 0.25s cubic-bezier(.55,0,.29,.99) !important;
	transition: opacity 0.25s cubic-bezier(.55,0,.29,.99), visibility 0.25s cubic-bezier(.55,0,.29,.99) !important;}

.header *, .carouselLeft, .carouselRight {
    -moz-transition: all 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: all 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: all 0.25s cubic-bezier(.55,0,.29,.99) !important;
	transition: all 0.25s cubic-bezier(.55,0,.29,.99) !important;}

input, .stockFaible a, .promotion a {
    -moz-transition: color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	transition: color 0.25s cubic-bezier(.55,0,.29,.99) !important;}

.bar1, .bar2, .stockFaible .bar:nth-child(1), .promotion .bar {
    -moz-transition: background-color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: background-color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: background-color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	transition: background-color 0.25s cubic-bezier(.55,0,.29,.99) !important;}

.stockFaible .cross, .promotion .cross, .stockFaible .bar, .promotion .circle {
    -moz-transition: border-color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: border-color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: border-color 0.25s cubic-bezier(.55,0,.29,.99) !important;
	transition: border-color 0.25s cubic-bezier(.55,0,.29,.99) !important;}

.panier {
    -moz-transition: left 0s, right 0s, margin 0s !important;
	-webkit-transition: left 0s, right 0s, margin 0s !important;
	-ms-transition: left 0s, right 0s, margin 0s !important;
	transition: left 0s, right 0s, margin 0s !important;}

.header * {
    -moz-transition: font-size 0s !important;
	-webkit-transition: font-size 0s !important;
	-ms-transition: font-size 0s !important;
	transition: font-size 0s !important;}

.colorC {
	background-color: #039fe3;}

.colorM {
	background-color: #e6007e;}

.colorJ {
	background-color: #ffee00;}

.color0 {
	background-color: var(--back-color);}

.color1 {
	background-color: var(--risoYel);}

.color2 {
	background-color: var(--risoGre);}

.color3 {
	background-color: var(--risoFlP);}

.color4 {
	background-color: var(--risoBlu);}

.color5 {
	background-color: var(--risoMeB);}

.color6 {
	background-color: var(--risoGol);}

.color7 {
	background-color: var(--risoHuG);}

.color8 {
	background-color: var(--risoRed);}

.color9 {
	background-color: var(--risoBro);}

.color10 {
	background-color: var(--risoBrR);}

.color11 {
	background-color: var(--risoFeB);}

.color12 {
	background-color: var(--risoMaR);}

.color13 {
	background-color: var(--risoPur);}

.color14 {
	background-color: var(--risoBur);}

.color15 {
	background-color: var(--risoTea);}

.color16 {
	background-color: var(--risoGrey);}

.color17 {
	background-color: var(--risoOra);}

.color18 {
	background-color: var(--risoCri);}

.color19 {
	background-color: var(--risoFlO);}

.color20 {
	background-color: var(--risoMeG);}

.color21 {
	background-color: var(--risoLiG);}

h1:not(.blocTxt h1) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;}

h1, h2 {
	font-family: 'GeneralSans-Variable';
	font-weight: 700;
	margin: 0;
	color: var(--txt-color);
	font-size: 3em;}

h1 span {
	font-weight: 450;}

h3 {
	font-size: 1.25em;
	margin: calc(var(--marginBold) - var(--marginLight)) 0;}

.name a {
	cursor: pointer;
	font-family: 'GeneralSans-Variable';
	font-weight: 700;
	color: var(--txt-color);
	font-size: 1em;}

p {
	position: relative;
	font-family: 'GeneralSans-Variable';
	font-weight: 450;
	color: var(--txt-color);
	margin: 0;}

button {
	padding: 0;}

.message1 span, .message2 span, .message3 span, .seeMore, .cookiesPreference a, strong, h3, #articleNumber {
	font-weight: 600;}

.message2 span {
	color: var(--back-color);}

a[href]:not(.name a, #articleNumber, #total, [class^="fiche"] a, .blocLines a, .backHome a):hover::after, .cookiesPreference a:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background-color: var(--txt-color);}

.cookiesActive::after {
    background-color: var(--back-color) !important;}

.changeAfterColor:hover::after {
    background-color: var(--txt-color2) !important;}

.message1 a, .message2 a, .message3 a {
	font-size: 1.5em;}


/* --------------------------------------------------------------------------------------------------------------- MESSAGES */
.message1, .message2, .message3 {
	z-index: 999;
	display: none;
	width: 100%;
	height: 72px;
	background-color: var(--txt-color2);}

.message2 {
	position: fixed;
	bottom: 0px;
	background-color: var(--txt-color);}

.message3 {
	z-index: 998;
	position: fixed;
	bottom: 0px;
	padding-bottom: 0px;}

.offline, .freeShipping, .txtMessage {
	display: inline-flex;
	width: 100%;
	white-space: nowrap;
	align-items: center;}

.blocTxtMessage {
	overflow: hidden;
	margin-left: var(--marginBold);
	width: calc(100% - 6 * var(--marginBold));}

.message1 a, .message2 a, .message3 a {
	white-space: nowrap;
	padding-right: 200px;}

.message2 a  {
	text-align: center;
	width: 100% !important;
	padding: 0 !important;
	color: var(--back-color);}

.message1 .cross, .message2 .cross, .message3 .cross{
    position: relative;
    width: 40px;
    height: 10px; 
    border: solid var(--color2) 3px; 
    border-radius: 50%;
    padding: var(--padding); 
    margin-right: var(--padding);
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	margin: calc(var(--marginBold) / 2) var(--marginBold);
	margin-left: auto;}

.message2 .cross {
	border: solid var(--back-color) 3px;}

.message1 .bar, .message2 .bar, .message3 .bar {
    position: absolute;
    height: 2px;
    width: 20px;}

.message1 .bar, .message3 .bar  {
    background-color: var(--txt-color);}

.message2 .bar{
    background-color: var(--back-color);}

.message1 .bar:nth-child(1), .message2 .bar:nth-child(1), .message3 .bar:nth-child(1) {
    transform: rotate(45deg);
  	left: 20px;}

.message1 .bar:nth-child(2), .message2 .bar:nth-child(2), .message3 .bar:nth-child(2)  {
    transform: rotate(-45deg);
	right: 20px;}

.message1 a, .message2 a, .message3 a {
    white-space: nowrap;
    display: inline-block;}

.message1 a {
    animation: animation1 30s linear infinite;}

@keyframes animation1 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(calc(-1 * var(--message-width1)));
    }
}

.message2 a {
    animation: animation2 15s linear infinite;}

@keyframes animation2 {
	0%, 100% {
		transform: translateX(0%);
	}
}

.message3 a {
    white-space: nowrap;
    display: inline-block;
    animation: animation3 20s linear infinite;}

@keyframes animation3 {
    0% {
        transform: translateX(calc(-1 * var(--message-width3)));
	}
    100% {
        transform: translateX(0);
    }
}

.message1 .cross:hover, .message2 .cross:hover, .message3 .cross:hover {
	animation: rotateAnimation3 .5s cubic-bezier(.55,0,.29,.99) forwards;
	transition-delay: .1s !important;}

@keyframes rotateAnimation3 {
    0% {
        transform: rotate(0deg);}
    33% {
        transform: rotate(-22.5deg);}
    66% {
        transform: rotate(11.25deg);}
    100% {
        transform: rotate(0deg);}
}


/* --------------------------------------------------------------------------------------------------------------- COOKIES */
.cookiesBlock {
	z-index: 1000;
	position: fixed;
	display: none;
	bottom: 0px;
	width: 100%;
	height: calc(1 * 72px);
	align-items: center;
	background-color: var(--txt-color);}

.cookiesBlockActive {
	display: flex;}

.cookiesMessage {
	width: calc((100% / 5) * 4 - 2 * var(--marginBold));
	margin-left: var(--marginBold);}

.cookiesBlock a {
	color: var(--back-color);}

.seeMore, .cookiesDecline {
	margin-left: var(--marginBold);}

.seeMore, .cookiesAccept, .cookiesDecline {
	cursor: pointer;}

.cookiesPreference {
	display: inline-flex;
	margin: 0 var(--marginBold);}


/* --------------------------------------------------------------------------------------------------------------- WINDOWS TOO SMALL MESSAGE */
.errorWindowsWidth {
	position: absolute;
	top: 50%;
	display: none;
	transform: translateY(-50%);
	margin: var(--marginBold);
	text-align: center;}


/* --------------------------------------------------------------------------------------------------------------- HEADER */
.header {
	display: flex;
	min-height: var(--minHeightHeader);
	margin: var(--marginBold);
	align-items: center;
	justify-content: space-between;}

.apropos {
	margin: 0 auto 0 calc(var(--marginBold) * 2);}

.panier {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
    text-align: right;}

.panierFixed {
	z-index: 998;
	position: fixed;
	display: flex;
	top: 0;
	right: 0;
	min-height: var(--minHeightHeader);
	align-items: center;
	margin-top: calc(var(--marginBold));
	margin-right: calc(var(--marginBold));
	mix-blend-mode: difference;}

.panierActive {
	animation: rotateAnimation .5s cubic-bezier(.55,0,.29,.99) forwards;}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);}
    33% {
        transform: rotate(-11.25deg);}
    66% {
        transform: rotate(5.63deg);}
    100% {
        transform: rotate(0deg);}
}

.txtPanierActive {
	animation: colorTxtAnimation .5s cubic-bezier(.55,0,.29,.99) forwards;}

@keyframes colorTxtAnimation {
    0% {
        color: var(--txt-color);}
    50% {
        color: var(--txt-color2);}
    100% {
        color: var(--txt-color);}
}

.borderPanierActive {
	animation: colorBorderAnimation .5s cubic-bezier(.55,0,.29,.99) forwards;}

@keyframes colorBorderAnimation {
    0% {
        color: var(--txt-color);
        border-bottom: solid var(--txt-color) 3px;}
    50% {
        color: var(--txt-color2);
        border-bottom: solid var(--txt-color2) 3px;}
    100% {
        color: var(--txt-color);
        border-bottom: solid var(--txt-color) 3px;}
}

.articleActive {
	animation: colorAnimation1 .5s cubic-bezier(.55,0,.29,.99) forwards;}

@keyframes colorAnimation1 {
    0% {
        border: solid var(--txt-color) 3px;
		color: var(--txt-color);}
    50% {
        border: solid var(--txt-color2) 3px;
		color: var(--txt-color2);}
    100% {
        border: solid var(--txt-color) 3px;
		color: var(--txt-color);}
}

.panier a, .panier span {
	padding: 0;
	float: right;}

#articleNumber {
	display: none;
	min-width: 20px;
	padding: calc(var(--padding) / 4);
	margin: 0 var(--padding);
	text-align: center;
	border-radius: 100%;
	border: solid var(--color2) 3px;}

#dot {
	margin: 0 calc(var(--padding) / 2);}

.name a {
    margin: 0;}



/* --------------------------------------------------------------------------------------------------------------- GENERAL */
.visible {
	opacity: 1 !important;
	display: block;}

.hidden {
	visibility: hidden;
	opacity: 0;}

.hidden2 {
}

.colorActive {
	color: var(--txt-color2) !important;}

.colorActive2 {
	background-color: var(--txt-color2) !important;}

.hidden, .animation .txtFiche {
	display: none;}

.animation, .animation .imageFiche img {
	cursor: default !important;}

#__bs_notify__ {
	display: none !important;}

video::-webkit-media-controls, video::-webkit-media-controls-enclosure, video::-webkit-media-text-track-container, video::-webkit-media-text-track-display, video::-webkit-media-controls-panel, video::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-overflow-button {
    display: none !important;}



/* --------------------------------------------------------------------------------------------------------------- RESPONSIVE MENU */
@media screen and (min-width: 2201px) {
	.cookiesMessage {
		width: calc(100% - (100% / 6 - 1 * var(--marginBold)) - 3 * var(--marginBold));}
}

@media screen and (max-width: 2200px) {
	.cookiesMessage {
		width: calc(100% - (100% / 5 - 1 * var(--marginBold)) - 3 * var(--marginBold));}
}

@media screen and (min-width: 1921px) {
	:root {
  		--marginBold: 30px;}
	h2, .blocTxt h1  {
		font-size: 3em;}
	a, .single_add_to_cart_button, p, .blocOrder label, .blocCheckout button, .name a, label, .buttonSend button {
		font-size: 1.25em;}	
	p a, .woocommerce-checkout label {
		font-size: 1em;}
	#shipping_checkbox, .txtPaiement label, .newsletterBtn button {
		font-size: 1.25em !important;}
	#articleNumber {
		min-width: 25px;}
	h3 {
		font-size: 1.5em;}
}

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

}

@media screen and (max-width: 1550px) {
	.cookiesMessage {
		margin-right: calc(2 * var(--marginBold));
		width: auto;}
	.cookiesPreference {
		margin-left: auto;
		margin-right: var(--marginBold);}
}

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

}

@media screen and (max-width: 1150px) {
	h2, .blocTxt h1 {
		font-size: 2em;}
	.productFiche a:not(.blocOrder .productFiche a), .blocTotal a:not(.blocOrder .blocTotal a) {
		font-size: 1.5em;}
	.quantite a, .size a, .number a, .type a {
		font-size: ;}
	.blocCheckout input, input:not(.controls input), textarea {
		font-size: 1.25em;}
}

@media screen and (max-width: 950px) {
	.message1 a, .message2 a, .message3 a {
		padding-right: 100px;
		font-size: 1em;}
}

@media screen and (max-width: 750px) {
	.cookiesBlock {
		height: calc(2 * 72px);}
	.cookiesMessage {
		margin: var(--marginBold);}
	.cookiesPreference {
		margin-bottom: var(--marginBold);}
	.cookiesBlockActive {
		display: flex;
		align-items: flex-start;
    	flex-direction: column;}
	.cookiesPreference {
		margin-top: auto;
		margin-left: var(--marginBold);
		margin-bottom: var(--marginBold);}
}

@media screen and (max-width: 700px) {
	.footer {
		position: relative;
		display: flex;
		flex-wrap: wrap;}
	.footer div {
		margin: 0;
		flex: 1 1 50%;}
	.copyright, .ml {
		text-align: right;}
	.cg, .ml {
		padding-top: var(--padding);}
	.container {
    	padding-bottom: 0px;}
	.message2 a  {
		width: auto !important;
		padding-right: 100px !important;
		color: var(--back-color);}
	@keyframes animation2 {
		0% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(calc(-1 * var(--message-width2)));
		}
	}
}

@media screen and (max-width: 600px) {
	input:not(.controls input, input[type="checkbox"], input[type="radio"]), textarea {
		font-weight: 400;
		padding-top: calc(var(--padding) / 2);
		font-size: 1em;}
	#mc-embedded-subscribe-form input {
		padding-top: 0;}
}

@media screen and (max-width: 550px) {
	h2, .blocTxt h1 {
		font-size: 1.5em;}
	#total, #dot {
		display: none !important;}
	#articleNumber {
		margin-right: 0;}
    .panier {
		z-index: 998;
        position: fixed;
		display: flex;
        top: 0;
        right: 0;
		min-height: var(--minHeightHeader);
		align-items: center;
		margin-top: calc(var(--marginBold));
		margin-right: calc(var(--marginBold));
		mix-blend-mode: difference;}
	.cookiesBlock {
		height: calc(3 * 72px);}
}

@media screen and (max-width: 500px) {
	.apropos {
		margin: 0 auto 0 calc(var(--marginBold));}
	:root {
  		--marginBold: 20px;}
}

@media screen and (max-width: 470px) {
	.footer {
		position: relative;
		display: flex;
		flex-direction: column;}
	.footer div {
		padding-top: var(--padding);}
}

@media screen and (max-width: 450px) {
	#total, #dot {
		display: none !important;}
	.blocTotal a:not(.blocOrder .blocTotal a) {
		font-size: 1em;}
	.blocTotal a:not(.blocOrder .blocTotal a), .blocTotal bdi:not(.sousTotal bdi, .shipping bdi, .reduction bdi) {
		font-weight: 600;}
}


/* --------------------------------------------------------------------------------------------------------------- RESPONSIVE MOBILE */
@media (hover: none) {
	a[href]:not(.name a, #articleNumber, #total, [class^="fiche"] a, .blocLines a):hover::after, .cookiesPreference a:hover::after, .cookiesActive::after {
		height: 0;
		background-color: transparent;}
}