/*=============================================
=            Reset CSS            =
=============================================*/

*, 
::after, ::before {
	box-sizing: border-box;
}

html,body {
	margin: 0;
	padding: 0;
}

ul,li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

table {
	border-collapse: collapse;
}

/*=============================================
=            Variables            =
=============================================*/

:root {
	
	/*----------  Couleurs  ----------*/
	--color-main: 0,0,0;
	--color-main-max: rgba(var(--color-main), 1);
	--color-main-high: rgba(var(--color-main),var(--opacity-text-high));
	--color-main-medium: rgba(var(--color-main),var(--opacity-text-medium));
	--color-main-disabled: rgba(var(--color-main),var(--opacity-text-disabled));

	/*
	--color-shop-primary: rgb(202,75,121);
	--color-shop-primary-highlight-root: 255,255,255;
	--color-shop-primary-highlight-reverse: 0,0,0;
	*/
	--color-shop-primary-highlight: rgba(var(--color-shop-primary-highlight-root),var(--color-shop-primary-highlight-opacity));
	/*
	--color-shop-secondary: rgb(114,121,135);
	--color-shop-secondary-highlight-root: 255,255,255;
	--color-shop-secondary-highlight-root-reverse: 0,0,0;
	*/
	--color-shop-secondary-highlight: rgba(var(--color-shop-secondary-highlight-root),var(--color-shop-secondary-highlight-opacity));

	--color-socials-facebook: #3b5998;
	--color-socials-pinterest: #bd081c;
	--color-socials-instagram: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
	--color-socials-twitter: #00acee;
	--color-socials-youtube: #FF0000;

	--color-alert-success: #5eba45;
	--color-alert-warning: #ff8a00;
	--color-alert-danger: #b00020;
	--color-alert-info: var(--color-main-medium);
	--color-alert-question: Steelblue;

	
	/*----------  Opacités  ----------*/
	--opacity-text-high: .80;
	--opacity-text-medium: .60;
	--opacity-text-disabled: .38;

	/*----------  Polices  ----------*/
	--font-main: 'PT Sans', sans-serif;
	--font-icons: "Font Awesome 5 Free";
	

	/*----------  Tailles  ----------*/
	--size-gap-main: 15px;
	--size-gap-main-double: calc(var(--size-gap-main) * 2);
	--size-container: 1200px;

	--size-mainheader-height: 65px;

	
	/*----------  Transitions  ----------*/
	--transition-cubic-bezier-1 : cubic-bezier(.27,.66,.49,.99);
}

/* LG */
@media (max-width: 1199px) { 
	:root {
		--size-container: 992px;
	}
}	
/* MD */
@media (max-width: 991px) {
	:root {
		--size-container: 768px;
	}
}
/* SM */
@media (max-width: 767px) {
	:root {
		--size-container: 576px;
	}
}
/* XS */
@media (max-width: 575px) {
	:root {
		--size-gap-main: 10px;
		--size-main-header: 6em;
	}
}
/* print */
@media print {
    :root {
       --size-container: 100%!important;
    }
}


/*----------  Responsive  ----------*/

/* XL */
@media (max-width: 1439px) { 

}	
/* LG */
@media (max-width: 1199px) { 

}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {

}
/* XS */
@media (max-width: 575px) {

}



/*=============================================
=            TEMP            =
=============================================*/
warning {
	background: darkred;
	color: white;
	border-radius: 1em;
	padding: 1em;
	display: inline-block;
	margin: 2em 0;
	grid-column: auto / span 12;
}
warning ul {
	margin:10px 50px;
	list-style-type: disc;
}
warning li {
	list-style-type: disc;
}






/*=============================================
=            Général            =
=============================================*/

body {
	background: white;
	font-family: var(--font-main);
	font-size: 17px;
	color: var(--color-main-medium);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.noScroll {
	/* position: fixed; */
	/* overflow-y: scroll; */
	/* width: 100%; */
}

/* MD */
@media (max-width: 991px) {
	body {
		font-size: 15px;
	}
}

a {
	color: var(--color-main-high);
	text-decoration: none;
}
a[href^=tel] {
	text-decoration: none !important;
}

/*----------  Liens  ----------*/
a:hover {
	color: var(--color-main-max);
	text-decoration: underline;
	
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}


/*=============================================
=            Boutons            =
=============================================*/


.btn {
	display: inline-block;
	padding: .8em 3em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: .88em;
	text-decoration: none;
	border-radius: 2px;
	font-family: var(--font-main);
	cursor: pointer;
	text-align: center;
	background: none;
	border: 1px solid transparent;
	color: var(--color-main-high);
}
.btn:hover {
	opacity: .8;
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
	text-decoration: none;
}
.btn:hover {
	transition: all .15s ease-in-out;
}

.btnMini {
	font-size: .75em;
	padding: .7em 2em;
}

.btnMain {
	background: var(--color-main-high);
	color: white;
}
.btnMainOutline {
	background: white;
	color: var(--color-main-high);
	border: 1px solid var(--color-main-high);
}
.btnPrimary {
	background: var(--color-shop-primary);
	color: var(--color-shop-primary-highlight);
}
.btnPrimary:hover {
	color: var(--color-shop-primary-highlight);
}
.btnSecondary {
	background: var(--color-shop-secondary);
	color: var(--color-shop-secondary-highlight);
}
.btnSecondary:hover {
	color: var(--color-shop-secondary-highlight);
}
.btnPrimaryHighlight {
	background: var(--color-shop-primary-highlight);
	color: var(--color-shop-primary);
}
.btnPrimaryHighlightOutline {
	background: transparent;
	color: var(--color-shop-primary-highlight);
	border: 1px solid rgba(var(--color-shop-primary-highlight-root),.7);
}
.btnSecondaryHighlight {
	background: var(--color-shop-secondary-highlight);
	color: var(--color-shop-secondary);
}
.btnSecondaryHighlightOutline {
	background: transparent;
	color: var(--color-shop-secondary-highlight);
	border: 1px solid rgba(var(--color-shop-secondary-highlight-root),.7);
}

.btnPrev {
	padding: .8em 0;
}
.btnPrev::before {
	content: '\f053';
	display: inline-block;
	margin-right: 1em;
	font-family: var(--font-icons);
	font-weight: 900;
}
.btnNext::after {
	content: '\f054';
	display: inline-block;
	margin-left: 1em;
	font-family: var(--font-icons);
	font-weight: 900;
}

/*----------  Icônes boutons  ----------*/
.iconBtn i {
	border-radius: 50%;
	line-height: 2em;
	width: 2em;
	height: 2em;
	text-align: center;
	cursor: pointer;
}
.iconBtn i:hover {
	background: rgba(0,0,0,.12);

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.iconBtn i:active {
	background: rgba(0,0,0,.2);
	-webkit-transform: scale(.96);
	transform: scale(.96);
}

.iconBtn-outline i {
	border : 1px solid rgba(0,0,0,.12);
}
.iconBtn-outline i:hover {
	border-color: rgba(0,0,0,0);
}

.iconBtnPrimary.iconBtn i:hover {
	background: rgba(var(--color-shop-primary-highlight-root),.12);
}
.iconBtnPrimary.iconBtn i:active {
	background: rgba(var(--color-shop-primary-highlight-root),.2);
}
.iconBtnPrimary.iconBtn-outline i:hover {
	border-color: rgba(0,0,0,0);
}


/*----------  Formulaires  ----------*/
input:required+label::after {
	content:"*";
}
#fieldsRequired {
	margin:1em 0 2em 0;
	font-size:13px;
}

.field-text {
	position:relative;
}

.field-text label {
	font-size: 1em;
	position: absolute;
	pointer-events: none;
	color: rgba(0,0,0,.4);
	top: 4px;
	left: 0;
	z-index: 2;

	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
}
.field-text label.active, .field-text select+label,  .field-text textarea+label  {
	font-size: .7em;
	top: -15px;
	left:0;
	color: var(--color-main-700);
}

.field-text input {
	width:100%;
	background:none;
	font-size: 1em;
	margin-top: .1em;
	padding-bottom:0.2em;
	outline: none;

	margin-bottom: 2em;
	border:0;
	border-bottom: 1px solid var(--color-main-disabled);
	border-radius: 0;

}

input[type=checkbox] {
	min-width: 16px;
	min-height: 16px;
}

textarea {
	width:100%;
	height:250px;
	border: 1px solid var(--color-main-disabled);
	padding: .5em;
	margin-top: 0.5em;
	resize: vertical;
	font-family: var(--font-main);
}

.requiredLabel {
	font-size: .76em;
}

#cartPickupShippingValidForm select {
	width: 100%;
	font-size: 1em;
	font-family: var(--font-main);
	margin-bottom: 2em;
}
/* select-css */
.select-css {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;

	background-color: white;
	color: var(--color-main-medium);
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.4);
	/* padding-right: .7em; */
	padding: 0 1.5em 0 .5em;
	border-radius: 0;
	
	/* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); */
	background-image: url('../images/select-css-icon.svg');
	background-size: .7rem;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: calc(100% - 4px);

	cursor: pointer;
}

/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #888;
	background-color: rgba(0,0,0,.1);;
}
/* Focus style */
.select-css:focus {
	/* border-color: #aaa; */
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	/* box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); */
	/* box-shadow: 0 0 0 3px -moz-mac-focusring; */
	box-shadow: none;
	color: #222; 
	outline: none;
}
/* options style */
select.select-css option {
	font-size: .88rem;
	color: var(--color-main-high);
	font-weight: 400;
	background: white;
}
select.select-css option:disabled {
	color: var(--color-main-disabled);
}

/*=============================================
=            Tables            =
=============================================*/

table {
	width:100%;
}
table thead tr {
	background: rgba(0,0,0,.06);
}
table thead th {
	font-size: .88em;
	padding: .5em 0;
}
table tbody tr {
	border-bottom: 1px solid rgba(0,0,0,.08);
}
table tbody td {
	padding: 1em 0;
	vertical-align: top;
}
table thead th:first-of-type,
table tbody td:first-of-type {
	padding-left: 1em;
}
table thead th:last-of-type,
table tbody td:last-of-type {
	padding-right: 1em;
}


/*=============================================
=            Loader            =
=============================================*/

.loader {
	font-size: 10px;
	margin: 50px auto;
	text-indent: -9999em;
	width: 11em;
	height: 11em;
	border-radius: 50%;
	background: var(--color-loader-content);
	background: -moz-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: -webkit-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: -o-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: -ms-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: linear-gradient(to right, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	position: relative;
	-webkit-animation: load3 1.4s infinite linear;
	animation: load3 1.4s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
.loader:before {
	width: 50%;
	height: 50%;
	background: var(--color-loader-content);
	border-radius: 100% 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
}
.loader:after {
	background: var(--color-primary-100);
	width: 75%;
	height: 75%;
	border-radius: 50%;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
@-webkit-keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loaderPrimaryHighlight {
	background: var(--color-shop-primary-highlight);
	background: -moz-linear-gradient(left, var(--color-shop-primary-highlight) 10%, rgba(255,0,128, 0) 42%);
	background: -webkit-linear-gradient(left, var(--color-shop-primary-highlight) 10%, rgba(255,0,128, 0) 42%);
	background: -o-linear-gradient(left, var(--color-shop-primary-highlight) 10%, rgba(255,0,128, 0) 42%);
	background: -ms-linear-gradient(left, var(--color-shop-primary-highlight) 10%, rgba(255,0,128, 0) 42%);
	background: linear-gradient(to right, var(--color-shop-primary-highlight) 10%, rgba(255,0,128, 0) 42%);
}
.loaderPrimaryHighlight:before {
	background: var(--color-shop-primary-highlight);
}
.loaderPrimaryHighlight:after {
	background: var(--color-shop-primary);
}


/*=============================================
=            Template            =
=============================================*/

/*----------  Structure  ----------*/

.container {
	margin: 0 auto;
	max-width: var(--size-container);
	
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--size-gap-main-double);
	padding: 0 var(--size-gap-main);
}


#content {
	flex: 1 0;
}

/*=============================================
=            Eléments communs            =
=============================================*/

/*----------  Breadcrumb (catégories + produits)  ----------*/


:is(#breadcrumb,#headerBreadcrumb) {
	font-size: 0px;
}
:is(#breadcrumb,#headerBreadcrumb) li {
	display: inline-block;
	font-size: .88rem;
}
:is(#breadcrumb,#headerBreadcrumb) li::after {
	content: '\f105';
	font-family: var(--font-icons);
	font-weight: 900;
	display: inline-block;
	margin: 0 .5em;
	opacity: .6;
}
:is(#breadcrumb,#headerBreadcrumb) li:last-of-type::after {
	display: none;
}
:is(#breadcrumb,#headerBreadcrumb) li a {
	color: var(--color-main-medium);
}

/* XS */
@media (max-width: 575px) {
	:is(#breadcrumb,#headerBreadcrumb) {
		/* display: none; */
	}
	:is(#breadcrumb,#headerBreadcrumb) li {
		font-size: .7rem;
	}
}


/*----------  Info stock + délai livraison  ----------*/

ul#productsList li .moreInfos .infos li,
#page-product .mainContent .details .infos li {
	font-size: .7em;
	margin-bottom: 0;
	display: flex;
}

ul#productsList li .infos li::before,
#page-product .mainContent .details .infos li::before {
	content:'';
	width: 1em;
	display: block;
	margin-right: 0.5em;
}
ul#productsList li .infos li.availability::before,
#page-product .mainContent .details .infos li.availability::before {
	content:'\f111';
	font-family: var(--font-icons);
	font-weight: 900;
	padding-top: 1px;
	color: var(--color-alert-success);
}

ul#productsList li .infos li.availability.inStock::before,
#page-product .mainContent .details .infos li.availability.inStock::before {
	color: var(--color-alert-success);
}
ul#productsList li .infos li.availability.onDemand::before,
#page-product .mainContent .details .infos li.availability.onDemand::before {
	color: var(--color-alert-warning);
}
ul#productsList li .infos li.availability.outOfStock::before,
#page-product .mainContent .details .infos li.availability.outOfStock::before {
	color: var(--color-alert-danger);
}


/*----------  Select quantité (page produit + panier)  ----------*/

.quantitySelect {
	/*
	display: inline-flex;
	justify-content: center;
	align-items: center;
	*/
}
.quantitySelect .qtyBtn,
.productCartMinus,
.productCartPlus,
.productCartDelete {
	font-size: 12px;
	background: rgba(0,0,0,.2);
	width: 2em;
	height: 2em;
	line-height: 2em;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-main-medium);
}
.quantitySelect .qtyBtn:hover,
.productCartMinus:hover,
.productCartPlus:hover,
.productCartDelete:hover {
	background: rgba(0,0,0,.3);
	color: var(--color-main-high);
}
.quantitySelect .qtyBtn.disabled,
.productCartMinus.disabled,
.productCartPlus.disabled {
	opacity: .5;
	cursor: unset;
}
.quantitySelect .qtyBtn.disabled:hover,
.productCartMinus.disabled:hover,
.productCartPlus.disabled:hover {
	background: rgba(0,0,0,.2);
	color: var(--color-main-medium);
}
.quantitySelect .qtyNumber,
.productCartQty span {
	/* flex: 1 0; */
	font-size: 1.12em;
	padding: 0 1em;
	min-width: 3em;
	display: inline-block;
	text-align: center;
	vertical-align: -2px;
}
.quantitySelect input[type=number] {
	display: none;
}
/* XS */
@media (max-width: 575px) {
	.quantitySelect .qtyNumber,
	.productCartQty span {
		padding: 0 .5em;
	}
}	


/*----------  Popup : général  ----------*/

.popup {
	display: none;

	z-index: 50;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,.85);

	overflow-y: auto; 
	overflow-x: hidden;
}
.popup.popupFull {
	background: rgba(255,255,255,.95);
}
.popup .popupContainer {
	display: flex;
	width: 100vw;
	height: 100vh;
	align-items: center;
	justify-content: center;
}
.popup .popupContainer {
	opacity: 0;
	transition: all .20s ease-out;
}
.popup .popupContainer.show {
	opacity: 1;
}
.popup .popupContainer .popupContent {
	background: white;
	padding: 2em;
	opacity: 0;
}
.popup .popupContainer.show .popupContent {
	transition: all .15s ease-out .05s;
	opacity: 1;
}
.popupContent .header {
	display: flex;
	align-items: center;
}
.popupContent .header .title {
	flex: 1 0;
	font-size: 1.17em;
	font-weight: 700;
	color: var(--color-main-high);
}
.popupContent .header .popupClose {
	font-size: 1.4em;
	cursor: pointer;
	transition: 		all .2s ease-in-out;
}
.popupContent .header .popupClose:hover {
	color: var(--color-main-high);
	-moz-transform: 	rotate(90deg);
	-webkit-transform: 	rotate(90deg);
	-o-transform: 		rotate(90deg);
	-ms-transform: 		rotate(90deg);
	transform: 			rotate(90deg);

}


.popup .actions {
	margin-top: 1em;
}
.popup .actions ul {
	display: flex;
	justify-content: center;
}
.popup .actions ul li {
	display: block !important;
}
.popup .field-text i {
	position: absolute;
	top: .45em;
	left: 0;
}
.popup .field-text label {
	left: 1.7em;
}
.popup .field-text input {
	padding-left: 1.7em;
}

/* XS */
@media (max-width: 575px) {
	.popup .popupContainer .popupContent {
		max-width: 30em;
		padding: 1em;
		min-width: auto !important;
	}
	.popupContent .header .popupClose {
		margin-left: 0.5em;
	}
}


/*----------  Popup : ajout de produit au panier  ----------*/

#popupAdded .popupContent {
	text-align: center;
	min-width: 30em;
	margin-bottom: 5em;
}
#popupAdded .message {
	font-size: 1.4em;
	color: var(--color-main-high);
	margin-bottom: 2em;
}
#popupAdded .message i {
	display: block;
	font-size: 2.7em;
	color: var(--color-alert-success);
	margin-bottom: .2em;
}
#popupAdded #popupAddedProductName {
	display: none;
}
#popupAdded .actions ul {
	justify-content: space-between;
}



/*----------  Popup : connexion  ----------*/

#popupConnect .popupContent {
	max-width: 25em;
}
#popupConnect .introduction {
	display: flex;
	font-size: .88em;
	margin-bottom: 2em;
	margin-top: 1em;
}
#popupConnect .introduction .illustration {
	flex: 1 0;
	margin-right: 1em;
}
#popupConnect .introduction .illustration img {
	height: 35px;
}
#popupConnect .introduction p {
	margin-bottom: 0.5em;
	margin-top: 0;
}
#popupConnect .introduction .moreInfos {
	font-size: .86em;
}
#popupConnect #popupConnectPassword {
	margin-bottom: .5em;
}
#popupConnect .forgottenPassword {
	text-align: right;
	font-size: .76em;
	margin-bottom: 3em;
}


/*----------  Popup : mot de passe oublié  ----------*/

.popupPassword .popupContent {
	max-width: 30em;
}
.popupPassword .popupContent .introduction {
	font-size: .86em;
	margin-bottom: 2em;
}

#popupNewPasswordOK .popupContent {
	min-width: 25em;
}
#popupNewPasswordOK .popupContent .message {
	text-align: center;
	margin-bottom: 2em;
}
#popupNewPasswordOK .popupContent .message i {
	color: var(--color-alert-success);
	font-size: 2em;
	display: block;
	text-align: center;
	margin: .3em;
}



/*----------  Popup : RGPD  ----------*/

.popupRGPD .popupContent {
	max-width: 30em;
}
.popupRGPD .popupContent .introduction {
	font-size: .88em;
	margin: 1em 0;
}
.popupRGPD .popupContent #RGPDDeleteConfirm {
	font-size: .88em;
}
.popupRGPD .popupContent .actions ul {
	margin-top: 2em;
	justify-content: space-between;
}
#popupRGPDDeleteOK .actions ul {
	justify-content: center;
}


/*----------  Popup : alert  ----------*/
.popup.alert .popupContent { 
	padding: 1em;
	max-width: 30em;
}

.popup.alert .icon {
	text-align: center;
	font-size: 3em;
}
.popup.alert .icon .success {
	color: var(--color-alert-success);
}
.popup.alert .icon .error {
	color: var(--color-alert-danger);
}
.popup.alert .icon .warning {
	color: var(--color-alert-warning);
}
.popup.alert .icon .info {
	color: var(--color-alert-info);
}
.popup.alert .icon .question {
	color: var(--color-alert-question);
}

.popup.alert .popupContent > .content {
	text-align: center;
	margin-bottom: 1.5em;
	margin-top: 0.5em;
}
.popup.alert .popupContent > .content p {
	margin-top: 0;
}


/*----------  Popup : annulation de commande  ----------*/
#popupCancelOrder .popupContent {
	width: 30em;
}

/* XS */
@media (max-width: 575px) {
	#popupCancelOrder .popupContent {
		width: auto;
	}
	#popupCancelOrder .popupContent .actions ul {
		flex-wrap: wrap;

	}
	#popupCancelOrder .popupContent .actions ul li {
		padding-bottom: 0.5em;
	}
}

/*----------  Popup : main menu  ----------*/

#popupMainMenu {
	/* display: block; */
	background: rgba(255,255,255,1);
}
#popupMainMenu .background {
	width: 100vw;
	height: 100vh;
	background: rgb(255,255,255);
	/* dégradé rajouté en inline pour avoir l'image de fond */
	background-size: cover;
	z-index: 1;
	position: absolute;
}
#popupMainMenu .container {
	height: 100vh;
	align-items: center;
	z-index: 2;
	position: relative;
}

#popupMainMenu .popupContainer {
	display: block;
	grid-column: 4 / span 6;
	width: auto;
	height: auto;
}
#popupMainMenu .popupContainer .popupContent {
	padding: 0;
}

#popupMainMenu .header {
	align-items: flex-start;
	margin-bottom: 2em;
}
#popupMainMenu .header .title {
	margin-right: 1em;
}
#popupMainMenu .header .name {
	color: var(--color-main-high);
	font-weight: 700;
	font-size: 1.4em;
	border-bottom: 5px solid var(--color-shop-primary);
}
#popupMainMenu .header .catchPhrase {
	font-size: .88em;
	color: var(--color-main-medium);
	font-weight: 400;
}
#popupMainMenu .content {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	/* column-gap: var(--size-gap-main-double); */
}

#popupMainMenu .content .mainContent {
	grid-column: auto / span 4;
	padding-right: var(--size-gap-main);
}

#popupMainMenu .content .mainContent .productFamilies {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-main-medium);
	margin-bottom: 2em;
}
#popupMainMenu .content .mainContent .productFamilies li {
	margin-bottom: 0.5em;
}

/* partage de la mise en forme avec #page-index #shopInformations */
#popupMainMenu .content .mainContent .address {
	margin-bottom: 1em;
}

#popupMainMenu .content .subContent {
	grid-column: auto / span 2;
	border-left: 1px solid rgba(0,0,0,.08);
	padding-left: calc(var(--size-gap-main) - 1px);
	position: relative;
}
#popupMainMenu .content .subContent .userMenu {
	margin-bottom: 2.7em;
}
#popupMainMenu .content .subContent .userMenu li {
	margin-bottom: 1em;
}
#popupMainMenu .content .subContent .userMenu a {
	color: var(--color-main-medium);
}
#popupMainMenu .content .subContent .userMenu a:hover {
	color: var(--color-main-high);
}

#popupMainMenu .content .subContent .login {
	font-size: .76em;
}
#popupMainMenu .content .subContent .login .userName {
	color: var(--color-main-high);
	display: block;
	font-weight: 700;
}

#popupMainMenu .content .subContent .frameworkLogo {
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: .1;

	-webkit-transition: all .2s ease-in-out;
	-moz-transition: 	all .2s ease-in-out;
	-ms-transition: 	all .2s ease-in-out;
	-o-transition: 		all .2s ease-in-out;
	transition: 		all .2s ease-in-out;
}
#popupMainMenu .content .subContent .frameworkLogo:hover {
	opacity: .5;
}
#popupMainMenu .content .subContent .frameworkLogo img {
	width: 5em;
}


/* LG */
@media (max-width: 1199px) { 
	#popupMainMenu .popupContainer {
		display: block;
		grid-column: 3 / span 8;
	}
	#popupMainMenu .header {
		margin-bottom: 1.5em;
	}
}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {
	#popupMainMenu .popupContainer {
		display: block;
		grid-column: 2 / span 10;
	}
	#popupMainMenu .header {
		margin-bottom: 1em;
	}
	#popupMainMenu .content .mainContent .productFamilies {
		margin-bottom: 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#popupMainMenu .background {
		display: none;
	}
	#popupMainMenu .popupContainer {
		display: block;
		padding-top: 1em;
		grid-column: auto / span 12;;
		padding-left: 10px;
		padding-right: 10px;
	}
	#popupMainMenu .content {
		display: block;
	}
	#popupMainMenu .companyInfos .communication li.socials {
		margin-top: .5em;
		margin-bottom: 1em;
	}
	#popupMainMenu .content .subContent {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid rgba(0,0,0,.08);
		padding-top: 1em;
	}
	#popupMainMenu .content .subContent .userMenu {
		margin-bottom: 1em;
	}
	#popupMainMenu .content .subContent .login .userName {
		display: inline;
	}
	#popupMainMenu .content .subContent {
		padding-bottom: 5em;
	}
}


/*----------  Searchbar  ----------*/

#searchBar {
	visibility: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 50;
	min-height: 100vh;
	background: rgba(0,0,0,.5);
	transition: all .15s ease-in .2s;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
#searchBar.active {
	visibility: visible;;
	height: auto;
	overflow: auto;
	opacity: 1;
	transition: all .15s ease-out;
}
#searchBarContainer {
	background: var(--color-shop-primary);
	color: var(--color-shop-primary-highlight);
	border-bottom: 2px solid white;
	height: var(--size-mainheader-height);
	box-shadow: 0 0 7em 7em rgba(0,0,0,.3);
}
#searchBar .container {
	height: 100%;
	transform: translateY(-5em);
	transition: all .2s ease-in;
}
#searchBar.active .container {
	transform: translateY(0);
	transition: all .3s ease-in;
}
#searchBar .container > form {
	grid-column: 3 / 11;
	display: flex;
	align-items: center;
}
#searchBar button {
	border: none;
	background: none;
	color: var(--color-shop-primary-highlight);
	cursor: pointer;
	margin-right: 1em;
}
#searchBar i {
	font-size: 1.2em;
}
#searchBar input[type=search] {
	flex: 1 0;
	font-size: 1.2em;
	background: none;
	border: none;
	color: var(--color-shop-primary-highlight);
	text-shadow: none;
	outline: none;
}
#searchBar input[type=search]::placeholder {
	color: rgba(var(--color-shop-primary-highlight-root),.4);
}
#searchBar input[type=search]::-webkit-search-cancel-button{
	display: none;
}
#searchBar #closeSearchBtn {
	margin-left: 0.5em;
	transition: 		all .2s ease-in-out;
	cursor: pointer;
}
#searchBar #closeSearchBtn:hover {
	transform: rotate(90deg);
}
#searchBar #closeSearchBtn:hover i {
	background: none;
}

/* LG */
@media (max-width: 1199px) { 
	
}	
/* MD */
@media (max-width: 991px) {
	#searchBar .container > form {
		grid-column: 2 / 12;
	}
	
}
/* SM */
@media (max-width: 767px) {
	#searchBar .container > form {
		grid-column: auto / span 12;
	}
}
/* XS */
@media (max-width: 575px) {

}




/*----------  Progress bar  ----------*/
.progressBar {
	height: 3px;
	border-radius: 2px;
	background: rgba(0,0,0,.11);
	overflow: hidden;
	position: relative;
	margin-top: 0.3em;
}
.progressBar .progress {
	/* content: ''; */
	/* background: var(--color-alert-warning); */
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	width: 50%;
	overflow: hidden;

	animation: progressBar .5s ease-out 1;
	
}
.progressBar .progress .color {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	width: 100%;
	background: rgb(176,0,32);
	background: linear-gradient(180deg, rgba(125,125,125,1) 0%, rgba(255,138,0,1) 10%, rgba(255,138,0,1) 25%, rgba(208,209,22,1) 80%, rgba(52,180,2,1) 99%); 
}

@keyframes progressBar {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}



/*----------  Algolia (autocomplete adresses)  ----------*/
.ap-input,
.ap-hint {
	height: inherit;
	padding-left: inherit;
	border-radius: inherit;
}
.ap-input-icon {
	height: 2em;
	right: .1em;
}
.ap-dropdown-menu {
	top: 1.5em !important;
}


/*----------  Simplebar (scrollbar en JS)  ----------*/
[data-simplebar] {
	position: relative;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
}

.simplebar-wrapper {
	overflow: hidden;
	width: inherit;
	height: inherit;
	max-width: inherit;
	max-height: inherit;
}

.simplebar-mask {
	direction: inherit;
	position: absolute;
	overflow: hidden;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: auto !important;
	height: auto !important;
	z-index: 0;
}

.simplebar-offset {
	direction: inherit !important;
	box-sizing: inherit !important;
	resize: none !important;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0;
	-webkit-overflow-scrolling: touch;
}

.simplebar-content-wrapper {
	direction: inherit;
	box-sizing: border-box !important;
	position: relative;
	display: block;
	height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
	width: auto;
	max-width: 100%; /* Not required for horizontal scroll to trigger */
	max-height: 100%; /* Needed for vertical scroll to trigger */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.simplebar-content:before,
.simplebar-content:after {
	content: ' ';
	display: table;
}

.simplebar-placeholder {
	max-height: 100%;
	max-width: 100%;
	width: 100%;
	pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
	box-sizing: inherit !important;
	height: 100%;
	width: 100%;
	max-width: 1px;
	position: relative;
	float: left;
	max-height: 1px;
	overflow: hidden;
	z-index: -1;
	padding: 0;
	margin: 0;
	pointer-events: none;
	flex-grow: inherit;
	flex-shrink: 0;
	flex-basis: 0;
}

.simplebar-height-auto-observer {
	box-sizing: inherit;
	display: block;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 1000%;
	width: 1000%;
	min-height: 1px;
	min-width: 1px;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.simplebar-track {
	z-index: 1;
	position: absolute;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
}

[data-simplebar].simplebar-dragging .simplebar-content {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
	pointer-events: all;
}

.simplebar-scrollbar {
	position: absolute;
	left: 0;
	right: 0;
	min-height: 10px;

	background: white; /* ietc */
}

.simplebar-scrollbar:before {
	position: absolute;
	content: '';
	background: black;
	border-radius: 7px;
	left: 2px;
	right: 2px;
	opacity: 0;
	transition: opacity 0.2s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
	/* When hovered, remove all transitions from drag handle */
	/* opacity: 0.5; */
	opacity: .4; /* ietc */
	transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
	top: 0;
	width: 11px;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
	top: 2px;
	bottom: 2px;
}

.simplebar-track.simplebar-horizontal {
	left: 0;
	height: 11px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
	height: 100%;
	left: 2px;
	right: 2px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
	right: auto;
	left: 0;
	top: 2px;
	height: 7px;
	min-height: 0;
	min-width: 10px;
	width: auto;
}

/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
	right: auto;
	left: 0;
}

.hs-dummy-scrollbar-size {
	direction: rtl;
	position: fixed;
	opacity: 0;
	visibility: hidden;
	height: 500px;
	width: 500px;
	overflow-y: hidden;
	overflow-x: scroll;
}

.simplebar-hide-scrollbar {
	position: fixed;
	left: 0;
	visibility: hidden;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}



/*=============================================
=            Main Header            =
=============================================*/

#mainHeader {
	height: var(--size-mainheader-height);
	background: var(--color-shop-primary);
	color: var(--color-shop-primary-highlight);
	border-bottom: 2px solid white;
	
	position: sticky;
	top: 0;
	z-index: 10;
}
#mainHeader a {
	color: var(--color-shop-primary-highlight);
}
#mainHeader .container {
	height: 100%;
}
#mainHeader .iconBtn {
	font-size: 1.17em;
}

/*----------  Main content  ----------*/

#mainHeader .mainContent {
	grid-column: auto / span 9;

	display: flex;
	align-items: center;
}
#mainHeader .mainContent a {
	text-decoration: none;
}

#mainHeader .mainContent .toggleMenu {
	margin-right: var(--size-gap-main);
}
#mainHeader .title {
	flex: 1 0;
}
#mainHeader .title a {
	display: flex;
	align-items: center;
}
#mainHeader .title img {
	margin-right: .5em;
	max-width: 37px;
}
#mainHeader .title img[src*="black"] {
	opacity: var(--opacity-text-high);
}
/*
#mainHeader .title .name {
	font-weight: 700;
	font-style: italic;
}
*/
#mainHeader .title .shopName {
	font-weight: 700;
}

/* SM */
@media (max-width: 767px) {
	/* #mainHeader .title .tagline {
		display: none;
	} */
	#mainHeader .title .frameworkName {
		display: none;
	}
	#mainHeader .mainContent {
		grid-column: auto / span 8;
	}
}
/* XS */
@media (max-width: 575px) {
	header {
		position: relative;
	}
	#mainHeader {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		border-bottom: none;
		width: 100%;

		background: rgb(0,0,0);
		background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%); 
	}
	#mainHeader,
	#mainHeader a {
		color: white !important;
	}
	#mainHeader .iconBtnPrimary.iconBtn i:hover {
		background: rgba(0,0,0,.12);
	}
	#mainHeader .container {
		height: auto;
		padding-top: var(--size-gap-main);
	}
	#mainHeader .title {
		display: none;
	}
	#mainHeader .mainContent {
		grid-column: auto / span 4;
	}
}

/*----------  User menu  ----------*/

#mainHeader .userMenu {
	grid-column: auto / span 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#mainHeader .userMenu span.iconBtn {
	margin-right: var(--size-gap-main);
}
#mainHeader .userMenu span.iconBtn:last-of-type {
	margin-right: 0;
}
#mainHeader .userMenu .myAccount i {
	font-weight: 400;
	position: relative;
}
#mainHeader .userMenu .myAccount.logged i::after {
	content:"";
	background: var(--color-alert-success);
	width: 12px;
	height: 12px;
	/* width: 8px;
	height: 8px; */
	display: block;
	position: absolute;
	bottom: 6px;
	right: 6px;
	/* bottom: 8px; */
	/* right: 8px; */
	border-radius: 50%;
	border: 2px solid var(--color-shop-primary);
}

#mainHeader .userMenu .cart {
	position: relative;
}
#mainHeader .userMenu .cart ._cartNbLines {
	margin-left: .5em;
	font-size: .76em;
	min-width: 1em;
	display: inline-block;
}
#mainHeader .userMenu .cart ._cartNbLines.emptyCart {
	opacity: 0;
}

/* SM */
@media (max-width: 767px) {
	#mainHeader .userMenu {
		grid-column: auto / span 4;
	}
}
/* XS */
@media (max-width: 575px) {
	#mainHeader .userMenu {
		grid-column: auto / span 8;
	}
	#mainHeader .userMenu .myAccount.logged i::after {
		border: none;
		width: 10px;
		height: 10px;
	}
}



/*=============================================
=            Header            =
=============================================*/


/*----------  Banner  ----------*/
#banner .background {
	height: 15em;
	background-position: center center;
	background-repeat: none;
	background-size: cover;
	position: relative;
	transition: all 1s ease-out;
	filter: grayscale(50%);
	opacity: 0;
}
#banner.inView .background {
	filter: grayscale(0%);
	opacity: 1;
}
#banner .background::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;

	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%);
	opacity: 0;
	transition: all 2s ease-out .15s;
}
#banner.inView .background::before {
	opacity: 1;
}

#banner .logo {
	grid-column: auto / span 2;
	margin-top: -33%;
	z-index: 2;
	position: relative;
	background: white;
	border-radius: 5px;
}
#banner .logo img {
	border: 5px solid white;
	max-width: 100%;
	border-radius: 5px;
	opacity: 0;
	transition: all .15s ease-in-out;
}
header.inView #banner .logo img {
	opacity: 1;
}
#banner .companyInfos {
	grid-column: auto / span 10;
	padding: 1em 0 1.5em;
	line-height: 1.8em;
}
.companyInfos a {
	color: var(--color-main-medium);
	text-decoration: none;
}
.companyInfos a:hover {
	text-decoration: underline;
}
.companyInfos i {
	margin-right: 0.3em;
	width: 1em;
	text-align: center;
}
#banner .companyInfos .name {
	font-size: 2.6em;
	color: var(--color-main-high);
	font-weight: 700;
	line-height: 1em;
	transition: all .35s ease-out;
	opacity: 0;
	transform: translateY(-5px);
}
header.inView #banner .companyInfos .name {
	opacity: 1;
	transform: translateY(0);
}
#banner .companyInfos .catchPhrase {
	font-size: 1.12em;
	transition: all .4s ease-out;
	opacity: 1;
}

.companyInfos .phone,
.companyInfos .email {
	margin-right: 1em;
}
.companyInfos .socials {
	display: inline-block;
}
.companyInfos .socials a {
	display: inline-block;
	border-radius: 50%;
	line-height: 2em;
	width: 2em;
	height: 2em;
	text-align: center;
	background: var(--color-main-medium);
	margin-right: 0.2em;
	font-size: .8em;
}
.companyInfos .socials a:hover {
	opacity: .8;

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: 	all .15s ease-in-out;
	-ms-transition: 	all .15s ease-in-out;
	-o-transition: 		all .15s ease-in-out;
	transition: 		all .15s ease-in-out;
}
.companyInfos .socials a i {
	width: auto;
	margin-right: 0;
	color: white;
}
.companyInfos .socials .facebook {
	background: var(--color-socials-facebook);
}
.companyInfos .socials .pinterest {
	background: var(--color-socials-pinterest);
}
.companyInfos .socials .instagram {
	background: var(--color-socials-instagram);
}
.companyInfos .socials .twitter {
	background: var(--color-socials-twitter);
}
.companyInfos .socials .youtube {
	background: var(--color-socials-youtube);
}
.companyInfos .socials .phone,
.companyInfos .socials .email {
	display: none;
}

/* LG */
@media (max-width: 1199px) { 
	#banner .background {
		height: 12em;
	}
	#banner .companyInfos .name {
		font-size: 2em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#banner .background {
		height: 9em;
	}
	#banner .logo {
		grid-column: auto / span 3;
	}
	#banner .companyInfos {
		grid-column: auto / span 9;
	}
	#banner .companyInfos .name {
		font-size: 1.8em;
	}
	#banner .companyInfos .phone,
	#banner .companyInfos .email {
		display: none;
	}
	#banner .companyInfos .socials .email,
	#banner .companyInfos .socials .phone {
		display: inline-block;
	}
}
/* SM */
@media (max-width: 767px) {
	#banner .background {
		height: 7em;
	}
	#banner .companyInfos .name {
		font-size: 1.6em;
	}
}
/* XS */
@media (max-width: 575px) {
	#banner .background {
		height: 6em;
	}
	#banner .background::before {
		display: none;
	}

	#banner .container {
		display: block;
		text-align: center;	
		position: relative;
		z-index: 3;
	}
	#banner .logo {
		max-width: 120px;
		display: inline-block;
		margin-top: -2.5em;
	}
	#banner .companyInfos {
		padding-top: 0.5em;
		padding-bottom: 1em;
	}
	#banner .companyInfos .name {
		font-size: 1.4em;
	}
	#banner .companyInfos .catchPhrase {
		display: none;
	}
	#banner .companyInfos .socials {
		/* display: none; */
		font-size: 1.2em;
		margin-top: 0.5em;
	}
}

/*----------  Reinsurance  ----------*/

#reinsurance {
	background: var(--color-shop-primary);
	color: var(--color-shop-primary-highlight);
	height: 50px;
	margin-bottom: 2.5em;
}
#reinsurance .container {
	height: 100%;
	overflow: hidden;
}
#reinsurance .container > div {
	grid-column: auto / span 4;
	align-self: center;

	font-weight: 700;
	font-size: .88em;
	text-align: center;

	transform: translateY(-3em);
	
}
#page-home #reinsurance .container > div {
	transition: all .25s ease-out;
}
header.inView #reinsurance .container > div {
	transform: translateY(0);
}
#page-home header.inView #reinsurance .container > div:nth-of-type(1) {
	transition-delay: 0;
}
#page-home header.inView #reinsurance .container > div:nth-of-type(2) {
	transition-delay: .15s;
}
#page-home header.inView #reinsurance .container > div:nth-of-type(3) {
	transition-delay: .30s;
}
#reinsurance .container > div i {
	color: var(--color-shop-primary);
	background: var(--color-shop-primary-highlight);
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	border-radius: 50%;
	margin-right: 1em;
}

/* MD */
@media (max-width: 991px) {
	#reinsurance { 
		margin-bottom: 1.5em;
	}
}
/* SM */
@media (max-width: 767px) {
	#reinsurance { 
		height: 2.5em;
		position: relative;
		overflow-y: hidden;
	}
	#reinsurance .container {
		display: block;

		-webkit-animation: homeReinsurance 10s linear infinite;
		animation: homeReinsurance 10s linear infinite;	
		
		position: absolute;
		width: 100%;
		left: 50%;
		height: auto;
		top: 0;
		transform: translate(-50%);
	}
	#reinsurance .container > div {
		height: 100%;
		padding: .4em;
		transition-delay: 0;
		transform: translateY(0) !important;
	}
	
}

@-webkit-keyframes homeReinsurance {
	0% {	top: 0; 	opacity: 0; }
	1% { 	opacity: 1; }
	31% {	opacity: 1; }
	32% {	opacity: 0;	top: 0; }
	33% {	top: -2.5em;	opacity: 0; }
	34% {	opacity: 1;	}
	64% {	opacity: 1;	}
	65% {	opacity: 0;	top: -2.5em; }
	66% {	top: -5em;	opacity: 0; }
	67% {	opacity: 1; }
	98% {	opacity: 1; }
	99% {	opacity: 0;	top: -5em; }
	100% {	top: 0;	opacity: 0; }
}

@keyframes homeReinsurance {
	0% {	top: 0; 	opacity: 0; }
	1% { 	opacity: 1; }
	31% {	opacity: 1; }
	32% {	opacity: 0;	top: 0; }
	33% {	top: -2.5em;	opacity: 0; }
	34% {	opacity: 1;	}
	64% {	opacity: 1;	}
	65% {	opacity: 0;	top: -2.5em; }
	66% {	top: -5em;	opacity: 0; }
	67% {	opacity: 1; }
	98% {	opacity: 1; }
	99% {	opacity: 0;	top: -5em; }
	100% {	top: 0;	opacity: 0; }
}



/*=============================================
=            Footer            =
=============================================*/

footer {
	background: rgba(0,0,0,.73);
	color: rgba(255,255,255,.8);
	padding: 1em;
	border-top: 2px solid white;
	font-size: .88em;
}
footer a {
	color: rgba(255,255,255,.8);
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
	color: rgba(255,255,255,1);
}
footer .frameworkInfos {
	grid-column: 1 / span 6;
	justify-self: center;
}
footer .frameworkInfos img {
	width: 360px;
}
footer .subLinks {
	grid-column: 10 / span 3;
}
footer .subLinks li {
	margin-bottom: 0.7em;
}
footer .copyright {
	grid-column: auto / span 12;
	justify-self: center;
	font-size: .75em;
	color: rgba(255,255,255,.6);
	margin-top: 2em;
}

/* LG */
@media (max-width: 1199px) { 
	footer .subLinks {
		grid-column: 9 / span 4;
	}
}	
/* MD */
@media (max-width: 991px) {
	footer .frameworkInfos {
		text-align: center;
	}
	footer .frameworkInfos img {
		max-width: 75%;
	}
}
/* SM */
@media (max-width: 767px) {
	footer .frameworkInfos,
	footer .subLinks {
		grid-column: auto / span 6;
	}
	footer .frameworkInfos img {
		max-width: 100%;
	}
}
/* XS */
@media (max-width: 575px) {
	footer .container {
		display: block;
		text-align: center;
	}
	footer .frameworkInfos img {
		max-width: calc(300px - var(--size-gap-main-double));
	}
	footer .frameworkInfos {
		margin-bottom: 1em;
	}
}



/*=============================================
=            Bannière RGPD            =
=============================================*/

#bannerRGPD {
	display:none;
	position: fixed;
	bottom: 1em;
	left: 1em;
	background: rgba(0,0,0,.6);
	width: 18em;
	padding: 1em 2em 1em 1em;
	color: white;
	z-index: 100;
	border-radius: 3px;
}

#bannerRGPD .content {
	font-size: .7em;
}
#bannerRGPD .close {
	position: absolute;
	right: 1em;
	top: .5em;
	font-size: .88em;
	cursor: pointer;
}
#bannerRGPD .close i { 
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
	background: rgba(0,0,0,.3);
	border-radius: 50%;
}
#bannerRGPD a {
	color: white;
	text-decoration: underline;
	display: inline-block;
}
#bannerRGPD .actions {
	margin-top: 1em;
	text-align: center;
}
#bannerRGPD #acceptRGPD {
	display: inline-block;
	padding: .5em 1em;
	background: rgba(0,0,0,.7);
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
}
#bannerRGPD #acceptRGPD:hover {
	background: rgba(0,0,0,1);
}

/* XS */
@media (max-width: 575px) {
	#bannerRGPD {
		width: calc(100vw - 2em);
		border-radius: none;
	}
}


/*=============================================
=            Accueil            =
=============================================*/

#page-home h2 {
	font-weight: 700;
	color: var(--color-main-high);
	font-size: 1.4em;
}

/*----------  Welcome  ----------*/
#page-home #welcome {
	padding: 0 0 1.5em 0;	
}

#page-home #welcome .introduction {
	grid-column: auto / span 8;

	line-height: 1.5em;
}
#page-home #welcome .introduction h1 {
	font-size: 1.65em;
	color: var(--color-main-high);
	margin-bottom: 0.5em;
	font-weight: 700;
}

#page-home #welcome .ccInstructions {
	grid-column: auto / span 4;

	background: url(../images/click-and-collect-instructions-bg.svg) no-repeat center center;
	background-size: 100% 100%;
	height: 230px;
	text-align: center;

	opacity: 0;
	/* transition: all .5s ease-out; */

}
#page-home #welcome .ccInstructions.inView {
	opacity: 1;
	animation: swing ease-in-out 5s 1 alternate;
	-webkit-transform-origin: center top;
    transform-origin: center top;
}
@keyframes swing {
    0% { transform: rotate(6deg); }
	15% { transform: rotate(-6deg); }
	30% { transform: rotate(4deg); }
	50% { transform: rotate(-4deg); }
	70% { transform: rotate(1deg); }
	90% { transform: rotate(-1deg); }
	0% { transform: rotate(0deg); }
}

#page-home #welcome .ccInstructions .title {
	font-weight: 700;
	color: rgba(0,0,0,.75);
	margin-top: 83px;
	margin-bottom: .6em;
	text-transform: uppercase;
}
#page-home #welcome .ccInstructions ul {
	display: inline-block;
}
#page-home #welcome .ccInstructions ul li {
	font-weight: 700;
	position: relative;
	font-size: .88em;
	text-align: left;
	margin-bottom: .5em;
}
#page-home #welcome .ccInstructions ul li::before {
	display: inline-block;
	background: var(--color-main-medium);
	content:'0';
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	border-radius: 50%;;
	margin-right: 1em;
	color: white;
	text-align: center;
}
#page-home #welcome .ccInstructions li:nth-of-type(1)::before {
	content:'1';
}
#page-home #welcome .ccInstructions li:nth-of-type(2)::before {
	content:'2';
}
#page-home #welcome .ccInstructions li:nth-of-type(3)::before {
	content:'3';
}

/* LG */
@media (max-width: 1199px) { 
	#page-home #welcome {
		padding-bottom: 2em;
	}
	#page-home #welcome .introduction h1 {
		font-size: 1.4em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-home #welcome {
		padding-bottom: 1.5em;
	}
	#page-home #welcome .introduction {
		grid-column: auto / span 7;
	}

	#page-home #welcome .introduction h1 {
		font-size: 1.2em;
	}

	#page-home #welcome .ccInstructions {
		grid-column: auto / span 5;
		height: 200px;
	}
	#page-home #welcome .ccInstructions .title {
		margin-top: 74px;
	}
	
}
/* SM */
@media (max-width: 767px) {
	#page-home #welcome .container {
		display: block;
	}

	#page-home #welcome .ccInstructions.inView {
		display: flex;
		align-content: center;
		/* display: none; */

		background: white;
		/* background: linear-gradient(0deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,0) 100%);  */
		background: rgba(0,0,0,.05);;
		border-radius: 2em;
		/* height: 2.5em; */
		height: auto;
		animation: none;
		/* border: 1px solid rgba(0,0,0,.3); */
		/* border-radius: .5em; */
		margin-top: 1em;
		padding: .5em;
		
	}
	#page-home #welcome .ccInstructions .title {
		margin-top: 0;
		margin-right: 1em;
		margin-bottom: 0;
	}
	#page-home #welcome .ccInstructions ul {
		overflow: hidden;
		height: 1.5em;
	}
	#page-home #welcome .ccInstructions li {
		padding: 1em 0;
		animation: ccInstructions ease-in-out 10s infinite;
	}
}
@keyframes ccInstructions {
	0% { top: 1em;}
	5%,31% { top: -1em;}
	36%,62% { top: -5em; }
	67%,93% { top: -9em; }
	100% { top: -13em; }
}
/* XS */
@media (max-width: 575px) {
	#page-home #welcome .ccInstructions .title {
		margin-right: 0;
		margin-bottom: .5em;
	}
	#page-home #welcome .ccInstructions.inView {
		flex-direction: column;
	}
	#page-home #welcome .ccInstructions li {
		text-align: center;
		display: inline-block;
		padding: 1em 2.2em;
	}
}


/*----------  Rayons  ----------*/
#page-home #families {
	padding-bottom: 1.5em;
}
#page-home #families .container {
	display: block;
}

#page-home #families .title {
	grid-column: auto / span 12;;
}

#page-home #families ul {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--size-gap-main-double);
}

#page-home #families li {
	text-align: center;
	/* margin-bottom: 2em; */
	
}
#page-home #families li img {
	opacity: 0;
	transition:
		opacity .5s var(--transition-cubic-bezier-1),
		transform .5s var(--transition-cubic-bezier-1);
	transform: translateY(-10px);
	transition-delay: calc(var(--list-item-key) * .15s + .2s);
}
#page-home #families.inView li img {
	opacity: 1;
	transform: translateY(0);
}
#page-home #families li img {
	border-radius: 50%;
	max-width: 100%;
	width:100%;
	height: auto;
	
}

#page-home #families li a {
	color: var(--color-main-high);
	font-weight: 700;
	text-decoration: none;
}

#page-home #families li .name {
	display: block;
	margin-top: .6em;
}

/* LG */
@media (max-width: 1199px) { 
	#page-home #families {
		padding-bottom: 1em;
	}
	#page-home #families ul {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--size-gap-main);
	}
	#page-home #families li img {
		max-width: 75%;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-home #families ul {
		grid-template-columns: repeat(4, 1fr);
	}
}
/* SM */
@media (max-width: 767px) {
	#page-home #families {
		/* padding-bottom: 0em; */
	}
	#page-home #families ul {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* XS modifié */
@media (max-width: 460px) {
	#page-home #families ul {
		grid-template-columns: repeat(2, 1fr);
	}
}


/*----------  Produits  ----------*/
#page-home #featuredProducts {
	padding-bottom: 5em;
}
#page-home #featuredProducts .container {
	display: block;
}
#page-home #featuredProductsContainer  {
	display: block;
	overflow-x: hidden; /* mettre en auto si on veut la barre de défilement */
	overflow-x: auto;
	white-space: nowrap;
	font-size: 0px;
}
#page-home #featuredProducts .simplebar-content {
	font-size: 0px;
}
#page-home #featuredProducts .list-item {
	margin-right: var(--size-gap-main-double);
	display: inline-block;
	/* width: calc((var(--size-container) - var(--size-gap-main-double)) / 3 - (4 * var(--size-gap-main-double))); */
	width: calc((var(--size-container) - var(--size-gap-main-double) - var(--size-gap-main-double) * 3) / 4);
	white-space: normal;
	font-size: 1rem;
	margin-bottom: 1em;
	text-align: center;
}
#page-home #featuredProducts .list-item:last-of-type {
	margin-right: 0;
}
#page-home #featuredProducts .list-item img {
	opacity: 0;
	transition: transform 1s var(--transition-cubic-bezier-1), opacity 1s var(--transition-cubic-bezier-1);
	transform: translateY(-10px);
	transition-delay: calc(var(--list-item-key)* .25s + .2s);
}
#page-home #featuredProducts.inView .list-item img {
	opacity: 1;
	transform: translateY(0);
}
#page-home #featuredProducts .list-item:last-of-type {
	margin-right: 0;
}
#page-home #featuredProducts .list-item a {
	text-decoration: none;
	color: var(--color-main-medium);
}
#page-home #featuredProducts .list-item img {
	max-width: 100%;
	height: auto;
}
#page-home #featuredProducts .list-item .informations {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#page-home #featuredProducts .list-item .informations .name {
	/* text-align: left; */
	font-weight: 700;
	flex: 1 0;
	padding-top: 0.5em;
}
#page-home #featuredProducts .list-item .informations .price {
	flex: 0 0 auto;
	/* padding-left: 1em; */
	padding-top: 0.3em;
}

#page-home #featuredProducts .moreInfos {
	text-align: center;
	font-size: 1.18em;
	margin-top: 1em;
}
#page-home #featuredProducts .moreInfos strong {
	color: var(--color-main-high);
}

/* LG */
@media (max-width: 1199px) { 
	#page-home #featuredProducts li img {
		max-width: 80%;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-home #featuredProducts .list-item {
		/* width: calc((var(--size-container) - var(--size-gap-main-double)) / 2 - (5 * var(--size-gap-main-double))); */
		width: calc((var(--size-container) - var(--size-gap-main-double) - var(--size-gap-main-double) * 2) / 3);
	}
	#page-home #featuredProducts .list-item img {
		max-width: 75%;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-home #featuredProducts .simplebar-content {
		white-space: normal;
	}
	#page-home #featuredProducts .list-item {
		width: calc(50% - var(--size-gap-main-double));
		margin-right: var(--size-gap-main-double);
		margin-bottom: var(--size-gap-main-double);
	}
	#page-home #featuredProducts .list-item img {
		max-width: 60%;
	}
}
/* XS modifié */
@media (max-width: 460px) {
	#page-home #featuredProducts .list-item {
		width: calc(100% - var(--size-gap-main-double));
		margin-left: var(--size-gap-main);
		margin-right: var(--size-gap-main);
	}
	#page-home #featuredProducts .list-item .informations {
		justify-content: space-between;
	}
}



/*----------  Produis sans catégorie  ----------*/
#homeNoCategoryProducts .container > * {
	grid-column: auto / span 12;
}
#homeNoCategoryProducts .header {
	display: flex;
	margin: 1em 0 1.5em;
	align-items: flex-end;
}
#homeNoCategoryProducts h2 {
	flex: 1 0;
	margin: 0;
}
#homeNoCategoryProducts .sort {
	margin-bottom: .2em;
}


/*----------  Infos boutique  ----------*/

#shopInformations {
	background: var(--color-shop-secondary);
	padding: 2em 0 .5em;
	color: var(--color-shop-secondary-highlight);
}
#shopInformations .container > div {
	grid-column: auto / span 6;
	margin-bottom: 2em;
}

#shopInformations .container > div.title {
	grid-column: auto / span 12;
	margin-bottom: 0;
}
#shopInformations .title h2 {
	color: var(--color-shop-secondary-highlight);
	margin-top: 0;
}

#slideShowOffice {
	position: relative;
	opacity: 0;
	transition: all 1s var(--transition-cubic-bezier-1) .5s;
}
#shopInformations.inView #slideShowOffice {
	opacity: 1;
}
#shopInformations #slideShowuniqID,
#shopInformations ul.HL_SLIDESHOW  {
	width: calc(var(--size-container) / 2 - var(--size-gap-main-double)) !important;
	height: 24rem !important;
}

.HL_SLIDESHOW {	
	list-style-type: none;
	margin: 0;
	padding: 0;
	position:relative;
}
.HL_SLIDESHOW li {
	position:absolute;
	left: 0;
	top: 0;
	padding: 0;
}
.HL_SLIDESHOW .HL_SLIDESHOW_IMG {
	margin: 0!important;
	padding: 0!important;
	border: 0!important;
	width: 100%;
	height: 100%;
	vertical-align: top;
	/* object-fit: cover; */
	object-fit: contain;
}
.HN_SLIDE_SHOW_CONTROL_LEFT,
.HN_SLIDE_SHOW_CONTROL_RIGHT {
	position:absolute;
	font-size: 2.1em;

	width: 2em;
	height: 2em;
	line-height: 2em;
	top: calc(50% - 1em);

	background-color: white;
	text-align: center;
	color:black;
	cursor: pointer;
	font-family: var(--font-icons);
	font-weight: 900;
	opacity: .4;	

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: 	all .15s ease-in-out;
	-ms-transition: 	all .15s ease-in-out;
	-o-transition: 		all .15s ease-in-out;
	transition: 		all .15s ease-in-out;
}
.HN_SLIDE_SHOW_CONTROL_LEFT:hover,
.HN_SLIDE_SHOW_CONTROL_RIGHT:hover {
	opacity: .55;
}
.HN_SLIDE_SHOW_CONTROL_LEFT {
	left: 0px;
}
.HN_SLIDE_SHOW_CONTROL_LEFT::after {
	content: "\f053";
}
.HN_SLIDE_SHOW_CONTROL_RIGHT {
	right: 0px;
}
.HN_SLIDE_SHOW_CONTROL_RIGHT::after {
	content: "\f054";
}	

#shopInformations .openingTimes,
#shopInformations .address {
	margin-bottom: 2em;
}

#shopInformations .companyInfos > div {
	transition: all 1s var(--transition-cubic-bezier-1);
	transform: translateX(-200%);
}
#shopInformations.inView .companyInfos > div {
	transform: translateX(0);
}
#shopInformations .companyInfos > div:nth-of-type(1) {
	transition-delay: 0s;
}
#shopInformations .companyInfos > div:nth-of-type(2) {
	transition-delay: .25s;
}
#shopInformations .companyInfos > div:nth-of-type(3) {
	transition-delay: .5s;
}

/* partage de la mise en forme avec popupMainMenu */
#shopInformations .address,
#popupMainMenu .companyInfos .address {
	display: flex;
}
#shopInformations .address i,
#popupMainMenu .companyInfos .address i {
	padding-top: 0.1em;
}
#shopInformations .mapLink {
	margin: .75em 0 0;
}
#shopInformations .communication li,
#popupMainMenu .companyInfos .communication li {
	margin-bottom: 0.75em;
}
#shopInformations .communication li a {
	color: var(--color-shop-secondary-highlight);
}
#popupMainMenu .companyInfos  .communication .socials {
	margin-top: 1.5em;
}
#shopInformations .communication .socials {
	margin-top: 1em;
	font-size: 1.3em;
}
#shopInformations .communication .socials a {
	/* font-size: 1.5em; */
	font-size: 1em;
	/* margin-right: 0.5em; */
	margin-bottom: 0.5em;

	background: none !important;
	margin-right: 0;
}
#shopInformations .communication .socials a i {
	color: var(--color-shop-secondary-highlight);
}
#shopInformations h3 {
	margin-top: 0;
	margin-bottom: 1em;
	font-size: 1em;
}
#shopInformations table {
	border: none;
	width: 100%;
	font-size: .9em;
}
#shopInformations tr {
	border-top: 1px solid rgba(255,255,255,.15);
	border-bottom: 1px solid rgba(255,255,255,.15);
}
#shopInformations th,
#shopInformations td {
	padding: .3em;
}
#shopInformations th {
	text-align: left;
	padding-left: 1em;
	width: 40%;
}
#shopInformations td {
	text-align: center;
}
#shopInformations tr:hover {
	background: rgba(0,0,0,.1);
	transition: all .15s ease-in-out;
}

#shopInformations .disclaimer {
	font-size: .7em;
}


/* LG */
@media (max-width: 1199px) { 
	#shopInformations #slideShowuniqID,
	#shopInformations ul.HL_SLIDESHOW  {
		height: 20rem !important;
	}
	#shopInformations th {
		width: 44%;
	}

}	
/* MD */
@media (max-width: 991px) {
	#shopInformations #slideShowuniqID,
	#shopInformations ul.HL_SLIDESHOW  {
		height: 16rem !important;
	}
	#shopInformations table {
		font-size: .95em;
	}
	#shopInformations th {
		
		padding-left: 0em;
	}

}
/* SM */
@media (max-width: 767px) {
	#shopInformations .container {
		display: block;
	}
	#shopInformations .companyInfos {
		text-align: center;
	}
	#shopInformations .companyInfos .address {
		justify-content: center;
	}
	#shopInformations .communication li {
		margin-bottom: 0.5em;
	}
	#shopInformations .container .shopDescription,
	#shopInformations .container .slideshow {
		grid-column: auto / span 12;
	}
	#shopInformations #slideShowuniqID,
	#shopInformations ul.HL_SLIDESHOW  {
		height: 24rem !important;
		width: 100% !important;
	}
	#shopInformations .companyInfos .socials a {
		font-size: 1.2em;
	}
}
/* XS */
@media (max-width: 575px) {
	#shopInformations #slideShowuniqID,
	#shopInformations ul.HL_SLIDESHOW  {
		height: 17rem !important;
	}
}



/*=============================================
=            Famille / Catégories / Rayons  + résultat recherche           =
=============================================*/

#page-productFamily #content,
#page-productSearch #content {
	min-height: 35em;
}
#page-productFamily .container > aside,
#page-productSearch .container > aside {
	grid-column: auto / span 3;	
}
#page-productFamily .container > section,
#page-productSearch .container > section {
	grid-column: auto / span 9;
}
/* SM */
@media (max-width: 767px) {
	#page-productFamily .container > aside,
	#page-productSearch .container > aside {
		display: none;
	}
	#page-productFamily .container > section,
	#page-productSearch .container > section {
		grid-column: auto / span 12;
	}
}
/*----------  Tous les rayons  ----------*/
#page-productFamily .container > aside,
#page-productSearch .container > aside {
	font-size: .88em;
}
#page-productFamily .container > aside li.level-1,
#page-productSearch .container > aside li.level-1 {
	margin-bottom: 1.5em;
}
#page-productFamily .container > aside li.level-1 a,
#page-productSearch .container > aside li.level-1 a {
	display: block;
	margin-bottom: 0.5em;
}
#page-productFamily .container > aside li.level-1 > a,
#page-productSearch .container > aside li.level-1 > a {
	font-weight: 700;
}

/*----------  Introduction  ----------*/


#page-productFamily #content .introduction {
	display: grid;
	grid-template-columns: repeat(9,1fr);
	column-gap: var(--size-gap-main-double);
	margin-bottom: 2em;
	position: relative;
}
#page-productFamily h1 {
	color: var(--color-main-high);
	font-size: 2.5em;
	font-weight: 700;
	margin: .5em 0 .3em;
	line-height: 1em;
}
#page-productFamily #content .introduction .content {
	grid-column: auto / span 6;
}
#page-productFamily #content .introduction.shortDescription .content {
	grid-column: auto / span 7;
}
#page-productFamily #content .introduction .content .description {
	line-height: 1.5em;
}
#page-productFamily #content .introduction .illustration {
	grid-column: auto / span 3;
}
#page-productFamily #content .introduction.shortDescription .illustration {
	grid-column: auto / span 2;
}
#page-productFamily #content .introduction .illustration img {
	border-radius: 50%;
	max-width: 100%;
}
/* LG */
@media (max-width: 1199px) { 
	#page-productFamily h1 {
		font-size: 2em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-productFamily h1 {
		font-size: 1.7em;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-productFamily #content .introduction {
		display: block;
		margin-bottom: 1em;
	}
	#page-productFamily #content .introduction .content {
		position: relative;
		z-index: 2;
	}
	#page-productFamily #content .introduction .illustration {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		opacity: .15;
		max-width: 30%;
		display: none;
	}
	
}
/* XS */
@media (max-width: 575px) {
	#page-productFamily #content .introduction .illustration {
		display: none;
	}
	#page-productFamily h1 {
		font-size: 1.4em;
	}
}


/*----------  Sous-catégories  ----------*/
#page-productFamily .subFamilies ul {
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: var(--size-gap-main-double);
	justify-content: center;
	text-align: center;
	margin-bottom: 2em;
}
#page-productFamily .subFamilies ul img {
	max-width: 100%;
	border-radius: 50%;
	margin-bottom: 1em;
}
#page-productFamily .subFamilies ul .name  {
	font-weight: 700;
	color: var(--color-main-high);
	display: block;
}
#page-productFamily .subFamilies li img {
	opacity: 0;
	transition: all .5s var(--transition-cubic-bezier-1);
	transform: translateY(-10px);
	transition-delay: calc(var(--list-item-key) * .04s + .2s);
}
#page-productFamily .subFamilies.inView li img {
	opacity: 1;
	transform: translateY(0);
}

/* LG */
@media (max-width: 1199px) { 
	#page-productFamily .subFamilies ul {
		grid-template-columns: repeat(4,1fr);
	}
	#page-productFamily .subFamilies ul img {
		max-width: 75%;
	}
}
/* MD */
@media (max-width: 991px) {
	#page-productFamily .subFamilies ul {
		grid-template-columns: repeat(3,1fr);
		gap: var(--size-gap-main);
	}
}
/* XS */
@media (max-width: 575px) {
	#page-productFamily .subFamilies ul {
		grid-template-columns: repeat(2,1fr);
	}
	#page-productFamily .subFamilies ul .name  {
		/* font-size: 1.1em; */
	}
	#page-productFamily .subFamilies ul img {
		min-width: 8em;
		max-width: 50%;
	}
}
/* XS : modifié */
@media (max-width: 460px) {
	#page-productFamily .subFamilies ul {
		grid-template-columns: repeat(1,1fr);
		row-gap: var(--size-gap-main);
	}
	#page-productFamily .subFamilies ul li {
		/* margin-bottom: 1.5em; */
		
	}
	#page-productFamily .subFamilies ul img {
		/* display: none; */
	}
	#page-productFamily .subFamilies ul li a {
		display: flex;
		text-align: left;
		align-content: center;
	}
	#page-productFamily .subFamilies ul li img {
		min-width: unset;
		max-width: 3em;
		max-height: 3em;
		margin-right: 1em;
		margin-bottom: 0;
	}
	#page-productFamily .subFamilies ul li .name {
		display: inline-block;
		font-size: 1.1em;
	}
}



/*----------  Produits  ----------*/
.products .sort {
	text-align: right;
	margin-bottom: 2em;;
}
ul#productsList {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	column-gap: var(--size-gap-main-double);
}
ul#productsList.animateInView li img {
	opacity: 0;
	transition: all .2s ease-out .2s;
}
ul#productsList.animateInView.inView li img {
	opacity: 1;
}

ul#productsList > li {
	grid-column: auto / span 1;
	margin-bottom: var(--size-gap-main-double);
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding-bottom: 2em;
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
ul#productsList li .image {
	text-align: center;
}
ul#productsList li .image img {
	max-width: 100%;
	/* border-radius: 50%; */
	margin-bottom: 1em;
}
ul#productsList li .name {
	text-align: center;
	font-weight: 700;
	margin-bottom: 1em;
	flex: 1;
}
ul#productsList li .price {
	text-align: center;
	margin-bottom: 1em;
}
ul#productsList li .moreInfos {
	display: flex;
	min-height: 2em;
}
ul#productsList li .infos {
	flex: 1 0;
	/* visibility: hidden; */
}
ul#productsList li .addToCart::after {
	content: '\f217';
	display: block;
	margin-left: 1em;
	font-family: var(--font-icons);
	font-weight: 900;
	width: 2em;
	height: 2em;
	line-height: 2em;
	background: var(--color-shop-primary);
	border-radius: 50%;
	color: var(--color-shop-primary-highlight);
	text-align: center;
	cursor: pointer;

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
ul#productsList li .addToCart:hover::after {
	opacity: .85;
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
}

#page-home ul#productsList {
	grid-template-columns: repeat(5,1fr);
}


/* LG */
@media (max-width: 1199px) { 
	ul#productsList {
		grid-template-columns: repeat(3,1fr);
	}
	ul#productsList li .image img {
		max-width: 75%;
	}
	#page-home ul#productsList {
		grid-template-columns: repeat(4,1fr);
	}
}
/* MD */
@media (max-width: 991px) {
	#page-home ul#productsList {
		grid-template-columns: repeat(3,1fr);
	}
}
/* SM */
@media (max-width: 767px) {
	ul#productsList {
		grid-template-columns: repeat(2,1fr) !important;
	}
}
/* XS modifié */
@media (max-width: 500px) {
	ul#productsList {
		grid-template-columns: repeat(1,1fr) !important;
	}
	ul#productsList li .image img {
		max-width: 100%;
	}
	ul#productsList li {
		display: grid;
		grid-template-columns: repeat(4,1fr);
	}
	ul#productsList > li:last-of-type { 
		border-bottom: none;
	}
	ul#productsList li .image {
		grid-column: 1/2;
		grid-row: 1/4;
		margin-right: 1em;
	}
	ul#productsList li .name {
		grid-column: 2/5;
		grid-row: 1/2;
		margin-bottom: 0;
	}
	ul#productsList li .price {
		grid-column: 2/5;
		grid-row: 2/3;
	}
	ul#productsList li .moreInfos {
		grid-column: 2/5;
		grid-row: 3/4;
	}
	
	
}

/* TEMP */

/*
ul#productsList li .infos {
	display: none;
}
ul#productsList li .addToCart {
	position: absolute;
	bottom: 1.5em;
	right: 0;
}
ul#productsList > li {
	padding-bottom: 1em;
}
*/
/* FIN TEMP */



/*=============================================
=            Produit            =
=============================================*/

#page-product #breadcrumb {
	grid-column: auto / span 12;
	margin-bottom: 1.5rem;
}


/*----------  Images  ----------*/

#page-product .images {
	grid-column: auto / span 6;
	margin-bottom: 1em;
	position: relative;
}
#page-product .images .mainImage {
	border: 1px solid rgba(0,0,0,.08);
	margin-bottom: 1em;
	text-align: center;
	cursor: zoom-in;
}
#page-product .images .mainImage img {
	max-width: 100%;
}

#page-product #productImagesContainer {
	display: block;
	overflow-x: hidden;
	overflow-x: auto;
	white-space: nowrap;
	font-size: 0px;
}

#productImagesContainer .list-item {
	display: inline-block;
	white-space: normal;
	font-size: 1rem;
	margin-right: 8px;
	margin-bottom: 1em;
	width: 88px;
}
#productImagesContainer div.list-item:last-of-type {
	margin-right: 0;
}
#productImagesContainer .list-item img {
	border: 1px solid rgba(0,0,0,.08);
	cursor: pointer;
	max-width: calc(100% - 2px);
}

#productImagesContainer .list-item.selected img {
	border-color: var(--color-shop-primary);
}

#page-product .images .allImages {
	display: none;
	position: relative;
	max-width: calc((var(--size-container) / 2) - var(--size-gap-main-double));
}

#page-product .images .allImages img {
	border: 1px solid rgba(0,0,0,.08);
}

/*
.HL_PRODUCTS_THUMBSCONTAINER {
	overflow:hidden;
	width: calc(100% - 3rem);
	margin-left: 1rem;
}
.HL_PRODUCTS_THUMBSCONTAINER img {
	width:100%;
	cursor:pointer;
	vertical-align:top;
}
.HL_PRODUCTS_THUMBSCONTAINER ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	position: relative;
}
.HL_PRODUCTS_THUMBSCONTAINER li {
	display: inline-block;
	border: 1px solid rgba(0,0,0,.08);;
	width: calc(20% - 1rem);
	min-width: 2rem;
	box-sizing: border-box;
	margin-right: 10px;
	margin-left: 10px;
	overflow: hidden;
}
.HL_PRODUCT_THUMBSUP,
.HL_PRODUCT_THUMBSBOTTOM {
	width: 1rem;
	height: 1rem;
	font-size: 1.5rem;
	position: absolute !important;
			height: 95px !important;
			line-height: 95px !important;
	height: 100%;
	cursor: pointer;
	visibility:hidden;
}
.HL_PRODUCT_THUMBSBOTTOM {
	right: 0;
	top: 0;
	visibility: visible;
}
.HL_PRODUCT_THUMBSUP::before,
.HL_PRODUCT_THUMBSBOTTOM::before {
	position: absolute;
	top: calc(50% - (1em / 2));
}
.HL_PRODUCT_IMGZOOM {
	background-size: 1710px 1110px;
	width: 570px;
	width: 100%;
	height: calc(100% * 0.775);
	position: absolute;
	display:none;
	cursor:zoom-in;
	top:0;
	background-color:#FFF;
	z-index: 2;
	border: 1px solid rgba(0,0,0,.08);
}
.HL_PRODUCTS_THUMBSCONTAINER li.selected {
	border: 1px solid var(--color-shop-primary);
 }
*/

#popupZoomImage .popupContent {
	position: relative;
	padding: 0;
	background: none;
}
#popupZoomImage .popupClose {
	position: absolute;
	right: 1em;
	top: 1em;
	z-index: 3;
}
#popupZoomImage .popupClose i {
	background: rgba(255,255,255,.5);
}
#popupZoomImage .popupClose i:hover {
	background: rgba(255,255,255,.8);
}
#popupZoomImage img {
	max-height: 90vh;
	max-width: 90vw;
	cursor: zoom-out;
	
}
#popupZoomImage .imageZoom {
	opacity: 0;
	position: relative;
	transition: all .15s ease-out;
}
#popupZoomImage .imageZoom.show {
	opacity: 1;
}

#popupZoomImage .loaderContainer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	visibility: hidden;
}
#popupZoomImage .loaderContainer.show {
	visibility: visible;
}
#popupZoomImage .loader {
	--color-loader-content: #ddd;
	
}
#popupZoomImage .loader::after {
	background: white;
}

/* MD */
@media (max-width: 991px) {
	/*
	.HL_PRODUCT_IMGZOOM {
		height: calc(100% * 0.785);
	}
	*/

	#productImagesContainer .list-item {
		width: 83px;
	}

}
/* SM */
@media (max-width: 767px) {
	/*
	.HL_PRODUCT_IMGZOOM {
		display: none !important;
	}
	*/
	#page-product .images {
		grid-column: auto / span 12;
	}
	/*
	#page-product .images .allImages {
		max-width: var(--size-container);
	}
	*/
	#page-product .images .mainImage img {
		max-width: 26em;
	}
	#productImagesContainer .list-item {
		width: 84px;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-product .images .mainImage img {
		max-width: min(21em,100%);
	}
	/*
	.HL_PRODUCTS_THUMBSCONTAINER {
		margin-left: 0;	
	}
	.HL_PRODUCTS_THUMBSCONTAINER ul {
		white-space: normal;
	}
	.HL_PRODUCTS_THUMBSCONTAINER ul li {
		margin-left: 0;
		margin-bottom: var(--size-gap-main);
		margin-right: var(--size-gap-main);
		min-width: 3em;
	}
	.allImages i {
		display: none;
	}
	*/
}


/*----------  Main Content  ----------*/


#page-product #content .mainContent {
	grid-column: auto / span 6;
}
#page-product #content .mainContent h1 {
	color: var(--color-main-high);
	font-weight: 700;
	font-size: 1.4em;
	margin-top: 1.5em;
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(0,0,0,.08);
}

#page-product #content .mainContent .details {
	grid-template-columns: repeat(2,1fr);
	column-gap: var(--size-gap-main-double);
	display: grid;
}

#page-product #content .mainContent .details .infos {
	margin-bottom: 2em;
}
#page-product .mainContent .details .infos li {
	font-size: .88em;
	color: var(--color-main-high);
}
#page-product #content .mainContent .details .infos .availability {
	color: var(--color-main-medium);
}


#page-product #content .mainContent .details .price {
	text-align: right;
	color: var(--color-main-high);
	font-size: 2em;
	margin-bottom: 2rem;
}
#page-product #content .mainContent .details .price .tax {
	font-size: .3em;
	color: var(--color-main-medium);
	margin-left: .5em;
}

#page-product .qtyMax {
	display:none;
	font-size: .7em;
	margin-top: 0.5em;
	opacity: .7;
}
#page-product .qtyMax.visible {
	display:block;
}

#page-product #content .mainContent .details .addToCart {
	text-align: right;
}
#page-product #content .mainContent .details .addToCart button {
	font-size: 1.12em;
	width: 100%;
	padding: 1em .5em;
}

/* LG */
@media (max-width: 1199px) { 
	#page-product #content .mainContent h1 {
		font-size: 1.3em;
	}
	#page-product #content .mainContent .details .infos {
		font-size: .88em;
	}
	#page-product #content .mainContent .details .price {
		font-size: 1.8em;
	}
	#page-product #content .mainContent .details .addToCart button {
		font-size: 1em;
		padding: .8em .5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-product #content .mainContent .details .price {
		font-size: 1.6em;
	}
	#page-product #content .mainContent .details .addToCart button {
		font-size: .95em;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-product #content .mainContent {
		grid-column: auto / span 12;
	}
	#page-product #content .mainContent h1 {
		font-size: 1.4em;
		margin-top: .5em;
		margin-bottom: 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-product #content .mainContent h1 {
		font-size: 1.3em;
	}
	#page-product #content .mainContent .details {
		grid-template-columns: repeat(3,1fr);
	}
	#page-product #content .mainContent .details .infos {
		grid-column: auto / span 2;
		margin-bottom: 1em;
	}
	#page-product #content .mainContent .details .price {
		grid-column: auto / span 1;
		margin-bottom: 1em;
	}
	#page-product #content .mainContent .details .quantity {
		grid-column: auto / span 1;
		
	}
	#page-product #content .mainContent .details .addToCart {
		grid-column: auto / span 2;
	}
	#page-product #content .mainContent .details .addToCart button {
		width: auto;
		padding: .8em 2em;
	}
}
/* XS : modifié */
@media (max-width: 460px) {
	#page-product #content .mainContent .details .quantity {
		grid-column: auto / span 3;
		text-align: right;
		padding-bottom: 1em;
	}
	#page-product #content .mainContent .details .addToCart {
		grid-column: auto / span 3;
	}
}


/*----------  Description  ----------*/

#page-product #content .description {
	grid-column: auto / span 12;
	margin-top: 1em;
	margin-bottom: 2em;
	border-top: 1px solid rgba(0,0,0,.08);
	font-size: .88em;
	min-height: 10em;
}
#page-product #content .description h2 {
	font-size: 1.2em;
}
#page-product #content .description ul {
	margin-left: 1em;
}
#page-produc #content .description li {
	list-style-type: disc;
}


/*----------  Instructions click and collect  ----------*/

#page-product #ccInstructions {
	background: var(--color-shop-secondary);
	color: var(--color-shop-secondary-highlight);
}
#page-product #ccInstructions .container .ccInstructions {
	grid-column: auto / span 12;
	padding: 1em 0;

}
#page-product #ccInstructions .container .ccInstructions .title {
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1em;
	position: relative;
}
#page-product #ccInstructions .container .ccInstructions .title::before,
#page-product #ccInstructions .container .ccInstructions .title::after {
	content: '';
	width: 33%;
	height: 1px;
	background: var(--color-shop-secondary-highlight);
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
}
#page-product #ccInstructions .container .ccInstructions .title::after {
	left: unset;
	right: 0;
}
#page-product #ccInstructions .container .ccInstructions ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: var(--size-gap-main-double);
	justify-items: center;
}
#page-product #ccInstructions .container .ccInstructions li {
	counter-increment: number;
	display: inline-flex;
	align-items: center;	
}
#page-product #ccInstructions .container .ccInstructions li::before {
	content: counter(number);
	display: inline-block;
	background: var(--color-shop-secondary-highlight);
	color: var(--color-shop-secondary);
	font-weight: 700;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	border-radius: 50%;
	margin-right: 0.5em;
	text-align: center;
}
/* MD */
@media (max-width: 991px) {
	#page-product #ccInstructions .container .ccInstructions li::before {
		width: 2.1em;
		height: 2em;
		line-height: 2.1em;
	}
}
/* SM */
@media (max-width: 767px) {
	
	#page-product #ccInstructions .container .ccInstructions .title::before,
	#page-product #ccInstructions .container .ccInstructions .title::after {
		width: 20%;
	}
	#page-product #ccInstructions .container .ccInstructions ul {
		grid-template-columns: repeat(3,1fr);
		column-gap: var(--size-gap-main);
		font-size: .9em;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-product #ccInstructions .container .ccInstructions ul {
		grid-template-columns: repeat(2,1fr);
		justify-items: left;
	}
	#page-product #ccInstructions .container .ccInstructions ul li {
		margin-bottom: .5em;
	}
	#page-product #ccInstructions .container .ccInstructions .title::before,
	#page-product #ccInstructions .container .ccInstructions .title::after {
		display: none;
	}
	#page-product #ccInstructions .container .ccInstructions .title {
		border-bottom: 1px solid var(--color-shop-secondary-highlight);
		padding-bottom: 0.5em;
	}
}

/*=============================================
=            Processus de commande            =
=============================================*/

#cartBreadCrumb {
	grid-column: auto / span 12;
	display: flex;
	margin-bottom: 2em;
}
#cartBreadCrumb li {
	flex: 1 0;
	text-align: center;
	border-bottom: 2px solid rgb(0,0,0,var(--opacity-text-disabled));
	padding-bottom: 1em;
	font-size: .88em;
	position: relative;
}
#cartBreadCrumb li::after {
	content: '\f111';
	font-family: var(--font-icons);
	font-weight: 400;
	display: block;
	position: absolute;
	bottom: calc(1.15em / -2);
	line-height: 1em;
	left: calc(50% - 1em / 2);
	background: white;
}
#cartBreadCrumb li.selected,
#cartBreadCrumb li.completed {
	border-bottom-color: rgb(0,0,0,var(--opacity-text-high));
}
#cartBreadCrumb li.selected {
	font-weight: 700;
	color: var(--color-main-high);
}
#cartBreadCrumb li.selected::after {
	content: '\f192';
}
#cartBreadCrumb li.completed::after {
	content: '\f058';
	color: var(--color-main-high);
}

/* XS */
@media (max-width: 575px) {
	#cartBreadCrumb li {
		display: none;
	}
	#cartBreadCrumb li.selected {
		display: block;
	}
}



/*----------  Etape 1 : panier  ----------*/

table._cartList {
	grid-column: auto / span 12;
}
table._cartList th {
	width: calc(100% * 1/12);
}
table._cartList thead th.image,
#page-orderDetail table.orderProducts th.image {
	width: calc(100% * 1/12);
}
table._cartList thead th.product {
	width: calc(100% * 4/12);
}
table._cartList thead th.productCartUnitPrice,
table._cartList thead th.productCartQty,
table._cartList thead th.productCartTotal,
#page-orderDetail table.orderProducts thead th.productCartUnitPrice,
#page-orderDetail table.orderProducts thead th.productCartQty,
#page-orderDetail table.orderProducts thead th.productCartTotal {
	width: calc(100% * 2/12);
}
table._cartList thead th:last-of-type {
	width: calc(100% * 1/12);
}

table._cartList tbody td.image,
#page-orderDetail table.orderProducts tbody td.image{
	padding-left: 0;
	padding-right: var(--size-gap-main);
}
table._cartList tbody td.image img,
#page-orderDetail table.orderProducts tbody td.image img {
	max-width: 100%;
}
table._cartList tbody td.productCartUnitPrice,
table._cartList tbody td.productCartQty,
table._cartList tbody td.productCartTotal,
table._cartList tbody td:last-of-type,
#page-orderDetail table.orderProducts tbody td.productCartUnitPrice,
#page-orderDetail table.orderProducts tbody td.productCartQty,
#page-orderDetail table.orderProducts tbody td.productCartTotal {
	text-align: right;
}

#cartPromoCode {
	margin-bottom: 1em;
}
#cartPromoCode .legend {
	margin-bottom: 0.5em;
}
#cartPromoCode input#codePromo {
	margin-right: 1em;
	padding: .7em 1em;
	width: 14em;
}

#page-orderDetail .orderComment {
	margin-top: 1em;
	grid-column: auto / span 12;
}

/* SM */
@media (max-width: 767px) {
	
	table._cartList thead,
	#page-orderDetail table.orderProducts thead {
		display: none;
	}
	table._cartList tbody tr {
		display: grid;
		grid-template-columns: repeat(5,1fr);
	}
	table._cartList tbody tr:first-of-type,
	#page-orderDetail table.orderProducts tbody tr:first-of-type {
		border-top: 1px solid rgba(0,0,0,.08);
	}
	table._cartList tbody tr td:last-of-type {
		display: none;
	}
	table._cartList tbody tr td.image {
		grid-column: 1/2;
		grid-row: 1/3;
	}
	table._cartList tbody tr td.product {
		grid-column: auto / span 4;
	}
	table._cartList tbody td.productCartQty {
		grid-column: auto / span 2;
		text-align: center;
	}
	table._cartList tbody td.productCartUnitPrice::before,
	table._cartList tbody td.productCartQty::before,
	table._cartList tbody td.productCartTotal::before,
	#page-orderDetail table.orderProducts tbody td.productCartUnitPrice::before,
	#page-orderDetail table.orderProducts tbody td.productCartQty::before,
	#page-orderDetail table.orderProducts tbody td.productCartTotal::before {
		content: attr(data-title);
		display: block;
		font-size: .76em;
		font-weight: 700;
		margin-bottom: 0.5em;
	}
	
	#page-orderDetail .deliveryInfos, 
	#page-orderDetail .shopContact, 
	#page-orderDetail .orderProductsFooter {
		grid-column: auto / span 12 !important;
	}
	#page-orderDetail .orderProductsFooter {
		grid-row: 4/5;
	}

	#page-orderDetail .deliveryInfos ul {
		display: flex;
	}
	#page-orderDetail .deliveryInfos ul > li {
		flex: 1 0;
	}
}
/* XS */
@media (max-width: 575px) {
	table._cartList tbody td.productCartUnitPrice::before,
	table._cartList tbody td.productCartQty::before,
	table._cartList tbody td.productCartTotal::before {
		font-size: .65em;
	}
	#page-orderDetail .deliveryInfos ul {
		display: block;
	}

	#page-orderDetail .actions .btn {
		padding: .6em 1.5em;
	}
}


.cartTableFooter {

	grid-column: auto / span 12;

	display: grid;
	grid-template-columns: repeat(12,1fr);
	column-gap: var(--size-gap-main-double);
}
.cartTableFooter > div {
	display: none;
}
.cartTableFooter .shopContact {
	grid-column: auto / span 7 ;
	padding: .7em 0;
}

.cartTableFooter ._cartFooter {
	grid-column: auto / span 5;
}
.cartTableFooter ._cartFooter table {
	width: 100%;	
}
.cartTableFooter ._cartFooter table tfoot th,
.cartTableFooter ._cartFooter table tfoot td,
.cartFooterCGV ._cartFooter table tfoot th,
.cartFooterCGV ._cartFooter table tfoot td,
#page-orderDetail .orderProductsFooter table tfoot th,
#page-orderDetail .orderProductsFooter table tfoot td {
	width: calc(100% * 2/5);
	text-align: right;
	padding: .7em 0;
	border-bottom: 1px solid rgba(0,0,0,.08);
	vertical-align: top;
	font-weight: 400;
}
#page-orderDetail .orderProductsFooter ._cartFooter table tfoot th,
#page-orderDetail .orderProductsFooter ._cartFooter table tfoot td {
	width: calc(100% / 2);
}
.cartTableFooter ._cartFooter table tfoot td:last-of-type {
	width: calc(100% * 1/5);
}
._cartFooter table tfoot span {
	font-size: .6em;
}
/* td de la dernière ligne */
.cartTableFooter ._cartFooter table tfoot tr:last-of-type th,
.cartTableFooter ._cartFooter table tfoot tr:last-of-type td,
.cartFooterCGV ._cartFooter table tfoot tr:last-of-type th,
.cartFooterCGV ._cartFooter table tfoot tr:last-of-type td,
#page-orderDetail .orderProductsFooter table tfoot tr:last-of-type th,
#page-orderDetail .orderProductsFooter table tfoot tr:last-of-type td {
	font-weight: 700;
	border-bottom: none;
}

.cartFooterCGV ._cartFooter table {
	width: 100%;
}
.cartFooterCGV ._cartFooter table tfoot th,
.cartFooterCGV ._cartFooter table tfoot td {
	width: calc(100% / 2);
}
.cartFooterCGV ._cartFooter table tfoot tr td:last-of-type {
	display: none;
}

/* MD */
@media (max-width: 991px) {
	.cartTableFooter .shopContact {
		grid-column: auto / span 6 ;
	}
	
	.cartTableFooter ._cartFooter {
		grid-column: auto / span 6;
	}
}
/* SM */
@media (max-width: 767px) {
	.cartTableFooter .shopContact {
		grid-column: auto / span 12 ;
		grid-row: 2/3;
	}
	.cartTableFooter ._cartFooter {
		grid-column: auto / span 12 ;
		grid-row: 1/2;
		margin: 2em 0;
	}
	.cartTableFooter ._cartFooter td:last-of-type {
		display: none;
	}
}



/*---------- Livraison  ----------*/
#page-cartShippingPickup .shippingOptions,
#page-cartShippingPickup .onlyDisplayedForPickup,
#page-cartShippingPickup #cartPickupShippingInformations,
#page-cartShippingPickup .onlyDisplayedForShipping {
	grid-column: auto / span 12;
	margin-bottom: 1.5em;
}

.onlyDisplayedForShipping,
.onlyDisplayedForPickup {
	display:none;
}

#page-cartShippingPickup .hasProductOutOfStockMessage {
	margin-bottom: 2em;
}

#page-cartShippingPickup h2,
#page-cartSummary #paymentOptions h2 {
	font-size: 1em;
	display: flex;
	align-items: center;
	font-weight: 400;
	color: var(--color-main-high);
}
#page-cartShippingPickup h2::before,
#page-cartSummary #paymentOptions h2::before {
	content:'';
	background: var(--color-shop-primary);
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	line-height: 1em;
	margin-right: 1em;
}

#page-cartShippingPickup .fields .section:not(:nth-last-of-type()) {
	margin-bottom: 2em;
}



/*----------  Livraison : type de livraison  ----------*/

#page-cartShippingPickup #cartPickupShippingShipperType ul {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	column-gap: var(--size-gap-main-double);
}
#page-cartShippingPickup #cartPickupShippingShipperType input[name='shipperID'] {
	display:none;
}
#page-cartShippingPickup #cartPickupShippingShipperType li label,
#page-cartSummary #paymentOptions li label {
	display: flex;
	border-radius: 2px;
	color: var(--color-main-medium);
	cursor: pointer;
	padding: .5em;
	align-items: center;
	justify-content: flex-start;
	border: 2px solid var(--color-main-disabled);
	box-sizing: border-box;
	height: 100%;
}

#page-cartShippingPickup #cartPickupShippingShipperType li label i,
#page-cartSummary #paymentOptions li label i {
	font-size: 1.35em;
	margin-right: 1em;
	margin-left: 1em;
}
#page-cartShippingPickup #cartPickupShippingShipperType li label strong,
#page-cartSummary #paymentOptions li label strong {
	color: var(--color-main-high);
}
#page-cartShippingPickup #cartPickupShippingShipperType li label span,
#page-cartSummary #paymentOptions li label span {
	font-size: .88em;
	display: block;
}
#page-cartShippingPickup #cartPickupShippingShipperType input[name='shipperID']:checked + label,
#page-cartSummary #paymentOptions input:checked + label {
	border-color: var(--color-main-high);
	border-width: 2px;
}

#addressAutocompleteIcon {
	top: 4px !important;
}

/* LG */
@media (max-width: 1199px) { 
	#page-cartShippingPickup #cartPickupShippingShipperType ul {
		grid-template-columns: repeat(3,1fr);
	}
}
/* SM */
@media (max-width: 767px) {
	#page-cartShippingPickup #cartPickupShippingShipperType ul {
		grid-template-columns: repeat(2,1fr);
	}
}
/* XS : modifié */
@media (max-width: 460px) {
	#page-cartShippingPickup #cartPickupShippingShipperType ul {
		grid-template-columns: repeat(1,1fr);
		row-gap: var(--size-gap-main);
	}
}


/*----------  Livraison : adresse / heure  ----------*/


#page-cartShippingPickup .onlyDisplayedForPickup .content,
#page-cartShippingPickup #cartPickupShippingInformations .content,
#page-cartShippingPickup .onlyDisplayedForShipping .content {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: var(--size-gap-main-double);
}

#page-cartShippingPickup .onlyDisplayedForPickup .datePickup,
#page-cartShippingPickup .onlyDisplayedForPickup .shopInformations {
	display: flex;
}
#page-cartShippingPickup .onlyDisplayedForPickup .datePickup {
	margin-bottom: 2em;
}
#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select {
	flex: 1 0;
	padding: .5em;
	color: var(--color-main-high);
	/* background-color: var(--color-socials-facebook); */

}
#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select:first-of-type {
	margin-right: 0.5em;
}
#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select:last-of-type {
	margin-left: 0.5em;
}
#page-cartShippingPickup .onlyDisplayedForPickup i {
	font-size: 1.17em;
	width: 1em;
	margin-right: .5em;
	text-align: center;
}
#page-cartShippingPickup .onlyDisplayedForPickup .shopInformations .shopContent .mapLink {
	display: none;
	margin-top: 1em;
}

/* MD */
@media (max-width: 991px) {
	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup {
		flex-wrap: wrap;
	}
	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select:first-of-type {
		margin-right: 0;
	}
	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select:last-of-type {
		margin-top: 1em;
		margin-left: 2em;
	}
}

/* XS */
@media (max-width: 575px) {
	#page-cartShippingPickup .onlyDisplayedForPickup .content,
	#page-cartShippingPickup #cartPickupShippingInformations .content,
	#page-cartShippingPickup .onlyDisplayedForShipping .content {
		display: grid;
		grid-template-columns: repeat(1,1fr);
		margin-bottom: 1em;
	}

	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup {
		display: block;
	}
	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup i {
		display: none;
	}
	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select {
		width: 100%;
		margin: 0 0 1em 0 !important;
	}
	#page-cartShippingPickup .onlyDisplayedForPickup .datePickup select:last-of-type {
		margin-bottom: 0 !important;
	}

	#page-cartShippingPickup .content iframe {
		display: none;
	}
	#page-cartShippingPickup .onlyDisplayedForPickup .shopInformations .shopContent .mapLink {
		display: block;
	}
}



#page-cartShippingPickup #cartPickupShippingInformations .content .introduction .btn {
	margin-left: 1em;
}
#page-cartShippingPickup #cartPickupShippingInformations .content .introduction p {
	font-size: .88em;
	margin-bottom: 2em;
}


#page-cartShippingPickup #laboutiquerieExplications .description {
	background: rgba(0,0,0,.03);
	border-radius: 1em;
	padding: 2em;
	text-align: left;
	font-size: .88em;
}
#page-cartShippingPickup #laboutiquerieExplications .illustration {
	margin-bottom: 1em;
	text-align: center;
}
#page-cartShippingPickup #laboutiquerieExplications .illustration img {
	max-height: 55px;
}

#page-cartShippingPickup .requiredLabel {
	grid-column: auto / span 12;
}




/*----------  Récapitulatif  ----------*/


#page-cartSummary table._cartList th:last-of-type,
#page-cartSummary table._cartList td:last-of-type {
	display: none;
}
#page-cartSummary table._cartList thead th.product {
	width: calc(100% * 5/12);
}
#page-cartSummary table._cartList td.productCartQty > div {
	display: none;

}



#page-cartSummary .orderAdditionalInfos,
#page-cartSummary .userComment,
#page-cartSummary .cartFooterCGV {
	grid-column: auto / span 4;
	margin-top: 2em;
}


#page-cartSummary .orderAdditionalInfos .deliveryInfos,
#page-orderDetail .deliveryInfos {
	background: rgba(0,0,0,.1);
	border-radius: 1em;
	padding: 1em;
	margin-bottom: 1em;
}
#page-cartSummary .orderAdditionalInfos .deliveryInfos .title,
#page-orderDetail .deliveryInfos .title {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 1em;
}
#page-cartSummary .orderAdditionalInfos .deliveryInfos ul.infos li,
#page-orderDetail .deliveryInfos ul.infos li {
	display: flex;
	margin-bottom: 1em;
}
#page-cartSummary .orderAdditionalInfos .deliveryInfos ul.infos li i,
#page-orderDetail .deliveryInfos ul.infos li i {
	width: 1em;
	text-align: center;
	font-size: 1.17em;
	margin-right: .8em;
	margin-top: 2px;
}
#page-cartSummary .orderAdditionalInfos .deliveryInfos ul.infos li.date div,
#page-orderDetail .deliveryInfos ul.infos li.date div {
	font-weight: 700;
	color: var(--color-main-high);
}

#page-cartSummary .userComment .title {
	text-transform: uppercase;
	font-weight: 700;
}
#page-cartSummary .userComment textarea {
	height: 10em;
}

#cartValidCGV {
	margin-top: 2em;
	font-size: .88em;
	/* display: flex; */
	/* align-items: flex-start; */
	grid-column: auto / span 12;
	display: table;
}
#cartValidCGV > * {
	display: table-cell;
}
#cartValidCGV input {
	/* flex: 0 1; */
	/* flex: 1 0; */
	margin-right: 1em;
}
#cartValidCGV label { 
	cursor: pointer;
}
#page-cartSummary #cartSummaryValid i {
	margin-right: .5em;
}


#page-cartSummary #paymentOptions {
	grid-column: 1 / span 12;
	margin-top: 2em;
}
#page-cartSummary #paymentOptions ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: var(--size-gap-main-double);
	row-gap: var(--size-gap-main);
}
#page-cartSummary #paymentOptions li {
	min-height: 4em;
}
#page-cartSummary #paymentOptions input {
	display: none
}



/* MD */
@media (max-width: 991px) {

	#page-cartSummary .orderAdditionalInfos,
	#page-cartSummary .userComment,
	#page-cartSummary .cartFooterCGV {
		grid-column: auto / span 6;
		margin-top: 2em;
	}
	#page-cartSummary .cartFooterCGV {
		grid-column: auto / span 12;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-cartSummary #paymentOptions ul {
		display: grid;
		grid-template-columns: 1fr;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-cartSummary .orderAdditionalInfos,
	#page-cartSummary .userComment,
	#page-cartSummary .cartFooterCGV {
		grid-column: auto / span 12;
		margin-top: 2em;
	}
}


#page-cart .actions,
#page-cartShippingPickup .actions,
#page-cartSummary .actions {
	grid-column: auto / span 12;
	margin-top: 2em;
	margin-bottom: 3em;
}
#page-cart .actions ul li{
	display: none;
}
#page-cart .actions ul,
#page-cartShippingPickup .actions ul,
#page-cartSummary .actions ul {
	display: flex;
	justify-content: flex-end;
}
#page-cartShippingPickup .actions ul,
#page-cartSummary .actions ul {
	justify-content: space-between;
}
#page-cart .actions ul li,
#page-cartShippingPickup .actions ul li,
#page-cartSummary .actions {
	margin-right: 1em;
}
#page-cart .actions ul li:last-of-type,
#page-cartShippingPickup ul li:last-of-type,
#page-cartSummary .actions {
	margin-right: 0;
}





/*=============================================
=            Confirmation/Erreur de commande            =
=============================================*/

.page-orderReturn .message,
.page-orderReturn .description {
	grid-column: auto / span 12;
}
.page-orderReturn .message {
	text-align: center;
	font-size: 1.41em;
	color: var(--color-main-high);
	margin-bottom: 1em;
}
.page-orderReturn .message i {
	font-size: 2.7em;
	margin-bottom: 0.2em;
}
#page-cartReturnNOK .page-orderReturn .message i {
	color: var(--color-alert-danger);
}
#page-cartReturnOK .page-orderReturn .message i {
	color: var(--color-alert-success);
}
#page-cartReturnOK .description {
	text-align: center;
}
.page-orderReturn .description ol li {
	list-style-type: decimal;
}
.page-orderReturn .description strong {
	color: var(--color-main-high);
}
.page-orderReturn .orderSummary {
	margin-bottom: 3em;
}
.page-orderReturn .orderSummary .element {
	display: flex;
}
.page-orderReturn .orderSummary .element > div {
	flex: 1 0;
}
.page-orderReturn .orderSummary .element .label {
	margin-right: var(--size-gap-main);
	text-align: right;
}
.page-orderReturn .orderSummary .element .data {
	margin-left: var(--size-gap-main);
	text-align: left;
}

/*=============================================
=            Mon compte            =
=============================================*/
#page-myAccount #content #breadcrumb {
	grid-column: auto / span 12;
}
#page-myAccount #content #breadcrumb > * {
	margin-bottom: 8px;
}
#page-myAccount h2 {
	margin-top: 0;
	font-size: 1.17em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 1em;
}

#page-myAccount .pageIntroduction {
	grid-column: auto / span 12;

	font-size: 1.4em;
	color: var(--color-main-high);
	margin-bottom: 2em;
}
#page-myAccount .pageIntroduction .userName {
	font-weight: 700;
}
#page-myAccount .pageIntroduction .logout {
	font-size: .76rem;
	color: var(--color-main-medium);
}


#page-myAccount .orders {
	grid-column: auto / span 12;
	margin-bottom: 2em;
}
#page-myAccount .orders td {
	vertical-align: middle;
}
#page-myAccount .orders tr:hover {
	background: rgba(0,0,0,.02);
	cursor: pointer;
}
#page-myAccount .orders table td.ID,
#page-myAccount .orders table td.date {
	text-align: center;
}
#page-myAccount .orders table td.totalPrice {
	text-align: right;
}
#page-myAccount .orders table td.status {
	padding-left: 1em;
	padding-right: 1em;
	font-size: .8em;
}
#page-myAccount .orders table th:last-of-type {
	width: calc(100% / 12);
}
#page-myAccount .orders table td:last-of-type {
	text-align: right;
}

#page-myAccount .pickupDateChoiceAlert {
	background: var(--color-alert-warning);
	border-radius: 1em;
	text-align: center;
	margin-top: 0.25em;
	padding: .3em 1em;
	color: white;
	display: inline-block;
	font-size: .76em;

}
#page-myAccount .pickupDateChoiceAlert::before {
	content: "\f073";
	font-family: var(--font-icons);
	font-weight: 400;
	margin-right: .6em;
	margin-left: -.4em;
}


#page-myAccount .userInfos {
	grid-column: auto / span 6;
	margin-bottom: 2em;
}
#page-myAccount .userInfos .actions li {
	display: inline-block;
}
#page-myAccount .userInfos .actions li:first-of-type {
	margin-right: .5em;
}

#page-myAccount .userPassword {
	grid-column: 9 / span 4;
	margin-bottom: 2em;
}

#page-myAccount .shopContact {
	grid-column: auto / span 6;
	margin-bottom: 2em;
	margin-top: 2em;
}
#page-myAccount .shopContact li {
	display: inline-block;
	margin-right: 1em;
}
#page-myAccount .shopContact .title {
	text-align: center;
}
#page-myAccount .shopContact li.name {
	display: block;
	text-align: center;
}

/* LG */
@media (max-width: 1199px) { 

}	
/* MD */
@media (max-width: 991px) {
	#page-myAccount .pageIntroduction {
		margin-bottom: 1em;
	}
	#page-myAccount .pageIntroduction .userName {
		display: block;
	}
	
	#page-myAccount .orders table td::before {
		content: attr(data-title);
		display: block;
		font-size: .76em;
		font-weight: 700;
		margin-bottom: 0.3em;
	}
	#page-myAccount .orders table thead {
		display: none;
	}
	#page-myAccount .orders table tbody tr {
		display: grid;
		grid-template-columns: repeat(4,1fr) 2em;
		align-items: start;
		padding: 0.5em;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		margin-bottom: 0.5em;

	}

	#page-myAccount .orders table td {
		text-align: left !important;
		padding-left: 0;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
	}

	#page-myAccount .orders table tbody tr td.ID {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	#page-myAccount .orders table tbody tr td.date {
		grid-column: 2/3;
		grid-row: 1/2;
	}
	#page-myAccount .orders table tbody tr td.mode {
		grid-column: 4/5;
		grid-row: 1/2;
	}
	#page-myAccount .orders table tbody tr td.totalPrice {
		grid-column: 3/4;
		grid-row: 1/2;
	}
	#page-myAccount .orders table tbody tr td.status {
		grid-column: 1/5;
		grid-row: 2/3;
		padding-top: 0.5em;
		/* padding-bottom: 0; */
		padding-left: 0;
		padding-right: 0;
	}
	#page-myAccount .orders table tbody tr td.status::before {
		/*
		content: '\f054';
		font-family: var(--font-icons);
		font-weight: 700;
		display: inline-block;
		margin-right: .5em;
		font-size: 1em;
		*/
		display: none;
	}
	#page-myAccount .orders table tbody tr td:last-of-type {
		grid-column: 5/6;
		grid-row: 1/2;
		/* padding-bottom: 0; */
	}

	#page-myAccount .shopContact ul {
		text-align: center;
	}

	#page-myAccount .userPassword {
		grid-column: auto / span 6;
	}

	#page-myAccount .actions li .btn {
		padding: .6em 1.5em;
	}

}
/* SM */
@media (max-width: 767px) {
	#page-myAccount .orders table tbody tr td.mode {
		grid-column: 4/6;
	}
	#page-myAccount .orders table tbody tr td:last-of-type {
		display: none;
	}

	#page-myAccount .userInfos,
	#page-myAccount .userPassword,
	#page-myAccount .shopContact {
		grid-column: auto / span 12;
		margin-bottom: 3em;
		margin-top: 0;
	}
	#page-myAccount .shopContact .shopContactContent,
	#page-orderDetail .shopContact .shopContactContent {
		width: 100%;
		border: 0 !important;
		padding: 0 !important;
	}

}
/* XS */
@media (max-width: 575px) {
	#page-myAccount .orders table tbody tr {
		display: grid;
		grid-template-columns: repeat(2,1fr);
	}
	#page-myAccount .orders table tbody tr td {
		padding-right: 1em;
	}
	#page-myAccount .orders table tbody tr td.mode,
	#page-myAccount .orders table tbody tr td.totalPrice {
		display: none;
	}
	#page-myAccount .orders table tbody tr td.mode.needPickupDateChoice {
		display: block;
		grid-column: auto / span 2;
		grid-row: 3/4;
	}
	#page-myAccount .orders table tbody tr td.mode.needPickupDateChoice::before,
	#page-myAccount .orders table tbody tr td.mode.needPickupDateChoice .transportType {
		display: none;
	}
	#page-myAccount .orders table tbody tr td.status {
		grid-column: 1/3;
	}
	#page-myAccount .actions li:nth-of-type(2) .btn {
		padding: .6em 0em;
	}
}


/*=============================================
=            Détail commande            =
=============================================*/

#page-orderDetail .introduction {
	grid-column: auto / span 4;
	margin-bottom: 2em;
}

#page-orderDetail .introduction .title {
	font-size: 1.41em;
	font-weight: 700;
	color: var(--color-main-high);
}
#page-orderDetail .introduction ul li .label,
#page-orderDetail .introduction ul li .value {
	display: inline-block;
	font-size: .88em;
}
#page-orderDetail .introduction ul li .label {
	min-width: 10em;
	font-weight: 700;
}


#page-orderDetail .status {
	grid-column: auto / span 8;
	display: flex;
}
#page-orderDetail .status .statusName {
	flex: 1 0;
	font-size: 1.3em;
	display: inline-block;
}
#page-orderDetail .qrcode {
	text-align: center;
	margin-left: 2em;
}
#page-orderDetail .qrcode .title {
	font-size: .76em;
	font-weight: 700;
}
#page-orderDetail .qrcode img {
	max-height: 6em;
}
#page-orderDetail .qrcode .image {
	position: relative;
	cursor: pointer;
}
#page-orderDetail .qrcode .image::before {
	content: '\f02f';
	font-family: var(--font-icons);
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	background: white;
	width: 2em;
	height: 2em;
	line-height: 2em;
	border-radius: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: none;
	z-index: 2;
}
#page-orderDetail .qrcode .image:hover::before {
	display: block;
}
#page-orderDetail .qrcode .image:hover img {
	opacity: .5;
	position: relative;
	z-index: 1;
}

#page-orderDetail .orderNotification {
	grid-column: auto / span 12;
	margin: 1em 0 2em;
	padding: 1em;
	font-weight: 700;

	display: flex;
	align-content: center;
	justify-content: center;

	background: rgb(0,0,0,.03);
	border: 1px solid rgba(0,0,0,var(--opacity-text-disabled));

}
#page-orderDetail .orderNotification i {
	margin-right: 1em;
}


#page-orderDetail .orderProducts {
	grid-column: auto / span 12;
}

#page-orderDetail .deliveryInfos,
#page-orderDetail .shopContact,
#page-orderDetail .orderProductsFooter {
	grid-column: auto / span 4;
	margin-top: 2em;
}

#page-orderDetail .deliveryInfos .actions {
	margin: .5em 0;
}
#page-orderDetail .deliveryInfos .actions .btn {
	background: none;
}
#page-orderDetail #setPickupDate {
	animation: setPickupDate 1s linear infinite;
}
@keyframes setPickupDate {
	0% 	{	opacity: .8;	}
	50% {	opacity: 1;		}
	100% {	opacity: .8;	}
}

#page-orderDetail #pickupDateInfos #datePickupChoice {
	display:none;
	flex: 1 0;
}

#page-orderDetail #pickupDateInfos.choiceInProgress {
	animation: choiceInProgress .3s linear 1 forwards;
}
@keyframes choiceInProgress {
	0% 	{	transform: scale3d(1,1,1);	}
	33% {	transform: scale3d(1,0,0);	background-color:inherit; color:inherit;}
	64% {	transform: scale3d(1,0,0); background-color:var(--color-shop-primary); color:var(--color-shop-primary-highlight); }
	100% {	transform: scale3d(1,1,1);	background-color:var(--color-shop-primary); color:var(--color-shop-primary-highlight); }
}

#page-orderDetail #pickupDateInfos.choiceInProgress select {
	width: 100%;
	font-size: .8em;
	padding: .3em;
	margin-bottom: 0.2em;
	border-bottom: none;
}
#page-orderDetail #pickupDateInfos.choiceInProgress select:hover {
	background-color: rgba(255,255,255,.9);
}
#page-orderDetail #pickupDateInfos.choiceInProgress select option {
	font-size: 1em;
}
#page-orderDetail #datePickupChoiceCancel {
	border-color: var(--color-shop-primary-highlight);
	color: var(--color-shop-primary-highlight);
	margin-right: 1em;
}
#page-orderDetail #pickupDateInfos.choiceInProgress form .actions {
	display: flex;
	justify-content: flex-start;
}
#page-orderDetail #datePickupChoiceValid {
	background-color: var(--color-shop-primary-highlight);
	color: var(--color-shop-primary);
}
#page-orderDetail #pickupDateInfos.choiceInProgress .loader {
	width: 6em;
	height: 6em;
	overflow: hidden;
	margin: 1em;
	display: none;
}
#page-orderDetail #savePickupDateConfirm .actions ul {
	justify-content: center;
}


#page-orderDetail #pickupDateInfos.choiceInProgress #setPickupDate,
#page-orderDetail #pickupDateInfos.choiceInProgress #currentPickupDate {
	display:none;
}
#page-orderDetail #pickupDateInfos.choiceInProgress #datePickupChoice {
	display:block;
}

#page-myAccount .shopContact .shopContactContent,
#page-orderDetail .shopContact .shopContactContent {
	border: 1px solid rgba(0,0,0,.08);
	padding: 1em;
	border-radius: 1em;
	display: inline-block;
}
#page-myAccount .shopContact .title,
#page-orderDetail .shopContact .title {
	font-weight: 700;
	margin-bottom: 1em;
}
#page-myAccount .shopContact ul li,
#page-orderDetail .shopContact ul li {
	margin-bottom: 0.2em;
}
#page-myAccount .shopContact ul li.name,
#page-orderDetail .shopContact ul li.name {
	font-weight: 700;
}
#page-myAccount .shopContact ul li i,
#page-orderDetail .shopContact ul li i {
	width: 1em;
	text-align: center;
	margin-right: .5em;
}

#page-orderDetail .actions {
	grid-column: auto / span 12;
	margin-top: 2em;
	margin-bottom: 3em;
}
#page-orderDetail .actions ul {
	display: flex;
	justify-content: space-between;
}


/* SM */
@media (max-width: 767px) {
	#page-orderDetail .introduction,
	#page-orderDetail .status {
		grid-column: auto / span 12;
	}
	#page-orderDetail .status {
		margin-bottom: 2em;
	}
	#page-orderDetail .status .statusName {
		flex: 1 0;
		font-size: 1.1em;
		display: inline-block;
		width: 100%;
	}
	#page-orderDetail table.orderProducts tbody tr {
		display: grid;
		grid-template-columns: repeat(3,1fr);
	}
	#page-orderDetail table.orderProducts td.product {
		grid-column: auto / span 3;
		padding-left: 0;
	}
	#page-orderDetail table.orderProducts tbody td.productCartUnitPrice,
	#page-orderDetail table.orderProducts tbody td.productCartQty,
	#page-orderDetail table.orderProducts tbody td.productCartTotal {
		text-align: left;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-orderDetail .status {
		display: block;
	}
	#page-orderDetail .qrcode {
		margin-top: 1em;
		margin-left: 0;
	}
	#page-orderDetail .qrcode .image:hover {
		cursor: auto;
	}
	#page-orderDetail .qrcode .image::before {
		display: none !important;
	}
	#page-orderDetail .qrcode img {
		max-height: min(15em,75vw);
		opacity: 1 !important;
	}
}
/* print */
@media print {
	#mainHeader,
	header,
	footer,
	.actions {
		display: none;
	}
	#page-orderDetail .qrcode img {
		max-height: 12em;
	}
}




/*=============================================
=            CGV + mentions légales            =
=============================================*/
#legalInfosFull {
	font-size: .8em;
}
#legalInfosFull > * {
	grid-column: auto / span 12;
}
#legalInfosFull em {
	background: yellow;
	color: red;
	font-weight: 700;
	font-size: 1.2em;
	font-style: normal;
}







/*=============================================
=            404            =
=============================================*/
#page-404 #content .container > div {
	text-align: center;
	grid-column: 5 / 9;
	padding: 2em 0;
}
#page-404 #content .container > div img {
	opacity: .2;
}
#page-404 #content .title {
	font-size: 2em;
	margin: 1em 0;
	color: var(--color-main-disabled);
}
/* SM */
@media (max-width: 767px) {
	#page-404 #content .container > div {
		grid-column: 4 / 10;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-404 #content .container > div {
		grid-column: auto / span 12;
	}
	#page-404 #content .container > div img {
		max-width: min(15em, 80%);
	}
	#page-404 #content .title {
		font-size: 1.5em;
	}
}









/* Niveaux des titres des produits. Attention ne pas utiliser de var, car les vars ne sont pas déclarés dans l'admin et j'ai besoin de voir les mêmes choses en ack et en front */
.ckTitle1, .ckTitle2, .ckTitle3, .ckTitle4 {
	margin:0.5em 0;
}
.ckTitle1 {
	font-size:28px;
	font-weight:bold;
}
.ckTitle2 {
	font-size:24px;
	font-weight:bold;
}
.ckTitle3 {
	font-size:20px;
	font-weight:bold;	
}
.ckTitle4 {
	font-size:18px;
	font-weight:bold;
}









/*=============================================
=            Debug Reponsive            =
=============================================*/
/* ------
	GRILLE
   ----------- */
#grille {
	position: fixed;
	top: 0;
	z-index: 6000;
	width: 100%;
	display: none;
	cursor: pointer;
}

#grille .element {
	background: rgb(255,0,0,.5);
	height: 500px;
	/* float: left; */
	/* width: 8.33333%; */
	box-sizing: border-box;
}
#grille .element .content {
	background: rgb(255,255,255,.5);
	height: 500px;
	margin: 0 var(--size-margin-default);
}
#grille.showGrid {
	display: block;
}

/* 	-----
	breakpoints
	-----
*/
#debug-responsive  {
	position: fixed;
	bottom: 50px;
	left: var(--size-margin-default);
	color: #333;
	z-index: 2000;
	font-size: 33px;
	cursor: pointer;

	/* display: none; */
}
#debug-responsive .container {
	width: 100px;
	height: 100px;
	background: #a2a2a2;
	text-align: center;
	border-radius: 100px;
	line-height: 2.9em;
	opacity: .3;
	display: block;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

#debug-responsive .container div#sm,
#debug-responsive .container div#md, 
#debug-responsive .container div#lg,
#debug-responsive .container div#xl {
	display: none;
}
	
#debug-responsive .container div#xs {
	display: block;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 576px) {
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#md, 
	#debug-responsive .container div#lg,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#sm {
		display: block;
	}	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 768px) {
	#debug-responsive .container div#xs,
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#lg,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#md {
		display: block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 992px) { 
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#md,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#lg {
		display: block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#md,
	#debug-responsive .container div#lg {
		display: none;
	}
		
	#debug-responsive .container div#xl {
		display: block;
	}
}