@import url('style-csskit.css'); /*! ############## TEMP */
@import url('https://fonts.googleapis.com/css2?family=Gantari:ital,wght@0,500;1,500&display=swap');


#content {
	transition: opacity 0.2s linear;
}

/*!----------  TEMP NICO  ----------*/
body.isNico div#krtoolbar {
	/* display: none !important; */
}
body.isNico::after {

	/* display: none !important; */

	content: 'XL';
	display: block;
	background: #7e1e8a;
	/* right: 0; */
	right: 0;
	top: 0;
	font-size: 2em;
	position: fixed;
	z-index: 99999;
	padding: .25em .5em;
	/* border-bottom-left-radius: 50%; */
	border-bottom-left-radius: 50%;
	color: white;
	opacity: .2
}
/* LG */
@media (max-width: 1199px) { 
	body.isNico::after {
		content: 'LG';
		background: #1772b8;
	}
}	
/* MD */
@media (max-width: 991px) {
	body.isNico::after {
		content: 'MD';
		background: #00c1ec;
	}
}
/* SM */
@media (max-width: 767px) {
	body.isNico::after {
		content: 'SM';
		background: #f4a024;
	}
}
/* XS */
@media (max-width: 575px) {
	body.isNico::after {
		content: 'XS';
		background: #e24c3e;
	}
}



:root {
	--color-gradient-french-flag: linear-gradient(to right, #002654 33.33%, white 33.33% 66.66%, #ce1126 66.66%);
}


/*=============================================
=            Général            =
=============================================*/
.TODOV2 {
	/* display:none!important; */
}



html {
	background: #f5f5f5;
}
body {
	background: white;
}
/* MD */
@media (max-width: 991px) {
	body.responsiveMenuActive > *:not(header) {
		display: none !important;
	}
}

/* LG */
@media (max-width: 1199px) { 
	h1 {
		font-size: 3em;
	}
	h1.small {
		font-size: 2.5em;
	}
	h2 {
		font-size: 1.4em;
	}
}	
/* MD */
@media (max-width: 991px) {
	h1 {
		font-size: 2.5em;
	}
	h1.small {
		font-size: 2em;
	}
	h2 {
		font-size: 1.3em;
	}
	h3 {
		font-size: 1.15em;
	}
}
/* SM */
@media (max-width: 767px) {
	h1 {
		font-size: 2em;
	}
	h1.small {
		font-size: 1.5em;
	}
	h2 {
		font-size: 1.2em;
	}
	h3 {
		font-size: 1.1em;
	}
}
/* XS */
@media (max-width: 575px) {
	h1 {
		font-size: 1.5em;
	}
	h1.small {
		font-size: 1.25em;
	}
	h2 {
		font-size: 1.1em;
	}
	h3 {
		font-size: 1em;
	}
}


.sectionContainer {
	width: var(--size-container);
	margin: 0 auto;
	padding-left: var(--size-gap-main);
		padding-right: var(--size-gap-main);
}


/*=============================================
=            Modules            =
=============================================*/


/*----------  Autocomplete  ----------*/
#addressAutocompleteIcon {
	top: calc(100% - 1.7em);
}


/*----------  Searchbar backoffice  ----------*/
.backofficeSearchbar {
	margin-bottom: 0;
	font-size: .77em;
	min-width: 25em;;
}


/*----------  Pager  ----------*/
.pager {
	display: flex;
	gap: 4em;
	align-items: center;
	justify-content: center;
}
.pager ul {
	display: flex;
	gap: 3em;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .8em;
}
.pager a {
	opacity: .5;
	cursor: pointer;
	transition: .10s;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
}
.pager a:hover {
	opacity: 1;
	background: rgba(0,0,0,.05);
}
.pager li.current a {
	pointer-events: none !important;
	opacity: 1;
}
.pager :is(.pagerPrevBtn,.pagerNextBtn) a {
	font-size: 1.2em;
	color: rgba(0,0,0,.6);;
	cursor: pointer;
	line-height: 1em;
	transition: .10s;
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
}
.pager :is(.pagerPrevBtn,.pagerNextBtn):hover {
	color: var(--color-main-max);
}

/*----------  Mode d'affichage de prix  ----------*/
:is(.visibleIfPriceModeTTC,.visibleIfPriceModeHT) {
	display: none;
}
:is(.visibleIfPriceModeTTC,.visibleIfPriceModeHT).visible {
	display: block;
}
.priceSuffix {
	font-size: .75em;
}


/*----------  Breadcrumb  ----------*/
.breadcrumb {
	padding-bottom: 1.5em;
	font-size: .77em;
}
.breadcrumb ul {
	display: flex;
	gap: 1em;;
}
.breadcrumb li:not(:last-of-type)::after {
	content: "/";
	margin-left: 1em;
}
/* MD */
@media (max-width: 991px) {
	.breadcrumb {
		font-size: .65em;
	}
}

/*----------  Boutons espace client  ----------*/
:is(button,.btn).btnCustomerAccountPage {
	font-size: .8rem;
	padding: 0.35em 2em;
	min-width: 15em;
}


/*----------  Statut de commande  ----------*/
.customerAccountPage .tradeStatus {
	width: 100%;
}
.customerAccountPage .statusTitle {
	text-align: center;
	font-size: 1.27em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 0.5em;
}
.customerAccountPage .progressbar {
	font-size: 10px;
	height: 1em;
	border-radius: .5em;
}
/* LG */
@media (max-width: 1199px) { 
	.customerAccountPage .statusTitle {
		text-align: center;
		font-size: 1.15em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.customerAccountPage .statusTitle {
		font-size: 1em;
		margin-bottom: 0.15em;
	}
	.customerAccountPage .progressbar {
		height: .5em;
	}
}
/* SM */
@media (max-width: 767px) {
	.customerAccountPage .tradeStatus {
		margin: .25em 0;
	}
	.customerAccountPage .statusTitle {
		font-size: .85em;
	}
	.customerAccountPage .progressbar {
		height: .35em;
	}
}
/* XS */
@media (max-width: 575px) {

}

/*----------  Adresse  ----------*/
.address .alias {
	font-size: .7em;
	font-weight: 700;
	border-left: 3px solid rgba(0,0,0,.5);
	padding-left: 1em;
}
.address :is(.lastname,.city) {
	text-transform: uppercase;
}
.address i.hio-phone {
	margin-right: .5em;
}


/*----------  Infos contact  ----------*/
.contactInfos .logo img {
	width: 10.6em;
	height: auto;
}

.contactInfos .address span:first-of-type {
	font-size: .83em;
}
.contactInfos .address i {
	font-size: 1.5em;
	margin-left: 0.15em;
}

.contactInfos .phoneNumber {
	font-size: 1.2em;
	margin: .5em 0;
}

.contactInfos .openingHours {
	font-size: .83em;
}
.contactInfos .openingHours .title {
	font-weight: 700;
	margin-bottom: 0.25em;
}
.contactInfos .openingHours th {
	min-width: 13em;
	text-align: left;
	font-weight: 500;
}

/*----------  Formulaire  ----------*/
.requiredFieldsLegend {
	font-size: .8em;
	margin-bottom: 2em;
}
form .actions {
	margin-top: 2em;
}
form .actions :is(button,.btn) {
	font-size: .95em;
}


/*----------  Services externes  ----------*/
.externalServicesLogin {
	font-size: .88em;
	line-height: 1em;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
}
.externalServicesLogin .separator {
	position: relative;
	display: flex;
	justify-content: center;
	font-size: .88em;
}
.externalServicesLogin .separator span {
	display: block;
	padding: 0em 1em;
	background: white;
	position: relative;
	z-index: 2;
}
.externalServicesLogin .separator::before {
	content: '';
	display: block;
	height: 1px;
	background: rgba(0,0,0,.1);;
	width: 100%;
	top: 50%;
	position: absolute;
	z-index: 1;
}
.externalServicesLogin .title {
	margin: 1em 0;
}
.externalServicesLogin ul {
	display: flex;
	justify-content: center;
	gap: .75em;
	font-size: 2.5em;
	
}
/* .externalServicesLogin ul a span::before {
	background: rgba(0,0,0,.5);
} */

/*----------  Description longue sur une page ----------*/
.pageLongDescription {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
	line-height: 1.75em;
}

.pageLongDescription h2 {
	text-align: center;
	font-size: 2em;
	margin-bottom: 1em;
}
:is(.pageLongDescription,#categoryDecisionHelp) h3 {
	margin-top: 1em;
	margin-bottom: .75em;
}
:is(.pageLongDescription,#categoryDecisionHelp) ul {
	margin-bottom: 2em;
}
:is(.pageLongDescription,#categoryDecisionHelp) li {
	margin-bottom: .5em;
	display: flex;
	gap: 1em;
}
:is(.pageLongDescription,#categoryDecisionHelp) li::before {
	content: "-";
	display: block;
}

/* LG */
@media (max-width: 1199px) { 
	.pageLongDescription {
		padding-top: 2em;
		padding-bottom: 2em;
		line-height: 1.5em;
	}
	.pageLongDescription h2 {
		font-size: 1.75em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.pageLongDescription {
		font-size: .85em;
		
	}
	.pageLongDescription h2 {
		font-size: 1.75em;
	}
}
/* SM */
@media (max-width: 767px) {
	.pageLongDescription {
		padding-left: var(--size-gap-main);
		padding-right: var(--size-gap-main);
		font-size: .75em;
	}
	.pageLongDescription h2 {
		font-size: 1.5em;
	}
}
/* XS */
@media (max-width: 575px) {

}


/*----------  Force du mot de passe  ----------*/
#passwordStrength {
	display: flex;
	gap: 1em;
	align-items: center;
	font-size: .8em;
	margin-bottom: 1em;
	line-height: 1em;
}
#passwordStrength .title {
	font-weight: 700;
}
#passwordStrength .indicator {
	display: flex;
	gap: 2px;
}
#passwordStrength .indicator span {
	width: 2em;
	height: .75em;
	background: rgba(0,0,0,.1);;
	display: block;
	margin-top: 0.2em;
	transition: .10s;
}
#passwordStrength.level-1 .indicator :is(span:nth-of-type(1)) {
	background: var(--color-alert-danger);
}
#passwordStrength:is(.level-2,.level-3) .indicator :is(span:nth-of-type(1),span:nth-of-type(2)) {
	background: var(--color-alert-warning);
}
#passwordStrength.level-4 .indicator :is(span:nth-of-type(1),span:nth-of-type(2),span:nth-of-type(3)) {
	background: yellowgreen;
}
#passwordStrength.level-5 .indicator :is(span:nth-of-type(1),span:nth-of-type(2),span:nth-of-type(3),span:nth-of-type(4)) {
	background: var(--color-alert-success);
}
/* XS */
@media (max-width: 575px) {
	#passwordStrength .indicator span {
		width: 1.25em;
	}
}

/*----------  Lightbox  ----------*/
#lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.8);;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--size-gap-main-double);
}
#lightbox.visible {
	display: flex;
	animation: .3s ease-out lightboxOpen;
}
@keyframes lightboxOpen {
	0% { background: rgba(0,0,0,0);}
	100% {background: rgba(0,0,0,.8);}
}
#lightboxContainer {
	background: white;
	max-width: 100%;
	max-height: 100%;
	position: relative;
	padding: 1em;
	border-radius: .5em;;
}
#lightboxContainer .content {
	max-width: 100%;
	max-height: 100%;
}
#lightboxContainer .content {
	animation: .5s ease-out lightboxContentOpen;
}
@keyframes lightboxContentOpen {
	0%,50% { opacity: 0;}
	100% {opacity: 1;}
}
#lightboxContainer .close {
	position: absolute;
	top: 1em;
	right: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.9);
	opacity: .4;
	font-size: 1.5em;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	cursor: pointer;
	z-index: 99;
	
}
#lightboxContainer .close i {
	transition: .15s;
}
#lightboxContainer .close:hover {
	opacity: .7;
}
#lightboxContainer .close:hover i {
	transform: rotate(90deg);
}
#lightboxContainer .close i {
	font-size: .75em;
}

#lightboxContainer :is(.prev,.next) {
	position: fixed;
	top: 50%;
	left: 2%;
	transform: translateY(-50%);
	color: rgba(255,255,255,.5);
	text-shadow: 0 0 5px rgba(0,0,0,.15);
	font-size: 2em;
	cursor: pointer;
	padding: .5em;
}
#lightboxContainer :is(.prev,.next):hover {
	color: white;
}
#lightboxContainer .next {
	left: unset;
	right: 2%;
}

#lightboxContainer .content > img {
	max-width: calc(100vw - 6em);
	max-height: calc(100vh - 6em);
}
#lightboxContainer .content .legend {
	margin-top: .5em;
	font-size: .85em;

}

#lightboxContainer iframe {
	max-width: 80vw;
}

/*----------  Modales  ----------*/
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,.98);
	z-index: 200;
	display: none;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}
.modal.visible {
	display: flex;
}
body:has(.modal.visible) {
	overflow: hidden;
}
.modal .header {
	display: flex;
	margin-bottom: 1.9em;
	position: relative;
}
.modal .header .title {
	flex: 1;
	font-size: 1.38em;
	text-align: center;
}
:is(#page-product .asideCloseBtn,.modalCloseBtn) {
	position: absolute;
	top: 1em;
	right: 1em;
	cursor: pointer;
}
.modalCloseBtn {
	top: 0 !important;
}
:is(#page-product .asideCloseBtn,.modalCloseBtn) i {
	font-size: 2em;
	color: var(--color-main-medium);
	transition: .15s ease-in-out;
}
:is(#page-product .asideCloseBtn,.modalCloseBtn) i:hover {
	transform: rotate(90deg);
	color: var(--color-main-max);
}
:is(#page-product .asideCloseBtn,.modalCloseBtn) i:active {
	transform: rotate(90deg) scale(.5);
}

/* suppression panier */
.modal .container {
	max-width: 40em;
	max-height: 95vh;
}
.modal .actions {
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}

/* SM */
@media (max-width: 767px) {
	.modal .container {
		padding: 0 1em;
	}
	.modal .header .title {
		font-size: 1.1em;
	}
	.modalCloseBtn {
		right: 0 !important;
	}
}
/* XS */
@media (max-width: 575px) {

}

/*----------  Menu de catégories  ----------*/
.categoriesMenu .list-item a {
	display: flex;
	flex-direction: column;
	gap: .5em;
	align-items: center;
	text-decoration: none;
	text-align: center;
}
.categoriesMenu .list-item 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);
}
.categoriesMenu.inView .list-item img {
	opacity: 1; 
	transform: translateY(0);
	max-width: 100%;
}
.categoriesMenu .elementName {
	text-align: center;
	font-size: 1.38em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 1em;
	white-space: wrap;
}
/* LG */
@media (max-width: 1199px) { 
	.categoriesMenu .elementName {
		font-size: 1.1em;
	}
}	
/* SM */
@media (max-width: 767px) {
	.categoriesMenu .elementName {
		font-size: 1em;
	}
}
/* XS */
@media (max-width: 575px) {

}


/*----------  Page de catalogue  ----------*/

.catalogPage {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: var(--size-gap-main-double);
	padding-top: 2.22em;
	padding-bottom: 2.22em;
}
.catalogPageHeader > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.catalogPageIntroduction {
	grid-column: auto / span 2;
}
/* LG */
@media (max-width: 1199px) { 
	.catalogPage {
		padding-top: 1.5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.catalogPage {
		display: block;
	}
}
/* SM */
@media (max-width: 767px) {
	.catalogPageIntroduction {
		font-size: .85em;
	}
	.catalogPageIntroduction > p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.catalogPageIntroduction > p:hover {
		overflow: visible;
		display: block;
	}
}

/*----------  Page de catalogue : Aside  ----------*/
.catalogPage .asideSection {
	margin-bottom: 2em;
}
.catalogPage .asideSection > .header {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: 1.22em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid rgba(0,0,0,.1);
	margin-bottom: 0.5em;
}
.catalogPage .asideSection .header .fakeLink {
	font-size: .6em;
}
.catalogPage .asideSection .name {
	flex: 1;
	font-weight: 700;
}
.catalogPage .asideSection > ul {
	font-size: .88em;
}
.catalogPage .asideSection > ul a {
	display: block;
	padding: .35em 0;
	text-decoration: none;
}
.catalogPage .asideSection > ul li.selected a {
	font-weight: 700;
	pointer-events: none;;
}
.catalogPage .asideSection > ul a:hover {
	text-decoration: underline;
}
.catalogPage .asideSection .actions {
	margin-top: 0;
}

#filtersAsideCheckbox {
	display: none;
}

/* MD */
@media (max-width: 991px) {
	.catalogPage .asideSection {
		overflow: hidden;
	}
	.catalogPage .categoriesAsideSection {
		margin-bottom: .5em;
	}
	.catalogPage .categoriesAsideSection > .header {
		display: none;
	}
	.catalogPage .categoriesAsideSection > ul {
		display: flex;
		gap: .5em;

		flex-flow: row nowrap;
		overflow-x: auto;
		padding-bottom: 1em;
		font-size: .75em;
	}
	.catalogPage .categoriesAsideSection > ul li {
		white-space: pre;
	}
	.catalogPage .categoriesAsideSection > ul li a {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--color-primary-40);
		color: var(--color-primary-40);
		border-radius: 1em;
		padding: .25em 1em;
	}
	.catalogPage .categoriesAsideSection > ul li a:hover {
		text-decoration: none;
	}
	.catalogPage .categoriesAsideSection > ul li.selected a {
		background: var(--color-primary-40);;
		color: white;
	}
	body:has(#filtersAsideCheckbox:checked) {
		overflow: hidden;;
	}
	.catalogPage .filtersAsideSection {
		margin-bottom: 0;
	}
	.catalogPage .filtersAsideSection > label.header {
		cursor: pointer;
		border-bottom: unset;
		padding-bottom: unset;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: .75em;
		border: 1px solid var(--color-primary-40);
		color: var(--color-primary-40);
		border-radius: 1em;
		padding: .25em 1em;
	}
	.catalogPage .filtersAsideSection:has(.asideSubSection .field input:checked):not(:has(#filtersAsideCheckbox:checked)) > label.header {
		background: var(--color-primary-40);;
		color: white;
	}
	.filtersAsideSection:has(#filtersAsideCheckbox:checked) {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		background: white;
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
		z-index: 999;
	}
	.catalogPage .filtersAsideSection:has(#filtersAsideCheckbox:checked) > label.header {
		display: flex;
		color: inherit;
		font-size: 1.2em;
		border: 0;
		padding: 1em 1em .5em 1em;
		border-bottom: 1px solid rgba(0,0,0,.1);
		border-radius: 0;
	}
	.filtersAsideSection:has(#filtersAsideCheckbox:checked) > label .hio-adjustments-horizontal::before {
		content: "\e911";
	}
	.filtersAsideSection > label .actions {
		display: none;
	}
	.filtersAsideSection:has(#filtersAsideCheckbox:checked) > label .actions {
		display: flex;
	}
	.filtersAsideSection .asideSubSection {
		display: none;
	}
	.filtersAsideSection:has(#filtersAsideCheckbox:checked) .asideSubSection {
		display: block;
	}

	.catalogPageResultsStats {
		font-size: .75em;
	}

}

.catalogPage .asideSubSection {
	background: rgba(0,0,0,.02);;
	margin-bottom: 1em;
	border-radius: 10px;
	padding: 1em;
}
.catalogPage .asideSubSection > input {
	display: none;
}
.catalogPage .asideSubSection > input:checked + label i::before {
	content: '\e9d2';
}
.catalogPage .asideSubSection > input:checked ~ .content {
	display: block;
}
.catalogPage .asideSubSection .header {
	font-size: .88em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	gap: 1em;
}
.catalogPage .asideSubSection .header .developIcon {
	width: 1em;
	height: 1em;
	display: block;
	position: relative;
}
.catalogPage .asideSubSection .header .developIcon::before,
.catalogPage .asideSubSection .header .developIcon::after {  
	content: '';
	display: block;
	width: 75%;
	height: 2px;
	background: #555;
	position: absolute;
	top: 50%;
	left: 50%;
	left: 0;
	transition: .15s;
}
.catalogPage .asideSubSection > input:checked + label .developIcon:before {
	transform: rotate(90deg);
}
.catalogPage .asideSubSection > input:checked + label .developIcon:after {
	transform: rotate(180deg);
}
.catalogPage .asideSubSection .content {
	display: none;
	font-size: .8em;
	margin-top: 1.5em;
}
.catalogPage .asideSubSection .content .field label {
	background: transparent;
	flex: 0;
	margin-right: 0.5em;
}
.catalogPage .asideSubSection .content .field a {
	order: 2;
}

.catalogPage .productsListAsideSubSection label {
	flex: 1 !important;
}


.catalogPageResultsStats {
	display: flex;
	justify-content: flex-end;
	font-size: .88em;
	margin-bottom: 1em;
}

.catalogPageResultsList {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: var(--size-gap-main-double);
}
.catalogPageResultsList .name {
	font-weight: 700;
	color: var(--color-main-high);
}
/* XS */
@media (max-width: 575px) {
	.catalogPageResultsList {
		grid-template-columns: repeat(2,1fr);
	}
}

/*----------  Liste des produits / templates ----------*/
:is(.miniProduct,.miniTemplate) a {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
	opacity: 1 !important;
}
:is(.miniProduct,.miniTemplate) a:hover .name {
	text-decoration: underline;
}
:is(.miniProduct,.miniTemplate) .imageContainer {
	position: relative;
	margin-bottom: .5em;
}
:is(.miniProduct,.miniTemplate) .imageContainer img {
	width: 100%;
	height: auto;
}
:is(.miniProduct,.miniTemplate) .customizationTypes {
	display: flex;
	align-items: center;
	gap: .5em;
	position: absolute;
	bottom: .5em;
	right: .5em;
}
:is(.miniProduct,.miniTemplate) .customizationTypes span {
	content: 'toto';
	display: block;
}
:is(.miniProduct,.miniTemplate) .customizationTypes [class^="icon-"] {
	position: relative;
}
:is(.miniProduct,.miniTemplate) .customizationTypes [class^="icon-"]::after {
	content: attr(data-title);
	display: none;
	background: #333;
	color: white;
	padding: .25em .5em;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-2em);
	font-size: .7em;
	border-radius: 5px;
}

:is(.miniProduct,.miniTemplate) .customizationTypes [class^="icon-"]:hover::after {
	display: block;
}
:is(.miniProduct,.miniTemplate) .infos {
	flex: 1;
}
/* MD */
@media (max-width: 991px) {
	.miniProduct .shortDescription {
		font-size: .88em;
	}
	:is(.miniProduct, .miniTemplate) .infos {
		font-size: .85em;
	}
}

/*----------  Icônes  ----------*/
[class^="icon-"] {
	font-size: 1em;
	background: transparent
}
[class^="icon-"]::before {
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
	background: var(--color-main-high);
}
.icon-serigraphy::before {
	-webkit-mask-image: url('images/serigraphy-icon.svg');;
	mask-image: url('images/serigraphy-icon.svg');
}
.icon-engraving::before {
	-webkit-mask-image: url('images/engraving-icon.svg');;
	mask-image: url('images/engraving-icon.svg');
}
.icon-france::before {
	-webkit-mask-image: url('images/france.svg');;
	mask-image: url('images/france.svg');
}
.icon-apple::before {
	-webkit-mask-image: url('images/externalServices/logo-apple.svg');;
	mask-image: url('images/externalServices/logo-apple.svg');
}
.icon-facebook::before {
	-webkit-mask-image: url('images/externalServices/logo-facebook.svg');;
	mask-image: url('images/externalServices/logo-facebook.svg');
}
.icon-facebook-color::before {
	-webkit-mask-image: unset;
	mask-image: unset;
	background: url('images/externalServices/logo-facebook-color.svg') no-repeat center center;
	background-size: 100% 100%;
}
.icon-google::before {
	-webkit-mask-image: url('images/externalServices/logo-google.svg');;
	mask-image: url('images/externalServices/logo-google.svg');
}
.icon-google-color::before {
	-webkit-mask-image: unset;
	mask-image: unset;
	background: url('images/externalServices/logo-google-color.svg') no-repeat center center;
	background-size: 100% 100%;
}
.icon-microsoft::before {
	-webkit-mask-image: url('images/externalServices/logo-microsoft.svg');;
	mask-image: url('images/externalServices/logo-microsoft.svg');
}


/*----------  Header avec image  ----------*/
.imageHeader {
	/* background: url('images/pageHeaderSample.jpg') center center no-repeat; */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 20em;
	display: flex;
	align-items: flex-end;
	position: relative;
}
.imageHeader::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.imageHeader .sectionContainer {
	position: relative;
	z-index: 3;
}
.imageHeader h1 {
	color: white;
	margin-bottom: .15em;
	line-height: 1.2em;
}
/* LG */
@media (max-width: 1199px) { 
	.imageHeader {
		min-height: 15em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.imageHeader {
		min-height: 10em;
	}
}
/* SM */
@media (max-width: 767px) {
	.imageHeader {
		min-height: 7em;
	}
}
/* XS */
@media (max-width: 575px) {
	.imageHeader {
		min-height: 5em;
	}
	.imageHeader::before {
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
	}
}

/*----------  Page avec header texte  ----------*/
.textHeaderPage {
	padding: 7em 0 3em;
}
.textHeaderPage :is(h1,.textHeader) {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.textHeaderPage > * {
	padding-top: 2em;
	padding-bottom: 2em;
}
.textHeaderPage h2 {
	text-align: center;
	font-size: 1.75em;
}
/* LG */
@media (max-width: 1199px) { 
	.textHeaderPage {
		padding: 5em 0 3em;
	}
	.textHeaderPage > * {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.textHeaderPage {
		padding: 4em 0 2em;
	}
	.textHeaderPage > * {
		padding-top: 1em;
		padding-bottom: 1em;
		font-size: .88em;
	}
}
/* SM */
@media (max-width: 767px) {
	.textHeaderPage {
		padding: 2em 0 2em;
	}
	.textHeaderPage h2 {
		font-size: 1.4em;
	}
}
/* XS */
@media (max-width: 575px) {
	.textHeaderPage {
		padding: 1em 0 1em;
	}
}


/*----------  Process / Etapes d'une page CMS  ----------*/
.cmsSteps {
	background: #f7f7f7;
	padding: 2.5em 0;
}
.cmsSteps h2 {
	text-align: center;
}
.cmsSteps ul {
	display: flex;
	gap: var(--size-gap-main-double);
	counter-reset: cmsStepsCounter;
}
.cmsSteps li {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.cmsSteps .illustration {
	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);
}
.cmsSteps.inView .illustration {
	opacity: 1; 
	transform: translateY(0);
}
.cmsSteps .illustration img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.cmsSteps li .title {
	color: var(--color-primary-40);
	display: flex;
	align-items: center;
	gap: 1em;
	font-weight: 700;
}
.cmsSteps li .title::before {
	content: counter(cmsStepsCounter);
	counter-increment: cmsStepsCounter;
	display: block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--color-primary-40);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1em;
	flex-shrink: 0;
}
.cmsSteps li .description {
	flex: 1;
	font-size: .88em;
}

.cmsSteps .conclusion {
	text-align: center;
	margin: 2em 0 1em;
}
.cmsSteps .actions {
	display: flex;
	justify-content: center;
}
.cmsSteps .actions .btn {
	font-size: .95em;
}

/*----------  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;
}

.simplebarContainer {
	display: block;
	overflow-x: hidden;
	overflow-x: auto;
	white-space: nowrap;
}
.simplebarContainer .list-item {
	--list-nb-items-shown: 4;
	--list-item-width: calc((var(--size-container) - var(--size-gap-main) - var(--size-gap-main-double) * calc(var(--list-nb-items-shown) - 1)) / var(--list-nb-items-shown));
	width: var(--list-item-width);
	margin-right: var(--size-gap-main-double);

	display:inline-block;
	padding-bottom: .5em;
}
:is(#homeCategories,#homeThemes) .list-item:last-of-type {
	margin-right: 0;
}
/* SM */
@media (max-width: 767px) {
	.simplebarContainer .list-item {
		--list-nb-items-shown: 3;
	}
}
/* XS */
@media (max-width: 575px) {
	.simplebarContainer .list-item {
		--list-nb-items-shown: 2;
	}
}

.hasSimplebar .sectionContainer {
	position: relative;
}
.hasSimplebar .scrollBtn {
	font-size: 2em;
	position: absolute;
	top: 45%;
	left: -15%;
	z-index: 10;
	cursor: pointer;
	opacity: .7;
	transition: .15s;
	border: 1px solid rgba(0,0,0,.15);
	background: rgba(255,255,255,.95);
	width: 1.5em;
	height: 1.5em;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.hasSimplebar .scrollBtn:hover {
	opacity: 1;
}
.hasSimplebar .scrollBtn:active {
	opacity: 1;
}
.hasSimplebar .scrollBtn.scroll-right {
	left: unset;
	right: -15%;
}
.hasSimplebar:has(.simplebar-horizontal[style*='visible']) .scrollBtn {
	display: flex !important;
}
@media (max-width: 1599px) { 
	.hasSimplebar .scrollBtn {
		left: -3%;
	}
	.hasSimplebar .scrollBtn.scroll-right {
		right: -3%;
	}
}
@media (max-width: 1299px) { 
	.hasSimplebar .scrollBtn {
		left: 0%;
	}
	.hasSimplebar .scrollBtn.scroll-right {
		right: 0%;
	}
}
/* XS */
@media (max-width: 575px) {
	.hasSimplebar .scrollBtn {
		left: 1%;
	}
	.hasSimplebar .scrollBtn.scroll-right {
		right: 1%;
	}
}

/*----------  Barre de progression  ----------*/
.progressbar {
	height: 3px;
	border-radius: 2px;
	background: rgba(0,0,0,.11);
	overflow: hidden;
	position: relative;
}
.progressbar .progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	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(255,138,0,1) 0%, rgba(255,138,0,1) 50%, rgba(208,209,22,1) 80%, rgba(52,180,2,1) 100%); 
}

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

/* XL modifié */
@media (max-width: 1449px) { 
	.progressBarContainer {
		font-size: .9em;
	}
}
/* LG */
@media (max-width: 1199px) { 
	.progressBarContainer {
		font-size: .8em;
	}
}	


/*----------  Portfolio  ----------*/
.portfolio {
	display: grid;
	gap: var(--size-gap-main);
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 11em;
	grid-auto-flow: dense;
}
.portfolio > li {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	
}
.portfolio > li img {
	transition: .15s;
}
.portfolio > li:hover img {
	transform: scale(1.05);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.portfolio > li a {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.portfolio > li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}
.portfolio > li:is(:nth-of-type(4), :nth-of-type(7),) {
	grid-column: span 2;
}
.portfolio > li:is(:nth-of-type(10), :nth-of-type(14)) {
	grid-column: span 2;
}
.portfolio > li:is(:nth-of-type(8), :nth-of-type(11), :nth-of-type(18)) {
	grid-column: span 2;
	grid-row: span 2;
}
/* SM */
@media (max-width: 767px) {
	.portfolio {
		grid-template-columns: repeat(2,1fr);
		grid-auto-rows: 45vw;
	}
	.portfolio > li {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
	}
}


/*----------  Certifications  ----------*/
.certifications 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);
}
.certifications.inView li img {
	opacity: 1; 
	transform: translateY(0);
}


/*----------  Liste d'avantages  ----------*/
.advantagesList li:not(:last-of-type)::after {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: rgba(0,0,0,.2);
	margin: 0 auto;
	margin-top: 3em;
	margin-bottom: 3em;
	font-size: .5em;
	left: 50%;
}
.advantagesList .title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 0.5em;

	opacity: .1;
	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);
}
.inView .advantagesList .title {
	opacity: 1; 
	transform: translateY(0);
}

.advantagesList .title::before {
	content: "\e964";
	color: var(--color-alert-success);

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'heroicons-outline' !important;
	display: inline-block;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-rendering: auto;
	white-space: normal;;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/*----------  Liste de thèmes  ----------*/
.themesList .list-item a {
	display: block;
	position: relative;
}
.themesList .list-item img {
	object-fit: cover;
	aspect-ratio: 1/1;
	display: block;
	width: 100%;
}
.themesList .list-item .elementName {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
	padding: 1rem;
	width: 100%;
	height: 100%;
	z-index: 2;
	font-size: 2.22em;
	color: white;
	font-weight: 700;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	line-height: 1.1em;
	text-shadow: 0 0 10px rgba(0,0,0,.5);

	opacity: .2;
	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);
}
.inView .list-item .elementName {
	opacity: 1; 
	transform: translateY(0);
}


/*----------  FAQ  ----------*/
:is(.faqSection,#productOtherInfos) {
	padding-top: 2em;
	padding-bottom: 2em;
	--faq-border: 1px solid rgba(0,0,0,.1);
}
.faqSection h2 {
	color: var(--color-main-high);
	text-align: center;
	margin-bottom: 1em;
}
.faqSection li,
#productOtherInfos > li  {
	border-top: var(--faq-border);
	padding: 1em 0;
	display: flex;
	align-items: center;
	flex-direction: column;
}
#productOtherInfos > li {
	padding: 0;
	align-items: flex-start;
}
.faqSection li:last-of-type,
#productOtherInfos > li:last-of-type {
	border-bottom: var(--faq-border);
}
:is(.faqSection,#productOtherInfos) li input {
	display: none !important;
}
.faqSection :is(label,.answer) {
	width: 67%;
}
:is(.faqSection,#productOtherInfos) label {  
	font-size: 1.2em;
	font-weight: 700;
	cursor: pointer;
	color: rgba(0,0,0,.8);
	display: flex;
	align-items: center;
	gap: 1em;
	transition: .15s;
}
:is(.faqSection,#productOtherInfos) input:not(:checked) + label:hover {
	opacity: .8;
}
#productOtherInfos label {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: .75em 0;
}
.faqSection .question::before,
#productOtherInfos label::after {
	content: "\e9e6";
	font-size: 1.5em;

	font-family: 'heroicons-outline' !important;
	display: inline-block;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-rendering: auto;
	white-space: normal;;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#productOtherInfos label::after {
	content: "\e9e7";
}
:is(.faqSection .answer,#productOtherInfos .content) {
	font-size: .88em;
	overflow: hidden;
	opacity: 0;
	transition: all 0s ease-in-out;
	max-height: 0;
}
.faqSection input:checked + .question::before {
	content: "\e9d0";
}
#productOtherInfos input:checked + label::after {
	content: "\e9d1";
}
.faqSection input:checked ~ .answer,
#productOtherInfos input:checked ~ .content {
	max-height: 300em !important;
	opacity: 1 !important;
	transition: all .15s ease-in-out !important;
}
.faqSection input:checked ~ .answer {
	margin-top: 1em;
}
#productOtherInfos input:checked ~ .content {
	padding-bottom: 2em;
}
/* LG */
@media (max-width: 1199px) { 
	:is(.faqSection, #productOtherInfos) {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	:is(.faqSection, #productOtherInfos) label {
		font-size: 1.1em;
		padding-bottom: .75em;
	}
	#productOtherInfos input:checked ~ .content {
		padding-bottom: 1em;
	}
	.faqSection :is(label, .answer) {
		width: 90%;
	}
}	
/* MD */
@media (max-width: 991px) {
	.faqSection :is(label, .answer) {
		width: 100%;
	}
}
/* SM */
@media (max-width: 767px) {
	:is(.faqSection, #productOtherInfos) label {
		font-size: 1em;
	}
}
/* XS */
@media (max-width: 575px) {

}


/*----------  Section comment personnaliser  ----------*/
#howToCustomizeSection {
	background: #fafafa;
	padding: 2.5em 0;
	background: linear-gradient(0deg, rgba(250,250,250,1) 37%, rgba(0,0,0,0.02) 100%);
}
#howToCustomizeSection ul {
	/*display: grid;
	grid-template-columns: repeat(3,1fr);*/
	display: flex;
	gap: var(--size-gap-main-double);
}
#howToCustomizeSection li {
	flex: 1;
	
	display: flex;
	flex-direction: column;
}
#howToCustomizeSection h2 {
	text-align: center;
	margin-bottom: 1em;
	font-size: 1.41em;
}
#howToCustomizeSection h2 span {
	font-size: .76em;
	display: block;
	font-weight: 700;
}
#howToCustomizeSection .illustration img {
	width: 100%;
	opacity: 0;
	transition: all 1s ease-out;
	transition-delay: 500ms;
	transform: translateY(-10px);
}
#howToCustomizeSection.inView .illustration img {
	opacity: 1;
	transform: translateY(0);
}
#howToCustomizeSection .name {
	text-align: center;
	font-weight: 700;
	margin-top: 1em;
}
#howToCustomizeSection .tagline {
	text-align: center;
	font-size: .88em;
	margin-bottom: 1em;
}
#howToCustomizeSection strong {
	font-weight: 700;
}
#howToCustomizeSection .description {
	flex: 1;
	margin-bottom: 1.5em;
}
#howToCustomizeSection .actions {
	display: flex;
	justify-content: center;
}
/* MD */
@media (max-width: 991px) {
	#howToCustomizeSection {
		padding: 1.5em 0;
	}
	#howToCustomizeSection .description {
		font-size: .85em;
	}
}
/* SM */
@media (max-width: 767px) {
	#howToCustomizeSection h2 {
		font-size: 1.3em;
	}
	#howToCustomizeSection ul {
		flex-direction: column;
	}
	#howToCustomizeSection li {
		display: grid;
		grid-template-columns: 2fr 3fr;
		gap: 0 1em;;
	}
	#howToCustomizeSection li .illustration {
		grid-row: 1/5;
	}
	#howToCustomizeSection .name {
		margin-top: 0;
	}
	#howToCustomizeSection .description {
		font-size: .85em;
		margin-bottom: 0;
	}
}
/* XS */
@media (max-width: 575px) {
	#howToCustomizeSection h2 {
		font-size: 1.1em;
	}
	#howToCustomizeSection li {
		grid-template-columns: 1fr;
	}
	#howToCustomizeSection li .illustration {
		/* display: none; */
		max-width: 12em;
		justify-self: center;
	}
	#howToCustomizeSection .description {
		text-align: center;
	}
}


/*----------  Orejime  ----------*/
#orejime .orejime-Notice {
	left: 1%;
	max-width: min(770px,98%);
	right: auto;
	width: 98%;
	font-size: 13px;
	background-color: #f9f9f9;
	border: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 4px 6px 0 rgba(0,0,0,.4),5px 5px 10px 0 rgba(0,0,0,.39);
	animation: orejimeNotice .75s 1;
	
}
@keyframes orejimeNotice {
	0%,50% { opacity: 0; transform: translateY(-10px);}
	100% { opacity: 1; transform: translateY(0);}
}
#orejime :is(.orejime-Notice-title, .orejime-Notice-description) {
	color: rgba(0,0,0,.6);
	font-family: var(--font-main);
}
#orejime .orejime-Notice-description {
	background: url('images/cookieBg.png') no-repeat;
	background-position: top right;
	padding-right: calc(80px + 1em);
}
@media (max-width: 770px) {
	#orejime .orejime-Notice-description {
		background: none;
		padding-right: 0;
	}
}
#orejime .orejime-Notice-actions {
	display: flex;
}
#orejime .orejime-Notice-actions > * {
	flex: 1;
	padding: .25em;
}
#orejime .orejime-Notice-actions > * > button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
}


#orejime :is(.orejime-Button,.orejime-Modal-closeButton svg) {
	cursor: pointer;
	transition: .1s;
	border-radius: 2px;
}
#orejime :is(.orejime-Button,.orejime-Modal-closeButton svg):hover {
	opacity: .9;
}
#orejime :is(.orejime-Button--save, .orejime-Button--accept,.orejime-Modal-saveButton) {
	background-color: #5eba45;
	font-weight: 700;
}
#orejime .orejime-Notice :is(.orejime-Button--info,.orejime-Button--decline) {
	background-color: transparent;
	border: 1px solid rgba(0,0,0,.2);
	color: rgba(0,0,0,.5);
}

#orejime .orejime-Modal {
	font-size: 14px;
}
#orejime .orejime-Modal input {
	display: none !important;
}
#orejime .orejime-Modal .orejime-AppItem-switch {
	top: 0;
}
#orejime .orejime-Modal .orejime-Modal-privacyPolicyLink {
	color: white;
}
#orejime .orejime-Modal button {
	cursor: pointer;
	transition: .1s;
}
#orejime .orejime-AppToggles .orejime-Button {
	color: white;
}
#orejime .orejime-AppToggles .orejime-Button--info {
	background: transparent;
	border: 1px solid rgba(255,255,255,.9);
}
#orejime .orejime-AppToggles .orejime-Button--info:disabled {
	opacity: .5;
}

#cookieManagerLink {
	cursor: pointer;
}




/*=============================================
=            Header            =
=============================================*/
header {
	--size-header-height: 6em;
	background: white;
	height: var(--size-header-height);
	border-bottom: 2px solid var(--color-primary-40);
	position: relative;
	z-index: 100;
}
header .sectionContainer {
	display: flex;
	align-items: center;
	gap: .5em;
	height: 100%;;
}
/* MD */
@media (max-width: 991px) {
	header {
		--size-header-height: 4.5em;
	}
}
/* SM */
@media (max-width: 767px) {
	header {
		--size-header-height: 4em;
	}
}

/*----------  btn Menu sandwich  ----------*/
#responsiveMenuToggleBtn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.75em;
	color: rgba(0,0,0,.8);
	transition: .15s;
}
#responsiveMenuToggleBtn:hover {
	background: rgba(0,0,0,.1);
}
/* MD */
@media (max-width: 991px) {
	#responsiveMenuToggleBtn {
		display: flex;
	}
	body.responsiveMenuActive #responsiveMenuToggleBtn i::before {
		content: "\ea27";
	}
}

/*----------  logo  ----------*/
#mainLogo {
	display: flex;
	align-items: center;
	justify-content: center;
}
#mainLogo a {
	display: inline-flex;
	flex-direction: column;
	text-decoration: none;
	gap: .15em;
	opacity: 1 !important;
	align-items: center;
}
#mainLogo img {
	width: 10.6em;
	height: auto;
}
#mainLogo .tagLine {
	font-family: "Gantari", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	font-size: .65em;
	letter-spacing: .2em;
	text-align: center;
}
/* MD */
@media (max-width: 991px) {
	#mainLogo {
		flex: 1;
	}
}
/* XS */
@media (max-width: 575px) {
	#mainLogo img {
		width: 9em;
	}
	#mainLogo .tagLine {
		font-size: .56em;
	}
}

/*----------  navbar : main  ----------*/
header nav {
	flex: 1;
	height: 100%;
}

header nav > ul {
	display: flex;
	gap: 0;
	align-items: center;
	justify-content: center;
	height: 100%;
}
header nav > ul > li {
	height: 100%;
	display: flex;
	align-items: center;
	padding: .5em 1em;
}

header nav .navBtn {
	font-weight: 500;
	font-size: 0.95em;
	display: flex;
	gap: .5em;
	justify-content: center;
	color: rgba(0,0,0,.7);
	transition: .1s;
	cursor: pointer;
}
header nav .navBtn::after {
	content: "\e969";
	font-family: var(--font-icons);
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	padding-top: 0.1em;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	transition: .1s;
}
header nav .navBtn:hover::before {
	content: '';
	background: transparent;
	width: 70vw;
	height: 2.5em;
	position: absolute;
	top: calc(100% - 2.5em);
}
header nav ul li:hover .navBtn {
	color: rgba(0,0,0,.9);
}
header nav ul li:hover .navBtn::after {
	transform: translateY(.1em);
}

header nav > ul > li:hover .navContent {
	display: flex;
}

/* MD */
@media (max-width: 991px) {
	header nav {
		display: none;
		position: fixed;
		top: var(--size-header-height);
		left: 0;
		background: var(--color-primary-40);
		width: 100vw;
		height: calc(100vh - var(--size-header-height));
		z-index: 30;
		overflow-x: hidden;
	}
	body.responsiveMenuActive header nav {
		display: block;
	}
	header nav > ul {
		flex-direction: column;
		justify-content: flex-start;
	}
	header nav > ul > li {
		height: auto;
		width: var(--size-container);
		
		border-bottom: 1px solid rgba(255,255,255,.3);;
	}
	header nav .navBtn {
		padding: .75em;
		justify-content: space-between;
		font-weight: 700;
		width: 100%;
		font-size: 1.2em;

		color: white !important;
	}
	header nav .navBtn::after {
		content: "\e96b";
		transform: none !important;
	}
}

/*----------  navbar : contenu  ----------*/
header nav .navContent {
	display: none;
	position: absolute;
	top: 100%;
	left:0;
	background: white;
	border-top: 2px solid var(--color-primary-40);
	z-index: 3;
	overflow: auto;
	width: 100%;
	z-index: 50;
	box-shadow: 0 0 10px 1000vh rgba(0,0,0,0);
	animation: navContentOverlay .75s forwards;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100000%, 0 100000%);
}
@keyframes navContentOverlay {
	0% { box-shadow: 0 0 10px 1000vh rgba(0,0,0,0); }
	100% { box-shadow: 0 0 10px 1000vh rgba(0,0,0,.2); }
}
header nav .navContent.clicked {
	display: none !important;
}
header nav .navContent .content {
	width: var(--size-container);
	margin: 0 auto;
	display: flex;
	gap: 7em;
	position: relative;
	z-index: 51;
	padding: 1.4em 0 4em;
}
header nav .navContent .navMain {
	flex: 1;
}
header nav .navContent .navTitle .title {
	font-weight: 700;
	color: var(--color-primary-40);
	font-size: 1.5em;
	text-transform: uppercase;
	margin-bottom: .7em;
}
header nav .navContent .navTitle .iconBtn {
	display: none;
}
header nav a.browseLink {
	display: flex;
	align-items: center;
	gap: .5em;
	text-decoration: none;
	font-weight: 500;
	margin-bottom: 1.5em;
}
header nav a.browseLink:hover {
	color: var(--color-main-max);
}
header nav a.browseLink i {
	color: var(--color-primary-40);
	transition: .05s;
}
header nav a.browseLink:hover i {
	transform: translateX(.2em);
}

header nav a.imageBtn {
	display: block;
	width: 100%;
	position: relative;
	width: 16.8em;
	height: 12.8em;
}
header nav a.imageBtn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
header nav a.imageBtn > div {
	position: absolute;
	left: .5em;
	bottom: .5em;
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	display: flex;
	gap: .5em;
	align-items: center;
	text-shadow: 0 0 10px rgba(0,0,0,.5);

}
header nav a.imageBtn > div span {
	font-size: 1.2em;
}
header nav a.imageBtn > div i {
	font-size: 2em;
}
header nav .navContent .navSub {
	flex: 2;
	display: flex;
	/*justify-content: space-between;*/
	gap: 7em;
}

header nav .navContent .navSubTitle {
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}
header nav .navContent ul {
	font-size: 0.95em;
	
}
header nav .navContent ul a {
	display: inline-block;
	padding: .35em 0;
	text-decoration: none;
	color: var(--color-main-medium);
	transition: .25s;
}
header nav .navContent ul a:hover {
	color: var(--color-primary-40);
}

/* MD */
@media (max-width: 991px) {
	header nav .navContent {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		z-index: 100;
		border-top-width: 0px;
	}
	header nav > ul > li:hover .navContent {
		display: none;
	}
	header nav > ul > li.active .navContent {
		display: block !important;
	}
	header nav .navContent .content {
		flex-direction: column;
		gap: 1em;
		padding: 0;
	}
	header nav .navContent .navMain {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		margin-top: 4em;
		padding: 0em 1em;
	}
	header nav .navContent .navTitle {
		grid-column: auto / span 2;
		display: flex;
		align-items: center;
		gap: 1em;
		background: var(--color-primary-40);
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: min(var(--size-container), 100%);
		z-index: 11;
	}
	header nav .navContent .navTitle::before {
		content: "";
		background: var(--color-primary-40);
		position: absolute;
		top: 0;
		left: 50%;
		width: 101vw;
		height: 100%;
		transform: translateX(-50%);
		z-index: -1;
	}
	header nav .navContent .navTitle .iconBtn {
		display: flex;
		font-size: 1.5em;
		width: 2em;
		height: 2em;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: white;
	}
	header nav .navContent .navTitle .title {
		margin-bottom: 0;
		font-size: 1em;
		flex: 1;
		color: white;
		text-align: center;
		transform: translateX(-1.75em);
	}
	header nav a.browseLink {
		margin-bottom: 0;
	}
	header nav a.imageBtn {
		width: auto;
		height: auto;
		text-decoration: none;
		display: flex;
		align-items: center;
	}
	header nav a.imageBtn img {
		display: none;
	}
	header nav a.imageBtn > div {
		position: relative;
		color: inherit;
		text-shadow: none;
		text-transform: none;
		font-weight: inherit;
		left: unset;
		bottom: unset;
	}
	header nav a.imageBtn > div span {
		font-size: inherit;
		text-align: center;
	}

	header nav a:is(.browseLink,.imageBtn) {
		border: 1px solid var(--button-color-outline);
		color: var(--button-color-outline);
		font-size: .75em;
		padding: .5em 1em;
		border-radius: 2em;
		justify-content: center;
		font-weight: 700;
	}
	header nav a:is(.browseLink,.imageBtn) i {
		display: none;
	}

	header nav .navContent .navSub {
		gap: var(--size-gap-main-double);
		flex: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 1em;
	}
	header nav .navContent .navSub > li {
		border-top: 1px solid rgba(0,0,0,.2);
	}
	header nav .navContent .navSub .navSubTitle {
		font-size: 1em;
	}
	header nav .navContent .navSub :is(.navSubTitle,a) {
		padding: 0.5em 0;
	}

}
/* XS */
@media (max-width: 575px) {
	header nav .navContent .navSub {
		grid-template-columns: 1fr;
		
	}
}

/*----------  langSelect  ----------*/

#langSelect {
	position: relative;
	z-index: 100;
}
#currentLang {
	display: flex;
	justify-content: center;
	gap: .5em;
	font-weight: 700;
	font-size: .72em;
	cursor: pointer;
	position: relative;
}
#currentLang::after {
	content: "\e969";
	font-family: var(--font-icons);
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	padding-top: 0.2em;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	transition: .1s;
}
#langSelect:hover #currentLang {
	color: rgba(0,0,0,.8);
}
#langSelect > ul {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	box-shadow: 0 0 10px 1000vh rgba(0,0,0,.1);
	font-size: .8em;
	font-weight: 600;
	text-transform: uppercase;
	width: 100%;
	display: none;;
	animation: navContentOverlay .75s forwards;
	border-radius: 5px;
}

#langSelect:hover > ul {
	display: block;
}
#langSelect > ul a {
	display: block;
	padding: .5em .5em;
	text-decoration: none;
	color: rgba(0,0,0,.7);
	transition: .15s;
	text-align: center;
}
#langSelect > ul li:not(:last-of-type) {
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#langSelect > ul a:hover {
	color: var(--color-primary-40);
}	

/* MD */
@media (max-width: 991px) {
	#langSelect {
		display: none;
	}
}

/*----------  userMenu  ----------*/
:is(#userMenu a,#cartMenu){
	display: flex;
	gap: .5em;
	justify-content: center;
	align-items: center;
	position: relative;
}
#quoteMenu {
	display: none;
	gap: .5em;
	justify-content: center;
	align-items: center;
	position: relative;
}
#quoteMenu.visible {
	display: flex;
}
:is(#userMenu,#cartMenu,#quoteMenu) .iconContainer {
	display: flex;
	justify-content: center;
	align-items: center;
}
:is(#userMenu,#cartMenu,#quoteMenu) i {
	font-size: 1.5em;
	color: rgba(0,0,0,.8);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
}

:is(#userMenu,#cartMenu,#quoteMenu) > a {
	text-decoration: none;
}
#userMenu .content {
	font-size: 0.72em;
}
#userMenu .content .userLegend {
	font-weight: 700;
	text-decoration: none;
}
#userMenu:hover .content .userLegend {
	text-decoration: underline
}
#userMenu.connected .content {
	max-width: 8em;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LG */
@media (max-width: 1199px) { 
	#userMenu .content {
		display: none;
	}
}	

/*----------  cartMenu  ----------*/
:is(#cartLinesNumber,#quoteLinesNumber) {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--color-primary-40);
	color: white;
	font-size: 0.6em;
	font-weight: 700;
	min-width: 2em;
	min-height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transform: translate(.75em,-0.5em);
}
span#quoteLinesNumber, span#cartLinesNumber {
	display: none;
}
#cartLinesNumber.visible {
	display: flex;
}
#quoteMenu.visible span#quoteLinesNumber {
	display: flex;
	animation: quoteLinesNumberFadeIn 1s ease-in-out forwards;
}
@keyframes quoteLinesNumberFadeIn {
	0%,60% { opacity: 0;}
	30%,100% { opacity: 1; }

}


/*=============================================
=            Homepage            =
=============================================*/

/*----------  Slideshow  ----------*/
.HL_SLIDESHOW {	
	position: relative;
}
.HL_SLIDESHOW li {
	position:absolute;
	left: 0;
	top: 0;
}
.HN_SLIDESHOW_SHORTCUTS {
	position: absolute;
	bottom: 1em;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .5em;
	padding: .5em 1em;
	border-radius: 1em;
	background: rgba(0,0,0,.05);
}
.HN_SLIDESHOW_SHORTCUT {
	font-size: 9px;
	border-radius: .5em;
	width: 1em;
	height: 1em;
	display: block;
	background: white;
	cursor: pointer;
	opacity: .4;
	transition: .5s;
	position: relative;
	overflow: hidden;
}
.HN_SLIDESHOW_SHORTCUT::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.15);
	z-index: 2;
	transform-origin: center left;
	opacity: 0;
}
@keyframes slideProgress {
	0% { transform: scaleX(0) }
	100% { transform: scaleX(1) }
}
.HN_SLIDESHOW_SHORTCUT.selected {
	opacity: 1;
	width: 5em;
}
.HN_SLIDESHOW_SHORTCUT.selected::before {
	opacity: 1;
	animation: slideProgress calc(var(--time-between) * 1ms) linear forwards;
}

/* hacks Nico */
#slideShowuniqID,
.HL_SLIDESHOW {
	height: 530px !important;
}
#slideShowOffice {
	position: relative;
}
#slideShowuniqID {
	z-index: 1;
}
.HN_SLIDESHOW_SHORTCUTS {
	z-index: 2;
}

#slideShowOffice .slide .content {
	margin: 0 auto;
	width: var(--size-container);
	padding-left: var(--size-gap-main);
	padding-right: var(--size-gap-main);
	position: relative;
	z-index: 2;
}
#slideShowOffice .slide .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#slideShowOffice .slide .background::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: transparent;
	background: linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 70%); 
}
#slideShowOffice .slide .background img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* LG */
@media (max-width: 1199px) { 
	#slideShowuniqID,
	.HL_SLIDESHOW {
		height: 430px !important;
	}
}	
/* MD */
@media (max-width: 991px) {
	#slideShowuniqID,
	.HL_SLIDESHOW {
		height: 330px !important;
	}
}
/* SM */
@media (max-width: 767px) {
	#slideShowuniqID,
	.HL_SLIDESHOW {
		height: 230px !important;
	}
}
/* XS */
@media (max-width: 575px) {

}


#slideShowOffice .slide .content {
	padding-top: 8em;
}
#slideShowOffice .slide .title {
	font-size: 3.1em;
	font-weight: 700;
	color: var(--color-neutral-10);
}
#slideShowOffice .slide .tagline {
	font-size: 2.22em;
	font-weight: 300;
}
#slideShowOffice .actions {
	margin-top: 1em;
}
#slideShowOffice .slide .btn {
	font-size: 1.2em;
}
#slideShowOffice .slide .content > .badge {
	width: 6.5em;
	height: auto;
	position: absolute;
	left: 75%;
	top: 10%;
	transform: rotate(-30deg) translateX(-50%);
}
#slideShowOffice .slide .content svg {
	mix-blend-mode: difference;
}
#slideShowOffice #homeSlideConical57 .content > .badge {
	left: 85%;
}

/* LG */
@media (max-width: 1199px) { 
	#slideShowOffice .slide .content {
		padding-top: 7em;
	}
	#slideShowOffice .slide .title {
		font-size: 2.75em;
	}
	#slideShowOffice .slide .tagline {
		font-size: 1.8em;
	}
	#slideShowOffice .slide .btn {
		font-size: 1em;
	}
	#slideShowOffice .slide .content > .badge {
		top: 7%;
		width: 5.5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#slideShowOffice .slide .content {
		padding-top: 4.5em;
	}
	#slideShowOffice .slide .title {
		font-size: 2.25em;
	}
	#slideShowOffice .slide .tagline {
		font-size: 1.5em;
	}
	#slideShowOffice .slide .btn {
		font-size: .85em;
	}
}
/* SM */
@media (max-width: 767px) {
	#slideShowOffice .slide .content {
		padding-top: 2.5em;
	}
	#slideShowOffice .slide .title {
		font-size: 1.5em;
	}
	#slideShowOffice .slide .tagline {
		font-size: 1em;
	}
	#slideShowOffice .slide .description {
		font-size: .85em;
	}
	#slideShowOffice .slide .btn {
		font-size: .85em;
	}
	#slideShowOffice .slide .content > .badge {
		top: 7%;
		width: 4.5em;
	}
}
/* XS */
@media (max-width: 575px) {

}



/*----------  Catégories + Thèmes  ----------*/
:is(#homeCategories,#homeThemes) {
	padding-top: 3em;
	padding-bottom: 1.5em;
	position: relative;
}
:is(#homeCategories,#homeThemes) h2 {
	font-weight: 700;
	font-size: 1.11em;
	color: var(--color-main-high);
	padding-bottom: .75em;
}
:is(#homeCategories,#homeThemes) a {
	text-decoration: none;
}
:is(#homeCategories,#homeThemes) img {
	max-width: 100%;
	height: auto;
}

/* MD */
@media (max-width: 991px) {
	:is(#homeCategories,#homeThemes) {
		padding-top: 1.5em;
	}
	:is(#homeCategories,#homeThemes) h2 {
		font-weight: 700;
		font-size: 1em;
	}
}






/*----------  Impression 100% française + personnalisation  ----------*/
:is(#homeFrenchPrinting,#homeCustomization) .description {
	font-size: 1.11em;
	margin: 1.5em 0 2em;
}
:is(#homeFrenchPrinting,#homeCustomization) .actions .btn {
	padding: .5em 4em;
	font-size: .95em;
}
:is(#homeFrenchPrinting,#homeCustomization) {	
	display: flex;
	align-items: center;
	overflow-x: hidden;
}
:is(#homeFrenchPrinting,#homeCustomization) .sectionContainer .content {
	opacity: .5;
	transition: .5s ease-out;
}
:is(#homeFrenchPrinting,#homeCustomization).inView .sectionContainer .content {
	transform: translateX(0);
	opacity: 1;
}

/* LG */
@media (max-width: 1199px) { 
	:is(#homeFrenchPrinting,#homeCustomization) .description {
		font-size: 1em;
		
	}
}	
/* MD */
@media (max-width: 991px) {
	:is(#homeFrenchPrinting,#homeCustomization) .actions .btn {
		font-size: .85em;
	}
}
/* SM */
@media (max-width: 767px) {

}
/* XS */
@media (max-width: 575px) {
	:is(#homeFrenchPrinting,#homeCustomization) .actions .btn {
		width: 100%;
	}
}

/* Impression 100% française */
#homeFrenchPrinting {
	background: url('images/homeFrenchPrintingBg.jpg') center center no-repeat;
	background-size: cover;
	color: white;
	min-height: 32.5em;
}
#homeFrenchPrinting .sectionContainer .content {
	padding-left: 50%;
	transform: translateX(3em);
}
#homeFrenchPrinting h2 {
	position: relative;
	padding-bottom: .5em;
	line-height: 1.5em;
}
#homeFrenchPrinting h2 span {
	font-size: 3rem;
	font-weight: 700;
	display: block;
}

#homeFrenchPrinting h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--color-gradient-french-flag);
}
#homeFrenchPrinting .description {
	text-shadow: 0 0 10px rgba(0,0,0,.5);
}
#homeFrenchPrinting .actions .btn {
	border-width: 2px;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	
}
#homeFrenchPrinting .actions .btn:hover {
	background: rgba(255,255,255,.2);
}
/* LG */
@media (max-width: 1199px) { 
	#homeFrenchPrinting {
		min-height: 25em;
	}
	#homeFrenchPrinting .sectionContainer .content {
		padding-left: 45%;
	}
	#homeFrenchPrinting h2 span {
		font-size: 2.5rem;
	}	
}	
/* MD */
@media (max-width: 991px) {
	#homeFrenchPrinting .sectionContainer .content {
		padding-left: 37%;
	}
	#homeFrenchPrinting h2 {
		font-size: 1.25rem;
		padding-bottom: 1em;
	}
	#homeFrenchPrinting h2 span {
		font-size: 2rem;
	}	
	#homeFrenchPrinting .sectionContainer .content {
		padding-left: 20%;
	}
}
/* SM */
@media (max-width: 767px) {
	#homeFrenchPrinting {
		min-height: 20em;
		position: relative;
	}
	#homeFrenchPrinting::before {
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.7);
	}
	#homeFrenchPrinting .sectionContainer .content {
		padding-left: 0%;
	}
}
/* XS */
@media (max-width: 575px) {
	#homeFrenchPrinting {
		padding: 2em 0;
	}

}

/* Personnalisation */
#homeCustomization {
	background: url('images/homeCustomizeBg.jpg') center center no-repeat;
	background-size: cover;
	min-height: 29.5em;
}
#homeCustomization .sectionContainer .content {
	padding-right: 50%;
	transform: translateX(-3em);
}
#homeCustomization h2 {
	font-weight: 700;
	font-size: 2.13em;
}
#homeCustomization .description {
	text-shadow: 0 0 10px rgba(255,255,255,.5);
}
/* LG */
@media (max-width: 1199px) { 
	#homeCustomization {
		min-height: 25em;
	}
	#homeCustomization .sectionContainer .content {
		padding-right: 45%;
	}
	#homeCustomization h2 {
		font-size: 1.75em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#homeCustomization {
		min-height: 20em;
	}
	#homeCustomization .sectionContainer .content {
		padding-right: 40%;
	}
	#homeCustomization h2 {
		font-size: 1.5em;
	}
	#homeCustomization .description {
		text-shadow: 0 0 10px rgba(255,255,255,1);
	}
}
/* SM */
@media (max-width: 767px) {
	#homeCustomization {
		min-height: 15em;
		position: relative;
	}
	#homeCustomization::before {
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,0.5);
	}
	#homeCustomization .sectionContainer .content {
		padding-right: 0%;
	}
}
/* XS */
@media (max-width: 575px) {
	#homeCustomization {
		padding: 2em 0;
	}
}

/*=============================================
=            Thèmes : page principale            =
=============================================*/
#themesMainHeader {
	background: url('images/themesMainBg.jpg') center center no-repeat;
	background-size: cover;
}
#themesMainHeader h1 {
	font-size: 3em;
}

/*----------  Introduction  ----------*/
#themesMainMainIntroduction {
	padding: 2em 0;
}

/*----------  Menu  ----------*/
#themesMainThemesList {
	padding-bottom: 4em;
}
#themesMainThemesList .themesList {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
}
#themesMainThemesList .themesList .list-item {
	overflow: hidden;
}
#themesMainThemesList .themesList .list-item a {
	opacity: 1 !important;
}
#themesMainThemesList .themesList .list-item img {
	aspect-ratio: 4/3;
	transition: all .15s;
}
#themesMainThemesList .themesList .list-item .elementName {
	font-size: 3.8em;
	text-shadow: 0 0 15px rgba(0,0,0,.5);
}
#themesMainThemesList .themesList .list-item:hover img {
	transform: scale(1.05);
	filter: blur(7px);
}


/*----------  Autres méthodes  ----------*/
#themesMainAlternativeMethods {
	padding: 3em 0;
	background: #fafafa;
}
#themesMainAlternativeMethods h2 {
	text-align: center;
	margin-bottom: .5em;
}
#themesMainAlternativeMethods .introduction {
	text-align: center;
	margin-bottom: 2em;
}
#themesMainAlternativeMethods ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
	margin-bottom: 2em;
}
#themesMainAlternativeMethods li {
	display: flex;
	flex-direction: column;
}
#themesMainAlternativeMethods ul img {
	width: 100%;
	height: auto;
}
#themesMainAlternativeMethods :is(.title,.argument) {
	font-weight: 700;
	text-align: center;
}
#themesMainAlternativeMethods .title {
	font-size: 1.2em;
	margin-top: 1em;
}
#themesMainAlternativeMethods .argument {
	margin-bottom: 1em;
}
#themesMainAlternativeMethods .description {
	flex: 1;
}
#themesMainAlternativeMethods .actions {
	display: flex;
	justify-content: center;
}
#themesMainAlternativeMethods .actions .btn {
	font-size: .95em;
}
#themesMainMain .pageLongDescription h3 {
	margin-top: 1em;
	margin-bottom: .25em;
}



/*=============================================
=            Thème : page de thème            =
=============================================*/
.miniTemplate .name {
	display: block;
	text-align: center;
	margin-bottom: 1em;
}




/*=============================================
=            Catégories : page principale            =
=============================================*/
#categoriesMainHeader {
	background-image: url('images/categoriesMainBg.jpg');
}
#categoriesMainHeader h1 {
	font-size: 2.7em;
}
#categoriesMainHeader h1 span {
	display: block;
}
#categoriesMainMain {
	padding: 2.7em 0;
}
#categoriesMainIntroduction {
	text-align: center;
	margin-bottom: 2em;
}
#categoriesMainCategoriesList h2 {
	text-align: center;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 1em;
}
#categoriesMainCategoriesList ul {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: var(--size-gap-main-double);
}
/* LG */
@media (max-width: 1199px) { 
	#categoriesMainMain {
		padding: 2.25em 0;
	}
	#categoriesMainHeader h1 {
		font-size: 2.35em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#categoriesMainMain {
		padding: 2em 0;
	}
	#categoriesMainHeader h1 {
		font-size: 2em;
	}
	#categoriesMainCategoriesList ul {
		grid-template-columns: repeat(3,1fr);
	}
}
/* SM */
@media (max-width: 767px) {
	#categoriesMainMain {
		padding: 1.75em 0;
	}
	#categoriesMainHeader h1 {
		font-size: 1.5em;
	}
	#categoriesMainIntroduction {
		font-size: .85em;
	}
}
/* XS */
@media (max-width: 575px) {
	#categoriesMainMain {
		padding: 1.5em 0;
	}
	#categoriesMainHeader h1 {
		font-size: 1.2em;
	}
	#categoriesMainIntroduction {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#categoriesMainIntroduction:hover {
		overflow: visible;
		display: block;
	}
}
/* XS : modifié */
@media (max-width: 440px) {
	
	#categoriesMainCategoriesList ul {
		grid-template-columns: repeat(2,1fr);
		gap: 0;
	}
}

/*=============================================
=            Catégories            =
=============================================*/

/*----------  Aide à la décision  ----------*/
#categoryDecisionHelp {
	background: #fbfbfb;
	padding-top: 3em;
	padding-bottom: 3em;
}
#categoryDecisionHelp h2 {
	text-align: center;
	color: var(--color-main-high);
}
#categoryContact {
	font-size: 1.2em;
	text-align: center;
	padding-top: 2em;
	padding-bottom: 2em;
	background: #f7f7f7;
}
/* MD */
@media (max-width: 991px) {
	#categoryDecisionHelp {
		background: #fbfbfb;
		padding-top: 2em;
		padding-bottom: 2em;
		font-size: .88em;
	}
	#categoryDecisionHelp h3 {
		font-size: 1em;
	}
	#categoryContact {
		font-size: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#categoryDecisionHelp {
		background: #fbfbfb;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	#categoryContact {
		font-size: .85em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#categoryDecisionHelp {
		font-size: .75em;
	}
}

/*=============================================
=            Produit            =
=============================================*/
#product {
	padding-top: 1.5em;
}
#productLayout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--size-gap-main-double);
	padding-bottom: 4em;
}
#product [onclick] {
	cursor: pointer;
}
/* LG */
@media (max-width: 1199px) { 
	#product {
		padding-top: 1em;
	}
	#productLayout {
		padding-bottom: 3em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#productLayout {
		grid-template-columns: 1fr;
		padding-bottom: 0;
	}
}

/*----------  Photos  ----------*/
#product .mainImage {
	width: 100%;
	margin-bottom: 2.25em;
	background: #f8f8f8;
	display: flex;
	justify-content: center;
	align-items: center;
}
#product .mainImage img {
	max-width: 100%;
}
#productImages {
	margin-bottom: 1em;
}
#productImages .simplebarContainer .list-item {
	--list-nb-items-shown: 3;
	--grid-width: var(--size-container) / 2;
	--list-item-width: calc((var(--grid-width) - var(--size-gap-main) - var(--size-gap-main-double) * calc(var(--list-nb-items-shown) - 1)) / var(--list-nb-items-shown))
}
#productImages img {
	max-width: 100%;
}
/* MD */
@media (max-width: 991px) {
	#product .mainImage {
		margin-bottom: 1em;
	}
	#product .mainImage img {
		max-width: max(15em,50vw);
	}
	#productImages .simplebarContainer .list-item {
		margin-right: var(--size-gap-main);
		--grid-width: var(--size-container) / 3;
	}
}
/* SM */
@media (max-width: 767px) {
	#productImages .simplebarContainer .list-item {
		margin-right: var(--size-gap-main);
		--grid-width: var(--size-container) / 2;
	}
}


/*----------  Infos principales  ----------*/
#productMainInfos {
	grid-row: auto / span 2;
} 
#productMainInfosContent {
	position: sticky;
	top: 0em;
	grid-row: auto / span 2;
}
/* MD */
@media (max-width: 991px) {
	#productMainInfos {
		position: relative;
		max-height: unset !important;
	}
}
#productMainInfos h1 {
	font-size: 3em;
	text-align: left;
	padding-top: 1em;
	margin-bottom: 0;
}
.notHasConfigurator #productMainInfos h1 {
	padding-top: 0.3em;
}

#productTagline {
	font-size: 1.77em;
	margin-bottom: 0.15em;
}
#productTagline > * {
	margin-bottom: 0;
	padding-bottom: 0;
}
#productOrigins {
	display: flex;
	gap: var(--size-gap-main-double);
	font-size: 0.83em;
	margin: 1em 0;
}
#productOrigins li {
	display: flex;
	gap: 1em;
	align-items: center;
}
#productOrigins .flag {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: .5em;
	object-fit: cover;
	font-size: 1rem;
	box-shadow: 0  0 1px rgba(0,0,0,.2);;
}

/* LG */
@media (max-width: 1199px) { 
	#productMainInfos h1 {
		font-size: 2.35em;
		padding-top: 0.5em;
	}
	#productTagline {
		font-size: 1.35em;
	}
	#productMinQty {
		font-size: .85em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#productTitleSection {
		display: grid;
		grid-template-columns: auto auto;
		gap: 0 1em;
		padding-bottom: 1em;
	}
	#productMainInfos :is(h1,#productTagline) {
		grid-column: auto / span 2;
	}
	#productMainInfos h1 {
		font-size: 2.15em;
		padding-top: 0 !important;
	}
	#productTagline {
		font-size: 1.2em;
	}
	#productOrigins {
		margin: 0;
		justify-content: flex-end;
	}
}
/* SM */
@media (max-width: 767px) {
	#productTitleSection {
		display: block;
	}
	#productMainInfos h1 {
		font-size: 1.75em;
	}
	#productTagline {
		font-size: 1.1em;
	}
	#productOrigins {
		margin-top: 0.5em;
		justify-content: flex-start;
		flex-wrap: wrap;
		font-size: .75em;
		gap: .5em 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#productMainInfos h1 {
		font-size: 1.5em;
	}
}

#productOptions {
	margin-bottom: 1.75em;
}
.notHasConfigurator #productOptions {
	margin-bottom: .5em;
}
#productOptions > li {
	border-top: 1px solid rgba(0,0,0,.1);
	padding: 1em 0;
}
#productOptions .optionHeader {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 0.5em;
}
#productOptions .optionName {
	flex: 1;
	font-size: .88em;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .5em;
	color: var(--color-main-high)
}
#productOptions .asideOpenBtn {
	font-size: 1.2em;
	display: flex;
	align-items: center;
}
#productOptions .optionValues {
	display: flex;
	gap: 1em;
}
#productOptions .optionValues li {
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 3px;
	font-size: .95em;
	padding: .5em 1em;
	color: var(--color-main-high);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	cursor: pointer;
}
#productOptions .optionValues li img {
	width: 1.2em;
	height: auto;
}
#productOptions .optionValues li:has(img):hover::before {
	display: block;
}
#productOptions .optionValues li.selected {
	border-color: var(--color-main-high);
	outline: 1px solid var(--color-main-high);
	font-weight: 700;
}
#productOptions .optionValues li:not(.selected):hover {
	border-color: var(--color-primary-40);
	outline: 1px solid var(--color-primary-40);
}
#productOptions .optionValues li:has(a) {
	padding: 0;
}
#productOptions .optionValues li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;;
	height: 100%;
	padding: .35em 1.5em;
	text-decoration: none;
}

#productOptions .compareTechniques {
	margin-top: 1em;
	font-size: .8em;
	display: flex;
	gap: .5em;
	align-items: center;
}

#productOptions .productConfiguration {
	display: flex;
	gap: 2em;
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding-bottom: 1em;
}
#productOptions .productConfiguration .qtyOption {
	flex: 1;
	position: relative;
}
#productOptions .productConfiguration .qtyOption::after {
	content: '';
	display: block;
	background: rgba(0,0,0,.1);;
	width: 1px;
	height: 100%;
	position: absolute;
	right: -1em;
	top: 0;
}
#productOptions .productConfiguration .delayOption {
	flex: 2;
}

#productOptions .field {
	padding-top: 0;
	margin-bottom: 0;
	font-size: .8em;
}
#productOptions .field select {
	margin-top: 0;
}
#productOptions .deliveryDateExplanation {
	font-size: .75em;
	margin-top: .5em;
}
#productOptions .deliveryDateExplanation strong {
	color: var(--color-main-high);
}

/* LG */
@media (max-width: 1199px) { 
	#productOptions > li {
		padding: 0.75em 0;
	}
	#productOptions .optionValues {
		font-size: .88em;
		flex-wrap: wrap;
		gap: .5em;
	}
}
/* MD */
@media (max-width: 991px) {
	#productOptions {
		margin-bottom: 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#productOptions .optionValues li {
		padding: 0.25em 0.75em;
	}
	#productOptions .compareTechniques {
		font-size: .75em;
	}
}
/* XS */
@media (max-width: 575px) {
	#productOptions .productConfiguration {
		display: block;
	}
	#productOptions .productConfiguration > *:not(:last-of-type) {
		padding-bottom: 1em;
		margin-bottom: .5em;
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
}

#productPrice {
	display: flex;
	margin-bottom: 1em;
	align-items: center;
}
#productPrice .field-input-radio {
	order: 2;
	font-size: .75em;
}
#productPrice .field-input-radio > div:last-of-type label {
	margin-right: 0;
}
#productPrice .field-input-radio input[type='radio'] {
	--form-size-radio: 16px;
}
#productPrice > span {
	flex: 1;
	font-size: 1.75em;
	font-weight: 700;
	color: var(--color-main-high);
	color: var(--color-secondary-40);
}
#productPrice > span > span {
	display: block;
	font-size: .5em;
	font-weight: 400;
	color: var(--color-main-medium);
}

#productMainAction {
	display: flex;
	align-items: center;
	gap: .5em;;
}
#productMainAction :is(button,.btn) {
	font-size: 1.16em;
}
#productMainAction .pricesBtn :is(i,span) {
	font-size: .9em;
}
#productMainAction .pricesBtn:hover {
	opacity: 1;
}
/* LG */
@media (max-width: 1199px) { 
	#productMainAction button {
		font-size: 1.1em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#productMainAction button {
		font-size: 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#productMainAction button {
		font-size: .9em;
	}
	#productPrice > span > span {
		font-size: .45em;
	}
}
/* XS */
@media (max-width: 575px) {
	#productMainAction {
		flex-direction: column;
	}
	#productMainAction button {
		width: 100%;
	}
}


#productMainInfosReinsurance {
	display: flex;
	gap: .75em 1.5em;
	flex-wrap: wrap;
	font-size: .83em;
	margin-top: 2.6em;
}
#productMainInfosReinsurance li {
	display: flex;
	gap: 0.5em;
}
#productMainInfosReinsurance [onclick] {
	text-decoration: underline;
	transition: .15s;
}
#productMainInfosReinsurance [onclick]:hover {
	text-decoration: none;
	color: var(--color-main-max)
}

/* LG */
@media (max-width: 1199px) { 
	#productMainInfosReinsurance {
		margin-top: 2em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#productMainInfosReinsurance {
		margin-top: 1em;
		font-size: .75em;
	}
}
/* SM */
@media (max-width: 767px) {

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

}


/*----------  Infos secondaires  ----------*/
#productDescription {
	line-height: 1.5em;
}
/* LG */
@media (max-width: 1199px) { 
	#productDescription {
		font-size: .9em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#productDescription {
		margin-top: 2em;
	}
}
/* SM */
@media (max-width: 767px) {
	#productDescription {
		font-size: .85em;
	}
}
/* XS */
@media (max-width: 575px) {

}

/*----------  More  ----------*/
.discoverMore {
	margin-bottom: 2em;
	position: relative;
}
.discoverMore h2 {
	font-size: 1.6em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 0.75em;
}
/* LG */
@media (max-width: 1199px) { 
	.discoverMore {
		margin-bottom: 1.5em;
	}
	.discoverMore h2 {
		font-size: 1.35em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.discoverMore {
		margin-bottom: 1em;
		margin-top: 1em;
	}
	.discoverMore h2 {
		font-size: 1.2em;
	}
}



/*----------  Sidebars  ----------*/
body:has(aside.visible) {
	overflow: hidden;
}
#page-product aside {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	background: rgba(0,0,0,0);
	overflow: hidden;
}
#page-product aside.visible {
	display: block;
	animation: productAsideOverlayIn .2s forwards;
}
@keyframes productAsideOverlayIn {
	0% {background: rgba(0,0,0,0);}
	100% {background: rgba(0,0,0,.3);}
}
#page-product aside > div {
	background: white;
	position: absolute;
	top: 0;
	right: 0;
	width: min(480px,100vw);
	height: 100vh;
	z-index: 2;
	display: block;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	padding: calc(var(--size-gap-main-double) * 2) var(--size-gap-main-double) var(--size-gap-main-double);
}

#page-product aside.visible > div {
	animation: productAsideContentIn .1s forwards;
}
@keyframes productAsideContentIn {
	0% {transform: translateX(480px);}
	100% {transform: translateX(0);}
}

#page-product .asideTitle {
	font-size: 1.3em;
	font-weight: 700;
	margin-bottom: 1em;
}
#page-product aside .asideContent {
	overflow-y: auto;
	overflow-x: visible;
	max-height: calc(100vh - (var(--size-gap-main-double) * 2 + var(--size-gap-main-double) + 2.3em + 1em)); 
}

#page-product .asideOptions > li {
	border: 1px solid rgba(0,0,0,.1);
	padding: 1em;
	border-radius: 3px;
	margin-bottom: 1em;
	transition: .05s;
	position: relative;
}
#page-product .asideOptions > li a:not(.moreInfos a) {
	text-decoration: none;
	opacity: 1 !important;
	display: block;
}
#page-product .asideOptions > li.selected {
	border-color: var(--color-main-high);
}
#page-product .asideOptions > li.selected::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid var(--color-main-high);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#page-product .asideOptions > li:not(.selected):hover {
	border-color: var(--color-primary-40);
}
#page-product .asideOptions > li:not(.selected):hover::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid var(--color-primary-40);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#page-product .asideOptions .optionTitle {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: 1.11em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 0.5em;
}
#page-product .asideOptions .optionTitle:has(+ .optionDescription .sizeText) {
	margin-bottom: 0;
}

#page-product .asideOptions .optionTitle img {
	width: 1em;
	height: auto;
}
#page-product .asideOptions .optionIllustration {
	display: flex;
	gap: .5em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
#page-product .asideOptions .optionDescription {
	font-size: .88em;
}
#page-product .asideOptions .sizeText {
	margin-bottom: .5em;
}
#page-product .asideOptions .optionDescription ul {
	font-size: .88em;
}
#page-product .asideOptions .optionDescription li {
	margin-bottom: 0.25em;
}
#page-product .asideOptions .optionDescription li .name {
	font-weight: 700;
}
#page-product .asideOptions .moreInfos {
	display: flex;
	justify-content: flex-end;
	font-size: .9em;
	margin-top: 0.5em;
}
#page-product .asideOptions .moreInfos a {
	display: block;
	padding: .5em 0;
}

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

}	
/* MD */
@media (max-width: 991px) {
	#page-product .asideTitle {
		font-size: 1.2em;
	}
	#page-product .asideOptions .optionTitle {
		font-size: 1em;
	}
	#page-product .asideOptions > li {
		padding: 0.75em;	
	}
	#page-product .asideOptions .optionDescription {
		font-size: .85em;
	}
	
}
/* SM */
@media (max-width: 767px) {

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

}

/* tarifs */
#asidePricesDelaySelection {
	margin-bottom: 1em;
}
#asidePricesDelaySelection .field {
	display: flex;
	flex-direction: column;
	margin-bottom: .5em;
}
#asidePricesDelaySelection label {
	font-weight: 700;
	color: var(--color-main-medium);
	font-size: 1rem;
	order: -1;
	position: relative;
	top: unset;
	left: unset;
	padding: 0;
}
#asidePricesDelaySelection select {
	font-size: .8em;
}
#asidePricesDelayExplanations {
	font-size: .8em;
}
#asidePricesDelayExplanations .subInfos {
	font-size: .8em;
}

#asidePricesType {
	display: flex;
	justify-content: flex-end;
	font-size: .75em;
	margin-bottom: .5em;
}
#asidePricesType input[type='radio'] {
	--form-size-radio: 16px;
}
#asidePricesType label {
	padding-left: 0.5em;
}
#asidePrices table {
	width: 100%;
	font-size: .8em;
	margin-bottom: 2em;
}
#asidePrices :is(th,td) {
	text-align: center;
}
#asidePrices thead tr {
	border-bottom: 1px solid rgba(0,0,0,.6);
}
#asidePrices thead th {
	padding-bottom: 0.5em;
}
#asidePrices tbody tr:nth-of-type(even) {
	background: rgba(0,0,0,.04);
}
#asidePrices tbody tr:hover {
	background: rgba(0,0,0,.1);
	transition: .1s;
}
#asidePrices td {
	padding: .5em;
}
#asidePricesReinsurance {
	margin-bottom: 1em;
}
#asidePricesReinsurance > * {
	display: flex;
	align-items: center;
	gap: .75em;
	color: var(--color-main-high);
}
#asidePricesReinsurance > div > span {
	font-size: .8em;
	font-weight: 500;
}



/*----------  FAQ  ----------*/
#page-product .faqSection {
	background: #f7f7f7;
	padding: 1.5em 0;
}
#page-product .faqSection .description {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 1em;
}
#page-product .faqSection .actions {
	display: flex;
	justify-content: center;
}
/* MD */
@media (max-width: 991px) {
	#page-product .faqSection .description {
		font-size: 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-product .faqSection .description span {
		display: block;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-product .faqSection .description {
		font-size: .9em;
	}
}


/*----------  Modale choix méthode de personnalisation  ----------*/

#chooseCustomizationMethodModal .container {
	width: var(--size-container);
	max-width: unset;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#chooseCustomizationMethodModal .content {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
	text-align: center;
}
#chooseCustomizationMethodModal .customizationMethod a {
	text-decoration: none;
}
#chooseCustomizationMethodModal .customizationMethod {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#chooseCustomizationMethodModal .customizationMethod .title {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-main-high);
	margin: .5em 0 .25em;
}
#chooseCustomizationMethodModal .customizationMethod .arguments {
	font-size: .88em;
	margin-bottom: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
}
#chooseCustomizationMethodModal :is(#themesCustomizationMethod,#freeCreationCustomizationMethod) .arguments > span {
	color: var(--color-primary-40);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	
}
#chooseCustomizationMethodModal :is(#themesCustomizationMethod,#freeCreationCustomizationMethod) .arguments > span span {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary-40);
	color: white;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	line-height: 1em;
	font-size: 1.5em;
	padding-bottom: 0.15em;
}
#chooseCustomizationMethodModal .customizationMethod .btn {
	font-size: .95em;
}
#chooseCustomizationMethodModal :is(#themesCustomizationMethod,#freeCreationCustomizationMethod) {
	border: 1px solid rgba(0,0,0,.2);
	padding: 2.3em;
	border-radius: .7em;
	transition: .10s;
	cursor: pointer;
}
#chooseCustomizationMethodModal :is(#themesCustomizationMethod,#freeCreationCustomizationMethod):hover {
	border-color: var(--color-secondary-40);
	outline: 1px solid var(--color-secondary-40);
}
#chooseCustomizationMethodModal :is(#themesCustomizationMethod,#freeCreationCustomizationMethod):hover :is(.title,.arguments) {
	opacity: .8;
}
/* adaptation le temps de la désactivation des thèmes */ 
#chooseCustomizationMethodModal:not(:has(#themesCustomizationMethod)) #freeCreationCustomizationMethod {
	grid-column: auto / span 2;
}
#chooseCustomizationMethodModal #graphicDesignerCustomizationMethod {
	grid-column: auto / span 2;
}
#chooseCustomizationMethodModal #graphicDesignerCustomizationMethod .illustration {
	display: flex;
	gap: 1em;
}
#chooseCustomizationMethodModal #graphicDesignerCustomizationMethod .illustration img {
	width: 2.5em;
}
/* MD */
@media (max-width: 991px) {
	#chooseCustomizationMethodModal :is(#themesCustomizationMethod, #freeCreationCustomizationMethod) {
		padding: 1.5em;
	}
}
/* SM */
@media (max-width: 767px) {
	#chooseCustomizationMethodModal :is(#themesCustomizationMethod, #freeCreationCustomizationMethod) {
		padding: 1em;
	}
	#chooseCustomizationMethodModal .customizationMethod .title {
		font-size: 1em;
	}
	#chooseCustomizationMethodModal .customizationMethod .arguments {
		margin-bottom: 1em;
		font-size: .75em;
	}
	#chooseCustomizationMethodModal .customizationMethod .btn {
		font-size: .88em;
	}
}
/* XS */
@media (max-width: 575px) {

}


/*----------  Modate alternative aux devis  ----------*/
#quoteAlternative .container > .content {
	display: flex;
	flex-direction: column;
	gap: 1em;
}
#quoteAlternative .container > .content > div {
	display: flex;
	gap: 2em;;
}
#quoteAlternative .illustration {
	font-size: 2.5em;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .25em;
	color: rgba(0,0,0,.5);
}
#quoteAlternative .illustration :is(i:nth-of-type(1), i:nth-of-type(3)) {
	background: rgba(0,0,0,.05);
	padding: .35em;
	border-radius: 50%;
}
#quoteAlternative .illustration .hio-arrow-small-right {
	font-size: .65em;
}
#quoteAlternative .content .content {
	flex: 2;
}
#quoteAlternative .content .title {
	font-weight: 700;
	text-align: center;
}
#quoteAlternative .arguments {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	color: var(--color-primary-40);
	font-weight: 700;
}
#quoteAlternative .arguments span {
	color: white;
	background: var(--color-primary-40);
	width: 1em;
	height: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1.2em;
}
#quoteAlternative .description {
	font-size: .85em;;
	margin-top: 1em;
}
#quoteAlternative #instantQuoteChoice {
	border: 1px solid rgba(0,0,0,.2);
	padding: 1em;
	border-radius: .7em;
	transition: .10s;
	cursor: pointer;
	transition: .15s;
}
#quoteAlternative #instantQuoteChoice:hover {
	border-color: var(--color-primary-40);
	outline: 1px solid var(--color-primary-40);
}
#quoteAlternative #instantQuoteChoice ul {
	counter-reset: listCounter;
}
#quoteAlternative #instantQuoteChoice ul li {
	counter-increment: listCounter;
	display: flex;
	gap: .5em;
	margin-bottom: .5em;
}
#quoteAlternative #instantQuoteChoice ul li::before {
	content: counter(listCounter);
	color: rgba(0,0,0,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.3);
	width: 1.5em;
	min-width: 1.5em;
	height: 1.5em;
	font-size: .75em;
	border-radius: 50%;
	color: white;
}
/* SM */
@media (max-width: 767px) {
	#quoteAlternative .illustration {
		display: none;
	}
}

/*----------  Modale ajout produit devis  ----------*/
#quoteConfigureProduct .mainImage img {
	max-width: 10em;
}
#quoteConfigureProduct .content {
	min-width: min(40em,100%);
	display: flex;
	gap: 1em;
}
#quoteConfigureProduct .hidden {
	display: none;
}
#quoteConfigureProduct .productInfos {
	margin-bottom: 1em;
}
#quoteConfigureProduct .productInfos > div {
	display: flex;
	gap: .5em;
	font-size: .85em;
	margin-bottom: 0.25em;
}
#quoteConfigureProduct .productInfos > div .title {
	font-weight: 700;
}
#quoteConfigureProduct :is(select,input[type='text'],textarea),
#quoteConfigureProduct .field input:placeholder-shown:not(:focus) ~ label {
	font-size: .85em;
}
#quoteConfigureProduct .printingColor {
	margin-bottom: 1em;
}
#quoteConfigureProduct .serigraphyPrintingColorList {
	display: flex;
	gap: .75em;
	flex-wrap: wrap;
}
#quoteConfigureProduct .serigraphyPrintingColorList li {
	border-radius: 3px;
	padding: 3px;
	cursor: pointer;
	transition: .10s;
	outline: 2px solid transparent;
}
#quoteConfigureProduct .serigraphyPrintingColorList li.selected {
	outline-color: black;
}
#quoteConfigureProduct .serigraphyPrintingColorList .colorSample {
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.03);
}
#quoteConfigureProduct .serigraphyPrintingColorList .colorInfos {
	display: none;
}
#quoteConfigureProduct .serigraphyPrintingColorMoreInfos {
	font-size: .75em;
}
#quoteConfigureProduct .commentFieldExplanation {
	font-size: .88em;
	margin-top: 0.5em;
	margin-bottom: .5em;
}
/* SM */
@media (max-width: 767px) {
	#quoteConfigureProduct .mainImage {
		display: none;
	}
	#quoteConfigureProduct .actions {
		padding-bottom: 5em;
	}
}


/*----------  Modale dernier ajout devis  ----------*/
#quoteConfigureProduct .container {
	max-width: min(40em,100%);
}
#quoteConfigureProductLastStep .description {
	text-align: center;
	margin-bottom: 2em;
}
#quoteConfigureProductLastStep .confirmation {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-alert-success);
	padding: 1em;
	margin-bottom: 1em;
	position: relative;
	font-weight: 700;
}
#quoteConfigureProductLastStep .confirmation::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-alert-success);
	
	opacity: .1;
}
/* XS */
@media (max-width: 575px) {
	#quoteConfigureProductLastStep .actions {
		flex-direction: column;
	}
	#quoteConfigureProductLastStep .actions > * {
		width: 100%;
	}
}

/*=============================================
=            Techniques            =
=============================================*/

/*----------  Introduction  ----------*/
.techniqueIntroduction {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
	padding-top: 2em;
	padding-bottom: 2em;
}
.techniqueIntroduction .illustration {
	display: flex;
	justify-content: center;
	gap: 1em;
}
.techniqueIntroduction .illustration img {
	width: 100%;
	height: auto;
	opacity: 0;
	transition: all .5s ease-out;
	transform: scale(.9) translateY(-15px);
}
.techniqueIntroduction.inView .illustration img {
	opacity: 1;
	transform: scale(1) translateY(0);
}
/* LG */
@media (max-width: 1199px) { 
	.techniqueIntroduction {
		grid-template-columns: 3fr 2fr;
	}
	
}	
/* MD */
@media (max-width: 991px) {
	.techniqueIntroduction {
		grid-template-columns: 3fr 1fr;
	}
	.techniqueIntroduction .illustration {
		flex-direction: column;
		align-items: center;
	}	
	.techniqueIntroduction .illustration  img {
		width: 7em;
	}
}
/* SM */
@media (max-width: 767px) {
	.techniqueIntroduction {
		grid-template-columns: 1fr;
		font-size: .88em;
	}
	.techniqueIntroduction .illustration {
		flex-direction: row;
	}
	.techniqueIntroduction .illustration  img {
		width: 9em;
	}
}


/*----------  Etapes  ----------*/

/* MD */
@media (max-width: 991px) {
	.techniqueSteps.cmsSteps ul {
		flex-direction: column;
		margin-top: 2em;
	}
	.techniqueSteps.cmsSteps ul li {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: .5em 2em;
	}
	.techniqueSteps.cmsSteps ul li .illustration {
		grid-row: auto / span 2;
		align-self: center;
	}
}
/* SM */
@media (max-width: 767px) {
	.techniqueSteps.cmsSteps ul li {
		display: flex;
	}
	.techniqueSteps.cmsSteps ul li .illustration {
		order: 3;
		margin-top: 1em;
	}
	.techniqueSteps.cmsSteps ul li .illustration img {
		max-width: 18em;
	}
}
/* XS */
@media (max-width: 575px) {
	.techniqueSteps.cmsSteps {
		padding: 1.5em 0;
	}
}

/*----------  Avantages  ----------*/
.techniqueAdvantages {
	padding-top: 2em;
	padding-bottom: 2em;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.techniqueAdvantages h2 {
	margin-bottom: 1em;
}
.techniqueAdvantages ul {
	font-size: .88em;
	max-width: 67%;
}
/* LG */
@media (max-width: 1199px) { 
	.techniqueAdvantages ul {
		max-width: 80%;
	}
}	
/* MD */
@media (max-width: 991px) {
	.techniqueAdvantages ul {
		max-width: 100%;
	}
}


/*----------  Portfolio  ----------*/
.techniquePortfolio {
	background: rgba(0,0,0,.02);
	padding: 2em 0;
}

/*----------  Description longue  ----------*/
.techniqueLongDescription {
	background: #fafafa;
}


/*----------  CTA  ----------*/
.techniqueCTASection {
	padding-top: 2em;
	padding-bottom: 2em;
	text-align: center;
}
.techniqueCTASection h2 {
	margin-bottom: 1em;
}
.techniqueCTASection .actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	
}
.techniqueCTASection .actions .btn {
	font-size: .95em;
	min-width: 20em;;
}
/* MD */
@media (max-width: 991px) {
	.techniqueCTASection {
		font-size: .9em;
	}
}

/*----------  Sérigraphie  ----------*/
#techniqueSerigraphyHeader {
	background-image: url('images/techniqueSerigraphyBg.jpg');
}


#techniqueSerigraphyPrintColors {
	padding: 2em 0 3em;
	background: #f0f0f0;
}
#techniqueSerigraphyPrintColors h2 {
	text-align: center;
	margin-bottom: 1em;
}
.serigraphyPrintingColorList {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--size-gap-main-double);
}
.serigraphyPrintingColorList li {
	background: white;
}
.serigraphyPrintingColorList .colorSample {
	height: 3.7em;
}
.serigraphyPrintingColorList .colorSample.color-white {
	background-color: #f9f9f9 !important;;

}
.serigraphyPrintingColorList .colorInfos {
	font-size: .83em;
	padding: .5em 1em 1em;
}
.serigraphyPrintingColorList .colorName {
	font-weight: 700;
	text-transform: capitalize;
}
.serigraphyPrintingColorList .colorReference {
	font-size: .86em;
}
#toggleProductPrintingColorList {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .5em;
}
#toggleProductPrintingColorList span {
	text-decoration: underline;
}
.serigraphyPrintingColorMoreInfos {
	margin-top: 1em;
	font-size: .85em;
}
.serigraphyPrintingColorMoreInfos p {
	margin-bottom: 0.5em;
}
.serigraphyPrintingColorMoreInfos p a {
	text-decoration: underline;
}
.serigraphyPrintingColorMoreInfos p a:hover {
	text-decoration: none;
}

aside #toggleProductPrintingColorList + div {
	display: none;
}
aside:has(#productPrintingColorList + div.visible) #toggleProductPrintingColorList i::before {
	content: "\e969";
}
aside #toggleProductPrintingColorList + div.visible {
	display: block;
}
aside .serigraphyPrintingColorList {
	grid-template-columns: repeat(3, 1fr);
	gap: .5em var(--size-gap-main);
	margin-top: 1em;
}
aside .serigraphyPrintingColorList .colorInfos {
	font-size: .95em;
}
aside .serigraphyPrintingColorList .colorSample {
	height: 3em;
}
aside .serigraphyPrintingColorList .colorInfos {
	padding: .5em 0 0;
}

/* LG */
@media (max-width: 1199px) { 
	#techniqueSerigraphyPrintColors .serigraphyPrintingColorList {
		grid-template-columns: repeat(5, 1fr);
	}
	#techniqueSerigraphyPrintColors .serigraphyPrintingColorList .colorSample {
		height: 3.25em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#techniqueSerigraphyPrintColors .serigraphyPrintingColorList {
		grid-template-columns: repeat(4, 1fr);
	}
	.serigraphyPrintingColorList li {
		font-size: .9em;
	}
}
/* SM */
@media (max-width: 767px) {
	#techniqueSerigraphyPrintColors .serigraphyPrintingColorList {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* XS */
@media (max-width: 575px) {
	#techniqueSerigraphyPrintColors .serigraphyPrintingColorList {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*----------  Gravure  ----------*/
#techniqueEngravingHeader {
	background-image: url('images/techniqueEngravingBg.jpg');
}



/*=============================================
=            Nos références            =
=============================================*/
#referencesMain .section {
	margin-bottom: 4em;
}
#referencesIntroduction {
	margin-top: 1em;
}
#referencesMain .section:not(.pageLongDescription) h2 {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 1em;
}
:is(#referencesCustomers,#referencesCertifications) ul {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: var(--size-gap-main-double);
	align-items: center;
	justify-items: center;
}
:is(#referencesCustomers,#referencesCertifications) ul img {
	max-width: 100%;
	height: auto;
}
#referencesCustomers 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);
}
#referencesCustomers.inView li img {
	opacity: 1; 
	transform: translateY(0);
	max-width: 100%;
}

#referencesTestimonies .testimony {
	display: flex;
	gap: var(--size-gap-main-double);
}
#referencesTestimonies .testimony > * {
	flex: 1;
}
#referencesTestimonies .testimony .content {
	border-left: .66em solid rgba(0,0,0,.1);
	padding-left: 1.2em;
}
#referencesTestimonies .testimony .name {
	font-weight: 700;
}
#referencesTestimonies .testimony .logo {
	margin-top: 1em;
}
#referencesTestimonies .illustration img {
	max-width: 100%;
}
#referencesMain .pageLongDescription h2 {
	font-weight: 700;
}

/* MD */
@media (max-width: 991px) {
	#referencesMain .section {
		margin-bottom: 2em;
	}
	:is(#referencesCustomers,#referencesCertifications) ul {
		grid-template-columns: repeat(5,1fr);
	}
	#referencesTestimonies .testimony .content {
		flex: 2;
	}
	
}
/* SM */
@media (max-width: 767px) {
	:is(#referencesCustomers,#referencesCertifications) ul {
		grid-template-columns: repeat(4,1fr);
	}
}
/* XS */
@media (max-width: 575px) {
	:is(#referencesCustomers,#referencesCertifications) ul {
		grid-template-columns: repeat(3,1fr);
	}
	#referencesTestimonies .testimony {
		flex-direction: column;
	}
	
	#referencesTestimonies .testimony > * {
		flex: 1 !important;
	}
	#referencesTestimonies .illustration {
		display: flex;
		justify-content: center;
	}
	#referencesTestimonies .illustration img {
		max-width: 12em;
	}
}


/*=============================================
=            Tarifs            =
=============================================*/

/*----------  Comment obtenir un tarif  ----------*/
#pricesHowToGetPrice h2 {
	font-weight: 700;
}

/* MD */
@media (max-width: 991px) {
	#pricesHowToGetPrice.cmsSteps ul {
		flex-direction: column;
		gap: 1em;
	}
	#pricesHowToGetPrice.cmsSteps li {
		display: grid;
		grid-template-columns: 1fr 3fr;
		gap: 0 1em;
	}
	#pricesHowToGetPrice.cmsSteps li .illustration {
		grid-row: auto / span 2;
	}
}
/* XS */
@media (max-width: 575px) {
	#pricesHowToGetPrice.cmsSteps li {
		display: flex;
		gap: .5em;
	}
	#pricesHowToGetPrice.cmsSteps li .illustration {
		display: flex;
		justify-content: center;
		order: 3;
	}
	#pricesHowToGetPrice.cmsSteps li .illustration img {
		max-width: 10em;
	}
}

/*----------  Facteurs influençant le prix  ----------*/
#pricesFactors {
	background: linear-gradient(0deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,0) 100%);
}
#pricesFactors h2 {
	margin-bottom: 1.5em;
	font-weight: 700;
}
#pricesFactors .sectionContainer > ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
	margin-bottom: 2em;
}
#pricesFactors li .description {
	font-size: .88em;
	margin-bottom: 1em;
}
#pricesFactors .conclusion {
	text-align: center;
}
#pricesFactors .conclusion .actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: 1em;
}
#pricesFactors .conclusion .actions .btn {
	font-size: .95em;
}
/* SM */
@media (max-width: 767px) {
	#pricesFactors .sectionContainer > ul {
		grid-template-columns: 1fr;
		gap: 1em;
	}
	#pricesFactors .conclusion .actions {
		flex-direction: column;
	}
}

/*=============================================
=            Demande de devis            =
=============================================*/

/*----------  avantages  ----------*/
#quoteRequestInstantQuoteAdvantages {
	background: #f7f7f7;
}
#quoteRequestInstantQuoteAdvantages h2 {
	font-weight: 700;
}
#quoteRequestInstantQuoteAdvantages .introduction {
	text-align: center;
	margin-bottom: 2em;
}
#quoteRequestInstantQuoteAdvantages .advantages {
	display: flex;
	gap: 1em;
}
#quoteRequestInstantQuoteAdvantages .advantages > *{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#quoteRequestInstantQuoteAdvantages .advantages .illustration {
	flex: 5;
}
#quoteRequestInstantQuoteAdvantages .advantages .illustration img {
	max-width: 100%;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
}
#quoteRequestInstantQuoteAdvantages .advantages ul {
	flex: 7
}
/* LG */
@media (max-width: 1199px) { 
	#quoteRequestInstantQuoteAdvantages .advantagesList .title {
		font-size: 1.2em;
	}
}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {
	#quoteRequestInstantQuoteAdvantages .advantages {
		flex-direction: column;
	}
	#quoteRequestInstantQuoteAdvantages .advantages .illustration {
		order: 2
	}
	#quoteRequestInstantQuoteAdvantages .advantages .illustration img {
		max-width: 10em;
	}
}

/*----------  process devis instantané  ----------*/
#quoteRequestInstantQuoteRequest {
	background: white;
}
#quoteRequestInstantQuoteRequest .illustration {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}
#quoteRequestInstantQuoteRequest .illustration i {
	font-size: 6em;
	color: var(--color-main-disabled);
	margin-bottom: 1rem;
}

#quoteRequestInstantQuoteRequest.cmsSteps li {
	gap: 0;
}
#quoteRequestInstantQuoteRequest li .title {
	align-items: flex-start;
	min-height: 3em;
}
#quoteRequestInstantQuoteRequest li .title span {
	display: block;
	margin-top: -0.15em;
}
/* LG */
@media (max-width: 1199px) { 
	#quoteRequestInstantQuoteRequest .illustration i {
		font-size: 5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#quoteRequestInstantQuoteRequest.cmsSteps ul {
		display: grid;
		grid-template-columns: 1fr;
		
	}
	#quoteRequestInstantQuoteRequest.cmsSteps ul li {
		display: grid;
		grid-template-columns: 1fr 4fr;
		gap: .5em;
	}
	#quoteRequestInstantQuoteRequest .illustration {
		grid-row: auto / span 2;
		margin-top: 0;
		margin-bottom: 0;
		align-self: start;
	}
	#quoteRequestInstantQuoteRequest .illustration i {
		margin-bottom: 0;
		font-size: 3em;
	}
	#quoteRequestInstantQuoteRequest li .title {
		min-height: unset;
		padding-top: .5em;
	}
}


/*----------  Process devis classique  ----------*/
#quoteRequestStandardQuoteRequest.cmsSteps li {
	margin-bottom: 1em;
}
/* LG */
@media (max-width: 1199px) { 
	#quoteRequestStandardQuoteRequest.cmsSteps li .title {
		min-height: 3em;
	}
	
}	
/* MD */
@media (max-width: 991px) {
	#quoteRequestStandardQuoteRequest.cmsSteps ul {
		flex-direction: column;
		gap: 1em;
	}
	#quoteRequestStandardQuoteRequest.cmsSteps li {
		gap: .5em;
	}
	#quoteRequestStandardQuoteRequest.cmsSteps li > * {
		flex: unset;
	}
	#quoteRequestStandardQuoteRequest.cmsSteps li .title {
		min-height: unset;
	}
}
/* SM */
@media (max-width: 767px) {

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

}

/*=============================================
=            Revendeurs            =
=============================================*/
#resellersMain table {
	width: 100%;
	font-size: .85em;
}
#resellersMain table {
	border-collapse: collapse;
	margin-bottom: 2em;
}
#resellersMain table :is(th, td) {
	padding: .5em;
	border: 1px solid #ccc;
}
#resellersMain table .reduction {
	text-align: center;
}
#resellersMain table .condition {
	text-align: center;
}
#resellersMain table tbody tr:nth-of-type(odd) {
	background: rgba(0,0,0,.03);
}
#resellersBATTable th {
	width: 25%;
}
#resellersMain table .price {
	white-space: pre;
}


/*=============================================
=            Réalisations            =
=============================================*/

#realisationsMain .realisationsOutroduction {
	padding-top: 4em;
	padding-bottom: 4em;
}
#realisationsMain .realisationsOutroduction .actions {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}
#realisationsMain .realisationsOutroduction .actions .btn {
	font-size: .95em;
}


/*=============================================
=            Comment personnaliser son verre            =
=============================================*/
#howToCustomizeHeader {
	background-image: url('images/howToCustomizeBg.jpg');
}
#howToCustomizeMain > * {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
}

/*----------  Introduction  ----------*/
#howToCustomizeIntroduction {
	display: flex;
	gap: var(--size-gap-main-double);
}
#howToCustomizeIntroduction > * {
	flex: 1;
}
#howToCustomizeIntroduction .actions {
	margin-top: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
}
#howToCustomizeIntroduction .actions > * {
	flex: 1;
}
#howToCustomizeIntroduction .actions > * .btn {
	width: 100%;
}
#howToCustomizeIntroduction .illustrations {
	display: flex;
	gap: var(--size-gap-main-double);
}
#howToCustomizeIntroduction .illustrations > * {
	flex: 1;
	text-align: center;
}
#howToCustomizeIntroduction .illustrations img {
	max-width: 100%;
	margin-bottom: 0.5em;

	opacity: .1;
	transition: .5s;
	transform: translateY(-10px);
}
#howToCustomizeIntroduction.inView .illustrations img {
	opacity: 1; 
	transform: translateY(0);
}

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

}	
/* MD */
@media (max-width: 991px) {
	#howToCustomizeIntroduction {
		flex-direction: column;
		flex: unset;
		padding-bottom: 1em;
		font-size: .88em;
	}
	#howToCustomizeIntroduction .illustrations img {
		max-width: 10em;
	}
}
/* SM */
@media (max-width: 767px) {

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

}

/*----------  méthode de personnalisation  ----------*/
#howToCustomizeMain .themeSection {
	background: #fafafa;
}
#howToCustomizeMain .customizationMethod h2 {
	text-align: center;
	margin-bottom: 0;
}
#howToCustomizeMain .customizationMethod .header {
	margin-bottom: 1em;
}
#howToCustomizeMain .customizationMethod .header > div {
	font-weight: 700;
	text-align: center;
}
#howToCustomizeMain .customizationMethod .content {
	display: grid;
	grid-template-columns: 3fr 2fr;
	align-items: center;
	gap: var(--size-gap-main-double);
}
#howToCustomizeMain .customizationMethod .illustration img {
	max-width: 100%;
	opacity: .1;
	transform: scale(.75);
	transition: 1s;
}
#howToCustomizeMain .customizationMethod.inView .illustration img {
	opacity: 1;
	transform: scale(1);
}
#howToCustomizeMain .customizationMethod .actions {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}
#howToCustomizeMain .customizationMethod .actions .btn {
	font-size: .95em;
}
/* SM */
@media (max-width: 767px) {
	#howToCustomizeMain .customizationMethod {
		padding: 1.5em 0;
	}
	#howToCustomizeMain .customizationMethod .content {
		grid-template-columns: 1fr;
		gap: 1em;
	}
	#howToCustomizeMain .customizationMethod .description {
		font-size: .88em;
	}
	#howToCustomizeMain .customizationMethod .illustration {
		grid-row: 1/2;
		justify-self: center;
	}
	#howToCustomizeMain .customizationMethod .illustration img {
		width: 15em;
	}
	
}
/* XS */
@media (max-width: 575px) {
	
}


/*----------  Mode graphiste  ----------*/
#howToCustomizeMain .graphicDesignerMode {
	background: #fcf8f8;
	margin: 2em 0;
	padding: 1.5em calc(var(--size-container)  / 12) 2em;
	border-radius: 1em;
}
#howToCustomizeMain .graphicDesignerMode h2 {
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 1em;
}
#howToCustomizeMain .graphicDesignerMode .content {
	grid-template-columns: 1fr 4fr;
}
#howToCustomizeMain .graphicDesignerMode .illustration {
	min-width: calc(2 * var(--size-container)  / 12 ) ;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
}
#howToCustomizeMain .graphicDesignerMode .illustration img {
	width: 3.5em;
	max-width: 45%;
}
#howToCustomizeMain .graphicDesignerMode .description {
	font-size: .88em;
}
/* LG */
@media (max-width: 1199px) { 
	#howToCustomizeMain .graphicDesignerMode {
		padding: 1.5em 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#howToCustomizeMain .graphicDesignerMode .content {
		grid-template-columns: 1fr;
	}
}

/*----------  CTA  ----------*/
#howToCustomizeCTASection {
	background: #fafafa;
}
#howToCustomizeCTASection .sectionContainer {
	display: flex;
	gap: var(--size-gap-main-double);
}
#howToCustomizeCTASection .sectionContainer > * {
	flex: 1;
}
#howToCustomizeCTASection ul {
	display: flex;
	gap: .25em .5em;
	flex-wrap: wrap;
}
#howToCustomizeCTASection li:not(:last-of-type)::after {
	content: "-";
	padding-left: 0.25em;
}
#howToCustomizeCTASection a {
	text-decoration: none;
}
#howToCustomizeCTASection a:hover {
	text-decoration: underline;
}
#howToCustomizeMain .pageLongDescription {
	background: #fafafa;
}
/* MD */
@media (max-width: 991px) {
	#howToCustomizeCTASection {
		padding: 1.5em 0;
	}
	#howToCustomizeCTASection .sectionContainer {
		flex-direction: column;
	}
	#howToCustomizeCTASection h2 {
		font-size: 1em;
		font-weight: 700;
	}
}


/*=============================================
=            Notre entreprise            =
=============================================*/
#companyHeader {
	background-image: url('images/companyBg.jpg');
}
#companyMain > * {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
}
/* LG */
@media (max-width: 1199px) { 
	#companyMain > * {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
}


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

/* MD */
@media (max-width: 991px) {
	#companyMain .companyIntroduction {
		font-size: .88em;
	}
}


/*----------  Marques  ----------*/
#companyMain .brands h2 {
	text-align: center;
	margin-bottom: 1em;
}
#companyMain .brands > ul > li {
	display: flex;
	gap: var(--size-gap-main-double);
}
#companyMain .brands > ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 4em var(--size-gap-main-double);
}
#companyMain .brands .illustration {
	flex: 1;

	opacity: 0;
	transition:
		opacity .5s var(--transition-cubic-bezier-1),
		transform .5s var(--transition-cubic-bezier-1);
	transform: translateY(-10px);
	transition-delay: .15s;
}
#companyMain .brands li.inView .illustration {
	opacity: 1; 
	transform: translateY(0);
}
#companyMain .brands .illustration a {
	display: flex;
	justify-content: center;
}
#companyMain .brands .illustration img {
	max-width: 100%;
	height: auto;
}
#companyMain .brands .infos {
	flex: 2;
}
#companyMain .brands .name {
	font-weight: 700;
	font-size: 1.2em;
}
#companyMain .brands .tagline {
	margin-bottom: 1em;
}
#companyMain .brands .description {
	font-size: .88em;
	margin-bottom: 1em;
}
#companyMain .brands .link {
	display: flex;
	align-items: center;
	gap: .5em;
}
/* LG */
@media (max-width: 1199px) { 
	#companyMain .brands .name {
		font-size: 1.1em;
	}
	#companyMain .brands .tagline {
		font-size: .88em;
	}
	#companyMain .brands .link {
		font-size: .95em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#companyMain .brands > ul {
		grid-template-columns: 1fr;
		gap: 3em 1em;
	}
	#companyMain .brands .infos {
		flex: 3;
	}
}
/* SM */
@media (max-width: 767px) {
	#companyMain .brands .infos {
		flex: 4;
	}
}
/* XS */
@media (max-width: 575px) {
	#companyMain .brands > ul > li {
		flex-direction: column;
	}
	#companyMain .brands > ul > li > * {
		flex: unset;
	}
	#companyMain .brands .illustration img {
		max-width: 10em;
		max-height: 8em;
	}
}


/*----------  Impression française + Valeurs et engagements  ----------*/
#companyMain .frenchPrinting {
	background: url('images/companyFrenchPrintingBg.jpg') center center no-repeat;
}
#companyMain .valuesAndCommitments {
	background: url('images/companyValuesAndCommitmentsBg.jpg') center center no-repeat;
}
#companyMain :is(.frenchPrinting,.valuesAndCommitments) {
	background-size: cover;
	padding: 3.5em 0;
	position: relative;
}
#companyMain :is(.frenchPrinting,.valuesAndCommitments) .sectionContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}
/* MD */
@media (max-width: 991px) {
	#companyMain :is(.frenchPrinting,.valuesAndCommitments)::after {
		content: '';
		background: white;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		opacity: .8;
		z-index: 1;
	}
	#companyMain :is(.frenchPrinting,.valuesAndCommitments) .sectionContainer {
		z-index: 2;
	}
}


/* impression française */
#companyMain .frenchPrinting .sectionContainer > div {
	grid-column: 2/3;
	transform: translateX(-1em);
	transition: 1s;
}
#companyMain .frenchPrinting.inView .sectionContainer > div {
	transform: translateX(0);
}
#companyMain .frenchPrinting h2 {
	position: relative;
	padding-bottom: .75em;
	margin-bottom: 1em;
}
#companyMain .frenchPrinting h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--color-gradient-french-flag);
}
#companyMain .frenchPrinting .description {
	margin-bottom: 1.5em;
}
#companyMain .frenchPrinting .actions .btn {
	font-size: .95em;
}
/* LG */
@media (max-width: 1199px) { 
	#companyMain .frenchPrinting {
		background-position-x: -10em;
		background-color: #fcfcfc;
	}
	#companyMain .frenchPrinting .sectionContainer {
		grid-template-columns: 2fr 3fr;
	}
	#companyMain .frenchPrinting .actions .btn {
		width: 100%;
		font-size: .85em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#companyMain .frenchPrinting {
		background-position-x: 0;
		font-size: .88em;
	}
	
	#companyMain .frenchPrinting .sectionContainer {
		grid-template-columns: 1fr;
	}
	#companyMain .frenchPrinting h2 {
		font-weight: 700;
	}
}
/* XS */
@media (max-width: 575px) {
	#companyMain .frenchPrinting::after {
		opacity: .9;
	}
}

/* valeurs */
#companyMain .valuesAndCommitments .sectionContainer {
	grid-template-columns: 3fr 2fr;
}
#companyMain .valuesAndCommitments .sectionContainer > div {
	transform: translateX(1em);
	transition: 1s;
}
#companyMain .valuesAndCommitments.inView .sectionContainer > div {
	transform: translateX(0);
}
#companyMain .valuesAndCommitments h2 {
	text-align: center;
	margin-bottom: 1em;
}
#companyMain .valuesAndCommitments ul {
	font-size: .88em;
	text-align: center;
	margin-bottom: 2em;
}
#companyMain .valuesAndCommitments .certifications {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 2em;
}
#companyMain .valuesAndCommitments .certifications img {
	max-width: 9em;
	max-height: 5em;
}
/* LG */
@media (max-width: 1199px) { 

}	
/* MD */
@media (max-width: 991px) {
	#companyMain .valuesAndCommitments {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	#companyMain .valuesAndCommitments ul {
		margin-bottom: 0;
	}
	#companyMain .valuesAndCommitments .sectionContainer {
		grid-template-columns: 1fr;
	}
}


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

#companyMain .pageLongDescription {
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 100%);
}
#companyMain .pageLongDescription .actions {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}
#companyMain .pageLongDescription .btn {
	font-size: .95em;
}


/*=============================================
=            Qualité française            =
=============================================*/
#frenchQualityHeader {
	background: url('images/frenchQualityBg.jpg') center center no-repeat;
	background-size: cover;
}
#frenchQualityHeader h1 {
	font-size: 3.3em;
	margin-bottom: .5em;
	text-shadow: 0 0 10px rgba(0,0,0,.5);;
}
#frenchQualityMain h2 {
	font-weight: 700;
}
/* LG */
@media (max-width: 1199px) { 
	#frenchQualityHeader h1 {
		font-size: 2.75em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#frenchQualityHeader h1 {
		font-size: 2.5em;
	}
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityHeader h1 {
		font-size: 2em;
	}
}
/* XS */
@media (max-width: 575px) {
	#frenchQualityHeader h1 {
		font-size: 1.5em;
	}
}

/*----------  Introduction  ----------*/
#frenchQualityMain .frenchQualityIntroduction {
	display: flex;
	gap: var(--size-gap-main-double);
	padding-top: 3em;
	padding-bottom: 3em;
}
#frenchQualityMain .frenchQualityIntroduction > * {
	flex: 1;
}
#frenchQualityMain .frenchQualityIntroduction h2 {
	font-size: 1.2em;
}
#frenchQualityMain .frenchQualityIntroduction img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	opacity: 0;
	transform: scale(.85);
	transition: 1s;
}
#frenchQualityMain .frenchQualityIntroduction.inView img {
	opacity: 1;
	transform: scale(1);
}
/* MD */
@media (max-width: 991px) {
	#frenchQualityMain .frenchQualityIntroduction .description {
		flex: 2;
	}
	#frenchQualityMain .frenchQualityIntroduction img {
		height: 100%;
	}
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityMain .frenchQualityIntroduction {
		flex-direction: column;
		font-size: .88em;
	}
	#frenchQualityMain .frenchQualityIntroduction img {
		height: auto;
	}
}
/* XS */
@media (max-width: 575px) {
	#frenchQualityMain .frenchQualityIntroduction {
		padding-top: 1em;
		padding-bottom: 1em;
	}
}

/*----------  Atelier  ----------*/
#frenchQualityMain .frenchQualityWorkshop {
	background: url('images/frenchQualityWorkshopBg.jpg') center center no-repeat;
	background-size: cover;
	padding: 3em 0;
	position: relative;
}
#frenchQualityMain .frenchQualityWorkshop .sectionContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--size-gap-main-double);
	position: relative;
	z-index: 2;
}
#frenchQualityMain .frenchQualityWorkshop .sectionContainer > div {
	grid-column: 2/3;
	transform: translateX(-1em);
	transition: .75s;
}
#frenchQualityMain .frenchQualityWorkshop.inView .sectionContainer > div {
	transform: translateX(0);
}

#frenchQualityMain .frenchQualityWorkshop h2 {
	color: var(--color-primary-40);
	margin-bottom: 1em;
}
#frenchQualityMain .frenchQualityWorkshop .description {
	margin-bottom: 1.5em;
}
#frenchQualityMain .frenchQualityWorkshop ul {
	margin-top: 1em;
}
#frenchQualityMain .frenchQualityWorkshop li {
	display: flex;
	gap: .75em;
	margin-bottom: 1em;
}
#frenchQualityMain .frenchQualityWorkshop li::before {
	content: "\e964";
	color: var(--color-alert-success);
	font-size: 1.5em;

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'heroicons-outline' !important;
	display: inline-block;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-rendering: auto;
	white-space: normal;;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* LG */
@media (max-width: 1199px) { 
	#frenchQualityMain .frenchQualityWorkshop::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		opacity: .2;	
	}
	#frenchQualityMain .frenchQualityWorkshop .sectionContainer {
		grid-template-columns: 1fr 2fr;
	}
}	
/* MD */
@media (max-width: 991px) {
	#frenchQualityMain .frenchQualityWorkshop::after {
		opacity: .7;
	}
	#frenchQualityMain .frenchQualityWorkshop .sectionContainer {
		display: block;
	}
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityMain .frenchQualityWorkshop {
		font-size: .88em;
		padding: 1.5em 0;
	}
}

/*----------  Fournisseurs  ----------*/
#frenchQualityMain .frenchQualitySuppliers {
	padding-top: 3em;
	padding-bottom: 3em;
}
#frenchQualityMain .frenchQualitySuppliers h2 {
	text-align: center;
	margin-bottom: 1em;
}
#frenchQualityMain .frenchQualitySuppliers .introduction {
	margin-bottom: 3em;
}
#frenchQualityMain .frenchQualitySuppliers li {
	display: flex;
	gap: var(--size-gap-main-double);
	margin-bottom: 2em;
}
#frenchQualityMain .frenchQualitySuppliers li .illustration {
	flex: 1;
	opacity: 0;
	transform: translateY(-10px);
	transition: .5s;
}
#frenchQualityMain .frenchQualitySuppliers li.inView .illustration {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .2s;
}
#frenchQualityMain .frenchQualitySuppliers li .illustration img {
	width: 100%;
}
#frenchQualityMain .frenchQualitySuppliers li .content {
	flex: 3;
}
#frenchQualityMain .frenchQualitySuppliers li .title {
	font-weight: 700;
	color: var(--color-primary-40);
	font-size: 1.2em;
	margin-bottom: .75em;
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityMain .frenchQualitySuppliers {
		font-size: .88em;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
}
/* XS */
@media (max-width: 575px) {
	#frenchQualityMain .frenchQualitySuppliers li {
		flex-direction: column;
		gap: .5em;
	}
	#frenchQualityMain .frenchQualitySuppliers li .illustration {
		display: flex;
		justify-content: center;
	}
	#frenchQualityMain .frenchQualitySuppliers li .illustration img {
		width: 10em;
	}
	#frenchQualityMain .frenchQualitySuppliers li .title {
		margin-bottom: .25em;
	}
}

/*----------  Transparence  ----------*/
#frenchQualityMain .frenchQualityTransparency {
	background: url('images/frenchQualityTransparencyBg.jpg') center center no-repeat;
	background-size: cover;
	padding: 4em 0 2em;
	position: relative;
}
#frenchQualityMain .frenchQualityTransparency .sectionContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--size-gap-main-double);
	position: relative;
	z-index: 2;
}
#frenchQualityMain .frenchQualityTransparency .sectionContainer > div {
	transform: translateX(1em);
	transition: .75s;
}
#frenchQualityMain .frenchQualityTransparency.inView .sectionContainer > div {
	transform: translateX(0);
}
#frenchQualityMain .frenchQualityTransparency h2 {
	margin-bottom: 1em;
}
#frenchQualityMain .frenchQualityTransparency h3 {
	font-weight: 700;
	margin-bottom: .75em;
}
#frenchQualityMain .frenchQualityTransparency .description {
	margin-bottom: 2em;
}
/* LG */
@media (max-width: 1199px) { 
	#frenchQualityMain .frenchQualityTransparency {
		padding: 2.5em 0em 2em;
	}
	#frenchQualityMain .frenchQualityTransparency .sectionContainer {
		grid-template-columns: 2fr 1fr;	
	}
}	
/* MD */
@media (max-width: 991px) {
	#frenchQualityMain .frenchQualityTransparency {
		padding: 1.5em 0em 1em;
	}
	#frenchQualityMain .frenchQualityTransparency::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		opacity: .5;	
	}
	#frenchQualityMain .frenchQualityTransparency .sectionContainer {
		display: block;
	}
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityMain .frenchQualityTransparency {
		font-size: .88em;
	}
	#frenchQualityMain .frenchQualityTransparency::after {
		opacity: .7;
	}
}

/*----------  Avenir local  ----------*/
#frenchQualityMain .frenchQualityLocalFuture {
	background: url('images/frenchQualityLocalFutureBg.jpg') center center no-repeat;
	background-size: cover;
	padding: 5em 0;
	position: relative;
}
#frenchQualityMain .frenchQualityLocalFuture .sectionContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--size-gap-main-double);
	position: relative;
	z-index: 2;
}
#frenchQualityMain .frenchQualityLocalFuture .sectionContainer > div {
	grid-column: 2/3;
	transform: translateX(-1em);
	transition: .75s;
}
#frenchQualityMain .frenchQualityLocalFuture.inView .sectionContainer > div {
	transform: translateX(0);
}
/* LG */
@media (max-width: 1199px) { 
	#frenchQualityMain .frenchQualityLocalFuture {
		padding: 4em 0;
	}
	#frenchQualityMain .frenchQualityLocalFuture::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		opacity: .5;	
	}
	#frenchQualityMain .frenchQualityLocalFuture .sectionContainer {
		grid-template-columns: 1fr 2fr;
	}
}	
/* MD */
@media (max-width: 991px) {
	#frenchQualityMain .frenchQualityLocalFuture {
		padding: 2em 0;
	}
	#frenchQualityMain .frenchQualityLocalFuture::after {
		opacity: .85;	
	}
	#frenchQualityMain .frenchQualityLocalFuture .sectionContainer {
		display: block;
	}
	
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityMain .frenchQualityLocalFuture {
		font-size: .88em;
	}
}
/* XS */
@media (max-width: 575px) {

}

/*----------  Outroduction  ----------*/
#frenchQualityMain .frenchQualityOutroduction {
	padding-top: 4em;
	padding-bottom: 4em;
	text-align: center;
}
#frenchQualityMain .frenchQualityOutroduction .actions {
	margin-top: 2em;
}
#frenchQualityMain .frenchQualityOutroduction .btn {
	font-size: .95em;
}
/* LG */
@media (max-width: 1199px) { 
	#frenchQualityMain .frenchQualityOutroduction {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#frenchQualityMain .frenchQualityOutroduction {
		padding-top: 2em;
		padding-bottom: 2em;
	}
}
/* SM */
@media (max-width: 767px) {
	#frenchQualityMain .frenchQualityOutroduction {
		font-size: .88em;
	}
}
/* XS */
@media (max-width: 575px) {

}


/*=============================================
=            FAQ            =
=============================================*/

/*----------  Recherche  ----------*/
#faqMainSearch {
	width: calc(var(--size-container) * 9 / 12);
	margin: 0 auto;
}
#faqMainSearch .field {
	font-size: 1.5em;
	position: relative;
}
#faqMainSearch input {
	padding-right: 3.8em;
	position: relative;
	z-index: 11;
}
#faqMainSearch .hint {
	font-size: 1rem;
}
#faqMainSearch .suffix {
	font-size: 1.5em;
	top: .25em;
}
/* ! temp */
#faqMainSearch input:focus ~ #faqMainSearchResults {
	display: block;
}
#faqMainSearchResults {
	display: none;
	background: white;
	box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, .2);
	position: absolute;
	top: calc(2.37em + 1px);
	width: 100%;
	border: 1px solid rgba(0,0,0,.1);
	border-top: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	z-index: 10;
}
  
#faqMainSearchResults ul {
	font-size: 1rem;
}
#faqMainSearchResults li {
	padding: 1em 1.5em;
	border-bottom: 1px solid rgba(0,0,0,.1);
	display: flex;
	align-items: center;
	gap: 1em;;
	transition: .15s;
	cursor: pointer;;
}
#faqMainSearchResults li > span {
	flex: 1;
}
#faqMainSearchResults li:last-of-type {
	border-bottom: none;
}
#faqMainSearchResults li::after {
	content: "\e96b";

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'heroicons-outline' !important;
	display: inline-block;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-rendering: auto;
	white-space: normal;;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	margin-top: 0.15em;
}
#faqMainSearchResults li:hover {
	background: rgba(0,0,0,.05);
}

/* LG */
@media (max-width: 1199px) { 
	#faqMainSearch {
		width: var(--size-container);
	}	
	#faqMainSearch .field {
		font-size: 1.25em;
	}
}
/* XS */
@media (max-width: 575px) {
	#faqMainSearch .field {
		font-size: 1.15em;
	}
	#faqMainSearchResults ul {
		font-size: .88rem;
	}
}


/*----------  Catégories  ----------*/
#faqMainCategories {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: var(--size-gap-main-double);
}
#faqMainCategories > li {
	background: #f7f6f5;
	border-radius: 1em;
	padding: 1em 1em 2em;
}
#faqMainCategories .name a {
	display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 1.27em;
	color: var(--color-main-high);
	font-weight: 700;
	margin-bottom: 1em;
	text-decoration: none;
}
#faqMainCategories .name i {
	font-size: 3em;
	margin-bottom: 0.15em;
}
#faqMainCategories .subCategories li {
	margin-bottom: 0.5em;
	display: flex;
	gap: .5em;
}
#faqMainCategories .subCategories li::before {
	content: "\e96b";

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'heroicons-outline' !important;
	display: inline-block;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-rendering: auto;
	white-space: normal;;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	margin-top: 0.15em;
}
#faqMainCategories .subCategories li a {
	text-decoration: none;
}
#faqMainCategories .subCategories li a:hover {
	text-decoration: underline;
}
/* LG */
@media (max-width: 1199px) { 
	#faqMainCategories .name a {
		font-size: 1em;
	}
	#faqMainCategories .name i {
		font-size: 2.75em;
	}
	#faqMainCategories .subCategories {
		font-size: .88em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#faqMainCategories {
		grid-template-columns: repeat(2,1fr);
		gap: var(--size-gap-main);
	}
	#faqMainCategories > li {
		display: flex;
		gap: 1em;
		padding: 2em;
	}
	#faqMainCategories .name a {
		width: 4em;
	}
}
/* SM */
@media (max-width: 767px) {
	#faqMainCategories {
		grid-template-columns: 1fr;
	}
	#faqMainCategories > li {
		padding: 1em;
	}
	#faqMainCategories .name a {
		width: 12em;
	}
}
/* XS */
@media (max-width: 575px) {
	#faqMainCategories .name a {
		width: 5em;
	}
}

/*----------  CTA  ----------*/
#faqMainContactCTA {
	background: #f7f5f4;
	border-radius: 1em;
	padding: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 4em;
	text-align: center;
	
}
#faqMainContactCTA span {
	font-weight: 700;
	font-size: 1.38em;
	margin-bottom: 0.5em;
}
#faqMainContactCTA .btn {
	font-size: .95em;
	padding-left: 3em;
	padding-right: 3em;
}
/* XS */
@media (max-width: 575px) {
	#faqMainContactCTA {
		font-size: .75em;
	}
}	

/*=============================================
=            FAQ : catégorie            =
=============================================*/
#faqCategory.textHeaderPage {
	padding-top: 0;
	padding-bottom: 0;
}
#faqCategoryHeader {
	padding-top: 6em;
	padding-bottom: 3em;
}
#faqSubCategoriesMenu {
	display: flex;
	gap: var(--size-gap-main);
	justify-content: center;
	align-items: center;
}
#faqCategory .sectionContainer .sectionContainer {
	padding-top: 0;
	padding-bottom: 0;
}
/* LG */
@media (max-width: 1199px) { 
	#faqCategoryHeader {
		padding: 5em 0 3em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#faqCategoryHeader {
		padding: 4em 0 2em;
	}
}
/* SM */
@media (max-width: 767px) {
	#faqCategoryHeader {
		padding: 2em 0 2em;
	}
}
/* XS */
@media (max-width: 575px) {
	#faqSubCategoriesMenu {
		flex-direction: column;
		gap: var(--size-gap-main);
	}
	#faqSubCategoriesMenu li {
		width: 100%;
	}
	#faqSubCategoriesMenu .btn {
		width: 100%;
	}
}




/*=============================================
=            Formulaire de contact            =
=============================================*/
#contactMain {
	padding-top: 7em;
	padding-bottom: 3em;
}
#contactMain h1 {
	margin-bottom: 1em;
}
#contactMain .sectionContainer {
	width: calc(var(--size-container) / 12 * 9)
}
/* LG */
@media (max-width: 1199px) { 
	#contactMain {
		padding-top: 5em;	
	}
	#contactMain .sectionContainer {
		width: var(--size-container)
	}
}	
/* MD */
@media (max-width: 991px) {
	#contactMain {
		padding-top: 3em;
	}
}
/* SM */
@media (max-width: 767px) {
	#contactMain {
		padding-top: 2em;
	}
}

/*----------  Infos principales  ----------*/
#contactMainInfos {
	display: flex;
	gap: var(--size-gap-main-double);
	margin-bottom: 2em;
}
#contactMainInfos > * {
	flex: 1;
}
#contactMainInfos iframe {
	width: 100%;
}
/* MD */
@media (max-width: 991px) {
	#contactMainInfos {
		flex-direction: column;
		margin-bottom: 1em;
	}
}

/*----------  Lien vers FAQ  ----------*/
#contactMainFAQLink .actions {
	margin-top: 1em;
	margin-bottom: 3em;
}
#contactMainFAQLink .actions .btn {
	font-size: .95em;
}
/* MD */
@media (max-width: 991px) {
	#contactMainFAQLink {
		font-size: .88em;
	}
}

/*----------  Sélection de sujet  ----------*/
#contactFAQWidget > .title {
	text-align: center;
	font-size: 1.3em;
}
#contactFAQWidget .selectTool {
	margin-bottom: 2.5em;
}
#contactFAQWidget select {
	font-size: 1.2em;
}
/* MD */
@media (max-width: 991px) {
	#contactFAQWidget {
		font-size: .88em;
	}
	#contactFAQWidget .selectTool {
		margin-bottom: 1.5em;
	}
}

/*----------  Réponses  ----------*/
#contactFAQSubjectQuestions {
	margin-bottom: 3em;
}
#contactFAQSubjectQuestions > li {
	display: none;
	background: #f9f9f9;
	padding: 1.5em;
	border-radius: 10px;
}
#contactFAQSubjectQuestions > li.visible {
	display: block;
}
#contactFAQSubjectQuestions > li > .title {
	font-size: 1.3em;
	font-weight: 700;
	margin-bottom: 1em;
}
#contactFAQSubjectQuestions > li > ul > li {
	padding: 1em;
	border-top: 1px solid rgba(0,0,0,.1);
}
#contactFAQSubjectQuestions > li > ul > li:last-of-type {
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#contactFAQSubjectQuestions > li > ul > li > a {
	text-decoration: none;
}
#contactFAQSubjectQuestions > li > ul > li > a:hover {
	text-decoration: underline;
}
/* MD */
@media (max-width: 991px) {
	#contactFAQSubjectQuestions {
		margin-bottom: 1.5em;
	}
	#contactFAQSubjectQuestions > li > ul > li {
		padding-left: 0;
		padding-right: 0;
	}
}
/* XS */
@media (max-width: 575px) {
	#contactFAQSubjectQuestions > li {
		padding: 1em;
	}
}

/*----------  Formulaire  ----------*/

/* SM */
@media (max-width: 767px) {
	#contactForm .field-inlineGroup {
		display: block;
	}
}

/*----------  Message de confirmation  ----------*/
:is(#contactFormConfirmation h1,#popupNewPasswordOK .message) {
	display: flex;
	flex-direction: column;
	margin-bottom: .5em;
}
:is(#contactFormConfirmation h1,#popupNewPasswordOK .message) i {
	font-size: 1.5em;
	color: var(--color-alert-success);
}
#popupNewPasswordOK .message {
	font-size: 1.5em;
	margin-bottom: 1em;
	text-align: center;
}
#contactFormConfirmation .description {
	text-align: center;
	margin-bottom: 4em;

}
#contactFormConfirmation .actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--size-gap-main-double);
	margin-bottom: 4em;
}
#contactFormConfirmation .actions .btn {
	font-size: .95em;
}
/* MD */
@media (max-width: 991px) {
	#contactFormConfirmation .description {
		margin-bottom: 2em;
	}
	#contactFormConfirmation .actions {
		gap: 1em;
	}
	#contactFormConfirmation .actions .btn {
		font-size: .85em;
	}
}
/* SM */
@media (max-width: 767px) {
	#contactFormConfirmation .description {
		font-size: .88em;
	}
	#contactFormConfirmation .actions {
		flex-direction: column;
		margin-bottom: 0;
	}
	#contactFormConfirmation .actions li {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#contactFormConfirmation .actions li .btn {
		width: 50%;
	}
}
/* XS */
@media (max-width: 575px) {
	#contactFormConfirmation .actions li .btn {
		width: 100%;
	}
}

/*=============================================
=            Pages de login           =
=============================================*/
.loginPage {
	padding-top: 8em;
	padding-bottom: 5em;
}
.loginPage .section {
	display: none;
	flex-direction: column;
	align-items: center;
}
.loginPage .section.visible {
	display: flex;
}
/* LG */
@media (max-width: 1199px) { 
	.loginPage {
		padding-top: 4em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.loginPage {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}
/* SM */
@media (max-width: 767px) {
	.loginPage {
		padding-top: 2em;
	}
}
/* XS */
@media (max-width: 575px) {
	.loginPage {
		padding-top: 1em;
	}
}

/*----------  Connexion  ----------*/
#loginResponsiveFormSelect {
	display: none;
}
#login > input[type='radio'] {
	display: none !important;
}
#login .formsContainer {
	display: flex;
	gap: var(--size-gap-main-double);
}
#login .formsContainer > * {
	flex: 1;
	padding: var(--size-gap-main-double);
	border: 1px solid rgba(0,0,0,.1);
	border-radius: .5em;
}
#login .formTitle {
	text-align: center;
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-main-high);
	margin-bottom: 1em;
}
#login form {
	height: 100%;
	display: flex;
	flex-direction: column;
}
#login form .main {
	height: 11em;
}
#login .forgottenPassword {
	font-size: .8em;
	margin: 1em 0;
}
#login form .actions {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}
#login form .actions :is(button,.btn) {
	padding-left: 5em;
	padding-right: 5em;
	font-size: .9em;
}

/* LG */
@media (max-width: 1199px) { 
	#login .formsContainer {
		gap: var(--size-gap-main);
	}
	#login .formsContainer > * {
		flex: 1;
		padding: 1em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#login form .description {
		font-size: .88em;
	}
	#login form .actions :is(button,.btn) {
		font-size: .9rem;
	}
}
/* SM */
@media (max-width: 767px) {
	#loginResponsiveFormSelect {
		position: relative;
		display: flex;
		gap: 1em;
		margin-top: 2em;
		margin-bottom: 1em;
	}
	#loginResponsiveFormSelect::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: rgba(0,0,0,.1);
	}
	#loginResponsiveFormSelect label {
		cursor: pointer;
		padding-right: 3em;
		font-weight: 700;
		border-bottom: 2px solid transparent;
		padding-bottom: 0.5em;
		transition: .15s;
		color: var(--color-main-high);
	}
	#connectFormRadio:checked ~ #loginResponsiveFormSelect label[for='connectFormRadio'],
	#createAccountFormRadio:checked ~ #loginResponsiveFormSelect label[for='createAccountFormRadio'] {
		border-bottom-color: var(--color-primary-40);
		color: var(--color-primary-40);
	}
	#connectFormRadio:checked ~ .formsContainer #connectForm,
	#createAccountFormRadio:checked ~ .formsContainer #createAccountForm {
		display: block;
	}
	#login .formsContainer > div {
		display: none;
		border: 0;
		border-radius: 0;
		padding: 0;
	}
	#login form .main {
		height: unset;
	}
	#login .formTitle {
		display: none;
	}
	#login form .actions {
		margin-top: 0;
	}
	#login #createAccountForm .actions {
		margin-top: 1em;
	}


}
/* XS */
@media (max-width: 575px) {
	#loginResponsiveFormSelect label {
		font-size: .88em;
		flex: 1;
		padding-right: 0;
		text-align: center;
	}
}

/*----------  Mot de passe oublié  ----------*/
.forgottenPasswordPage .content {
	max-width: min(32em,100vw);
}
.forgottenPasswordPage .description {
	margin-bottom: 1em;
}
#popupForgotPassword .field {
	margin-bottom: 2em;
}
.forgottenPasswordPage .actions {
	display: flex;
	justify-content: center;
}


/*=============================================
=            Création de compte            =
=============================================*/
#createAccount {
	padding: 3em 0 5em;
}
#createAccount .section {
	width: min(44em,calc(100% - 2em));
	margin: 0 auto;
	margin-bottom: 5em;
	display: none;
}
#createAccount .section.visible {
	display: block;
}
/* SM */
@media (max-width: 767px) {

}

/*----------  Process  ----------*/
.createAccountProcess {
	display: flex;
	margin-bottom: 2em;
	font-size: .8em;
}
.createAccountProcess li {
	--color-step: #ddd;
	--color-step-bullet-fill: white;
	flex: 1;
	display: flex;
	padding: .5em .5em .75em;
	justify-content: center;
	position: relative;
}
.createAccountProcess li.active,
.createAccountProcess:has(li:nth-of-type(2).active) li:nth-of-type(1),
.createAccountProcess:has(li:nth-of-type(3).active) li {
	--color-step: #555;
	--color-step-bullet-fill: #555;
}
.createAccountProcess:has(li:nth-of-type(2).active) li:nth-of-type(1),
.createAccountProcess:has(li:nth-of-type(3).active) li {
	cursor: pointer;
}
.createAccountProcess li::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-step);
	display: block;
}
.createAccountProcess li::after {
	--bullet-size: 10px;
	content: '';
	position: absolute;
	top: calc(100% - var(--bullet-size) / 2);
	left: 50%;
	width: var(--bullet-size);
	height: var(--bullet-size);
	border-radius: 50%;
	background: var(--color-step-bullet-fill);
	border: 1px solid var(--color-step);
	display: block;
	transform: translateX(-50%);
}
.createAccountProcess .active {
	font-weight: 700;
}

/*----------  Boutons d'action  ----------*/
#createAccount .actions {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2em;
	margin-top: 1em;
}
#createAccount .section:nth-of-type(1) .actions {
	justify-content: flex-end;
}


#createAccount .externalServicesLogin {
	font-size: 1em;
}
#createAccount .confirmCheckboxes {
	font-size: .8em;
}

/*=============================================
=            Espace client           =
=============================================*/
.customerAccountPage {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: var(--size-gap-main-double);

	padding-top: 2.25em;
	padding-bottom: 2.25em;
}
/* si provenance devis / panier de la page d'édition des adresses, on masque la colonne de gauche */
#myAddressEdit.customerAccountPage[class*="from--"] {
	grid-template-columns: 1fr;
}
#myAddressEdit.customerAccountPage[class*="from--"] #customerAccountSidebar {
	display: none !important;
}
/* LG */
@media (max-width: 1199px) { 
	.customerAccountPage {
		grid-template-columns: 1fr 4fr;
	}
}
/* MD */
@media (max-width: 991px) {
	.customerAccountPage {
		display: block;
		padding-top: 1em;
	}
}

/*----------  Sidebar  ----------*/
#customerAccountSidebar .userSymbol a {
	display: flex;
	justify-content: center;
	font-size: 6.5em;
	opacity: 1 !important;
	text-decoration: none;
}
#customerAccountSidebar .userID a {
	display: block;
	text-align: center;
	font-weight: 700;
	margin: .5em 0 1.5em;
	opacity: 1 !important;
	text-decoration: none;
}
#customerAccountSidebar .userSymbol:hover + .userID a,
#customerAccountSidebar .userID a:hover {
	text-decoration: underline;
}

#customerAccountSidebar > ul li:not(:last-of-type) {
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#customerAccountSidebar > ul a {
	text-decoration: none;
	display: block;
	padding: .5em 0;
	font-size: .94em;
}
#customerAccountSidebar > ul a:hover {
	text-decoration: underline;
}
#customerAccountSidebar .actions {
	margin-top: 2em;
}
#customerAccountSidebar .actions .btn {
	/* padding-left: 5em; */
	/* padding-right: 5em; */
	width: 100%;
}
/* LG */
@media (max-width: 1199px) { 
	#customerAccountSidebar {
		font-size: .9em;
	}
	
}
/* MD */
@media (max-width: 991px) {
	#customerAccountSidebar {
		display: none;
	}
	#page-myAccount #customerAccountSidebar {
		display: grid;
		grid-template-columns: 3em auto auto;
		gap:  .75em 0;
		margin-bottom: 2em;
	}
	#customerAccountSidebar .userSymbol a {
		font-size: 2em;
	}
	#customerAccountSidebar .userID {
		align-self: center;
	}
	#customerAccountSidebar .userID a {
		display: inline-block;
		margin: 0;
	}
	#customerAccountSidebar > ul {
		grid-column: auto / span 3;
		display: grid;
		grid-template-columns: repeat(4,1fr);
		gap: .5em;
	}
	#customerAccountSidebar > ul li:not(:last-of-type) {
		border-bottom: 0;
	}
	#customerAccountSidebar li a {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(0,0,0,.3);
		padding: 1em;
		height: 100%;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: .5em;
		min-height: 5em;
		text-decoration: none !important;
	}
	#customerAccountSidebar .actions {
		grid-column: 3/4;
		grid-row: 1/2;
		margin-top: 0;
		text-align: right;
		align-self: center;
	}
	#customerAccountSidebar .actions .btn {
		width: auto;
		font-size: .75em;
		padding: 0;
		border: 0;
		text-decoration: underline;
		font-weight: 400;
	}
}
/* SM */
@media (max-width: 767px) {
	#customerAccountSidebar > ul {
		grid-template-columns: repeat(3,1fr);
	}
}
/* XS */
@media (max-width: 575px) {
	#customerAccountSidebar > ul {
		grid-template-columns: repeat(2,1fr);
	}
}

/*----------  Main  ----------*/
#customerAccountMain {
	margin-top: 1em;
}

#customerAccountHeader {
	display: flex;
	align-items: center;
	gap: 1.5em;
	margin-bottom: 2.5em;
}
#customerAccountHeader .backIcon {
	font-size: 1.77em;
	cursor: pointer;
	transition: .15s;
	display: flex;
	align-items: center;
}
#customerAccountHeader .backIcon:hover {
	color: var(--color-main-high);
	transform: translateX(-5px);
}
.customerAccountPage h1 {
	font-size: 1.77em;
	font-weight: 700;
	text-align: left;
	margin-bottom: 0;
}
/* LG */
@media (max-width: 1199px) { 
	#customerAccountMain {
		margin-top: 0;
	}
	.customerAccountPage h1 {
		font-size: 1.5em;
	}
	#customerAccountHeader {
		margin-bottom: 1.5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#customerAccountHeader {
		margin-bottom: 1em;
		gap: 1em;
	}
	.customerAccountPage h1 {
		font-size: 1.25em;
	}
}
/* SM */
@media (max-width: 767px) {
	#customerAccountHeader {
		margin-bottom: .75em;
	}
	.customerAccountPage h1 {
		font-size: 1.15em;
	}
}
/* XS */
@media (max-width: 575px) {
	#customerAccountHeader {
		gap: .75em;
	}
	.customerAccountPage h1 {
		font-size: 1em;
	}
}


/*=============================================
=            Espace client : mon compte            =
=============================================*/
#myAccountWelcomeMessage {
	margin-bottom: 1.5em;
}
#myAccount h2 {
	font-size: 1.27em;
	font-weight: 700;
}

/* LG */
@media (max-width: 1199px) { 
	#myAccountWelcomeMessage {
		font-size: .9em;
	}
	#myAccount h2 {
		font-size: 1.2em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#myAccount h2 {
		font-size: 1.1em;
	}
}
/* SM */
@media (max-width: 767px) {

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

}
/*----------  Commandes en cours  ----------*/
#myAccountCurrentOrders {
	border: 1px solid rgba(0,0,0,.1);
	padding: var(--size-gap-main-double);
	margin-bottom: 2.5em;
}
#myAccountCurrentOrders .orderHeader {
	display: flex;
	gap: 1em;
	align-items: center;
}
#myAccountCurrentOrders .orderHeader .mainInfos {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--size-gap-main-double);
	font-size: .85em;
}
#myAccountCurrentOrders .orderHeader .mainInfos > :is(.orderRef,div:nth-of-type(2)) {
	flex-shrink: 0;
}
#myAccountCurrentOrders .orders > li {
	display: flex;
	flex-direction: column;
	gap: 1em;
}
#myAccountCurrentOrders .orders > li:not(:last-of-type) {
	padding-bottom: 1.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#myAccountCurrentOrders .orderHeader .orderID {
	font-weight: 700;
}
#myAccountCurrentOrders .orderHeader .label {
	font-weight: 500;
}
#myAccountCurrentOrders .orderHeader .delivery {
	display: flex;
	gap: .5em;
	align-items: center;
}
#myAccountCurrentOrders .orderHeader .delivery .label {
	flex-shrink: 0;
}
#myAccountCurrentOrders .orderHeader .delivery .value {
	position: relative;
}
#myAccountCurrentOrders .orderHeader .moreBtn {
	font-size: 1.5em;
	color: var(--color-main-high);
}


#myAccountCurrentOrders .orderLines {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
}
#myAccountCurrentOrders .orderLines li {
	display: flex;
	gap: var(--size-gap-main-double);
	flex-wrap: wrap;
}
#myAccountCurrentOrders .orderLines li .mainImage {
	position: relative;	
	--mainImage-size: 100px;
}
#myAccountCurrentOrders .orderLines li .mainImage img {
	max-width: var(--mainImage-size);
	height: auto;
	position: relative;
	z-index: 2;
}
#myAccountCurrentOrders .orderLines .infos {
	font-size: .85em;
}
#myAccountCurrentOrders .orderLines .productName {
	font-weight: 700;
}
#myAccountCurrentOrders .orders .actions {
	display: flex;
	align-items: center;
	gap: var(--size-gap-main);
	margin-top: 0;
}

#myAccountCurrentOrders .orders .orderLink {
	display: flex;
	justify-content: center;
	font-size: .75em;;
	margin-bottom: 1em;
}

#myAccountCurrentOrders > .actions {
	margin-top: 1em;
	display: flex;
	justify-content: center;
}



/* LG */
@media (max-width: 1199px) { 
	#myAccountCurrentOrders {
		padding: 1em;
	}
	#myAccountCurrentOrders .orders > li {
		gap: .5em;
	}
	#myAccountCurrentOrders .orders > li:not(:last-of-type) {
		padding-bottom: 1em;
	}
	#myAccountCurrentOrders .orderHeader .mainInfos {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: .25em;
	}
	#myAccountCurrentOrders .orderLines li .mainImage {
		--mainImage-size: 80px;
	}
	#myAccountCurrentOrders .orderLines .infos {
		font-size: .8em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#myAccountCurrentOrders .orderHeader {
		font-size: .9em;
	}
	#myAccountCurrentOrders .orderLines li .mainImage {
		--mainImage-size: 70px;
	}
}
/* SM */
@media (max-width: 767px) {
	#myAccountCurrentOrders .orderHeader .mainInfos {
		grid-template-columns: 2fr 3fr;
	}
	#myAccountCurrentOrders .orderHeader .mainInfos .orderRef {
		grid-column: auto / span 2;
	}
}
/* XS */
@media (max-width: 575px) {
	#myAccountCurrentOrders .orderHeader .mainInfos {
		display: block;
	}
	#myAccountCurrentOrders .orderHeader .mainInfos .orderRef {
		margin-bottom: 0.5em;
	}
	#myAccountCurrentOrders .orderLines {
		grid-template-columns: 1fr;
	}
}

/*----------  Accès rapide  ----------*/
#myAccountShortcuts ul {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 1em;
}
#myAccountShortcuts ul li > * {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 6.6em;
	text-align: center;
	border: 1px solid var(--color-main-disabled);
	border-radius: .5em;
	padding: 1em;
	cursor: pointer;
}
#myAccountShortcuts ul li > *:hover {
	background: rgba(0,0,0,.05);
	color: var(--color-main-max);
}
/* LG */
@media (max-width: 1199px) { 
	#myAccountShortcuts ul {
		grid-template-columns: repeat(3,1fr);
	}
	#myAccountShortcuts ul li > * {
		height: 6em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#myAccountShortcuts ul {
		grid-template-columns: repeat(4,1fr);
		font-size: .85em;
		gap: .75em;
	}
}
/* SM */
@media (max-width: 767px) {
	#myAccountShortcuts ul {
		grid-template-columns: repeat(3,1fr);
	}
}
/* XS */
@media (max-width: 575px) {
	#myAccountShortcuts ul {
		grid-template-columns: repeat(2,1fr);
	}
}



/*----------  Modale Je veux envoyer des fichiers  ----------*/
.sendFilesExplanationsModal .content {
	display: flex;
	gap: 1em;
	margin-bottom: 2em;
	font-size: .85em;
}
.sendFilesExplanationsModal .content > i {
	font-size: 2.5em;
}
/* SM */
@media (max-width: 767px) {
	.sendFilesExplanationsModal .actions {
		flex-direction: column-reverse;
	}
	.sendFilesExplanationsModal .actions > * {
		width: 100%;
	}
}

/*=============================================
=            Espace client : mes commandes  / mes paniers sauvegardés / mes devis         =
=============================================*/


/*----------  Filtres  ----------*/
:is(#tradeListFilters,#mySavedCartsFilters) {
	margin-bottom: 1em;
}
#mySavedCartsFilters {
	display: flex;
	justify-content: flex-end;
}

/*! temp en attendant la V2 avec la recherche */
#tradeListFilters {
	display: flex;
	gap: var(--size-gap-main-double);
	align-items: center;
	margin-bottom: 2em; 
}

#tradeListFilters > div {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3em;
}
#tradeListFilters > div:nth-of-type(1) {
	margin-bottom: 1em;
	margin-bottom: 0; /*! temp en attendant la V2 avec la recherche */
	flex: 1; /*! temp en attendant la V2 avec la recherche */
}

#tradeListFilters .tabs {
	flex: 1;
	display: flex;
	font-size: .77em;
	gap: .5em;
}
#tradeListFilters .tabs li {
	flex: 1;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: .5;
	border-bottom: 3px solid transparent;
	transition: .15s;
}
#tradeListFilters .tabs li a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: .5em;
}
#tradeListFilters .tabs .active {
	pointer-events: none;
	opacity: 1;
	border-color: rgba(0,0,0,.8);
}
#tradeListFilters .tabs li:hover {
	border-color: rgba(0,0,0,.3);
	opacity: .8;
}
/* LG */
@media (max-width: 1199px) { 
	#tradeListFilters {
		margin-bottom: 1.5em;
	}
}	
/* SM */
@media (max-width: 767px) {
	#tradeListFilters .tabs {
		font-size: .65em;
	}
}
/* XS */
@media (max-width: 575px) {
	#tradeListFilters {
		display: block;
		position: relative;
		margin-bottom: 1em;
	}
	#tradeListFilters > div:nth-of-type(2) {
		position: absolute;
		right: 0;
		top: -2.15em;

	}
}


#tradeListYearSelect {
	font-size: .77em;
	display: flex;
	gap: .5em;
	align-items: center;
	justify-content: flex-end;
	padding-top: 0;
	margin-bottom: 0;
}
#tradeListYearSelect label {
	position: relative;
	order: -1;
	font-size: 1em;
	color: var(--color-main-medium);
	min-width: 7em;
	text-align: right;
	top: unset;
	left: unset !important;
}
#tradeListYearSelect select {
	margin-top: 0;
	min-width: 5em;
	background-size: 1em;
}


.tradeListPage .priceModeSwitcher {
	font-size: .77em;
}
.tradeListPage .priceModeSwitcher .field {
	margin-bottom: 0;
}
.tradeListPage .priceModeSwitcher .field input[type='radio'] {
	--form-size-radio: 16px;
}
:is(.tradeListPage,#tradeContent) .priceModeSwitcher .field > div:last-of-type label {
	margin-right: 0;
	padding-right: 0;
}

/*----------  Liste des commandes / paniers / devis  ----------*/
#tradeList > ul > li {
	border: 1px solid rgba(0,0,0,.1);
	padding: 1em;
	margin-bottom: 1.5em;
}
#tradeList .elemHeader {
	display: flex;
	gap: var(--size-gap-main-double);
	margin-bottom: 1em;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
:is(#myQuotesList,#myCreditsList) #tradeList .elemHeader {
	margin-bottom: 0;
	border-bottom: none;
}
#mySavedCarts #tradeList .elemHeader {
	font-size: .88em;
	padding-bottom: 1em;
}
#tradeList .elemHeader > div:nth-of-type(1) {
	flex: 1;
}
#mySavedCarts #tradeList .elemHeader > div:nth-of-type(1) {
	flex: 0;
}
#tradeList .elemMainInfos {
	display: flex;
	gap: 1.5em;
	align-items: center;
	font-size: .88em;
	flex-wrap: wrap;
}

.orderProgressPie {
	--pie-degrees: 260deg;
	--pie-color: blue;
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	background: conic-gradient(
		var(--pie-color) var(--pie-degrees), 
		rgba(0,0,0,.1) 0
	);
}
#tradeList .elemID {
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 1.5em;;
}
#tradeList .elemID::after {
	content: "";
	font-size: .35em;
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: rgba(0,0,0,.3);
}
#tradeList .elemStatusName {
	font-weight: 700;
}

#tradeList .moreBtn {
	font-size: 1.5em;
	color: var(--color-main-high);
}
#tradeList .elemSubInfos {
	display: flex;
	gap: .25em 2em;
	flex-wrap: wrap;
	font-size: .77em;
	margin-top: 0.5em;
	padding: 0 0 1em;
}
#mySavedCarts #tradeList .elemSubInfos {
	font-size: .95em;
	margin-top: 0;
	padding-bottom: 0;
}
:is(#myQuotesList,#myCreditsList) .elemSubInfos {
	padding-bottom: 0;
}
#tradeList .elemSubInfos > li {
	display: flex;
	gap: .5em;
	align-items: center;
	font-size: .95em;
}
#tradeList .elemSubInfos .value {
	font-weight: 500;
	position: relative;
}
:is(#tradeList .elemSubInfos,.orderHeader,.elemHeader) .value:has(.deliveryAddressTooltip) {
	cursor: help;
}
:is(#tradeList .elemSubInfos .value,.orderHeader,.elemHeader) .value:hover .deliveryAddressTooltip {
	display: block;
}

:is(#tradeList .elemSubInfos,.orderHeader,.elemHeader) .deliveryAddressTooltip {
	display: none;
	background: rgba(255,255,255,.98);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 1em;
	width: 20em;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 3px;
	z-index: 20;
}
#tradeList .elemHeader .actions {
	justify-content: center;
}

#tradeList .elemContent {
	display: flex;
	gap: var(--size-gap-main-double);
	justify-content: space-between;
}
#tradeList .elemLines {
	display: flex;
	gap: var(--size-gap-main-double);
	flex-wrap: wrap;
}

#tradeList .elemLines > li {
	display: flex;
	gap: 1em;
}
#tradeList .mainImage img {
	max-width: 4.3em;
}
#tradeList .infos {
	font-size: .88em;
}
#tradeList .infos .productName {
	font-weight: 700;
}
#tradeList .infos :is(.specifications,.qty) {
	font-size: .88em;
}

#tradeList .actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5em;
}

:is(#myQuotesList) #tradeList .actions {
	margin-top: 1em;
	flex-direction: row;
	justify-content: center;
}

/* LG */
@media (max-width: 1199px) { 
	#tradeList .elemHeader {
		gap: 1em;
	}
	
	#tradeList > ul > li {
		margin-bottom: 0.75em;
	}
	#tradeList .mainImage img {
		max-width: 4em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#tradeList .elemMainInfos {
		font-size: .8em;
		gap: 1em;
	}
	#tradeList .elemID {
		gap: 1em;
	}
	#tradeList .elemSubInfos {
		gap: 1.5em;
	}
	#tradeList .mainImage img {
		max-width: 3em;
	}
}
/* SM */
@media (max-width: 767px) {
	#tradeList .elemSubInfos {
		gap: .25em 1em;
	}
	#mySavedCarts #tradeList .elemHeader {
		flex-wrap: wrap;
		gap: .25em 1em;
	}
	#mySavedCarts #tradeList .elemHeader .elemID {
		width: 100%;
		flex: unset !important;
	}
	#mySavedCarts #tradeList .elemHeader .elemID::after {
		display: none;
	}
	#mySavedCarts #tradeList .elemContent {
		flex-direction: column;
		gap: .5em;
	}
	#mySavedCarts #tradeList .elemContent .actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	#mySavedCarts #tradeList .elemContent .actions .btn {
		min-width: unset;
	}
}
/* XS */
@media (max-width: 575px) {
	#myCreditsList #tradeList .elemHeader {
		flex-direction: column;
	}
	#mySavedCarts #tradeList .elemHeader .cartTitle {
		width: 100%;
	}
}


/*----------  Iframe preview custo  ----------*/
#customizationPreview .container {
	width: calc(100vw - 2em);
	height: calc(100vh - 2em);
	max-width: unset;
	overflow: hidden;
}
#customizationPreview iframe {
	width: 100%;
	height: calc(100vh - 7em);
	border: 0;
}


/*----------  Messages d'alerte sur le site  ----------*/
:is(.alertMessage-style1, .alertMessage-style4) {
	font-size: .70em;
	color: white;
	text-align: center;
	padding: 0.5em 0;
}
.alertMessage-style1 {
	background: #b3101d;;
}
.alertMessage-style4 {
	background: #e39000;
}
:is(.alertMessage-style1, .alertMessage-style4) p {
	margin-bottom: 0;
}
#productMainInfos .alertMessage-style1 {
	margin-top: 1em;
}

.alertMessage-style2 {
	position: fixed;
	left: 0;
	bottom: 0;
	background: rgba(246,179,0,.9);
	width: 100%;
	font-size: .75em;
	text-align: center;
	padding: 1em 0;
	z-index: 30;
	color: rgba(0,0,0,.9);
}
.alertMessage-style2.hidden {
	display: none !important;
}
.alertMessage-style2 p {
	margin-bottom: 0;
}
.alertMessage-style2 .actions {
	margin-top: 0.5em;
}
.alertMessage-style2 .actions button {
	font-size: .85em;
}

.alertMessage-style3 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	background: rgba(255,255,255,.95);
}
.alertMessage-style3.hidden {
	display: none !important;
}
.alertMessage-style3 .content {
	text-align: center;
}
.alertMessage-style3 .actions {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*=============================================
=            Espace client : commande / devis            =
=============================================*/

/*----------  Header  ----------*/
.tradePage #customerAccountHeader {
	margin-bottom: .5em;
}


/*----------  Commun  ----------*/
.tradePage h2 {
	font-size: 1.2em;
	font-weight: 700;
}


/*----------  Structure  ----------*/
#tradeContent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2em calc(var(--size-gap-main-double) * 2);
}
/* LG */
@media (max-width: 1199px) { 
	#tradeContent {
		gap: 1em var(--size-gap-main-double);
	}
}	
/* MD */
@media (max-width: 991px) {
	
}
/* SM */
@media (max-width: 767px) {
	#tradeContent {
		grid-template-columns: 1fr;
	}
}
/* XS */
@media (max-width: 575px) {

}


/*----------  Infos principales  ----------*/
#tradeSubInfosHeader {
	grid-column: auto / span 2;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-gap-main-double);
}

#tradeSubInfos {
	display: flex;
	gap: 2em;
	align-items: center;
	font-size: .88em;
}
#tradeSubInfos li {
	display: flex;
	gap: .5em;
	align-items: center;
}
#tradeSubInfos li .value {
	font-weight: 600;
}
#modifyOrderReferenceLink {
	font-size: .77em;
}
.tradePage .priceModeSwitcher {
	font-size: .77em;
}
.tradePage .priceModeSwitcher input[type='radio'] {
	--form-size-radio: 16px;
}
.tradePage .priceModeSwitcher .field {
	margin-bottom: 0;
}

/* SM */
@media (max-width: 767px) {
	#tradeSubInfosHeader {
		grid-column: unset;
	}
}
/* XS */
@media (max-width: 575px) {
	#tradeSubInfosHeader {
		flex-direction: column;
		align-items: flex-start;
		gap: .5em 1em;
	}
	#tradeSubInfos {
		width: 100%;
		justify-content: space-between;
	}
	.tradePage .priceModeSwitcher {
		order: -1;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
}


/*----------  Détail de la commande  ----------*/
#tradeDetail {
	width: 100%;
	margin-top: 2em;
	margin-bottom: 3em;
}
#orderProcess #tradeDetail {
	margin-top: 0;
}
#quoteDetail #tradeDetail {
	margin-bottom: 1em;
}

.tradeCustomerNote .customerNote {
	font-size: .8rem;
	margin-top: 1em;
	background: var(--color-postit-background);
	padding: 1em;
	display: none;
	flex-direction: column;
	gap: .5em;
}
.tradeCustomerNote.hasComments .customerNote {
	display: flex;
}
.tradeCustomerNote .title {
	font-weight: 700;
}
.tradeCustomerNote .customerCommentHeader {
	display: flex;
	gap: .5em;
	align-items: center;
	justify-content: space-between;
}
.tradeCustomerNote .customerCommentHeader span[onclick] {
	cursor: pointer;
}
.tradeCustomerNote .customerCommentHeader i {
	font-size: 1.3em;
	transition: .1s;
}
.tradeCustomerNote .customerCommentHeader i:hover {
	color: black;
}
.tradeCustomerNote .customerComment .title {
	display: block;
}

#tradeDetail thead th {
	font-size: 1.2em;
	text-align: left;
	padding-bottom: 0.5em;
}
#tradeDetail tbody tr {
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#tradeDetail tbody tr.commentLine {
	font-size: .8em;
}
#tradeDetail tbody td {
	vertical-align: top;
	padding: 1.5em 0;
}
#tradeDetail .infos > div {
	display: grid;
	grid-template-columns: 1fr 4fr;
	gap: var(--size-gap-main-double);
}
#tradeDetail .infos img,
img.customizationThumbnail,
#tradeList .elemLines img,
#mySavedCustomizations .illustration,
#myAccountCurrentOrders .orderLines li .mainImage img {
	width: 100%;
	background: rgb(187,187,187);
	background: linear-gradient(180deg, rgba(187,187,187,1) 0%, rgba(153,153,153,1) 73%, rgba(187,187,187,1) 75%, rgba(170,170,170,1) 100%); 
	min-width: 1em;;
}
#tradeDetail .infos .mainImage[onclick*="openCustomizationPreviewModal"] {
	position: relative;
	cursor: pointer;
}
#tradeDetail .infos .mainImage[onclick*="openCustomizationPreviewModal"]::before {
	content: "\e9ca";
	font-family: var(--font-icons);
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	bottom: .5em;
	right: .5em;
	z-index: 1;
	transition: .1s;
}
#tradeDetail .infos .mainImage[onclick*="openCustomizationPreviewModal"]:hover::before {
	transform: scale(1.1);
}
/* si pas de perso, on masque l'icône et désactive le onclick */
#tradeDetail .infos.isEmptyCustomization .mainImage[onclick*="openCustomizationPreviewModal"] {
	pointer-events: none;
}
#tradeDetail .infos.isEmptyCustomization .mainImage[onclick*="openCustomizationPreviewModal"]::before {
	display: none;
}

#tradeDetail .productName {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-main-high);
}
#tradeDetail .productName a {
	text-decoration: none;
}
#tradeDetail .productName a:hover {
	text-decoration: underline;
}
#tradeDetail .specifications {
	font-size: .77em;
}
#tradeDetail .addCommentLink {
	font-size: .85em;
	margin-top: 1em;
	display: block;
}
#tradeDetail .tradeCustomerNote.hasComments .addCommentLink {
	display: none;
}
#tradeDetail .actions {
	margin-top: 1em;
}
:is(#page-cart,#page-quote) #tradeDetail .actions {
	display: flex;
	gap: .5em;
	align-items: center;
}
#tradeDetail .prices {
	text-align: right;
	font-size: .88em;
	white-space: nowrap;
}
#tradeDetail tbody .prices {
	font-weight: 700;
}	
#tradeDetail tfoot tr:nth-of-type(1) :is(th,td) {
	padding-top: 2rem;
}
#tradeDetail tfoot tr:nth-of-type(1) th {
	font-size: 1.2em;
	text-align: left;
	vertical-align: top;
	min-width: 50%;
}
#tradeDetail tfoot td {
	font-size: .88em;
	padding-bottom: .75em;
}

#updateQuoteLineComment .commentFieldExplanation {
	font-size: .85em;
	margin-bottom: 1em;
}
#updateQuoteLineComment textarea {
	font-size: .85em;
}

/* LG */
@media (max-width: 1199px) { 
	#tradeDetail thead th {
		font-size: 1em
	}
	#tradeDetail .productName {
		font-size: 1em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#tradeDetail {
		margin-top: .5em;
		margin-bottom: 0;
	}
	#tradeDetail thead th {
		font-size: 1em;
		padding-bottom: 0;
	}
	#tradeDetail tbody tr:last-of-type {
		border-bottom: none;
	}
}
/* SM */
@media (max-width: 767px) {
	#tradeDetail thead th {
		font-size: .85em;
	}
	#tradeDetail .specifications {
		font-size: .75em;
	}
	#tradeDetail tfoot tr:nth-of-type(1) :is(th,td) {
		padding-top: 0;
	}
	#tradeMainContent .orderHistory {
		margin-top: 1em;
	}
	#tradeDetail .actions {
		margin-top: 0.5em;
	}
}
/* XS */
@media (max-width: 575px) {
	#tradeDetail .infos > div {
		grid-template-columns: 3em auto;
	}
	#page-cart #tradeDetail .image {
		width: 3em;
	}
	#tradeDetail .productName {
		font-size: .95em;
	}
	#page-cart #tradeDetail .actions {
		padding-top: 1em;
		transform: translateY(.5em);
	}
	#tradeDetail tbody .prices {
		width: 1px;
		position: relative;
	}
	#tradeDetail tbody .prices > div {
		position: absolute;
		bottom: 3.5em;
		right: 1em;
	}
	.tradePage #tradeDetail tbody .prices  > div {
		bottom: 1em;
		right: 0;
	}
	#tradeDetail tfoot {
		border-top: 1px solid rgba(0,0,0,.1);
	}
	#tradeDetail tfoot tr:first-of-type {
		padding-top: 1em;
	}
	#tradeDetail tfoot tr {
		display: flex;
		justify-content: flex-end;
	}
	#tradeDetail tfoot th {
		display: none;
	}
	#tradeDetail tfoot tr td:last-of-type {
		width: 10em;
	}
	#page-cart #tradeDetail .actions li :is(button,.btn) {
		font-size: .65em;
	}
}


/*----------  Historique de commande  ----------*/
#orderDetail .orderHistory > ul {
	font-size: .83em;
}
#orderDetail .orderHistory > ul > li {
	display: flex;
	padding: 1em 0;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#orderDetail .orderHistory > ul > li:last-of-type {
	border-bottom: none;
}
#orderDetail .orderHistory li .date {
	width: 7em;
}
#orderDetail .orderHistory li .status {
	flex: 1;
}
#orderDetail .orderHistory li .statusName {
	font-weight: 700;
}
#orderDetail .orderHistory li .additionalInfos {
	font-size: .95em;
	margin-top: 0.25em;
}


/*----------  Actions  ----------*/
#tradeMainContent .actions {
	display: flex;
	justify-content: flex-end;
	gap: 1em;
	
}
#tradeMainContent .actions .btn {
	font-size: .95em;
}
#tradeMainContent #tradeDetail tr .actions {
	justify-content: flex-start;
}
#tradeMainContent #tradeDetail tr .actions .btn {
	font-size: .7em;
}


/*----------  Infos secondaires  ----------*/
#tradeSubContent > * {
	margin-bottom: 3em;
}
#tradeSubContent h2 {
	font-size: 1em;
}
#tradeSubContent .content {
	font-size: .88em;
}

#tradePaymentMode .actions {
	display: flex;
	flex-direction: column;
	gap: .5em;
}

/* SM */
@media (max-width: 767px) {
	#tradeSubContent {
		display: grid;
		gap: 2em 1em;
		grid-template-columns: repeat(2,1fr);
	}
	#tradeSubContent > * {
		margin-bottom: 0;
	}
}
/* XS */
@media (max-width: 575px) {
	#tradeSubContent {
		grid-template-columns: 1fr
	}
}

/*----------  Actions principales  ----------*/
#tradeMainActions {
	display: flex;
	flex-direction: column;
	gap: .5em;
}
#tradeMainActions .btn {
	width: 100%;
}

#tradeSubContent .shipper {
	margin-bottom: 1em;
}
#tradeSubContent .address + .fakeLink {
	margin-top: 1.5em;
	font-size: .88em;
}
#tradeSubContent .actions {
	margin-top: 1em;
}

#tradeHelpSection {
	background: #f5f5f5;
	padding: 1.5em 1em;
	font-size: .88em;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* SM */
@media (max-width: 767px) {
	#tradeMainActions {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		grid-column: auto / span 2;
	}
	#tradeMainActions .btn {
		width: auto;
	}
}
/* XS */
@media (max-width: 575px) {
	#tradeMainActions {
		grid-column: unset;
	}
}

/*----------  Modale commande de panier sauvegardé  ----------*/
#deleteCartModal .description {
	font-size: .85em;
}
#deleteCartModal strong {
	color: chocolate;
}


/*=============================================
=            Espace client : Mes adresses            =
=============================================*/
#myAddresses h2 {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-main-high);
}
/*
#myAddresses .addressType {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1em;
}
	*/
#myAddresses .globalActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
	margin-bottom: 1em;
}
#myAddresses .globalActions .backofficeSearchbar{
	flex: 1;
}
#myAddresses .addressList {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 2em;
}
#myAddresses .addressList > li {
	border: 1px solid rgba(0,0,0,.1);
	padding: 1em;
	display: flex;
	gap: var(--size-gap-main-double);
	align-items: flex-start;
}
#myAddresses .defaultAddresseText {
	display:none;
}
#myAddresses .addressList li.isDefault .defaultAddresseText {
	display:block;
}
#myAddresses .address {
	flex: 1;
	font-size: .88em;
}
#myAddresses .favoriteLabel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.1);
	font-size: .65em;
	text-transform: uppercase;
	padding: .2em .5em;
	font-weight: 500;
	margin-bottom: 0.5em;
}


#myAddresses .addressList > li .actions {
	display: flex;
	flex-direction: column;
	gap: 1em;
	justify-content: flex-end;
}
#myAddresses .addressList > li .actions ul {
	display: flex;
	align-items: center;
	font-size: .77em;
}
#myAddresses .addressList > li .actions li:not(:last-of-type)::after {
	content: "|";
	margin-left: .5em;
	margin-right: .5em;
	
}
#myAddresses .favoriteBtn {
	display: flex;
	justify-content: flex-end;
	font-size: 1.2em;
	opacity: .5;
	cursor: pointer;
	transition: .15s;
}
#myAddresses .favoriteBtn:hover {
	opacity: .3;
	
}
#myAddresses .favoriteBtn:hover i::before {
	font-family: 'heroicons-solid' !important;
}
#myAddresses .addressList:has(:not(.isDefault) .favoriteBtn:hover) .isDefault .favoriteBtn i::before {
	font-family: 'heroicons-outline' !important;
}
#myAddresses .addressList .isDefault .favoriteBtn {
	pointer-events: none;
}
#myAddresses .addressList .isDefault .favoriteBtn i::before {
	font-family: 'heroicons-solid' !important;
}
/* XS */
@media (max-width: 575px) {
	#myAddresses h2 {
		margin-bottom: 0;
	}
	#myAddresses .addressType {
		flex-direction: column;
		align-items: flex-start;
		gap: .25em;
	}
	#myAddresses .addressType .actions {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	#myAddresses .addressType .actions .btn {
		font-size: .65em;
	}
	#myAddresses .addressList > li {
		flex-direction: column;
	}
	#myAddresses .addressList > li .actions {
		flex-direction: row;
		justify-content: space-between;
		width: 100%;;
	}
	#myAddresses .addressList > li .actions .favoriteBtn {
		order: 2;
	}
}




/*=============================================
=            Espace client : édition d'adresse            =
=============================================*/
.postCodeCityFields {
	display: flex;
	gap: var(--size-gap-main-double);
	align-items: center;
}
.postCodeCityFields > *:nth-of-type(1){
	flex: 1;
}
.postCodeCityFields > *:nth-of-type(2){
	flex: 2;
}
#myAddressEditMain {
	padding-bottom: 3em;
}




/*=============================================
=            Espace client : mes infos personnelles            =
=============================================*/
:is(#myPersonalInformationsContent,#myPersonalInformationsPersonalDataContent) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--size-gap-main-double);
}
:is(#myPersonalInformationsContent,#myPersonalInformationsPersonalDataContent) .section > div {
	border: 1px solid rgba(0,0,0,.1);
	padding: 1em;
}
:is(#myPersonalInformationsContent,#myPersonalInformationsPersonalDataContent) .section .header {
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1em;
}
:is(#myPersonalInformationsContent,#myPersonalInformationsPersonalDataContent) .section .header .title {
	font-weight: 700;
}
#myPersonalInformationsContent .section .content .userName {
	font-size: 1.16em;
	padding: 1em 0 1.5em;
	font-weight: 700;
	text-align: center;
}
#myPersonalInformationsContent .section .content .password {
	font-size: 1.16em;
	font-weight: 700;
}
#myPersonalInformationsContent .section .content .subInfos {
	display: flex;
	font-size: .88em;
	gap: var(--size-gap-main);
}
#myPersonalInformationsContent .section .content .subInfos li {
	flex: 1;
}
#myPersonalInformationsContent .addressesSection {
	grid-column: auto / span 2;
}
#myPersonalInformationsContent .section .content .favoriteAddresses {
	font-size: .88em;
	display: flex;
	gap: var(--size-gap-main);
	flex-wrap: wrap;
	margin-bottom: 1em;
}
#myPersonalInformationsContent .section .content .favoriteAddresses > * {
	flex: 1;
}
:is(#myPersonalInformationsContent,#myPersonalInformationsPersonalDataContent) .section .content :is(.description,.option) {
	font-size: .88em;
}
#myPersonalInformationsContent .section .content :is(.favoriteAddresses,.option) .title {  
	font-size: .88em;
	font-weight: 700;
	margin-bottom: 0.5em;
}

:is(#myPersonalInformationsContent,#myPersonalInformationsPersonalDataContent) .section .content .actions {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2em;
	margin-bottom: .5em;
	gap: 1em;
}

#myPersonalInformationsPersonalDataContent .section.rectificationRequest {
	grid-column: auto / span 2;
}

/* LG */
@media (max-width: 1199px) { 
	:is(#myPersonalInformationsContent, #myPersonalInformationsPersonalDataContent) {
		gap: 1em;
	}
	:is(#myPersonalInformationsContent, #myPersonalInformationsPersonalDataContent) .section .header .btn {
		font-size: .65em;
	}
	:is(#myPersonalInformationsContent, #myPersonalInformationsPersonalDataContent) .section .header .title {
		font-size: 1em;
	}
	#myPersonalInformationsContent .section .content .userName {
		font-size: 1.1em;
	}
	
}	
/* MD */
@media (max-width: 991px) {
	:is(#myPersonalInformationsContent, #myPersonalInformationsPersonalDataContent) .section .content .actions {
		margin-top: 1em;
		flex-wrap: wrap;
	}
}
/* SM */
@media (max-width: 767px) {
	:is(#myPersonalInformationsContent, #myPersonalInformationsPersonalDataContent) {
		grid-template-columns: 1fr;
	}
	:is(#myPersonalInformationsContent, #myPersonalInformationsPersonalDataContent) > * {
		grid-column: unset !important;
	}
	#myPersonalInformationsContent .section .content .userName {
		padding: 0 0 1em;
	}
	
}
/* XS */
@media (max-width: 575px) {
	#myPersonalInformationsContent .section .content .favoriteAddresses {
		flex-direction: column;
		gap: 1.5em;
	}
}

/*=============================================
=            Espace client : formulaire Mes coordonnées            =
=============================================*/
.userTypeFieldset .content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--size-gap-main);
	font-size: .88em;
}
.userTypeFieldset .content div {
	border: 1px solid rgba(0,0,0,.1);;
	padding: 1em;
	border-radius: 4px;
	position: relative;
}
.userTypeFieldset .content div label {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.userTypeFieldset .content div label span {
	padding-left: 2.5em;
}
.userTypeFieldset .content div:has(input:checked) {
	border-color: var(--color-main-high);
}
.userTypeFieldset .field {
	margin-bottom: 0;
}

.fieldsetVisibleFor_private.invisible, 
.fieldsetVisibleFor_business.invisible, 
.fieldsetVisibleFor_association.invisible, 
.fieldsetVisibleFor_administration.invisible {
	display:none;
}

.nameFieldGroup .field:has(select) {
	padding-top: 0;
}
.nameFieldGroup .field:has(select) label {
	left: 1em !important;
}
.nameFieldGroup .field:not(:nth-of-type(1)) {
	flex: 3;
}
.field + .disclaimer {
	font-size: .88em;
}
label[data-required-customs-fields-group]::after {
	content: attr(data-required-customs-fields-group);
	font-size: .7em;
	padding-left: .25em;
	vertical-align: super;
}
#administrativeInfosFieldset.hidden,
#administrativeInfosFieldset .hidden {
	display: none;
}
:is(#myAddressEdit,#myPersonalInformationsEdit) fieldset {
	margin-top: 2em;
}
/* SM */
@media (max-width: 767px) {
	.nameFieldGroup {
		display: block;
	}
	.field:has(select[name='gender']) {
		width: 8em;
	}
	.field + .disclaimer {
		font-size: .75em;
	}
}
/* XS */
@media (max-width: 575px) {
	.userTypeFieldset .content div {
		padding: .5em;
	}
	.userTypeFieldset input[type='radio'] {
		--form-size-radio: 18px;
	}
	.userTypeFieldset .content div label span {
		padding-left: 1.5em;
	}
}

/*=============================================
=            Espace client : suppression de compte            =
=============================================*/
#myPersonalInformationsDeleteAccountContent {
	font-size: .88em;
}
#myPersonalInformationsDeleteAccountContent .importantInfo {
	color: var(--color-alert-danger);
	font-weight: 700;
}
#myPersonalInformationsDeleteAccountContent form {
	margin-top: 2em;
}
:is(#myPersonalInformationsDeleteAccountContent,.confirmCheckboxes) input[type='checkbox']:invalid {
	border-bottom-color: unset;
	background: white;
	color: unset;
}



/*=============================================
=            Espace client : mes personnalisations sauvegardées            =
=============================================*/
#mySavecCustomizationsIntroduction {
	font-size: .85em;
	margin-bottom: 2em;
}
#mySavedCustomizations .noCustomizations {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	font-size: 1.5em;
	margin-top: 2em;
}

#mySavedCustomizationsList li {
	border: 1px solid rgba(0,0,0,.1);
	padding: 1em;
	margin-bottom: var(--size-gap-main);
	display: flex;
	gap: var(--size-gap-main-double);
	font-size: .85em;
}			
#mySavedCustomizations .illustration {
	width:100px;
	height:100px;
}	
#mySavedCustomizations .illustration img {
	width:100%;
	height:100%;
}
#mySavedCustomizationsList li .infos {
	flex: 1;
	font-size: .95em;
}
#mySavedCustomizationsList li .infos span {
	font-weight: 700;
}
#mySavedCustomizationsList .disclaimer {
	font-size: .85em;
	display: flex;
	gap: 1em;;
	margin-top: 1em;
}
#mySavedCustomizationsList .disclaimer i {
	padding-top: 0.1em;
}
#mySavedCustomizationsList .actions {
	max-width: 15em;;
}
#mySavedCustomizationsList .orderedCustomizationInfo {
	font-size: .85em;
	margin-top: 1em;
}
/* SM */
@media (max-width: 767px) {
	#mySavedCustomizationsList li {
		display: grid;
		grid-template-columns: 100px auto;
		gap: .5em 2em;
	}
	#mySavedCustomizations .illustration {
		grid-row: auto / span 2;
	}
}

/*=============================================
=            Espace client : envoi de fichiers / envoi de bon de commande (+ modale)            =
=============================================*/
:is(.sendFilesPage, .sendFilesModal) .headerInfos {
	display: flex;
	gap: 1em;;
	font-size: .85em;
	position: relative;
	padding: 1em;
}
:is(.sendFilesPage, .sendFilesModal) .headerInfos::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-alert-warning);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .1;
}
:is(.sendFilesPage, .sendFilesModal) .headerInfos > i {
	font-size: 2em;
	animation: sendFilesPageHeaderInfos 1.5s ease-out infinite;
}
@keyframes sendFilesPageHeaderInfos {
	0%,100% { opacity: 0; }
	50% { opacity: 1; }
}
:is(.sendFilesPage, .sendFilesModal) .headerInfos .actions {
	margin-top: 1em;
	
}
:is(.sendFilesPage, .sendFilesModal) .headerInfos .actions .btn {
	font-size: .85em;;
}
:is(.sendFilesPage, .sendFilesModal) .headerInfos .importantInfo {
	font-weight: 700;
	text-decoration: underline;
}



/*=============================================
=            Dates de fermeture            =
=============================================*/
#closingDatesList .noResults {
	text-align: center;
}
#closingDatesList ul {
	column-count: 4;
	column-gap: .25em var(--size-gap-main-double);
}
#closingDatesList li {
	list-style-type: disc;
	margin-left: 1em;
	padding-left: 0.5em;
	margin-bottom: 0.25em;
}



/*=============================================
=            Pages légales (confidentialité, mentions légales)            =
=============================================*/
.legalPage {
	font-size: 14px;
	padding: 3em 0;
}
.legalPage h1 {
	font-size: 2em;
	margin-bottom: 1em;
}
.legalPage :is(h2,h3) {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 2em;
}
.legalPage h2 {
	font-size: 1.1em;
}
.legalPage table {
	border-collapse: collapse;
	margin-bottom: 2em;
}
.legalPage table :is(th, td) {
	padding: 1em;
	border: 1px solid #ccc;
}


/*----------  CGV  ----------*/
#termsOfSale .actions {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}
#termsOfSale {
	padding-bottom: 6em;
}





/*=============================================
=            Panier            =
=============================================*/
#cart {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	gap: var(--size-gap-main-double);
	gap: .5em 4.6em;
	align-items: stretch;
	padding-top: 2.6em;
	padding-bottom: 2.6em;
}
/* LG */
@media (max-width: 1199px) { 
	#cart {
		padding-top: 2em;
		padding-bottom: 2em;
		gap: .5em 1.5em;
	}
	
}	
/* MD */
@media (max-width: 991px) {
	#cart {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
		display: flex;
		flex-direction: column;
		gap: 0;
	}
}
/* SM */
@media (max-width: 767px) {
	#cart {
		padding-top: 1em;
		padding-bottom: 1em;
	}
}

/*----------  Header  ----------*/
#cartHeader {
	grid-column: auto / span 12;
}

#cartHeader h1 {
	font-size: 1.77em;
	text-align: left;
	margin-bottom: 0;
}
#cartHeaderTitle {
	display: flex;
	align-items: center;
	gap: 1em;
}
/* MD */
@media (max-width: 991px) {
	#cartHeader {
		display: flex;
		gap: 1em;
		justify-content: space-between;
		align-items: center;
		margin-bottom: .25em;
	}
	#cartHeader h1 {
		font-size: 1.5em;
	}
	#cartHeader .field {
		margin-bottom: 0;
	}
}
/* SM */
@media (max-width: 767px) {
	#cartHeader h1 {
		font-size: 1.25em;
	}
}

/*----------  Options du panier  ----------*/
#cartOptions {
	display: flex;
	justify-content: flex-end;
	font-size: .7em;
}
#cartOptions.priceModeSwitcher .field input[type='radio'] {
	--form-size-radio: 16px;
}
#cartOptions.priceModeSwitcher .field-input-radio > div:last-of-type label {
	margin-right: 0;
	padding-right: 0;
}
#cart.emptyCart #cartOptions {
	display: none;
}

/*----------  Processus de commande  ----------*/
#cart #orderProcess {
	grid-column: 1 / 8;
	grid-row: 2/3;	
	--form-color-active: var(--color-secondary-40);
}
#cart.emptyCart #orderProcess {
	grid-column: auto / span 12;
}
/* MD */
@media (max-width: 991px) {
	#page-cart-part2 #orderProcess {
		margin-top: 1em;
	}
}



/*----------  Confirmation de commande (part 2)  ----------*/
#cart #orderProcessActionsContainer {
	grid-column: 1 / 8;
	grid-row: 3/4;	
}
/* MD */
@media (max-width: 991px) {
	#orderProcessActionsContainer {
		order: 3;
		margin-top: 2em;
		margin-bottom: 2em;
	}
}



/*----------  Panier vide  ----------*/
#emptyCartContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}
#emptyCartContent > i {
	font-size: 6em;
}
#emptyCartContent .title {
	font-size: 2em;
	font-weight: 700;
}
#emptyCartContent .actions {
	margin-top: 1em;
	margin-bottom: 2em;
}

/*----------  Résumé du panier  ----------*/
#cartSummary {
	grid-column: 8 / 13;
	grid-row: 2/4;
	position: sticky;
	top: 1em;
	max-height: 100vh;
}
#cartSummary .cartSummaryContainer {
	background: #f7f5f5;
	padding: 1.2em 2em;
	position: sticky;
	top: 1em;
}
#cart.emptyCart #cartSummary {
	display: none;
}
#page-cart-part2 #cartSummary {
	/* max-height: 22em; */
	overflow-y: auto;
}
#cartSummary .field label {
	background: #f7f5f5;
}
#cartSummary .cartSummaryContainer > .title {
	font-weight: 700;
	margin-bottom: 1em;
}
#cartSummary table {
	width: 100%;
	font-size: .88em;
}
#cartSummary table td {
	padding-bottom: 1em;
}
#cartSummary table td:nth-of-type(2) {
	text-align: right;
}
#cartSummary table tbody td :is(.visibleIfPriceModeTTC, .visibleIfPriceModeHT).visible {
	display: inline-block;
}
#cartSummary table td .discount {
	font-size: .8em;
	text-decoration: line-through;
}
#cartSummary .deliveryDestinationCountry {
	border-left: 2px solid rgba(0,0,0,.1);
	padding-left: 1em;
	padding-bottom: 0.25em;
	margin-bottom: 0.5em;
	font-size: .88em;
}
#cartSummary .deliveryDestinationCountry .field {
	padding-top: 0;
}
#cartSummary .estimatedDeliveryDate {
	font-size: .9em;
	display: flex;
	gap: .5em;
	align-items: center;
}
#cartSummary .estimatedDeliveryDate i {
	cursor: pointer;
}

#cartSummary tfoot td {
	font-weight: 700;
	font-size: 1.25em;
	color: var(--color-main-high);
	vertical-align: top;
}
#cartSummary .priceTTC.visibleIfPriceModeHT {
	font-size: .7em;
}
#cartSummary .promoCode {
	font-size: .8em;
}
#cartSummary .promoCode .title {
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transform: .5s;
	
}
#cartSummary .promoCode .title:hover {
	color: rgba(0,0,0,.9);
}
#cartSummary .promoCode .title i {
	font-size: 1.2em;
}
#cartSummary .promoCode:has(#promoCodeField.visible) .title i {
	transform: rotate(180deg);
}
#cartSummary #promoCodeField {
	display: none;
	gap: 1em;
	align-items: flex-start;
	margin-top: 0.5em;
}
#cartSummary #promoCodeField.visible {
	display: flex;
}
#cartSummary #promoCodeField .field {
	margin-bottom: 0;
	flex: 1;
}
#cartSummary #promoCodeField button {
	font-size: .85em;
	margin-top: 0.75em;
}
#cartSummary #promoCodeField .hint {
	display: flex;
	gap: 1em;
}

#cartSummary .actions {
	margin: 2em 0;
	display: flex;
	flex-direction: column;
	gap: .5em;
}
:is(#cartSummary,#orderProcessActions) .btnSuccess {
	font-size: 1.15em;
	width: 100%;
	padding: .45em 1em;
}
:is(#cartSummary,#orderProcessActions) .btnOutline {
	width: 100%;
}
:is(#page-quote,#page-quote-part2) #orderProcessActions .btnSuccess { 
	--button-color: var(--color-secondary-40);
	--button-color-outline: var(--color-secondary-30);
}
:is(#page-quote,#page-quote-part2) :is(#cartSummary,#orderProcessActions) .btnSuccess i {
	display: none;
}
#cartSummary .reinsurance {
	font-size: .88em;
	color: var(--color-main-high);
}
#cartSummary:not(:has(.cartSummaryContainer > .actions)) .reinsurance {
	margin-top: 3em;
}
#cartSummary .reinsurance li {
	display: flex;
	gap: .5em;
	margin-bottom: .5em;
	align-items: center;
}
#cartSummary .reinsurance i {
	font-size: 1.25em;
	transform: translateY(-1px);
}

#cartSummary .moreActions {
	font-size: .8em;
	margin-top: 2em;
}
#cartSummary .moreActions li {
	margin-bottom: 1em;
}

#cartSummary .loading {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3em;
}
/* LG */
@media (max-width: 1199px) { 
	#cartSummary .cartSummaryContainer {
		padding: 1.1em 1.5em;
	}
	#cartSummary table td {
		padding-bottom: 0.75em;
	}
}
/* MD */
@media (max-width: 991px) {
	#cartSummary {
		order: 2;
		position: relative;
		top: unset;
		max-height: unset;
	}
	#cartSummary .reinsurance {
		display: flex;
		gap: 2em;
	}
	#cartSummary .moreActions {
		/* display: flex; */
		/* gap: 2em; */
	}
}
/* SM */
@media (max-width: 767px) {
	#cartSummary .cartSummaryContainer > .title {
		margin-bottom: 0.5em;
	}
	#cartSummary table tbody td {
		font-size: .9em;
	}
	#cartSummary .actions {
		margin: 1.5em 0 1em;
	}
	:is(#cartSummary, #orderProcess, #orderProcessActionsContainer) .btnSuccess {
		font-size: 1em;
	}
	#cartSummary .moreActions {
		margin-top: 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#cartSummary .cartSummaryContainer {
		padding: 1em;
	}
	#cartSummary .reinsurance {
		font-size: .75em;
		gap: 1em;
		justify-content: space-between;
	}
	#cartSummary .moreActions {
		justify-content: space-between;
	}
}

/*----------  Résumé des articles dans la partie 2 du panier  ----------*/
#cartSummaryNbLines {
	display: flex;
	align-items: center;
	gap: .5em;
}
#cartSummary .cartLines {
	display: none;
	font-size: .95em;
	border-left: 2px solid rgba(0,0,0,.1);
}
#cartSummary .cartLines.visible {
	display: table-row
}
#cartSummary .cartLines table {
	margin-bottom: .5em;
}
#cartSummary .cartLines > td {
	padding-bottom: 0;
}
#cartSummary .productNameContainer {
	position: relative;
}
#cartSummary .productName {
	max-width: 20em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: .5em;
	display: block;
	cursor:help;
}
#cartSummary .productTooltip {
	display: none;
	width: 25em;
	padding: 1em;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	position: absolute;
	bottom: 100%;
	left: 1em;
	background: white;
}
#cartSummary .productName:hover + .productTooltip {
	display: block;
}




/*----------  Process de commande  ----------*/
#orderProcess > div:not(#cartFullContent) {
	margin-bottom: 1.5em;
}
#orderProcess fieldset legend {
	color: var(--color-main-medium);
	font-weight: 700;
	font-size: 1em;
	margin-bottom: 1em;
	color: var(--color-secondary-40)
}
#orderProcess fieldset legend::after {
	background-color: var(--color-secondary-40);
	opacity: .5;
}
#orderProcess fieldset > .actions {
	display: flex;
	justify-content: flex-end;
}

:is(.cart-part2,.quote-part2) #orderProcess li label,
#chooseAddress label {
	display: flex;
	align-items: center;
	gap: 1em;;
	margin-bottom: 1em;
	border: 1px solid rgba(0,0,0,.1);
	padding: .75em 1em;
	border-radius: 3px;
	transition: .10s;
	cursor: pointer;
}
:is(.cart-part2,.quote-part2) #orderProcess li:has(label:hover,input:hover),
#chooseAddress li:has(label:hover,input:hover) {
	border-color: rgba(0,0,0,.3);
}
:is(.cart-part2,.quote-part2) #orderProcess li input,
#chooseAddress li input {
	order: unset;
}
:is(.cart-part2,.quote-part2) #orderProcess li label > span,
#chooseAddress li label > span {
	font-size: .88em;
	flex: 1;
}
:is(.cart-part2,.quote-part2) #orderProcess li > label > span i,
#chooseAddress li > label > span i {
	margin-right: 0.5em;
}
:is(.cart-part2,.quote-part2) #orderProcess :is(.nameAndCompany,.name),
#chooseAddress :is(.nameAndCompany,.name) {
	font-weight: 700;
}
:is(.cart-part2,.quote-part2) #orderProcess .name,
#chooseAddress .name {
	display: block;
}
:is(.cart-part2,.quote-part2) #orderProcess li .actions,
#chooseAddress li .actions {
	font-size: .8em;
}
:is(.cart-part2,.quote-part2) #orderProcess li .actions a,
#chooseAddress li .actions a {
	padding: 1em 0;
}


#chooseAddress .container {
	max-width: 60em;
}
#chooseAddress .content {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#chooseAddress .content .actions {
	margin-top: 0;
}
#chooseAddress .globalActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
	margin-bottom: 1em;
	width: 100%;
}

#chooseAddress .backofficeSearchbar {
	flex: 1;
}
#chooseAddress .content .spinner.hidden {
	display: none;
}
#chooseAddress .content > ul {
	max-height: 50vh;
	overflow-y: auto;;
}
#chooseAddress .content > ul li {
	margin-right: 1em;
}
#chooseAddress .content > ul li > label > span {
	font-size: .8em;
}
#chooseAddress .content .pager {
	margin-top: 1em;
}

/* SM */
@media (max-width: 767px) {
	:is(.cart-part2,.quote-part2) #orderProcess li {
		font-size: .9em;
	}
}
/* XS */
@media (max-width: 575px) {
	:is(.cart-part2,.quote-part2) #orderProcess #orderProcessAddresses li label,
	#chooseAddress .content > ul li label {
		display: grid;
		grid-template-columns: 3em auto;
		gap: 0;
	}
	:is(.cart-part2,.quote-part2) #orderProcess #orderProcessAddresses li > input,
	#chooseAddress .content > ul li > input {
		grid-row: auto / span 2;
	}
	:is(.cart-part2,.quote-part2) #orderProcess #orderProcessAddresses li .actions,
	#chooseAddress .content > ul li .actions {
		margin-top: 0;
		text-align: right;
		grid-column: auto / span 2;
	}
	#chooseAddress .content > ul li .actions {
		display: block;
	}
}

/* adresses */
#orderProcess .loadMoreContainer {
	text-align: center;
	font-size: .88em;
	display: none;
}
#orderProcess .addressList:has(li:nth-of-type(5)) + .loadMoreContainer{ /* définir le nombre d'adresse à partir duquel on affiche le lien */
	display: block;
}
#orderProcess .deliveryAddressPickupChoice {
	margin-top: 2em;
	position: relative;
}
#orderProcess .deliveryAddressPickupChoice:before {
	content: "";
	display: block;
	width: 30%;
	height: 1px;
	background: rgba(0,0,0,.1);
	position: absolute;
	top: -1em;
	left: 50%;
	transform: translateX(-50%);
}

/* switch adresse de facturation identique */
#invoiceAddressChoiceContainer .input-switch {
	font-size: .88em;
	margin-bottom: 1em;
}
#invoiceAddressChoiceContainer .input-switch label > span {
	padding-left: .5em; 
}
#invoiceAddressChoiceContainer .input-switch > label::before {
	float: left;
}
#invoiceAddressChoiceContainer .input-switch > label::after {
	right: unset;
	left: calc(var(--form-switch-track-height) - 5px);
}
/* SM */
@media (max-width: 767px) {
	#invoiceAddressChoiceContainer .input-switch {
		font-size: .8em;
	}
}

/* fieldset adresse de facturation */
#invoiceAddressFieldset {
	display: none;
	margin-top: 1em;
}
#invoiceAddressFieldset.visible {
	display: block;
}

/* transporteur */
#page-quote-part2 #orderProcessShipping {
	display: none !important;
}
#orderProcessShipping label {
	display: flex;
}
#orderProcessShipping label .infos {
	flex: 1;
	align-items: center;
}
#orderProcessShipping .logo {
	display: flex;
	align-items: center;
}
#orderProcessShipping .logo img {
	max-height: 2em;
	width: auto;
}

/* commentaire */
#orderProcessMoreInfos .description {
	font-size: .88em;
	margin-bottom: 0.5em;
}
#orderProcess :is(input[type='date'],textarea) {
	font-size: .88em;
}
/* SM */
@media (max-width: 767px) {
	#orderProcessMoreInfos .description {
		font-size: .8em;
	}
}

/* paiement */
#orderProcessPayment li i {
	font-size: 1.5em;
}
#orderProcessPayment li .illustration {
	display: flex;
	gap: .5em;
	align-items: center;
}
#orderProcessPayment li img {
	height: .75em;
	width: auto;
}


/* Validation des CGV */
.field #cartCGV:invalid:not(:placeholder-shown)  {
	background: inherit;
	color: inherit;
	border-bottom-color: inherit;
}
#cartValidCGV label {
	font-size: .85em;
	padding-right: 0;
	margin-right: 0;
}
/* SM */
@media (max-width: 767px) {
	#cartValidCGV label {
		font-size: .75em;
	}
}


/*----------  Popup vérification custo  ----------*/

#checkCustomization .content > div {
	display: none;
}
#checkCustomization .content > div.visible {
	display: flex;
}
#checkCustomization:has(#checkCustomizationPreview.visible) .container > .header {
	display: none;
}
#checkCustomizationMain {
	flex-direction: column;
}
#checkCustomizationMain .introduction {
	font-size: .85em;
}
#checkCustomizationMain .introduction strong {
	color: orangered;
}
#checkCustomizationMain .introduction strong:nth-of-type(2) {
	background: orangered;
	color: white;
	padding: 0 .25em;
}
#checkCustomizationCartLines {
	font-size: .75em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 2em 0;
}
#checkCustomizationCartLines > li {
	display: flex;
	gap: 2em;
}
#checkCustomizationCartLines > li > img {
	width: 7.5em;
	height: 7.5em;
	cursor: pointer;
}
#checkCustomizationCartLines .infos {
	flex: 1;
}
#checkCustomizationCartLines .productName {
	font-weight: 700;
}
#checkCustomizationCartLines .checkStatus {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
#checkCustomizationCartLines .checkStatus i {
	font-size: 2em;
	animation: 2s infinite blinkingArrow;
}
#checkCustomizationCartLines li.checked .checkStatus i {
	opacity: 0;
	animation: none;
}
#checkCustomizationCartLines li.checked .checkStatus::before {
	content: "\e964";
	font-family: var(--font-icons);
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	padding-top: 0.1em;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-size: 3em;
	color: var(--color-alert-success);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#checkCustomizationCartLines .checkStatus i:nth-of-type(2) {
	animation-delay: .15s;
}
#checkCustomizationCartLines .checkStatus i:nth-of-type(3) {
	animation-delay: .30s;
}
@keyframes blinkingArrow {
	0%,20%,100% { opacity: 0; transform: scale(.8); }
	50% { opacity: 1; transform: scale(1.5); }
}


#checkCustomizationCartLines .lineActions {
	display: flex;
	align-items: center;
}
#checkCustomizationCartLines li.checked .checkBtn {
	opacity: .5;
}

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

#checkCustomizationMain button.notAllChecked {
	opacity: .6;
	filter: saturate(75%);
}
#checkCustomization:has(#checkCustomizationPreview.visible) :is(.container,.content) {
	height: calc(100% - 3em);
}
#checkCustomizationPreview {
	flex-direction: column;
	gap: 1em;
	height: 100%;;
}
#checkCustomizationPreview iframe {
	width: 40em;
	flex: 1;
	border: 0;
}

/* XS */
@media (max-width: 575px) {
	#checkCustomizationCartLines > li {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: .5em 1em;
	}
	#checkCustomizationCartLines > li > img {
		grid-row: 1/4;
		width: 4em;
		height: 4em;
	}
	#checkCustomizationMain .introduction {
		font-size: .75em;
	}
	#checkCustomizationCartLines .checkStatus i {
		display: none;
	}
	#checkCustomizationCartLines li.checked .checkStatus {
		justify-content: flex-start;
	}
	#checkCustomizationCartLines li.checked .checkStatus::before {
		position: relative;
		top: unset;
		left: unset;
		transform: unset;
		font-size: 2em;
	}
	#checkCustomizationCartLines .lineActions {
		grid-column: 2/3;		
	}
	#checkCustomizationCartLines li.checked .lineActions {
		display: none;
	}
	
}

/*----------  Modale Explication délais  ----------*/
#shippingDelayExplanation .header {
	padding-bottom: 1em;
}
#shippingDelayExplanation .content {
	font-size: .88em;
}
#shippingDelayExplanation .disclaimer {
	margin-top: 1em;
	font-size: .8em;
}


/*----------  Modale Sauvegarde du panier / Création de devis depuis un panier  ----------*/
:is(#cartToSavedCart,#cartToQuote) .container {
	min-width: min(25em,95vw);
}
:is(#cartToSavedCart,#cartToQuote) .content .description {
	font-size: .88em;
}
:is(#cartToSavedCart,#cartToQuote) .introduction {
	margin-bottom: 1em;
	display: flex;
	gap: 1em;
}
:is(#cartToSavedCart,#cartToQuote) .introduction img {
	width: 2em;
}
:is(#cartToSavedCart,#cartToQuote) fieldset {
	margin-bottom: 1em;
}
:is(#cartToSavedCart,#cartToQuote) legend {
	color: var(--color-secondary-40);
	font-weight: 700;
	font-size: .85em;
}
:is(#cartToSavedCart,#cartToQuote) legend::after {
	background-color: var(--color-secondary-40);
	opacity: .5;
}
:is(#cartToSavedCart,#cartToQuote) .addresses {
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
:is(#cartToSavedCart,#cartToQuote) .addresses li {
	display: flex;
	gap: 1em;
	align-items: center;
}
:is(#cartToSavedCart,#cartToQuote) .addresses li .addressContainer {
	flex: 1;
}
:is(#cartToSavedCart,#cartToQuote) .addresses li .addressType {
	font-weight: 700;
}

:is(#cartToSavedCart,#cartToQuote) .hint {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em;
	background: #fffcf1;
	margin-bottom: 1em;
}

/* XS */
@media (max-width: 575px) {
	:is(#cartToSavedCart,#cartToQuote) .addresses li {
		flex-direction: column;
		gap: 0;
	}
	:is(#cartToSavedCart,#cartToQuote) .addresses li > * {
		width: 100%;
	}
}

#cartToQuoteConfirmation .description {
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
	position: relative;
	padding: 1em;
	color: var(--color-alert-success);
	gap: 1em;
}
#cartToQuoteConfirmation .description::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-alert-success);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .1;
}
#cartToQuoteConfirmation .description > div {
	position: relative;
	z-index: 1;
}
#cartToQuoteConfirmation .description i {
	font-size: 1.5em;
}

/*----------  Modale Délais différents  ----------*/
#shippingDelayInconsistent .content {
	display: flex;
	flex-direction: column;
	gap: 1em;
	font-size: .88em;
}
#shippingDelayInconsistent :is(.introduction,.instruction) {
	text-align: center;
}
#shippingDelayInconsistent :is(.introduction,.instruction) strong {
	color: chocolate;
}
#shippingDelayInconsistent td {
	text-align: center;
	border-top: 1px solid rgba(0,0,0,.1);
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding: .25em;
}
#shippingDelayInconsistent tr td:first-of-type {
	font-weight: 500;
}
#shippingDelayInconsistent .delayOptions {
	display: flex;
	gap: var(--size-gap-main-double);
}
#shippingDelayInconsistent .delayOptions > * {
	flex: 1;
}
#shippingDelayInconsistent .delayOptions label {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25em;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,.2);
	padding: .75em;
	border-radius: .25em;
}
#shippingDelayInconsistent .delayOptions .delayTitle {
	text-align: center;
	font-size: 1.1em;
}
#shippingDelayInconsistent .delayOptions .delayTitle span {
	display: block;
	font-weight: 700;
	color: var(--color-secondary-40);
}
#shippingDelayInconsistent .delayOptions label > ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: .9em;
}
#shippingDelayInconsistent .delayOptions label:has(input:checked) {
	outline: 3px solid var(--color-main-high);
	border-color: transparent;
}
#shippingDelayInconsistent .disclaimer {
	font-size: .75em;
	margin-top: 1em;
}
#shippingDelayInconsistent .actions {
	margin-top: 2em;
}
/* XS */
@media (max-width: 575px) {
	#shippingDelayInconsistent .delayOptions {
		flex-direction: column;
	}
	#shippingDelayInconsistent .delayOptions > * {
		flex: unset;
	}
	#shippingDelayInconsistent .delayOptions label {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 .5em;
	}
	#shippingDelayInconsistent .delayOptions input {
		grid-row: 1/3;
	}
	#shippingDelayInconsistent .delayOptions .delayTitle {
		font-size: 1em;
	}
	#shippingDelayInconsistent .delayOptions .delayTitle span {
		display: inline;
	}
}

/*
	Nico, j'ai ajouté toutes cette partie là, c'est un copier/coller de laboutiquerie.
	J'ai juste été obligé d'jaouter "position: fixed;top: 0;" dans "#paymentFormContainer.visible", le reste c'est identique.
	Je te laisse revoir ça si necessaire et la ranger à ta convenance.

	EDIT: Finalement j'ai changé un peu le fonctionnement en ajoutant des classe loading et formDisplayed sur le wrapper dans le but de pouvoir afficher un loader le temps que le widget se charge et ensuite au changement de page
*/

/*----------  Fenêtre de paiement CB  ----------*/
#paymentFormWrapper .loader { /*! TODOGREG: c'est où ce .loader ? */
	display:none;
	margin-top: 1em;
	margin-bottom: 1em;
}

body.overlayVisible {
	overflow: hidden;
}
/* container */
#paymentFormContainer {
	display: none;
	position: absolute;
	z-index: 900;
	background: rgba(255,255,255,.95);
	width: 100vw;
	height: 100vh;
	
	align-items: center;
	justify-content: center;
}
#paymentFormContainer.visible {
	display: flex;
	position: fixed;
	top: 0;
}

/* fenêtre principale */
#paymentFormWrapper {
	background: white;
	border-radius: .5em;
	padding: 3em 3em 2em 3em;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	position: relative;
}
#paymentFormWrapper > * {
	max-width: 266px;
}

/* bouton fermeture */
#paymentFormHideBtn {
	font-size: 2em;
	opacity: .7;
	cursor: pointer;
	position: absolute;
	top: .35em;
	right: .35em;
}
#paymentFormHideBtn:hover {
	opacity: 1;
}

/* contenu de la fenêtre principale */
#paymentFormWrapper :is(.loading, .instructions, .instructions2, #paymentForm) {
	display:none;
}

/* logos du header */
#paymentFormHeader .mainLogo {
	text-align: center;
	margin-bottom: 0.5em;
}
#paymentFormHeader .mainLogo img {
	max-width: 100%;
}
#paymentFormHeader .otherLogos {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#paymentFormHeader .otherLogos img {
	height: 20px;
	width: auto;
}

/* loader */
#paymentFormWrapper .loading {
	margin: 3em 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
}
#paymentFormWrapper.loading .loading {
	display:flex !important;
}

/* infos données chiffrées */
#paymentFormWrapper .instructions {
	font-size: .8em;
	margin-top: 1em;
	gap: .5em;
}
#paymentFormWrapper.formDisplayed .instructions {
	display: flex !important;
}
#paymentFormWrapper.formDisplayed .instructions i {
	font-size: 1.5em;
	color: var(--color-alert-success);
}

/* consigne "saississez les informations de votre carte" */
#paymentFormWrapper .instructions2 {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: .85em;
}

#paymentFormWrapper.formDisplayed :is(.instructions2, #paymentForm) {
	display:block!important;
}

#paymentFormWrapper button::before,
#paymentFormWrapper button::after {
	display: none !important;
}



/*! à mettre dans les modules en haut de fichier ? */
.warningMessage {
	display: none;
	color: var(--color-alert-warning);
	position: relative;
	padding: 1em;
	font-size: .88em;
	margin-bottom: 1em;
}
.warningMessage.visible {
	display: block;
}
.warningMessage > * {
	position: relative;
	z-index: 1;
}
.warningMessage::before {
	content: '';
	background: var(--color-alert-warning);
	opacity: .1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
/* XS */
@media (max-width: 575px) {
	.warningMessage {
		font-size: .85em;
	}
}


/*=============================================
=            Confirmation de commande            =
=============================================*/
.orderConfirmationPage {
	padding-top: 8em;
	padding-bottom: 5em;
}
.orderConfirmationPage .header {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.orderConfirmationPage .header i {
	font-size: 6em;
	color: var(--color-alert-success);
}
.orderConfirmationPage .message {
	text-align: center;
}
.orderConfirmationPage .actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: 2em;
}

.orderConfirmationPage .orderInfos {
	display: flex;
	gap: var(--size-gap-main-double);
	font-size: .95em;
}
.orderConfirmationPage .orderInfos > * {
	flex: 1;
}
.orderConfirmationPage .orderInfos :is(th,td) {
	vertical-align: top;
	padding-bottom: 0.5em;
}
.orderConfirmationPage .orderInfos th {
	text-align: left;
	padding-right: 1em;
}
.orderConfirmationPage .orderPaymentInstructions {
	/* border: 1px solid rgba(0,0,0,.1); */
	padding: 1em;
	position: relative;
}
.orderConfirmationPage .orderPaymentInstructions::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-alert-success);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .08;
}
.orderConfirmationPage .orderPaymentInstructions .introduction {
	margin-bottom: 1em;
}

.orderConfirmationPage .orderPaymentActions {
	display: flex;
	gap: 1em;
	align-items: center;
	margin-top: 1em;
}
/* LG */
@media (max-width: 1199px) { 
	.orderConfirmationPage {
		padding-top: 5em;
		padding-bottom: 3em;
	}
	.orderConfirmationPage .header i {
		font-size: 5em;
	}
	.orderConfirmationPage .orderInfos > *:nth-of-type(1) {
		flex: 2;
	}
	.orderConfirmationPage .orderInfos > *:nth-of-type(2) {
		flex: 3;
	}
}	
/* MD */
@media (max-width: 991px) {
	.orderConfirmationPage {
		padding-top: 3em;
		padding-bottom: 2em;
	}
	.orderConfirmationPage .header i {
		font-size: 4em;
	}
	.orderConfirmationPage .orderInfos {
		flex-direction: column;
	}
	.orderConfirmationPage .orderInfos > * {
		flex: unset;
	}
}
/* XS */
@media (max-width: 575px) {
	.orderConfirmationPage {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.orderConfirmationPage .header i {
		font-size: 2em;
	}
	.orderConfirmationPage :is(.message,.orderInfos) {
		font-size: .88em;
	}
}



/*=============================================
=            Envoi de fichiers            =
=============================================*/
.sendFilesModal .hidden {
	display: none;
}
.sendFilesModal .content {
	min-width: 30em;
}
#sendOrderForm .headerInfos {
	margin-bottom: 1em;
	font-size: .8em;
}
#sendOrderFiles .orderLines >  li {
	padding: 1em;
	margin-bottom: 1em;
	font-size: .85em;
	border-left: .5em solid rgba(0,0,0,.3);
}
#sendOrderFiles .orderLines >  li .field {
	display: flex;
}
#sendOrderFiles .orderLines >  li .field label {
	flex: 1;
	background: transparent;
}
#sendOrderFiles .orderLines >  li:has(input:checked) {
	border-left-color: var(--color-secondary-40);
	background: var(--color-secondary-99);
}
.sendFilesModal .filesSection {
	display: flex;
	gap: 1em;
	flex-direction: column;
}
.sendFilesModal .sentFiles {
	font-size: .85em;
}
#sendOrderForm .sentFiles {
	font-size: .75em;
	margin-bottom: 1em;
}
.sendFilesModal .sentFiles .title {
	margin-bottom: 0.5em;
}
.sendFilesModal .sentFiles .title {
	font-weight: 700;
}
.sendFilesModal .sentFiles li {
	display: flex;
	gap: 1em;
	align-items: center;
	padding-bottom: 0.35em;
	margin-bottom: 0.35em;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.sendFilesModal .sentFiles li:last-of-type {
	border-bottom: none;
}
.sendFilesModal .sentFiles li i {
	font-size: 1.25em;
	cursor: pointer;
}
.sendFilesModal .sentFiles li .hasComment {
	color: var(--color-primary-40);
}
.sendFilesModal .sentFiles li i.hio-check-circle {
	color: var(--color-alert-success);
}
.sendFilesModal .sentFiles .fileNameContainer {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1em;
}
.sendFilesModal .sentFiles .fileNameContainer .uploadProgress {
	font-size: .75em;
}
.sendFilesModal .sentFiles .spinner {
	--loader-size: 15px;
	--loader-borderWidth : 2px;
}
.sendFilesModal .sentFiles li .actions {
	margin-top: 0;
}
#sendOrderFiles .orderLines form {
	display: none;
}
#sendOrderFiles .orderLines >  li:has(input:checked) form {
	display: block;
}
.sendFilesModal .uploadZone {
	position: relative;
	border: 2px dashed rgba(0,0,0,.2);
	padding: 1em;
}
.sendFilesModal input[type='file'] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.sendFilesModal .uploadZone .legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .25em;
    text-align: center;
	font-size: .85em;
}
.sendFilesModal .uploadZone .legend i {
	font-size: 3em;
}

/*=============================================
=            404            =
=============================================*/
#error404Main {
	text-align: center;
}
#error404Main h1 {
	font-size: 3em;
	margin-bottom: 0;
}

#error404Main .actions {
	margin-top: 2em;
	padding-bottom: 5em;
}


/*=============================================
=            Prefooter            =
=============================================*/
#prefooter {
	border-top: 2px solid var(--color-primary-40);
	padding: 2em 0;
	--symbol-color: rgba(0,0,0,.7);
}
#prefooter ul {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}
#prefooter ul li {
	display: grid;
	grid-template-rows: 3.5em auto;
	gap: .5em;
	justify-items: center;
}
#prefooter ul li :is(i,span.icon-france) {
	font-size: 3.1em;
}
#prefooter ul li i {
	color: var(--symbol-color);
}
#prefooter ul li span.icon-france::before {
	background: var(--symbol-color);
}
#prefooter ul li .legend {
	text-align: center;
	font-size: .88em;
}
/* LG */
@media (max-width: 1199px) { 
	#prefooter {
		padding: 1.5em 0;
	}
	#prefooter ul li {
		grid-template-rows: 2.7em;
	}
	#prefooter ul li :is(i,span.icon-france) {
		font-size: 2.5em;
	}
	#prefooter ul li .legend {
		font-size: .75em;
		font-weight: 500;
	}
}
/* SM */
@media (max-width: 767px) {
	#prefooter ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: .5em 0;
	}
	#prefooter ul li {
		width: 49%;
		display: flex;
		gap: 1em;
		align-items: center;
		
	}
	#prefooter ul li :is(i,span.icon-france) {
		width: 1em;
	}
	#prefooter ul li .legend {
		flex: 1;
		text-align: left;
	}
}
/* XS */
@media (max-width: 575px) {
	#prefooter {
		padding: .5em 0;
	}
	#prefooter ul {
		flex-wrap: nowrap;
		flex-direction: column;
		gap: .5em;
	}
	#prefooter ul li {
		width: 100%;
	}
	#prefooter ul li :is(i,span.icon-france) {
		font-size: 1.5em;
	}
}


/*=============================================
=            Footer            =
=============================================*/
footer {
	background: #f5f5f5;
	padding-top: 3em;
}

/*----------  MainFooter  ----------*/
#mainFooter {
	display: flex;
	gap: 2em;
}
#mainFooter > * {
	flex: 1;
}

#mainFooterContactLink {
	margin-top: 1em;
}

#mainFooterLinks {
	display: flex;
	gap: 2em;
}
#mainFooterLinks > * {
	flex: 1;
}
#mainFooterLinks > li {
	font-size: .83em;
}
#mainFooterLinks .title {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 0.5em;
}
#mainFooterLinks a {
	text-decoration: none;
	display: block;
	padding: .25em 0;
}
#mainFooterLinks a:hover {
	text-decoration: underline;
}

/* MD */
@media (max-width: 991px) {
	footer {
		padding: 2em 0;
	}
	#mainFooter {
		flex-direction: column;
	}
	#mainFooterContact {
		text-align: center;
	}
	#mainFooterContact .openingHours {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#mainFooterLinks {
		flex-direction: column;
		gap: 1em;
	}
	#mainFooterLinks ul {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 0 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#mainFooterLinks ul {
		grid-template-columns: repeat(2,1fr);
		gap: 0 1em;
	}
}
/*----------  Subfooter  ----------*/
#subFooter {
	font-size: .72em;
	padding: 1em 0;
	border-top: 1px solid rgba(0,0,0,.14);
	border-bottom: 1px solid rgba(0,0,0,.14);
	margin: 2em 0 0;
}
#subFooter ul {
	display: flex;
	gap: 1em;
	justify-content: space-between;
}
#subFooter li > * {
	text-decoration: none;
	padding-left: 1em;
	padding-right: 1em;
}
#subFooter li > *:hover {
	text-decoration: underline;
}
/* LG */
@media (max-width: 1199px) { 
	#subFooter ul {
		flex-wrap: wrap;
		justify-content: center;
	}
}	
/* MD */
@media (max-width: 991px) {

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

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

}

/*----------  Copyright  ----------*/
#copyright {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	justify-content: center;
	text-align: center;
	font-size: .72em;
	padding: 1em 0;
	margin-bottom: 1em;
}