@import url('https://cdn.imprimetcom.fr/fonts/imprimetcom.css');


/*!=============================================*/
/*!            A RANGER            =*/
/*!=============================================*/


#work { /* Il ne faut que ça soit en display:none, mais ça ne doit pas être visible */
	position:absolute;
	left:-50000px;
	top:-50000px;
}


.displayedOnlyIfNoPrintColorRestriction:not(.visible) {
	display:none!important;
}
.displayedOnlyIfPrintColorRestriction:not(.visible) {
	display:none!important;
}
.displayedOnlyIfVectorisationEnabled:not(.visible) {
	display:none!important;
}

/*! ############################################################## TEMP ############################################################## */
body.customizationMethod-themes li:is([data-size='quadri12'],[data-size='quadri18'],[data-size='quadri40']) {
	display: none !important;
}

body.blankProduct {
	background: white !important;
}

body.blankProduct :is(#center,#objInfosPersonalisation,#subBtnContainer,#currentObject) {
	display: none;
}
body.blankProduct #page {
	flex-direction: column;
	width: 600px;
	margin: 0 auto;
}
body.blankProduct :is(#left,#right) {
	width: 100%;
	flex: unset;
}
body.blankProduct :is(#left,#right) h2 {
	display: none;
}

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

:root {
	--color-main-500: #333;
	--color-accent-500: #e39000;

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

	--font-main: 'Poppins', sans-serif;
	--font-icons: "Font Awesome 5 Free";

	--size-margin-default: 15px;
}


/* SM modifié */
@media (max-width: 840px) {
	:root {
		--size-margin-default: 10px;
	}
}


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

html,
body {
	margin:0;
	padding:0;
	height:100%;
	font-family: var(--font-main);
}

body {	
	background: url('../images/background.jpg') #f6f5f3 no-repeat;
	background-size: 100% min(95vh,75vw);
	
	/*
	background: rgb(238,238,238);
	background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(238,238,238,1) 100%); 
	*/
	/* background-size: 100% min(100%,25vh); */
	/* background-position-y: top; */

	font-size: 15px;
	color: var(--color-main-500);
}
body.currentUniverse-glasses { /* @Nico, à toi de jouer */
	/* background-color:rgba(0,0,0,0.5); */
	/* background-image:none; */
	background-image: url('../images/background-glasses.jpg');
	background-size: cover;
	background-position-y: bottom;
}
body.currentUniverse-glasses :is(#left,#right) {
	background-color: rgba(255,255,255,.9);;
}
/* SM modifié */
@media (max-width: 840px) {
	body.currentUniverse-glasses {	
		background-size: 200% 200%;
	}
}

/* changement de background si mode 2D */
body.mode2D {
	background-image: url('../images/background-2D.jpg');
	background-size: cover;
}

/*! TEMP NICO */
body.currentUniverse-mug {
	background-size: 100% min(72vh,75vw);
}

/* LG */
@media (max-width: 1199px) { 
	body {
		font-size: 14px;
	}
}

/* SM modifié */
@media (max-width: 840px) {
	body {
		font-size: 15px;
	}
}


/*----------  Boutons  ----------*/
button {
	font-family: var(--font-main);
}
.btn {
	background-color: var(--color-main-500);
	border: 1px solid transparent;
	color: white;
	text-align: center;
	border-radius:2px;
	padding: 1em 0;
	display: block;
	text-transform: uppercase;
	font-weight: 600;
	width: 100%;
	font-size: .8em;
	cursor: pointer;
	box-shadow: none;
	transition:	all .10s ease-in-out;
}
.btn:hover {
	opacity: .9;	
}
.btnOutline {
	background: transparent;
	border-color: var(--color-main-500);
	color: var(--color-main-500);
}
.btnOutline:hover {
	background: rgba(0,0,0,.15);
	opacity: 1;
	border-color: rgba(0,0,0,.0);
}

.popupLeft button {
	display:block;
	width:90%;
	font-size: 1.06em;
	font-weight: 600;
	margin:0 auto;
	margin-top: 1em;
	padding: .5em 1em;
	border:1px solid #7A7A7A;
	background-color:#FFF;
	cursor:pointer;
}

.btnSmall,
.popupLeft button.btnSmall {
	padding: .1em 1em;
	width: auto;
	display: inline-block;
}
.popupLeft button.btnSmall {
	font-size: .8em;
	margin-top: .3em;

}
/* SM modifié */
@media (max-width: 840px) {
	.btn {
		padding: .4em 0;
	}
}

/*----------  Titres  ----------*/
h2  {
	font-weight: 200;
	font-size: 1.6em;
	margin: 0;
}

/*----------  Formulaires  ----------*/
form {
	display: none;
}

label {
	font-weight: 600;
	font-size: .86em;
	width: 25%;
	display:inline-block;
}
.popupLeft label {
	font-size: .8em;
}

input {
	font-family: var(--font-main);
	padding: 0.5em;
	border-radius: 2px;
}

/* Note : fullCustomizable (et non pas isFullCustomizable) est appliqué uniquement aux panels */
:is(.fullCustomizable,#responsiveTools) input[type='text'] {
	border: 1px solid #d0d0d0;
	padding: 8px;
	border-radius: 3px;
	width: 100%;
	box-sizing: border-box;
}
:is(.fullCustomizable,#responsiveTools) input[type='text']:hover {
	border-color: #888;
}
:is(.fullCustomizable,#responsiveTools) input[type='text']:focus {
	border-color: #aaa;
}


/* --> select */
/* class applies to select element itself, not a wrapper element */
.select-css {
	font-family: var(--font-main);
	display: inline-block;
	text-align: center;
	line-height: 1.3;
	padding: .3em 1.4em .3em .8em;
	width: 75%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #c5c5c5;
	border-radius: 2px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#FFFFFF 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;

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

/* Set options to normal weight */
.select-css option {
	font-weight:normal;
	font-family: var(--font-main);


	font-size: .8rem;
}

.popupLeft .select-css {
	font-size: .85em;
}

/* LG */
@media (max-width: 1199px) { 
	label,
	.select-css {
		display: block;
		width: 100%;
	}
}

/* Note : fullCustomizable (et non pas isFullCustomizable) est appliqué uniquement aux panels */
:is(.fullCustomizable,#responsiveTools) select {
	width: 100%;
}

.fullCustomizable .subPanelContent .option {
	display: flex;
	gap: 1em;
	margin-bottom: 1em;
}
.fullCustomizable .subPanelContent .option > * {
	flex: 3;
}
.fullCustomizable .subPanelContent .option > div {
	width: 100%;
}
.fullCustomizable .subPanelContent .option label {
	flex: 1;
	font-weight: 600;
	font-size: .86em;
}


/*----------  Input range  ----------*/
.rangeSliderInput {
	-webkit-appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 5px;  
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	padding: 0;
}
  
.rangeSliderInput::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%; 
	background: white;
	cursor: pointer;
	box-shadow: 0 0 2px 0 rgba(0,0,0,.3);
	border: 1px solid rgba(0,0,0,.3);
}
  
.rangeSliderInput::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: white;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: 0 0 2px 0 rgba(0,0,0,.3);
}

@media (max-width: 840px) {
	.rangeSliderInput {
		height: 8px;
	}
	.rangeSliderInput::-webkit-slider-thumb,
	.rangeSliderInput::-moz-range-thumb {
		width: 20px;
		height: 20px;
	}
}

/* Checkbox */
/* Design des input, attention utilisé aussi dans les listes */
input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	width: 1.2em;
	height: 1.2em;
	border: 2px solid #666;
	position: relative;
	border-radius: 2px;
	cursor: pointer;
	background: white;
	position: relative;
	outline: none !important;
}
input[type=checkbox]::before {
	content: '\f00c';
	font-family: var(--font-icons);
	font-weight: 900;
	color: white;
	position: absolute;
	top: 0.1em;
	left: 0;
	font-size: .8em;
	line-height: 1em;
	opacity: 0;
	transform: scale(0);
	transition: all .15s ease-in-out;
}
input[type="checkbox"]:checked {
	background: #666;
}
input[type="checkbox"]:checked::before {
	opacity: 1;
	transform: scale(1);
}
.checkboxLabelContainer {
	display: flex;
	align-items: flex-start;
}
.checkboxLabelContainer input {
	margin-right: .5em;
}

/* input colors */
.colorInput {
	display: flex;
	align-items: center;
	gap: .5em;
	--colorInputValue: black;
}
.colorInput .colorBadge {
	display: block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--colorInputValue);
	box-sizing: border-box;
	box-shadow: 0 0 4px rgba(0,0,0,.17);
	cursor: pointer;
	transition: .15s;
}
.colorInput:hover .colorBadge {
	box-shadow: 0 0 4px rgba(0,0,0,.25);
	transform: scale(1.1);
}
.colorInput > i {
	opacity: .75;
	transition: .15s;
	cursor: pointer;
}
.colorInput:hover > i {
	opacity: 1;
}
.colorInput label {
	display: none;
}
.colorInput input[type='color'] {
	transform: scale(0.1); /* hack pour masquer le input color qui doit être présent sur mobile. Si display none ou visilibity hidden, la simulation de clic ne fonctionne pas */
	opacity: 0;
	position: absolute;
}


/*----------  Boutons radio  ----------*/
input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	margin: .05em 0 0 0;
	border: 2px solid var(--form-color-checkbox);
	position: relative;
	cursor: pointer;
	background: white;
	position: relative;
	outline: none !important;
	vertical-align: top;

	--form-size-radio: 22px;
	--form-color-active: #333;
	--form-color-inactive: #aaa;
	--form-transition: all .15s ease-in-out;
	--form-color-checkbox: #333;
	border-radius: 50%;
	height: var(--form-size-radio);
	width:var(--form-size-radio);
}

input[type="radio"]::before {
	content:"";
	position: absolute;
	line-height: 1em;
	opacity: 0;
	transition: var(--form-transition);
	background: var(--form-color-active);
	top: 50%;
	left: 50%;
	height: var(--form-size-radio);
	width:var(--form-size-radio);
	transform: translate(-50%, -50%) scale(0);
	border-radius: 50%;
}

input[type="radio"]:checked {
	border-color: var(--form-color-active);
}

input[type="radio"]:checked::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(.49); /* HACK CSS : .49 parce que problème si .5 dans FF */
}

input[type="radio"]:disabled,
input[type="radio"]:disabled + label {
	opacity: .38;
	cursor: default;
}

input[type="radio"]:disabled:checked {
	border-color: var(--form-color-inactive);
}
input[type="radio"]:disabled:checked::before {
	background: var(--form-color-inactive);
}



/*----------  Listes  ----------*/
ul.invisibleList,
ul.invisibleList li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.invisibleList li {
	margin-bottom: 0.5em;
}


/*----------  Liens  ----------*/
a,
.fakeLink {
	color: rgba(0,0,0,.85);
	cursor: pointer;
	text-decoration: underline;
}
a:hover,
.fakeLink:hover {
	text-decoration: none;
}


/*----------  Gestion des éléments visibles seulement en mobile  ----------*/
.mobileElement {
	display: none;
}
/* SM modifié */
@media (max-width: 840px) {
	.mobileElement {
		display: block;
	}
}






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

header {
	border-bottom: 1px solid #ededee;
	height: 2.26em;
	line-height: 1em;
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color:#FFF;
	z-index: 100;
	display: flex;
	align-items: center;
}

/*----------  Menu small (mobile)  ----------*/
header #toggleMenu {
	padding: var(--size-margin-default);
	position: absolute;
}
header #toggleMenu i {
	font-size: 1.33em;
}

/* contenu du menu */
#toggleMenu ul {
	display:none;
	position: absolute;
	left: 0;
	width: 100vw;
	height: calc(100vh - 2.94em);
	box-sizing: border-box;
	top: calc(2.94em - 2px);
	padding: 0;
	margin: 0;
	background-color:#FFF;
	text-align: center;
	list-style-type: none;
}
#toggleMenu li {
	line-height:4em;
	font-size:1.2em;
}
#toggleMenu a {
	text-decoration: none;
	color:#333;
}

/* gestion de l'affichage via un faux input */
#mobileMenuFake {
	display:none;
}
#mobileMenuFake:checked~ul {
	display:block;
}


/*----------  Titre  ----------*/
header .title {
	font-size: 0.93em;
	margin: 0 var(--size-margin-default);
	display: flex;
	align-items: center;
	flex: 1 auto;
}
header .title i {
	margin-right: var(--size-margin-default);
	cursor:pointer;
	font-size: 1.42em;
}
.subPanelVisible header .title i::before {
	content: '\f359';
}

header .title select {
	margin-left: 1em;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	font-size: .80em;
	text-transform: uppercase;
	width: auto;
	padding-right: 1.7em;
	padding-bottom: 0.15em;
	border-radius: 0;
}


/*----------  Menu (desktop : mon compte + panier)  ----------*/
#headerMenu {
	margin:0;
	padding:0;
}
#headerMenu li {
	display:inline-block;
	margin-right: var(--size-margin-default);
	cursor:pointer;
}
#headerMenu li :is(a,span) {
	font-size: 1.33em;
	color: var(--color-main-500);
}
#headerMenu li.help {
	margin-left: .5em;
}


/* SM modifié */
@media (max-width: 840px) {
	header {
		height: 2.94em;
		position: relative;
	}
	header .title .text {
		flex: 1 auto;
		text-align: center;
	}
	header .title .icon,
	header .title .subTitle {
		display: none;
	}
	#headerMenu {
		display: none;
	}

}





/*=============================================
=            Page (hors header)            =
=============================================*/
/* container global */
#page {
	display:flex;
	padding-top: 2.26em;
	height: calc(100% - 2.26em);
}

/* partie centrale avec vue 3D */
#center {
	flex: 1 auto;
}

/* colonnes gauche + droite + subPanel */
#left,
#right,
.subPanel {
	flex:0;
	min-width: max(25%, 380px);
	background-color:rgba(255,255,255,0.7);
	padding: var(--size-margin-default) 0 0;

	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 12;

	overflow-y: auto;
}
#left,
.subPanel {
	border-right:1px solid #DEDEDE;
}
#right {
	border-left:1px solid #DEDEDE;
}

:is(#left,#right) .container {
	margin: 0 var(--size-margin-default);
	padding: 0 0 var(--size-margin-default) 0;
	flex: 1 auto;
}
:is(#left,#right) .container.hidden {
	display: none;
}
/* si subPanel affiché, on masque la colonne de gauche */
.subPanelVisible #left {
	min-width: 0;
	display: none;
}

/* LG */
@media (max-width: 1199px) { 
	#left,
	#right,
	.subPanel {
		min-width: max(25%, 300px);
	}

	#left .container,
	#right .container {
		padding: 0 0 calc(var(--size-margin-default) * 2 / 3) 0;
	}
}
/* MD */
@media (max-width: 991px) {
	#left,
	#right,
	.subPanel {
		min-width: max(28%, 260px);
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#page {
		flex-direction: column;
		padding-top: 0;
		height: calc(100% - 3em);
	}
	#left,
	#right {
		padding-top: 0;
		overflow-y: inherit;
	}
	#left {
		border-right: 0;
		display: block; /* hack Safari sinon disparaît */
	}
	#right {
		border-left: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--size-margin-default);
		padding: 0 var(--size-margin-default);
	}
	#right > div {
		align-self: center;
	}
	#left .container,
	#right .container {
		padding: var(--size-margin-default) 0;
		margin: 0;
	}
	#left .title.container,
	#right .title.container {
		display: none;
	}
}

/*=============================================
=            Mon gobelet (colonne de gauche)           =
=============================================*/
#leftMain {
	flex: 1 auto;
	display: flex;
	flex-direction: column;
}
.subPanelVisible #leftMain {
	display: none;
}

/*----------  Menu haut avec 2 ou 3 boutons pour choisir l'objet, le thème et accéder à la perso (mobile)  ----------*/
#objectConfigurationMenu {
	height: 4em;
	overflow: hidden;
	border-bottom: 1px solid #ededee;
}
#objectConfigurationMenu ul {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	align-content: stretch;
	justify-content: center;
}
#objectConfigurationMenu li {
	flex: 1 auto;
	
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 4em;
	background: rgba(255,255,255,.7);
	cursor: pointer;

	transition: all .1s ease-in-out;

	display: flex;
	justify-content: center;
	align-items: center;
}
#objectConfigurationMenu li.hidden {
	display: none;
}
#objectConfigurationMenu ul li:first-of-type {
	border-right: 1px solid #ededee;
}
#objectConfigurationMenu ul li:last-of-type {
	border-left: 1px solid #ededee;
}
#objectConfigurationMenu li:hover {
	background: rgba(0,0,0,.03);
}
#objectConfigurationMenu li .fa-caret-down {
	margin-left: 0.5em;
	font-size: .93rem;
}

#objectConfigurationMenu :is(.btnSizes,.btnVariants,.btnObject) .content {
	font-size: .8em;
	display: flex;
	align-items: center;
	flex-direction: column;
}
#objectConfigurationMenu :is(.btnSizes,.btnVariants,.btnObject) .content i {
	flex: 1 auto;
	font-size: 2em;
}
#objectConfigurationMenu li:is(.btnSizes,.btnVariants,.btnObject) .content .legend {
	line-height: 1em;
	margin-top: 0.5em;
}
#objectConfigurationMenu .btnTemplate img {
	max-width: 3em;
	vertical-align: middle;
}
#objectConfigurationMenu .btnCustomization .content i {
	font-size: 2.06em;
	vertical-align: -5px;
}

.isFullCustomizable #btnTemplate {
	display: none;
}

/* animation tant que le bouton de perso n'est pas cliqué */
#objectConfigurationMenu .btnCustomization {
	position: relative;
}
#objectConfigurationMenu .btnCustomization * {
	z-index: 2;
}
#objectConfigurationMenu .btnCustomization::before,
.addPersoElementsContainer button::before {
	content: "";
	display: block;
	position: absolute;
	width: 3em;
	height: 3em;
	background: var(--color-accent-500);
	z-index: 1;
	border-radius: 50%;
	animation: 1s linear infinite btnCustomizationAnimation;
}
@keyframes btnCustomizationAnimation {
	0% { opacity: 0; transform: scale(0)}
	33% { opacity: 1;}
	66%,100% { opacity: 0; transform: scale(1)}
}
.addPersoElementsContainer button::before {
	top: 5%;
	right: 15%;
	width: 1em;
	height: 1em;
}
.isCustomizationEdition #objectConfigurationMenu .btnCustomization::before,
.isCustomizationEdition .addPersoElementsContainer button::before {
	display: none;
}
#objInfosPersonalisation .addPersoElementsLegend::after {
	content: '\f062';
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	font-size: 2em;
	font-family: var(--font-icons);
	font-weight: 900;
	animation: 1.5s linear infinite arrowTopAnimation;
}
#objectConfigurationMenu .btnCustomization.clickedOnce::before,
.isCustomizationEdition #objInfosPersonalisation .addPersoElementsLegend::after {
	display: none;
}

/*----------  Tailles de gobelets / Choix de l'objet  ----------*/
.popupProductOption {
	width: 90%;
	margin: 0 auto;
}
.popupProductOption.hidden {
	display: none;
}
.popupProductOption label {
	margin-top: 1em;
}
:is(#sizes,#popupSizes) ul {
	list-style-type: none;
	padding:0;
	margin: 0;
	display:inline-block;
}
#popupSizes ul {
	display:block;
	text-align: center;
	margin-top:1em;
}
:is(#sizes,#popupSizes) li {
	border: 2px solid transparent;
	font-size: 0.8em;
	width: 4.5em;
	height: 4em;
	text-align: center;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius:5px;
	vertical-align: top;
	cursor:pointer;
	margin-right: 0.5em;
	padding: .2em 0 .1em;
}
#popupSizes li {
	width:8em;
	height:8em;
	font-size:1em;
	box-sizing: border-box;
}
:is(#sizes,#popupSizes) li i {
	font-size: 2.5em;
	display:block;
}
#popupSizes li i {
	font-size:4em;
	margin-bottom:5px;
}
#popupSizes li span {
	display: block;
	font-size: .8em;
}
:is(#sizes,#popupSizes) :is(li:hover,li.selected) {
	border:2px solid #000;
}

/* SM modifié */
@media (max-width: 840px) {
	#sizes {
		display: none;
	}
}



/*----------  Choix du produit (NAOGLASS)  ----------*/
#currentObjectName {
	margin-right: 0.5em;
}
/* SM modifié */
@media (max-width: 840px) {
	#currentObject {
		display: none;
	}
}

:is(#currentObjectResponsive,#alternativesResponsive) {
	width: 90%;
	margin: 0 auto 2em;
}
:is(#currentObjectResponsive,#alternativesResponsive) label {
	margin-top: 1em;
}
#alternativesResponsive label {
	margin-bottom: 0.5em;
}
#currentObjectResponsiveNameContainer {
	display: flex;
	gap: 1em;
	font-size: 1.15em;
	align-items: center;
	margin-bottom: 1em;
}
#currentObjectResponsiveNameContainer .btn {
	margin: 0;
}

#alternativesResponsive {
	display: none;
}
#alternativesResponsive.visible {
	display: block;
}
#alternativesResponsive :is(ul,li) {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#alternativesResponsive ul {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	align-items: center;
}
#alternativesResponsive ul li {
	flex: 1;
}
#alternativesResponsive button {
	margin: 0;
	width: 100%;
	font-size: .95em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	color: var(--color-main-500);
}
#alternativesResponsive button i {
	font-size: 1.1em;
}

/*----------  Couleur de gobelet  ----------*/
/* SM modifié */
@media (max-width: 840px) {
	#backgroundColors {
		display: none;
	}
}


/*----------  Technique de personnalisation  ----------*/
#alternatives {
	display:none;
	margin-bottom: 1em !important;
}
#alternatives.visible {
	display:flex;
	gap: .5em;
}
#alternatives :is(ul,li) {
	margin: 0;
	padding: 0;
	list-style: none;
}
#alternatives label {
	width: auto;
	max-width: 35%;
}
#alternatives ul {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	flex: 1;
	flex-wrap: wrap;
}
#alternatives button {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	border: 1px solid #ccc;
	padding: .25em .5em;
	border-radius: 2px;
	cursor: pointer;
	color: var(--color-main-500);
	font-weight: 500;
}
#alternatives button:hover {
	opacity: .9;
}
#alternatives li.selected button {
	border-color: black;
	outline: 1px solid black;
}
@media (max-width: 1199px) {
	#alternatives {
		flex-direction: column;
		gap: 0 !important;
	}
	#alternatives label {
		max-width: unset;
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#alternatives {
		display: none !important;
	}
}

/*----------  Couleurs d'impression  ----------*/
#printColor {
	display: none;
	gap: 1em;;
}
body.currentUniverse-glasses #printColor {
	display: flex;
}
#printColor select {
	width: 100%;
}
.printingColorList {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	padding-left: 0;
}
.printingColorList li {
	list-style-type: none;
	cursor: pointer;
}
.printingColorList li.selected .colorSample {
	outline: 4px solid rgba(0,0,0,.3);
	transition: 0;
}
.printingColorList li .colorSample {
	width: 1.5em;
	height: 1.5em;
	margin-bottom: 0;
	border: 1px solid rgba(0,0,0,.03);
	position: relative;

	display: block;

	border-radius: 50%;
	background: var(--printingColor);
	transition: .15s;
	margin-bottom: 0.5em;
}
.colorTooltip {
	display: none;
}

#printColorResponsive {
	width: 90%;
	margin: 1em auto;
}

@media (max-width: 1199px) {
	body.currentUniverse-glasses #printColor {
		display: block;
	}
}
/* SM modifié */
@media (max-width: 840px) {
	body.currentUniverse-glasses #printColor {
		display: none;
	}
}

/*----------  Thèmes  ----------*/
#themes.container {
	padding-top: var(--size-margin-default);
	border-top:1px solid #e2e2e2;
}

/* LG */
@media (max-width: 1199px) { 
	#themes.container {
		padding-top: calc(var(--size-margin-default) * 2 / 3);
	}
}	
/* SM modifié */
@media (max-width: 840px) {
	#themes {
		display: none;
	}
}


/*----------  Templates  ----------*/
.isFullCustomizable :is(#themes,#templates) {
	display: none;
}

/* SM modifié */
@media (max-width: 840px) {
	#templates {
		display: none;
	}
}


/* Carousel */
#carousel {
	width:96%;
	height:0;
	padding-bottom:57%;
	box-sizing: border-box;
	overflow: hidden;
	position:relative;
}
#carousel .container div {
	width:33%;
	display:inline-block;
	position:absolute;
	transform: translateY(25%);
	transition: transform 0.2s ease-out, width 0.2s ease-out;
	opacity:0.5;
	cursor:pointer;
}
#carousel .container div img {
	width: 100%;
	position: relative;
	z-index: 3;
}
#carousel .container div::after {
	content: "";
	display: block;
	width: 26%;
	height: 0px;
	position: absolute;
	bottom: 23px;
	
	background: black;
	box-shadow: 0 0 9px 6px rgba(0,0,0,1);
	z-index: 2;
	opacity: .9;

	left: 50%;
	transform: translateX(-50%);
}

/*! TEMP NICO */
.currentUniverse-mug #carousel .container div::after {
	bottom: 67px;
	width: 34%;
}


#carousel .container div.current {
	width:50%;
	transform: translateY(0) translateX(-16.5%);
	opacity:1;
	cursor:default;
}
#carousel .container {
	position:relative;
	margin-left: calc(0%);
	width: 100%;
}
#carousel .legend {
	width: 100%;
	margin-top: 55%;
	text-align: center;
	font-size:12px;
}
#carousel :is(.leftArrow,.rightArrow)  {
	border:1px solid #C6C6C6;
	width:24px;
	height:24px;
	border-radius:24px;
	text-align: center;
	line-height: 24px;
	top:0;
	margin-top:25%;
	position:absolute;
	cursor:pointer;
	color:#555;
	font-size:24px;
	animation: carouselArrowBlink 1s ease-in-out infinite;
}
@keyframes carouselArrowBlink {
	0%,100% {
		border-color: rgba(0,0,0,.2);
		box-shadow: 0 0 0 rgba(0,0,0,.3);;
		opacity: .8;
	}
	50% {
		border-color: rgba(0,0,0,.5);
		opacity: 1;
	}
}
#carousel :is(.leftArrow.rightArrow):hover  {
	animation: none;
}
#carousel .leftArrow {
	left:5px
}
#carousel .leftArrow::before {
	content:"<";
}
#carousel .rightArrow {
	right:5px
}
#carousel .rightArrow::before {
	content:">";
}
#carousel .numbering  {
	color:gray;
	font-size:12px;
	text-align: right;
	width:100%;
	position:absolute;
	bottom:3px;
	box-sizing:border-box;
	padding-right:6%;
	color:#737373;
}


/*----------  Graduation  ----------*/
#graduationChoice.container {
	padding-top: var(--size-margin-default);
	border-top:1px solid #e2e2e2;
}

/* LG */
@media (max-width: 1199px) { 
	#graduationChoice .btnSmall {
		width: 100%;
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#graduationChoice {
		display: none;
	}
}

#graduationChoiceResponsive.hidden {
	display:none;
}
#graduationChoiceResponsive {
	width: 90%;
	margin: 2em auto 2em auto;
}
#graduationChoiceResponsive button {
	display: inline-block;
}


/*----------  Personnalisation  ----------*/

/* container principal */
#objInfosPersonalisation {
	background-color: #7e7e7e;
	color: white;
	padding-top: var(--size-margin-default);
	flex: 10 auto;
}

/* boutons pour ajouter du texte, une image ou un symbole */
/*! kezako ? pas trouvé ! */
#addPersoElementsIcon {
	background: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .5em;
	display: none;
}

/* container des boutons pour ajouter des éléments (text, symbole etc) */
.addPersoElementsContainer {
	display: none;
	gap: 1em;
	align-items: center;
	margin-top: 1em;
	position: relative;
}
body.isFullCustomizable :is(.addPersoElementsContainer,.addPersoElementsLegend) {
	display: flex;
}
.addPersoElementsContainer > * {
	flex: 1;
}
.addPersoElementsContainer > button {
	--addPersoElementButton-backgroundColor-hover: #ccc;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	flex-direction: column;;
	background-color: white;
	
	font-size: .9em;
	border-radius: 3px;
	position: relative;
}
.addPersoElementsContainer > button.visible {
	display:flex;
}
#objInfosPersonalisation .addPersoElementsContainer > button {
	border-color: transparent;
}
.addPersoElementsContainer > button:hover {
	background-color: var(--addPersoElementButton-backgroundColor-hover);
}
.addPersoElementsContainer > button i {
	font-size: 2em;
	position: relative;
}
.addPersoElementsContainer > button i::after {
	content: '\f067';
	font-weight: 700;
	font-family: var(--font-icons);
	font-size: .35em;
	position: absolute;
	bottom: -.5em;
	right: -1.5em;
	color: white;
	background: #555;
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid white;
}
.addPersoElementsContainer > button:hover i::after {
	border-color: var(--addPersoElementButton-backgroundColor-hover);
}

/* version mobile */
#popupPersonalise .addPersoElementsContainer {
	width: 90%;
	margin: 2em auto;
}

#popupPersonalise .addPersoElementsContainer > button {
	display: none;
}
#popupPersonalise .addPersoElementsContainer > button.visible {
	display: flex;
}
#popupPersonalise .addPersoElementsContainer > button i {
	font-size: 2.5em;
}

/* info affichée tant qu'un bouton de perso n'a pas été cliqué ("pour commencer votre personnalisation, ajoutez un élément etc") */
.addPersoElementsLegend {
	font-size: .85em;
	margin-top: 1em;
	display: none;
	gap: 1em;
	position: relative;
}
body.isFullCustomizable .addPersoElementsLegend {
	display: flex;
}
.addPersoElementsLegend i {
	margin-top: 0.2em;
}
#popupPersonalise .addPersoElementsLegend {
	width: 90%;
	margin: 0 auto;
}
:is(#objInfosPersonalisation,#popupPersonalise).clickedOnce .addPersoElementsLegend,
:is(#objInfosPersonalisation,#popupPersonalise).clickedOnce .addPersoElementsContainer button::before,
.isCustomizationEdition :is(.addPersoElementsLegend,.addPersoElementsContainer button::before) {
	display: none !important;
}

/* LG */
@media (max-width: 1199px) { 
	.addPersoElementsContainer > button {
		font-size: .85em;
	}
	.addPersoElementsContainer > button i {
		font-size: 1.5em;
	}
}


/* champs/calques */
#objInfosPersonalisation #fields {
	width:100%;
	min-height: 170px; /* hack : hauteur max des champs sinon décalage du flex */
}
:is(#objInfosPersonalisation #fields,#fieldsResponsive) > div {
	margin-top:1em;
	display:flex;
	align-items: center;
}
:is(#objInfosPersonalisation,#fieldsResponsive) input {
	flex: 1 auto;
	
	background-color: white;
	border: 0;
	min-width: 50px;
	font-size: 1.2em;
}

:is(#objInfosPersonalisation,#fieldsResponsive) .imageField button {
	flex: 1 auto;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.9em;
	padding: .9em 0.9em;
	transition: all .10s ease-in-out;
	color: rgba(0,0,0,.8);
	background-color: white;
	border: none;
	box-shadow: none;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#fieldsResponsive .imageField button {
	padding: .7em .9em;
	border:1px solid #CACACA;
}
:is(#objInfosPersonalisation,#fieldsResponsive) .imageField button:hover {
	opacity: .8;
}
:is(#objInfosPersonalisation,#fieldsResponsive) .imageField button.imageChoosed {
	padding: .4em .9em;
}
:is(#objInfosPersonalisation,#fieldsResponsive) .imageField button.imageChoosed .img {
	display:block;
	background-size: cover;
	background-position: center center;
}
:is(#objInfosPersonalisation,#fieldsResponsive) .imageField button .img {
	display:none;
}

:is(#objInfosPersonalisation,#fieldsResponsive) .imageField button .img {
	box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
	width:2.5em;
	height:2.5em;
	border-radius:50%;
	background-size: cover;
	margin-right: .5em;
}

#fieldsResponsive .imageField button {
	margin-top: 0;
}


#fieldsResponsive {
	width:90%;
	margin:0 auto;
}
#fieldsResponsive input {
	border:1px solid #CACACA;
	font-size: 1em;
}


/* LG */
@media (max-width: 1199px) { 
	#objInfosPersonalisation #fields {
		min-height: 150px;
	}
	#objInfosPersonalisation input {
		font-size: 1.1em;
	}
	#objInfosPersonalisation .imageField button {
		font-size: .85em;
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#objInfosPersonalisation {
		display: none;
	}
}


/* --> champs en version fullCustomizable */
:is(#objInfosPersonalisation,#fieldsResponsive) .fa {
	font-size: 1.6em;
	margin-right: var(--size-margin-default);
	vertical-align: middle;
	width: 1em;
	text-align: center;
}
.isFullCustomizable :is(#objInfosPersonalisation #fields,#popupPersonalise #fieldsResponsive) .fa {
	cursor: move;
}
.isFullCustomizable :is(#objInfosPersonalisation #fields,#popupPersonalise #fieldsResponsive) > div {
	position: relative;
}
.isFullCustomizable :is(#objInfosPersonalisation #fields,#popupPersonalise #fieldsResponsive) > div > * {
	position: relative;
	z-index: 2;
}
/* --> ombre sous un calque, affichée quand un élément est déplacé */
.isFullCustomizable :is(#objInfosPersonalisation #fields,#popupPersonalise #fieldsResponsive) > div:before {
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	width: calc(100% + 2em);
	height: calc(100% + 10px);
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: .15s;
	z-index: 1;
}
.isFullCustomizable :is(#objInfosPersonalisation #fields,#popupPersonalise #fieldsResponsive) > div.sortable-chosen:before {
	opacity: 1;
}
.isFullCustomizable :is(#objInfosPersonalisation #fields,#popupPersonalise #fieldsResponsive) > div.sortable-ghost::before {
	background: rgba(255,255,255,.1);
}
/* --> lignes pour indiquer le déplacement des champs */
.isFullCustomizable :is(#objInfosPersonalisation,#popupPersonalise) .fa::after {
	--dash-color: rgba(0,0,0,.25);
	content: '';
	display: block;
	width: 4px;
	height: 20px;
	background-image: linear-gradient(var(--dash-color), var(--dash-color) 50%, transparent 50%,transparent 100%);
	background-size: 4px 2px;
	position: absolute;
	top: 50%;
	left: -8px;
	transform: translateY(-50%);
}
.isFullCustomizable :is(#objInfosPersonalisation,#popupPersonalise) .fa::before {
	transform: translateX(4px);
}



/*=============================================
=            Subpanels : volet de gauche en desktop ou fullscreen en mobile            =
=============================================*/
.subPanel {
	background-color: white;
	margin-top: calc(-1 * var(--size-margin-default));
	position:absolute;
	left:-5000px;
	height:0;
}

.subPanel.visible {
	position:relative;
	left:0;
	height:auto;
}
/* SM modifié */
@media (max-width: 840px) {
	body.popupLeftDisplayed #page > .subPanel.visible {
		display: block;
		flex: 1;
	}
}

/* Header */
.subPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #7f7f7f;
	padding: var(--size-margin-default);
	margin: 0 0 var(--size-margin-default) 0;
}
.subPanelHeader .title {
	display: 1 auto;
	font-weight: 200;
	font-size: 1.6em;
	color: white;
}
.subPanelHeader .close {
	color: white;
	font-size: 1.06em;
	cursor: pointer;
	transition: all .15s ease-in-out;
	padding: .5em;
}
.subPanelHeader .close:hover {
	transform: rotate(90deg);
}
/* LG */
@media (max-width: 1199px) { 
	.subPanelHeader {
		padding: calc(var(--size-margin-default) * 2 / 3) var(--size-margin-default);
	}
}

/* Content */
.subPanelContent {
	margin: 0 var(--size-margin-default) var(--size-margin-default);
	position: relative;
}


/* Intro (texte ajouté en début de subPanel du genre explication de la graduation) */
.subPanelContent .intro {
	margin-bottom: 1em;
}

.subPanelContent label {
	width: auto;
	font-weight: normal;
	font-size: 1em;
	cursor: pointer;
}

/* Sous-titres (ex : subPanel graduation où il y a "Options" + "Icônes") */
.subPanelContent .subTitle {
	font-weight: 700;
	display: block;
	margin-bottom: 0.5em;
	margin-top: 1em;
}

/* Revendeur : infos sur la conformité du fichier */
#imageValidityInfos {
	margin: 1em 0;
	font-size: .85em;
	display: none;
	gap: 1em;
	justify-content: center;
}
#imageValidityInfos.visible {
	display: flex;
}
#imageValidityInfos .title {
	text-align: center;
	font-weight: 700;
}
#imageValidityInfos ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	gap: 2em;
	align-items: center;
	justify-content: center;
}
#imageValidityInfos li {
	display: flex;
	align-items: center;
	gap: .5em;
}
#imageValidityInfos li::before {
	content: '\f00c';	
	font-family: var(--font-icons);
	font-weight: 700;
	color: var(--color-alert-success);
}
#imageValidityInfos li.NOK::before {
	content: '\f00d';
	color: var(--color-alert-danger);
	animation: imageValidityNOK 1s linear infinite;
}
@keyframes imageValidityNOK {
	0%,100% {opacity: 0;}
	50% {opacity: 1;}
}

#imageValidityInfos .moreInfos {
	display: none;
	/* color: var(--color-main-500); */
}
#imageValidityInfos li.NOK .moreInfos {
	display: block;
}
#imageValidityInfos li.NOK {
	color: var(--color-alert-danger);
	background: #f6e4e7;
	cursor: pointer;
	padding: 0 .5em;
	border-radius: 5px;
	transition: .1s;
	position: relative;
}
#imageValidityInfos li.NOK:hover {
	background: #eecbd1;
}

/* Messages affichés en recommandations pour les photos (ex : info résolution etc), visible sur le subPanel Images du template tour complet */
.subPanelContent .imageMessages {
	font-size: .85em;
	margin-bottom: 1em;
}
.subPanelContent .imgMsg {
	display: flex;
	margin-bottom: 0.5em;
	color: rgba(0,0,0,.8);
}
.subPanelContent .imgMsg i {
	margin-right: 0.5em;
	padding-top: 3px;
	
	text-align: center;
	display: block;
}
.subPanelContent .imgMsg i::before {
	width: 1.5em;
	display: block;
}
.subPanelContent .imgMsg.danger {
	background: LemonChiffon;
	padding: .5em;
}
.subPanelContent .imgMsg .fakeLink {
	text-decoration: underline; 
	cursor: pointer;
}
#softwareCreationMsg .msgContent > div {
	font-size: .85em; 
	border-left: .5em solid lemonChiffon; 
	padding-left: .5em; 
	margin-top: 1em; 
	transform: translateX(-1em);
}

/* message fond blanc */
#transparentBgMsg .msgContent a {
	font-size: .85em; 
	margin-left: .5em;
}

/* SM modifié */
@media (max-width: 840px) {
	.subPanelContent .imageMessages {
		margin-top: 1em;
	}

	/* éléments à masquer dans un subPanel quand il sont présents dans le responsive Tools (ex : input range taille etc) */
	.isDuplicatedInResponsiveTools {
		display:none!important;
	}
}

/* bordures */
.borderOptions {
	display: flex;
	gap: 1em;
	align-items: center;
}
.borderOptions .colorInput {
	display: none;
}
.borderOptions > .select {
	flex: 1;
}
.borderOptions button.btnSmall {
	background-color: rgba(0,0,0,.1);
	color: var(--color-main-500);
}
.IMGApplyBorderToAllContainer {
	display: none;
}
.hasBorder :is(.colorInput,.IMGApplyBorderToAllContainer) {
	display: flex;
}


/* subPanel .option = ligne de configuration (ex : label + select) */
.fullCustomizable .subPanelContent .option ul {
	margin: 0;
	padding: 0;
	display: flex;
	gap: .75em;
	flex-wrap: wrap;
}
.fullCustomizable .subPanelContent .option li {
	list-style-type: none;
	width: 100%;
}
.fullCustomizable .subPanelContent .option ul button.btnSmall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;;
	width: 100%;
	background-color: rgba(0,0,0,.1);
	color: var(--color-main-500);
}

/* on masque le bouton pour mettre au premier plan si premier calque */
:is(#simpleText,#simpleImg,#simpleClipart,.simpleText,.simpleImg,.simpleClipart,#responsiveTools).isFirstLayer .moveToTopBtnContainer {
	display: none;
}


/* Footer */
.subPanelFooter {
	margin: calc(var(--size-margin-default) * 1) var(--size-margin-default) var(--size-margin-default);
}



/*----------  subPanel : texte  ----------*/

/* fake select choix de la police */
.ts-dropdown [data-selectable].option {
	font-size:20px;
}
.ts-control.single .ts-input::after {
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -3px;
	width: 0;
	height: 0;
	border-color: grey transparent transparent;
	border-style: solid;
	border-width: 5px 5px 0;
}
.ts-control.single input {
	display:none!important;	
}
.ts-input, .ts-control.single .ts-input.input-active {
	cursor:default!important;
}

@media (max-width: 840px) {
	body.popupLeftDisplayed #page > :is(#simpleText,#simpleImg,#simpleClipart).visible {
		display: block;
		flex: 1;
	}
}


/*----------  subPanel : symboles  ----------*/
#simpleClipartSVGList {
	list-style-type:none;
	padding: .5em;
	margin:0 0 1em 0;
	height: 20em;
	border: 1px solid rgba(0,0,0,.1);;
	overflow:auto;

	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: .5em;
	align-content: start;
}
#simpleClipartSVGList li {
	box-sizing: border-box;
	cursor: pointer;
	background: rgba(0,0,0,.03);
	padding: .3em;
	border: 2px solid transparent;
	border-radius: 5px;
}
#simpleClipartSVGList li.selected {
	border-color: rgba(229,153,20,.7);
}
#simpleClipartSVGList li img {
	width:100%;
	height:48px;
}
/* XL modifié */
@media (max-width: 1400px) { 
	#simpleClipartSVGList {
		grid-template-columns: repeat(4,1fr);
	}
}
/* LG */
@media (max-width: 1199px) { 
	#simpleClipartSVGList {
		grid-template-columns: repeat(3,1fr);
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#simpleClipartSVGList {
		grid-template-columns: repeat(4,1fr);
	}
}



/*----------  subPanel Image (objSVGImg = gobelet à thème, simpleImg = configurateur v2)  ----------*/

/* container de l'image version gob. à thème */
#SVGImgCropContainer {
	width: 100%; /*Attention le SVG est forcément carré donc le height sera automatiquement le même que le width */
	border: none;
	cursor: move;
}
#SVGImgCropContainer svg {
	width: 100% !important; /*Important pour la gestion de mes calculs de position*/
	height: 100% !important;
}
#SVGImgCropContainer svg #visiblePath path {
	stroke: rgba(0,0,0,.1);
}

/* gobelets à thèmes */
/* si l'utilisateur décide de ne pas afficher l'image proposée dans le template */
#objSVGImg.imageHidden :is(#SVGImgCropContainer,.rangeSlider,.imageMessages,.dragMessage) {
	opacity:0.2;
}
#objSVGImg.imageHidden #SVGImageUploadButton {
	display:none;
}

/* configurateur v2 */
#SVGMask svg {
	width: 100% !important;
	height: 100% !important;
}
#SVGMask.useMask {
	cursor: move;
}

#simpleImgSizeContainer,
#simpleImgMaskContainer,
#simpleImgBtnsContainer .removeBtnContainer {
	display:none;
}
:is(#simpleImgSizeContainer,#simpleImgMaskContainer,#simpleImgBtnsContainer .removeBtnContainer).visible {
	display: flex;
}



#simpleImg:not(.hasUploadedImage) .option button {
	padding: .5em 0;
}
#simpleImg:not(.hasUploadedImage) :is(.rangeSlider,div.option:not(:last-of-type)),
#simpleImg:not(.hasUploadedImage) div.option:last-of-type label,
#simpleImg:not(.hasUploadedImage) div.option:last-of-type > ul > li > ul li:not(:last-of-type) {
	display: none;
}

#simpleClipart:not(.hasSelectedClipart) div.option:not(:last-of-type),
#simpleClipart:not(.hasSelectedClipart) #simpleClipartSVGList + div.options label,
#simpleClipart:not(.hasSelectedClipart) div.option:last-of-type li:not(:last-of-type) {
	display: none;
}

/* SM modifié */
@media (max-width: 840px) {
	#objSVGImg .popupSubPanelContent {
		width: 90%;
		margin: 0 auto;
	}
	#simpleImg .subPanelContent .options {
		margin-top: 1em;
	}

	#simpleImg .subPanelContent #SVGMask {
		width: 85%;
		margin: 0 auto;
	}
}


#objSVGImg button {
	font-size: 1em;
	padding: .7em 1em;
}

/* message pour déplacer l'image */
:is(#objSVGImg,#simpleImg) .dragMessage {
	background: rgba(0,0,0,.5);
	color: white;
	position: absolute;
	top: 1em;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .2em;
	border-radius: .5em;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
:is(#objSVGImg,#simpleImg) .dragMessage.show {
	opacity: 1;
}
:is(#objSVGImg,#simpleImg) .dragMessage i {
	margin-right: .5em;
}

/* slider de zoom */
.rangeSlider {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: var(--size-margin-default) 0 var(--size-margin-default);
}
.rangeSlider input {
	flex: 1 auto;
	margin: 0 1em;
}
.rangeSlider .operator {
	display: flex;
	align-items: center;
	opacity: 1;
	transition: all .3s ease-in-out;
	cursor: pointer;
}
.rangeSlider .operator.disabled {
	opacity: .3;
}
.rangeSlider .operator::before {
	content: '\f010';
	font-family: var(--font-icons);
	font-weight: 900;
	display: block;
}
:is(#objSVGImg,#simpleImg) .rangeSlider .operator.plus::before {
	content: '\f00e';
}

/* slider vectorisation */
.thresholdOption {
	position: relative;
	align-items: center;
}
#simpleImgThresholdValue {
	border: 1px solid rgba(0,0,0,.2);
	font-size: .75em;
	text-align: center;
	padding: .25em;
	width: 5em;
	flex: 0;
}

.thresholdTooltip {
	/* position: absolute; */
	/* bottom: 0.5em; */
	display: none !important;
	font-size: .85em;
	width: calc(100 - 1em) !important;
}
#simpleImg.hasUploadedImage .thresholdTooltip { 
	display: flex !important;
}

/* boutons d'actions sur les images (importer, supprimer, mettre au premier plan...) */
.imageActions {
	display: flex;
	justify-content: center;
	font-size: .85em;
	flex-wrap: wrap;
}
.imageActions button {
	display: inline-block;
	background: rgba(0,0,0,.1);
	color: var(--color-main-500);
	width: auto;
	padding: .5em 2em;
	border: none;
	margin: 0 .3em .5em;
}
.imageActions button i {
	margin-right: 0.5em;
}
/* LG */
@media (max-width: 1199px) { 
	:is(#objSVGImg,#simpleImg) .dragMessage {
		width: 95%;
		max-width: calc(400px - 5%);
		font-size: .85em;
	}
}	
/* SM modifié */
@media (max-width: 840px) {

	#objSVGImg #SVGImgCropContainer,
	:is(#objSVGImg,#simpleImg) .rangeSlider {
		margin: 0 auto;
		max-width: 400px;
		padding: 0 var(--size-margin-default);
	}

	#objSVGImg #SVGImgCropContainer {
		margin-bottom: 1em;
	}
}



/*----------  SubPanel Graduations  ----------*/
#graduations select {
	width: 100%;
}
#graduationsOptions {
	position: relative;
}
#graduationsOptions.disabled {
	opacity: .2;
}
#graduationsOptions.disabled::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:10;
}
@media (max-width: 840px) {
	#graduations .subPanelContent label {
		display: inline-block;
	}
	#graduations .subPanelFooter {
		margin-top: 2em;
	}
}



/*----------  SubPanel Produit (NAOGLASS)  ----------*/
#otherObjects .subPanelContent :is(ul,li) {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#otherObjects .subPanelContent > ul > li {
	border: 1px solid rgba(0,0,0,.1);
	border-radius: .25em;
	margin-bottom: 1em;
}
#otherObjects .subPanelContent .familyName {
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: .5em;
}
#otherObjects .subPanelContent > ul > li.closed .familyName {
	cursor: pointer;
}
#otherObjects .subPanelContent > ul > li.closed .familyName i::before {
	content: "\f0da";
}
#otherObjects .subPanelContent > ul ul {
	margin: 0em 1em 1em;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: .5em;
}
#otherObjects .subPanelContent > ul > li.closed > ul {
	display: none;
}
#otherObjects .subPanelContent > ul ul li {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	gap: .5em;
	border: 2px solid transparent;
	border-radius: 5px;
}
#otherObjects .subPanelContent > ul ul :is(li:hover,li.selected) {
	border-color: black;
}
#otherObjects .subPanelContent > ul ul li span {
	font-size: .9em;
}
#otherObjects .subPanelContent > ul ul li i {
	font-size: 2em;
}

@media (max-width: 840px) {
	#otherObjects {
		border-right: 0;
	}
	#otherObjects .subPanelHeader {
		padding: .6em 0 .6em 1em;
		font-size: 1.6em;
		height: 36px;
	}
	#otherObjects .subPanelHeader .title {
		font-size: 1em;
	}
	#otherObjects .subPanelHeader .close {
		font-size: .7em;
	}
	#otherObjects .subPanelHeader .close i {
		padding-right: .49em;
	}
}

/*----------  Message de confirmation responsive  ----------*/
#responsiveUpdateConfirmation {
	display: none;
}
@media (max-width: 840px) {
	.popupLeftDisplayed #responsiveUpdateConfirmation {
		position: absolute;
		top: 4.5em;
		z-index: 99;
		background: HoneyDew;
		left: 50%;
		transform: translateX(-50%) translateY(-3px);
		padding: .5em 2em;
		font-size: .85em;
		display: flex;
		align-items: center;
		gap: .5em;
		color: green;
		font-weight: 500;
		opacity: 0;
		font-weight: 500;
	}
	#responsiveUpdateConfirmation.visible {
		display: flex;
		animation: responsiveUpdateConfirmationAnim 1s linear 1;
	}
}
@keyframes responsiveUpdateConfirmationAnim {
	0%,15%,85%,100% {opacity: 0; transform: translateX(-50%) translateY(-3px);}
	15%,85% {opacity: 1;transform: translateX(-50%) translateY(0);}
}


/*=============================================
=            Responsive tools : outils disponible en bas de l'écran principal pour éditer des éléments en voyant l'aperçu 3D            =
=============================================*/
#responsiveTools {
	display:none;

	position: absolute;
	border-top: 1px solid #ededee;
	background: white;
	bottom: 0;
	z-index: 10000;
	width: 100%;
	height: 13em;
	border-radius: 1rem 1rem 0 0;
	box-shadow: 0 0 20px 0px rgba(0,0,0,.3);
	flex-direction: column;
}
@media (max-width: 840px) {
	#responsiveTools.visible {
		display: flex;
	}
}

/*----------  Header  ----------*/
#responsiveToolsHeader {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-weight: 500;
	padding: .5em 1em .25em;
}
#responsiveToolsHeader span {
	display: flex;
	gap: .5em;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}



/*----------  containers des outils par type  ----------*/
/* par défaut on masque tous les outils (pour texte, pour images, etc) */
#responsiveTools>div {
	display:none;
}
/* affichage des outils correspondants au type d'élément */
#responsiveTools>div.visible {
	display:block;
}


/*----------  Menu des panels  ----------*/
#responsiveTools ul.menu {
	display:flex;
	margin:0;
	padding: 0 0 5px 0;
	max-width: 100vw;
	overflow-y: hidden;
	overflow-x: auto;
}
#responsiveTools ul.menu {
	justify-content: space-between;
	padding: 0 1em 5px;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#responsiveTools ul.menu li{
	flex: 1 auto;
	display:flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-weight: 700;
	font-size: .85em;
	position: relative;
	padding: .5em 1em;
	cursor: pointer;
}
#responsiveTools ul.menu li span {
	display:flex;
	align-items: center;
	gap: .5em;
}
#responsiveTools ul.menu li::after {
	content: '';
	display: block;
	height: 5px;
	background: transparent;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
#responsiveTools ul.menu li.selected{
	color:var(--color-accent-500);
}
#responsiveTools ul.menu li.selected::after{
	background:var(--color-accent-500);
}


/*----------  Panels  ----------*/
#responsiveTools div.panels {
	flex: 1;
	margin-top: 5px;
	padding: 1em;
}
#responsiveTools div.panels>div {
	display:none;
}
#responsiveTools div.panels>div.visible {
	display:block;
}


/*----------  Champs ayant pour label un icône  ----------*/
#responsiveTools div.panels > div .iconLabelField {
	display: flex;
	gap: .5em;;
	align-items: center;
}
#responsiveTools div.panels > div .iconLabelField > div {
	display: flex;
	align-items: center;
	gap: 1em;
}
#responsiveTools div.panels > div .iconLabelField:not(:last-of-type) {
	margin-bottom: 1em;
}
#responsiveTools div.panels > div .iconLabelField label {
	width: 3em;
	text-align: center;
	font-size: 1em;

}


/*----------  Outils communs  ----------*/
/* .ts-control = fake select de choix de la police */
#responsiveTools :is(select,.ts-control,.borderOptions) {
	flex: 1;
}

/* aperçu des images/symboles */
#responsiveTools div:is([data-panel='image'],[data-panel='symbol']) .img {
	border-radius: 50%;
	width: 2em;
	height: 2em;
	background-position: center center;
	background-size: cover;
	border: 1px solid rgba(0,0,0,.1);
	box-sizing: border-box;
}
#responsiveTools div:is([data-panel='image'],[data-panel='symbol']) button.btnOutline {
	width: auto;
}

/*----------  Panel édition du texte  ----------*/
#responsiveTools div[data-panel='text'] .fieldGroup {
	flex: 1;
}
/* fake select du choix de la police, pour le faire défiler vers le haut */
#responsiveTools .ts-dropdown {
	top: unset;
	bottom: 100%;
	border-top: 1px solid #d0d0d0;
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}


/*----------  Panel actions  ----------*/
#responsiveTools div[data-panel='tools'] :is(ul,li) {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#responsiveTools div[data-panel='tools'] ul {
	display: flex;
	flex-direction: column;
	gap: .5em;
}
#responsiveTools div[data-panel='tools'] li {
	display: block;
}
#responsiveTools button.btnOutline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .5em 1em;
	width: 100%;
	border: none;
}

/*=============================================
=            PopupLeft : panels full screen en mobile (ex : choix du type d'objet, graduation, template, date d'expé etc)            =
=============================================*/
.popupLeft {
	height:calc(100%);
	background-color:#FFF;
}
body #page>.popupLeft {
	display:none;
}

@media (max-width: 840px) {
	body.popupLeftDisplayed #page>.popupLeft.enabled {
		display:block;
	}
	body.popupLeftDisplayed #page>*:not(.popupLeft,#responsiveUpdateConfirmation,.subPanel.visible) {
		display:none;
	}
	/* si subPanel Visible */
	body.popupLeftDisplayed.subPanelVisible #page>.popupLeft.enabled {
		display:none;
	}
	body.popupLeftDisplayed #page > #graduations.visible {
		display: block;
	}
}

/* titre */
.popupLeftTitle {
	font-weight: 200;
	font-size: 1.6em;
	padding: .6em 0 .6em 1em;
	color:#FFF;
	background-color:#7F7F7F;
	position:relative;
	display:flex;
	flex:1;
	align-items:center;
	height:36px;
}
.popupLeftTitle span {
	flex:1;
	font-size:0.7em;
	text-align: right;
	justify-content:flex-start;
	cursor: pointer;
}
.popupLeftTitle span i {
	padding: 1em;
}

/* boutons */



/*----------  #popupExpeditions : choix de la date d'expé en mobile  ----------*/
#popupExpeditions label {
	display:inline-block;
	width:7em;
	padding:10px;
}
#popupExpeditions select {
	display:inline-block;
	width: calc(100% - 7em - 20px);
}
/* date de livraison estimée */
#popupExpeditions .shippingDate {
	display: block;
	width: 100%;
	text-align: center;
	margin-top:1em;
	
}
/* info date de livraison estimée */
#popupExpeditions .shippingDateLabel {
	vertical-align: top;
}
#popupExpeditions .shippingDateContainer {
	display: inline-block;
	width: calc(100% - 7em - 20px);
}
#popupExpeditions .shippingDateContainer em {
	display:inline-flex;
	justify-content: center;
	font-style:normal;
	margin-bottom:2em;
	font-size: .7em;
	width: 100%;
}
#popupExpeditions .shippingAverage {
	flex: inherit !important;
	display: flex;
	gap: 1em;
}
#popupExpeditions em i {
	padding-top: 0.35em;
}

/* prix */
#popupExpeditions .pricesLabel {
	vertical-align:top;
	padding-top: 0;
}
#pricesSummaryResponsive {
	display:inline-block;
	text-align: right;
	width:calc(100% - 8em - 20px - 15%);
	font-size: .77em;
	padding-right:-15%;
}
/* XS */
@media (max-width: 575px) {
	#pricesSummaryResponsive {
		width:calc(100% - 8em - 15%);
		padding-right: 0;
	}
}
#pricesSummaryResponsive em {
	font-style:normal;
	font-weight:500;
	margin-left: 0.5em;
}
#pricesSummaryResponsive .pricesSummaryPrimary {
	display:inline-block;
}
#popupExpeditions .freeShippingContainer {
	margin-top:1em;
	display:inline-block;
	width:calc(100% - 8em - 20px);
	font-size: .8em;
}


/*----------  #popupTemplates : choix du template  ----------*/

/* choix du thème */
#popupTemplates label {
	display:inline-block;
	width:6em;
	padding:10px;
}
#popupTemplates select {
	display:inline-block;
	width:calc(100% - 6em - 20px);
}

/* liste des templates */
#templateListContainer {
	height:calc(100% - 66px - 2em - 20px);
	overflow: auto;
}
#popupTemplates ul {
	list-style-type: none;
	padding:0 var(--size-margin-default);
	margin:0;
}
#popupTemplates ul li {
	border: 2px solid transparent;
	font-size: 0.8em;
	width: 25%;
	text-align: center;
	display:inline-block;
	border-radius:5px;
	vertical-align: top;
	cursor:pointer;
	box-sizing: border-box;
}
#popupTemplates li img {
	width:100%;
}
#popupTemplates li:is(:hover,.selected) {
	border:2px solid #000;
}

/* SM */
@media (max-width: 767px) {
	#popupTemplates ul li {
		width: 33%;
	}
}
/* XS modifié */
@media (max-width: 520px) {
	#popupTemplates ul li {
		width: 50%;
	}
}



/*=============================================
=            Visuel (partie centrale)            =
=============================================*/

#center {
	position:relative;
	overflow-y: auto;
	overflow-x: hidden;
}
/* SM modifié */
@media (max-width: 840px) {
	#center {
		flex: 1 auto;
	}
}

/*----------  Toolbar changement de vue  ----------*/
#viewToolbar {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	background: #fefefe;
	box-shadow: 0 0 3px rgba(0,0,0,.1);;
	padding: .2em .5em;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	z-index: 22;
}
#viewToolbar .icon {
	min-width: 2em;
	min-height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	
}
#viewToolbar .switchModeIcon {
	font-weight: 600;
	position: relative;
	display: none;
}
body #viewToolbar .switchModeIcon {
	/* display: flex !important; */
	display: flex;
}
#viewToolbar :is(.switchModeIcon,.viewTypeIcon):not(.disabled)::before {
	content: '\f111';
	font-family: var(--font-icons);
	color: var(--color-accent-500);
	font-size: .35em;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.packshotVisible #switchZoomMode {
	display: none !important;
}
#switchZoomMode.selected i::before {
	content: '\f010';
}
#viewToolbar .textIcon {
	text-transform: uppercase;
	font-size: .75em;
	font-weight: 600;
	padding: .25em;
	position: relative;
}
#viewToolbar .disabled {
	opacity: .3;
}
#viewToolbar .disabled:hover {
	opacity: .8;
}
#viewToolbar .specificModeTools {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .5em;;
}
#viewToolbar .visible {
	display: flex;
}
#viewToolbar .separator {
	display: none;	
}
.isFullCustomizable #viewToolbar .separator {
	display: block;
	height: 1.5em;
	width: 1px;
	background: rgba(0,0,0,.1);;
}

#container[data-mode='3D'] ~ #viewToolbar .availableIn2DMode {
	display: none !important;
}

/* SM modifié */
@media (max-width: 840px) {
	#viewToolbar {
		top: 1em;
		left: 0;
		transform: none;
		flex-direction: column;
	}

	#viewToolbar .visible {
		flex-direction: column;
	}
	.isFullCustomizable #viewToolbar .separator {
		width: 100%;
		height: 1px;
	}

	#viewToolbar :is(.textIcon) {
		writing-mode: vertical-lr;
		transform: rotate(180deg);
	}
	#viewToolbar :is(.textIcon):not(.disabled)::before {
		left: 0;
		bottom: unset;;
		top: 50%;
		transform: translateY(-50%);
	}
}


/*----------  Rendu 3D  ----------*/
/* container du rendu 3D */
#container {
	position:absolute;
	top:50%;
	touch-action: none;
	text-align: center;
	width:100%;
}
/* rendu 3D */
#container canvas {
	width:100%;
	touch-action: none;
	cursor: grab;
	position: relative;
	z-index: 11;
	
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* object-fit: cover; */
	/* min-width: 500px; */
	
}
.currentUniverse-glasses #container[data-mode="3D"] canvas {
	top: 2.75em;
}

/* couleur de fond du mode 2D pour les gobelets incolores */
#container #canvas[style='filter: saturate(1);'] ~ #mode2DBackground, /* ligne à supprimer à terme */
body.currentObjectColor-3 #mode2DBackground {
	/* background: rgba(0, 0, 0, 0.075); */
	/* mix-blend-mode: multiply; */
}
.packshot #container {
	width: calc(100% - 2em);
	left: 1em;
}
/* LG */
@media (max-width: 1199px) { 
	#container canvas {
		min-width: 455px;
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#container {	
		margin-top: 0 !important;
		top: 0;
	}
	.packshot #container {
		top: 50%;
		transform: translateY(-50%);
	}
	#container[data-mode="3D"] canvas {
		object-fit: contain;
		height: calc(90vh - 300px) !important;
		min-width: auto;
	}
	.packshot #container[data-mode="3D"] canvas { 
		height: auto !important;
		max-height: 60vh;
		max-width: 60vh;
	}

	.currentUniverse-glasses #container[data-mode="3D"] canvas {
		top: 4em;
	}
}

/*----------  Rendu 2D  ----------*/
#objSVG {
	position: relative;
	margin-top: 12.5vh;
	--canvasMinWidth: 455px;
}
#container[data-mode='2D'] {
	margin-top: 0 !important;
	position: relative;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#container[data-mode='2D'] #objSVG {
	margin-top: 0;

	width: calc(100% - 2em);
	overflow-x: auto;
	text-align: left;
}

#container #objSVG canvas{
	width: calc(100% - 1em);
	min-width: none;
	min-width: var(--canvasMinWidth);
	/* width: calc(100% - 1em); */
}
#container[data-mode='2D'] #canvas {
	position: relative;
	left: 0;
	transform: none;
}


#mode2DBackground {
	display: none;
	position: absolute;
	width: calc(100% - 1em);
	left: 0em;
	z-index:20;
	top:0;
	min-width: var(--canvasMinWidth);
}
#mode2DBackground img {
	width:100%;
}
body.mode2D #mode2DBackground {
	display:block;
}


/*----------  Aperçu 3D packshot  ----------*/
.packshot #canvas3D {
	box-sizing: border-box;
	border: 15px solid white;
	background: #f1f1f1;
	box-shadow: 0 6px 6px rgba(0,0,0,.3);
	position: relative;
	background-repeat:no-repeat;
	background-size: cover;
}

#packShotOverlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.7);
	z-index: 999;
}
#packShotOverlay.visible {
	display: block;
}


/*----------  Infos complémentaires  ----------*/
.containerInfo {
	position:absolute;
	font-weight:400;
	box-sizing: border-box;
	width: 100%;

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

	padding: var(--size-margin-default) var(--size-margin-default) 0;
	
}
/* logo ADG/Event Cup + badge Made In France */
#containerInfo1 {
	top: 0;
}
#containerInfo1 > div {
	flex: 1 auto;
}
#containerInfo1 .logoWebsite {
	opacity: .6;
}
.containerInfo .badgeMadeInFrance {
	padding-left: var(--size-margin-default);
	max-width: min(15%,90px);
	transform: rotate(18deg);
}
.containerInfo .badgeMadeInFrance img {
	width: 100%;
}

/* logo 360° */
#logo180 {
	position:absolute;
	bottom: 7%;
	right: 5%;
	max-width: 14%;
}
/* XS */
@media (max-width: 575px) {
	#logo180 {
		bottom: 15%;
	}
}

/* légende 3D ruler */
#threeDimensionRulerLegend {
	display: none;
	position: absolute;
	bottom: 7%;
	left: 5%;
	background: rgba(255,255,255,.75);
	padding: .5em;
	font-size: .8em;
}
#threeDimensionRulerLegend.visible {
	display: block;
}
.mode2D #threeDimensionRulerLegend {
	display: none !important;
}
#threeDimensionRulerLegend :is(ul,li) {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#threeDimensionRulerLegend li {
	display: flex;
	gap: .5em;
	align-items: center;
}
#threeDimensionRulerLegend li::before {
	content: '';
	display: block;
	width: 2em;
	height: 3px;
}
#threeDimensionRulerLegend li.center::before {
	background: red;
}
#threeDimensionRulerLegend li.back2back::before {
	background: blue;
}

/* info gobelet givré/opaque */
#containerInfo2 {
	bottom: var(--size-margin-default);
	z-index: 20;
	flex-direction: column;
}
.containerInfo .moreInfos {
	flex: 1 auto;
	text-align: center;
}



/* si 2D, masqué */
#container[data-mode='2D'] ~ .containerInfo {
	display: none;
}

/* SM modifié */
@media (max-width: 840px) {
	.containerInfo {
		width: calc(100% - (var(--size-margin-default) * 2));
		font-size: .8em;
	}
	#containerInfo1 {
		display:none;
	}

}

/*----------  flèche animation tant que le bouton de perso n'est pas cliqué en mobile  ----------*/
#customizationReminder {
	position: absolute;
	right: 0;
	width: 33%;
	top: 0;
	text-align: center;
}
#customizationReminder i {
	font-size: 2em;
	color: black;
	animation: 1.5s linear infinite arrowTopAnimation;
}
#customizationReminder.hidden {
	display: none;
}
@keyframes arrowTopAnimation {
	0% { opacity: 0; transform: translateY(.5em)}
	25% { opacity: 1; }
	50%,100% { opacity: 0; transform: translateY(0)}
}
.isCustomizationEdition #customizationReminder {
	display: none;
}


/*=============================================
=            Ma commande (colonne de droite)            =
=============================================*/

/*----------  Quantités  ----------*/
#quantity :is(select.select-css,input.qtys),
#quoteQuantity input,
:is(#orderOptionsMenu,#calendarRight,#popupExpeditions) input.qtys {
	width: 135px;
	font-size: 1.53em;
	font-weight: 500;
	border: none;
	border-bottom: 2px dotted rgba(0,0,0,.3);;
	padding: 0;
	background-size: 10px;
	border-radius: 0;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* copie de l'image dans le dégradé */
	background-color: #fbfbfb;
	text-align: left;
}

#quantity select option {
	font-size: 13px;
	font-weight: 400;
}

:is(#quantity,#orderOptionsMenu,#calendarRight,#popupExpeditions) input.qtys,
#quoteQuantity input {
	background-image: url('../images/pencil-alt-solid.svg');
	background-repeat: no-repeat;
	background-position: 90% center;
	background-size: .65em;
	text-align: center;
	padding-right: 2.5em;
	width: 4em;
}
#calendarRight input.qtys,
#quoteQuantity input {
	background-color: transparent !important;
}
#quoteQuantity input {
	border-bottom: none;
	background: none;
}
#popupExpeditions input.qtys {
	width: calc(100% - 7em - 20px) !important;
}
:is(#quantity,#orderOptionsMenu,#calendarRight,#popupExpeditions) input.qtys:focus {
	background-image: none;
	border-bottom-style: solid;
	background: white;
}

:is(#quantity,#orderOptionsMenu,#calendarRight,#popupExpeditions) input.qtys + button {
	visibility: hidden;
	margin-left: 1em;
	font-size: .7em;
	transition: none;
	
}
#popupExpeditions input.qtys + button {
	display: none;
}
:is(#quantity,#orderOptionsMenu,#calendarRight,#popupExpeditions) input.qtys:focus + button {
	visibility: visible;
}


@media (max-width: 1734px) {
	:is(#quantity,#orderOptionsMenu) input.qtys + button {
		margin-left: 25%;
		margin-top: 0.5em;
	}
	
}
@media (max-width: 1199px) {
	:is(#quantity,#calendarRight) input.qtys {
		width: calc(100% - 2.5em);
	}
	:is(#quantity,#orderOptionsMenu,#calendarRight) input.qtys + button {
		margin-left: 0;
		width: 100%;
	}
}

/* SM modifié */
@media (max-width: 840px) {
	#quantity {
		display: none;
	}
	:is(#quantity,#orderOptionsMenu) input.qtys + button {
		display: none;
	}
}


/*----------  Destination  ----------*/
/* SM modifié */
@media (max-width: 840px) {
	#destination {
		display: none;
	}
}


/*----------  Délais  ----------*/
#shippingDates.container {
	flex: 2 auto;
}

/* bloc info dates (dupliqué dans la popup de choix de la date d'expé) */
.shippingDatesAll .mainInfos .icon i {
	font-size: 2.4em;
}
.shippingDatesAll .mainInfos span > div {
	padding: 10px 0;
}

.shippingDatesAll .mainInfos .expedition,
.shippingDatesAll .mainInfos .delivery {
	display: flex;
	margin-bottom: var(--size-margin-default);
}
.shippingDatesAll .mainInfos .expedition {
	margin-bottom: calc(var(--size-margin-default) * 2);
}
/* .shippingDatesAll .mainInfos .delivery .icon i {
	animation: deliveryIcon 2s infinite linear;
}
@keyframes deliveryIcon {
	0% { opacity: 0; transform: translateX(-.5em); }
	40%,60% {opacity: 1; transform: translateX(0);}
	100% {opacity: 0; transform: translateX(.5em);}
} */
#expeditionDateChoose .shippingDatesAll .mainInfos .delivery .date,
#popupExpeditions .shippingDateContainer .date {
	display: flex;
	align-items: center;
	gap: .25em;;
}
#popupExpeditions .shippingDateContainer .date {
	justify-content: center;
}
#expeditionDateChoose .shippingDatesAll .mainInfos .delivery .date::after,
#popupExpeditions .shippingDateContainer .date::after {
	content: "\f060";
	font-family: var(--font-icons);
	font-weight: 900;
	color: var(--color-accent-500);
	font-size: .75em;
	animation: deliveryDate 2s infinite linear;
}
#popupExpeditions .shippingDateContainer .date::after {
	font-size: 1em;
}
@keyframes deliveryDate {
	/* 0%,100% { opacity: 0;}
	40%,60% {opacity: 1;} */
	0% { opacity: 0; transform: translateX(1em); }
	20%,80% {opacity: 1; transform: translateX(.5em);}
	100% {opacity: 0; transform: translateX(0);}
}

.shippingDatesAll .mainInfos .icon {
	width:25%;
	
}
.shippingDatesAll .mainInfos .text {
	flex: 1 auto;
	max-width: 75%;
	line-height: 1em;
}
.shippingDatesAll .mainInfos .text .title {
	font-weight: 600;
	font-size: .93em;
	margin-bottom: 1em;
	display: inline-block;
}
.shippingDatesAll .mainInfos .date {
	display: block;
	font-size: 1.53em;
	font-weight:500;
}
.shippingDatesAll .mainInfos .date a {
	font-size: .8rem;
	font-weight: 300;
	color:var(--color-main-500);
}

/* --> si date pas choisie */
.expeditionDelayNotChoosed button {
	margin-top: 10px;
}
.expeditionDelayNotChoosed .delivery {
	opacity:0.2
}

/* --> moreInfos (date indicative de livraison) */
.expeditionDelayChoosed em {
	display: flex;
	font-style: normal;
	font-size: .8em;
	margin-top: 1em;
}
.expeditionDelayChoosed em i {
	margin-right:0.5em;
}
.expeditionDelayChoosed em span {
	flex: 1 auto;
	font-size: .7rem;
	line-height: 1em;
}
.shippingAverage {
	flex:none!important;
	font-size:inherit!important;
	line-height:inherit!important;	
}

/* popup choix de la date d'expé */
#calendarRight .shippingDatesAll {
	margin-top: 2em;
}


/* SM modifié */
@media (max-width: 840px) {
	#shippingDates {
		display: none;
	}
}


/*----------  Menu commande mobile (en bas d'écran principal, qté + date d'expé)  ----------*/
#orderOptionsMenu {
	grid-column: auto / span 2;
	padding: var(--size-margin-default) 0;
	border-top: 1px solid #ededee;
	border-bottom: 1px solid #ededee;

	display: none;
	cursor: pointer;
}
#orderOptionsMenu:hover {
	background: rgba(0,0,0,.03);
}
#orderOptionsMenu .element {
	flex: 1 1;
	padding: 0 var(--size-margin-default) 0 8%;
}
#orderOptionsMenu .element label {
	font-size: .73em;
}
#orderOptionsMenu .element .value select {
	font-size: 1.06em;
	font-weight: 600;
	text-align: left;
	border:0;
	padding-left:0;
}
/* SM modifié */
@media (max-width: 840px) {
	#orderOptionsMenu {
		display: flex;
	}
}


/*----------  Prix (desktop + mobile)  ----------*/
#prices.container {
	flex: 2 auto;
}
.priceFrom {
	font-size: .8em;
	text-align: right;
	margin-right: 8%;
}
/* container du prix (chiffres + boutons ht + ttc) */
#pricesSummary {
	display:flex;
	margin-bottom: var(--size-margin-default);
}
/* prix (chiffres) */
#pricesSummaryPrices {
	text-align: right;
	display:inline-block;
	flex:1;
	padding-right:10px;
}
/* prix du lot */
.pricesSummaryPrimary {
	font-size: 3em;
	font-weight: 600;
	display: block;
	line-height: 1.1em;
}
/* prix unitaire */
.pricesSummarySecondary {
	font-size: .9em;
}
/* boutons de changement de prix */
#pricesSummaryChooseType {
	padding-left: var(--size-margin-default);
}
#pricesSummaryChooseType ul {
	list-style-type: none;
	padding: 0;
	margin: 5px 0 0 0;
}
#pricesSummaryChooseType ul li {
	display:block;
}
#pricesSummaryChooseType li {
	width: 20px;
	height: 20px;
	border-radius: 24px;
	font-size: 8px;
	border: 2px solid #e0e0e0;
	color: #b1b1b1;
	text-align: center;
	line-height: 20px;
	color: #b1b1b1;
	font-size:10px;
	font-weight:600;
	cursor: pointer;
	margin-bottom:5px;
}
#pricesSummaryChooseType li.selected {
	color:white;
	background-color: var(--color-main-500);
	border: 2px solid var(--color-main-500);
}

/* bannière livraison offerte */
.freeShipping {
	background-color:#f2f2f2;
	font-size: 1.06em;
	color:#5a5a5a;
	padding: .2em var(--size-margin-default);
	width: 75%;
	margin-left: 25%;
	text-align: center;
	text-transform: uppercase;
	font-weight:600;
	box-sizing: border-box;
}
.freeShipping i {
	color:var(--color-main-500);
	margin-left: .5em;
}

/* LG */
@media (max-width: 1199px) { 
	.freeShipping {
		width: 100%;
		margin-left: 0;
	}
}
/* SM modifié */
@media (max-width: 840px) {
	#pricesSummaryChooseType,
	.freeShipping {
		display: none;
	}

	.priceFrom {
		font-size: .667em;
	}
	#pricesSummary {
		margin-bottom: 0;
	}
	#pricesSummaryPrices {
		font-size: .667em;
	}
	.pricesSummaryPrimary {
		font-size: 2.3em;
	}
	#prices .freeShippingContainer {
		display: none;
	}	
}

/*----------  Actions (ajout au panier, export PDF...)  ----------*/
#actions.container {
	flex: 5 auto;
}
#actions {
	display: flex;
	flex-direction: column;
}
/* ajout au panier */
#btnAddToCart {
	background: var(--color-accent-500);
	width: 75%;
	margin-left: 25%;
	font-size: 1.06em;
}
/* container des boutons secondaires (export PDF etc) */
#subBtnContainer {
	margin-top: 1em;
	width: 75%;
	margin-left: 25%;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	gap: .75em;
}
/* boutons textes */
#actions .invisibleBtn {
	background: transparent;
	color: var(--color-main-500);
	display: inline-block;
	width: auto;
	padding: 0 2em;
	font-size: .9em;
}
#actions .invisibleBtn:hover {
	opacity: .7;
}

/* LG */
@media (max-width: 1199px) { 
	#btnAddToCart {
		width: 100%;
		margin-left: 0;
	}
}	
/* SM modifié */
@media (max-width: 840px) {
	#btnAddToCart {
		font-size: 0.86em;
	}
	#subBtnContainer {
		display: none;
	}
}


/*=============================================
=            Outils            =
=============================================*/
/*! Kezako ?? */
#objRecap {
	display:none;
}


/*----------  FileUpload : popup avec progressbar lors d'envoi de fichier  ----------*/
#fileUpload {
	background-color: rgba(255,255,255,.85);
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
	display:none;
}
#fileUpload > div {
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
}
#fileUpload .popupTitle {
	font-size: 1.2em;
}

/*----------  Popup  ----------*/
.popup {
	display:none;
}

.popup {
	position:absolute;
	top:32px;
	left:0;
	width:100%;
	height:calc(100% - 32px);
	background-color:rgba(255,255,255,0.98);
	z-index:100;
}

/*----------  Tooltip  ----------*/
#tooltip {
    position: absolute;
    top: 0;
    left: 0;
	background: rgba(0,0,0,.9);;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
    z-index: 1000;
	font-size: .9em;
	margin-right: .66em;
}

/*----------  Loader avant panier  ----------*/
#customWaiting, 
#customSaveWaiting {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;

	font-weight: 400;
	text-align: center;
	background-color:white;
	box-shadow: 0 0 50px rgba(0,0,0,0.25);
	opacity:0;
	display:none;
	transition: opacity 0.5s linear;

	transform: translateX(-50%) translateY(-50%);

	padding: 2em;
	min-width: 50%;

	animation: customWaitingBG 1.5s linear infinite;
}
@keyframes customWaitingBG {
	0% { box-shadow: 0 0 50px rgba(0,0,0,0.0); }
	50% { box-shadow: 0 0 50px rgba(0,0,0,0.40); }
	100% { box-shadow: 0 0 50px rgba(0,0,0,0.0); }
}

/* LG */
@media (max-width: 1199px) { 
	#customWaiting br {
		display: none;
	}
}

/* Application d'une transition pour les gros blocs */
header, 
#left, 
#right, 
#containerInfo {
	transition: opacity 0.5s linear;
}

body:is(.loader,.loaderSave,.loaderSaveWaiting) :is(header, #left, #right, #containerInfo,#viewToolbar) {
	opacity : 0;
}
body.loader #customWaiting,
body.loaderSave #customSaveWaiting {
	display: block;
	opacity: .92;
}

/*----------  Spinner  ----------*/
.ietcLoadingSpinner {
	margin: auto;
	margin-top: 1em;
	border: 8px solid #f3f3f3;
	border-radius: 50%;
	border-top: 8px solid var(--color-accent-500);
	width: 60px;
	height: 60px;
	animation: spin-popup 2s linear infinite;
}

@keyframes spin-popup {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*=============================================
=            POPUP : choix de date d'expé (desktop)            =
=============================================*/
#expeditionDateChoose {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	
}
#expeditionDateChoose.hidePopup {
	display: none;
}
.expeditionDateChooseContainer {
	width: 900px;
	display: flex;
	margin: 5% auto 0;
}
.expeditionDateChooseContainer > div {
	flex: 1 1;
}

#calendarLeft {
	margin-right: var(--size-margin-default);
}
#calendarRight {
	margin-left: var(--size-margin-default);
}

/* MD */
@media (max-width: 991px) {
	.expeditionDateChooseContainer {
		width: 820px;
	}
}

/* Agenda */
#agenda {
	display:inline-block;
	width:100%;
	
}
#agenda>ul {
	list-style-type: none;
	margin:0;
	padding:0
}
#agenda li {
	width:calc((100% / 7) - 6px);
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
	height:3em;
	text-align: center;
	color:#BEBEBE;
	cursor:default;
	border:2px solid transparent;
}
#agenda .dayList li {
	font-weight: bold;
	color:gray;
}
#agenda li.havePrice {
	color:var(--color-main-500);
	cursor: pointer;
}

#agenda .dayNumber {
	display:inline-block;
	font-weight: bold;
	font-size:12px;
	padding:5px;
}
#agenda .day .price {
	display:block;
	font-size:10px;
}
#agenda .day.selected {
	border:2px solid var(--color-main-500);
	border-radius:2px;
}
#agenda .day.weekend {
	background-color:rgba(0,0,0,0.02);
}
#agenda .day.today .dayNumber{
	background-color:var(--color-main-500);
	color:#FFF;
	border-radius: 64px;
	width:1.5em;
	height:1.5em;
}
#agendaPagination {
	text-align: center;
	position:relative;
	margin-bottom:20px;
}
#agendaPrevious, #agendaNext {
	position:absolute;
	cursor: pointer;
	line-height:20px;
}
#agendaPrevious {
	left:6%;
}
#agendaNext {
	right:6%;
}
#agendaPagination i {
	background: white;
	display: inline-block;
	box-sizing: border-box;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 50%;

	animation: arrowBlink 1s ease-in-out infinite;
}
#agendaPagination i:hover {
	background: rgba(0,0,0,.3);
}

@keyframes arrowBlink {
	0% { background: rgba(0,0,0,0); }
	50% { background: var(--color-accent-500); }
	100% { background: rgba(0,0,0,.0); }
}

/*! Kezako ?? */
#agendaCurrent {
	text-transform: uppercase;
	font-weight:500;
	font-size:14px;
}

/* container du bouton de choix de date d'expé */
.calendarBtnChooseContainer {
	min-height: 4em;
	margin-top:30px;
}
/* bouton choix de date d'expé */
#calendarBtnChoose {
	background-color:var(--color-main-500);
	color:#FFF;
	text-align: center;
	border:0;
	border-radius:2px;
	padding:1em 0;
	display:block;
	text-transform: uppercase;
	font-weight:600;
	width:100%;
	font-size:14px;
	
	cursor: pointer;
}


/*=============================================
=            Popup mobile message landscape           =
=============================================*/
#mobileLandscapeMessage {
	display: none;
	background: rgba(255,255,255,.95);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 100000;	
}
#mobileLandscapeMessage .content {
	padding: 10%;
	max-width: 500px;
	text-align: center;
}

@media screen and (orientation:landscape) and (max-width: 840px) and (max-height: 550px) {
	#mobileLandscapeMessage {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#mobileLandscapeMessage.keyboardDisplayed {
		display:none;
	}
}


/*=============================================
=            Popup warning erreurs (ex : champs non renseignés)            =
=============================================*/
/* container */
:is(#toCartWarnings,#modalPopup) {
	opacity: 0;
	display: none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#FFFFFFD9;
	z-index:100;
}

:is(#toCartWarnings,#modalPopup).visible {
	opacity:1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Aux : container du contenu de la popup */
#toCartWarningsAux,
#modalPopupAux {
	position: relative;
	max-width: 40em;
	box-sizing: border-box;
	z-index: 20;
	font-weight: 400;
	background-color: white;
	box-shadow: 0 0 50px rgba(0,0,0,0.25);
	transition: opacity 0.5s linear;
	padding: 2em;
	animation: customWaitingBG 1.5s linear infinite;
}

#modalPopupAux {
	animation: none;
}
#modalPopupAux > div {
	display: none;
}
/* Greg : Je pense que ça c'est faux */
/*#modalPopupAux > div.visible {
	display: block;
}*/
/*Greg : Je le remplace par çà */
#modalPopup.visible #modalPopupAux > div {
	/* display: block; */
}
/*Nico : et moi j'ai remplacé par ça parce que sinon ça affiche tout. :) */
#modalPopup.visible #modalPopupAux > div.visible {
	display: block;
}
#modalPopup.savePopup #savePopup {
	/*display:block;*/
}
#modalPopup.selectQty #selectQty {
	/*display:block;*/
}

/* bouton fermeture */
#toCartWarningsClose,
#modalPopupClose {
	position: absolute;
	top: .5em;
	right: .5em;
	font-size: 1.2em;
	cursor: pointer;
}
/* contenu de la popup (message, masqué par défaut) */
.toCartWarning {
	display: none;
	margin-bottom: .5em;
}
.toCartWarning.visible {
	display:flex;
}
.toCartWarning .icon {
	font-size: 1.5em;
	padding-right: 1em;
}
.toCartWarning .description {
	flex: 1;
}
.toCartWarningExclamation .description .mainInfo {
	color: darkOrange;
	font-weight: 500;
}
.toCartWarning .description ul {
	padding-left: 0;
	margin: 0;
}
.toCartWarning .description li {
	display: inline-block;
}
.toCartWarning .description li::after {
	content: '/';
	margin-left: .5em;
	margin-right: .5em;
}
.toCartWarning .description li:last-of-type::after {
	display: none;
}
.toCartWarning a {
	font-size: 0.8em;
	padding-left: 0.5em;
}
.toCartWarningExclamation .icon {
	color: darkorange;
}
.toCartWarningInformation .icon {
	color: steelblue;
}

/* disclaimer modif ultérieure */
#toCartWarningsDisclaimer {
	font-size: .8em;
}

/* disclaimer si éléments hors zone d'impression */
#outOfPrintAreaElements p {
	font-size: .85em;
	margin-top: 0;
}
#outOfPrintAreaElements p span {
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}
#outOfPrintAreaElements p span:hover {
	text-decoration: none;
}

/* boutons d'actions de la popup */
#toCartWarningsActions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#toCartWarningsActions button {
	font-size: .85em;
	padding: .3em 1em;
}

/* popup modale (ex : sauvegarde perso) */
#modalPopup .title {
	font-size: 1.2em; 
	font-weight: 700;
	margin-top: -1em;
	margin-bottom: .5em;
}
#modalPopup .intro {
	margin-bottom: 1em;
}

#modalPopup input:is([type='text'],[type='email']) {
	border: 1px solid #d0d0d0;
	padding: 8px;
	border-radius: 3px;
	width: 100%;
	box-sizing: border-box;
}
#modalPopup input:is([type='text'],[type='email']):hover { 
	border-color: #888;
}
#modalPopup input:is([type='text'],[type='email']):focus { 
	border-color: #aaa;
}

#reCaptcha {
	margin-top: 1em;
}

#modalPopup .actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
	margin-top: 1.5em;
}
#modalPopup .btn {
	width: auto;
	padding: .5em 1em;
	text-decoration: none;
}
#modalPopup .invisibleBtn {
	background: transparent;
	color: var(--color-main-500);
	display: block;
	width: auto;
	padding: 0 2em;
}
#modalPopup .invisibleBtn:hover {
	opacity: .7;
}
/* bouton disable (ex : captcha non valide) */
#modalPopup .btn.disabled {
	background-color:#BEBEBE;
	cursor: not-allowed;
}

#modalPopup #helpPopup .intro {
	display: flex;
	gap: 2em;
}
#modalPopup #helpPopup .intro img {
	max-width: 100px;
}
#modalPopup #helpPopup .actions {
	justify-content: center;
}

#modalPopup #selectQty .actions {
	justify-content: center;
}
#modalPopup #selectQty .actions button {
	text-transform: none;
	font-size: 1.2em;
}

#modalPopup #oversizeImagePopupDimensions {
	font-weight: 700;
}

#modalPopup #differentDatesPopup .title {
	text-align: center;
}
#modalPopup #differentDatesPopup .intro {
	text-align: center;
}
#modalPopup #differentDatesPopup .intro .hidden {
	display: none;
}
/*
#modalPopup #differentDatesPopup :is(ul,li) {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#modalPopup #differentDatesPopup ul {
	display: flex;
	gap: 1em;
}
#modalPopup #differentDatesPopup li {
	flex: 1;

	display: flex;
	gap: .5em;
	margin-bottom: 0.5em;
	flex-direction: column;
	border: 2px solid rgba(0,0,0,.1);
	border-radius: 5px;
	padding: 1em;
	cursor: pointer;
}
#modalPopup #differentDatesPopup li:has(input:checked) {
	border-color: var(--color-accent-500);
}
#modalPopup #differentDatesPopup li:has(input:disabled) {
	opacity: .5;
	border-color: transparent;
	cursor: default;
}
#modalPopup #differentDatesPopup li:has(input:disabled) .price {
	display: none !important;
}
#modalPopup #differentDatesPopup label {
	width: unset;
	font-size: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	flex-direction: column;
}
#modalPopup #differentDatesPopup label > div {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: .25em;
}
#modalPopup #differentDatesPopup .price {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .8em;
	background: rgba(0,0,0,.07);
	border-radius: 3px;
	padding: 0.25em 1em;
}
	*/
#modalPopup #differentDatesPopup select {
	width: 100%;
}
#modalPopup #differentDatesPopup .actions {
	justify-content: center;
}
#modalPopup #differentDatesPopup .validateBtn {
	background-color: var(--color-accent-500);
}

/* Table gabarits revendeurs */
.datasheetTable {
	width: 100%;
	margin-top: 1em;
	border-collapse: collapse;
}
.datasheetTable tr.hidden {
	display: none;
}
.datasheetTable :is(th,td) {
	border-top: 1px solid rgba(0,0,0,.3);
	border-bottom: 1px solid rgba(0,0,0,.3);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.datasheetTable td {
	text-align: center;
}

/* SM */
@media (max-width: 767px) {
	#toCartWarningsAux,
	#modalPopupAux {
		width: 30em;
	}
	#toCartWarningsActions {
		flex-direction: column;
	}
	#toCartWarningsActions > *:not(:last-of-type) {
		margin-bottom: 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#toCartWarningsAux,
	#modalPopupAux {
		flex: none;
		width: calc(100vw - 2em);
	}
	.toCartWarning .icon {
		padding-right: .5em;
		font-size: 1em;
	}
}



/*=============================================
=            Arbres à empreintes            =
=============================================*/
.currentUniverse-fingerprintTree #carousel .container div {
	display: flex;
	justify-content: center;
	
}
.currentUniverse-fingerprintTree #carousel .container div:not(.current) {
	transform: translateY(40%);
}
.currentUniverse-fingerprintTree #carousel .container div:not(.current) img {
	width: 80%;
}
.currentUniverse-fingerprintTree #carousel .container div::after {
	bottom: 25px;
	width: 40%;
}
.currentUniverse-fingerprintTree #carousel .container div.current::after {
	bottom: 40px;
}

/* LG */
@media (max-width: 1199px) { 
	.currentUniverse-fingerprintTree #carousel .container div::after {
		width: 30%;
		bottom: 21px;
	}
}	
/* MD */
@media (max-width: 991px) {

}
/* SM modifié */
@media (max-width: 840px) {
	#backgroundVariants {
		display: none;
	}
}
/* SM */
@media (max-width: 767px) {

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

}


/*=============================================
=            Loader : spinner lors du chargement de la page            =
=============================================*/
#loader {
	display: none;

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

	align-items: center;
	justify-content: center;

	--color-loader-content: white;
	--loader-size: 60px;
	--loader-borderWidth: 6px;
	--loader-borderColor: var(--color-accent-500);
	--loader-backgroundColor: rgba(0,0,0,0.15);
}
#loader.visible {
	display: flex;
}
#loader.visible ~ * {
	filter: blur(5px);
}
.spinner {
	height: var(--loader-size);
	width: var(--loader-size);
	animation: rotation 1s infinite linear;
	border: var(--loader-borderWidth) solid var(--loader-backgroundColor);
	border-radius: 100%;
}
.spinner:before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--loader-borderWidth) * -1);
	left: calc(var(--loader-borderWidth) * -1);
	height: 100%;
	width: 100%;
	border-top: var(--loader-borderWidth) solid var(--loader-borderColor);
	border-left: var(--loader-borderWidth) solid transparent;
	border-bottom: var(--loader-borderWidth) solid transparent;
	border-right: var(--loader-borderWidth) solid transparent;
	border-radius: 100%;
}
@keyframes rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}


/*=============================================
=            Mode devis            =
=============================================*/
.isQuoteMode :is(#currentObject button, #currentObjectResponsiveNameContainer button,#alternatives,#alternativesResponsive,#quantity,#destination,#shippingDates,#prices,#PDFExport,#save,#orderOptionsMenu,#mobileSave),
.isQuoteMode #graduationChoice {
	display: none !important;
}
.isQuoteMode #right > .title {
	flex: 0;
	margin-bottom: 1em;
}
#rightQuoteElements {
	display: none;
	flex: 0;
}
.isQuoteMode #rightQuoteElements {
	display: block;
}
.isQuoteMode #actions {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.isQuoteMode #btnAddToCart {
	margin-left: 0;
	width: 100%;
	font-size: 1.3em;
}
#right #quoteQuantity {
	margin-bottom: 2em;
}
/* SM modifié */
@media (max-width: 840px) {
	.isQuoteMode #btnAddToCart {
		font-size: 1.05em;
	}
}
/* XS */
@media (max-width: 575px) {
	.isQuoteMode #right {
		grid-template-columns: 1fr 2fr;
	}
	.isQuoteMode #btnAddToCart {
		font-size: .85em;
	}
}


/*=============================================
=            Debug Magic Greg            =
=============================================*/
#SVGContainer svg {
	width:1024px;
	height:582px;
	border:1px solid #F00;
}





/*=============================================
=            Debug Reponsive            =
=============================================*/



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

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



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

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

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

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

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

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

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

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


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

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

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

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

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

}