/* ========================== CLASSES PRINCIPALES ========================= */

.hide {
	display: none;
}

.hidden {
	opacity: 0;
}

/* ====================== DEFINITION DE LA SKIN DU SITE ==================== */

@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-thin.otf') format("opentype");
	font-weight: 100;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-extralight.otf') format("opentype");
	font-weight: 200;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-light.otf') format("opentype");
	font-weight: 300;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-regular.otf') format("opentype");
	font-weight: 400;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-medium.otf') format("opentype");
	font-weight: 500;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-semibold.otf') format("opentype");
	font-weight: 600;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-bold.otf') format("opentype");
	font-weight: 700;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-extrabold.otf') format("opentype");
	font-weight: 800;
}
@font-face {
	font-family: "Arpona";
	src: url('font/Arpona/Fontspring-DEMO-arpona-black.otf') format("opentype");
	font-weight: 900;
}

/* style couleur du site*/
:root {
	--main-bg: rgb(255, 255, 255, 0);
	--main-text-trans: none;
	--table-header-bg: #ee4423;
	--table-header-text:  white;

	/*--footer-bg: rgb(254, 0, 0, 0.7);*/
	--footer-bg: #ee4423;
	--footer-text: rgb(255, 255, 255);
	--footer-hover: rgb(200, 200, 200);

	--font-family: "Yu Gothic", sans-serif;

	--head-title-ts: none;
	--head-title-fw: 600;

	--a: rgb(0, 0, 0, 1);
	--a-hover: #ee4423;

	--button1: rgb(238, 68, 35);
	--button1-hover: rgb(238, 68, 35, 0.8);
	--button1-active: rgb(238, 68, 35, 0.6);
	--button1-text: white;

	--button2: rgb(180, 180, 180);
	--button2-hover: rgb(150, 150, 150);
	--button2-active: rgb(130, 130, 130);
	--button2-text: white;

	--border-focus: rgb(0, 0, 0, 0.8);

	--navbar-bg: rgb(255, 255, 255, 1);
	--navbar-bg2: #ee4423;
	--navbar-text: rgb(0, 0, 0, 1);
	--navbar-text-hover: #ee4423;
	--navbar-text-focus: rgb(0, 0, 0, 0.7);
	--navbar-text-trans: none;
	--navbar-text-fontweight: 400;
	--navbar-text2: rgb(255, 255, 255);
	--navbar-text2-focus: rgb(255, 255, 255, 0.5);

	--modal-header: white;
	--modal-body: white;
	--modal-text: black;

	--payout-frame: #ee44230a;
	--payout-menu: white;
	--payout-form: #fde8e8;

	--countdown-bg: rgb(152, 16, 62);
	--countdown-text: white;
	--countdown-button: rgb(21, 51, 89, 1);

	--sticky-bottom: #ffffff;

	--shop-name-fw: 400;
	--product-title-ts: none;
} 

body {
	font-family: var(--font-family);
	background-color: var(--main-bg);
}

main {
	position: relative;
	min-height: 90vh;

	/*margin-right: 100px;*/

	background-color: var(--main-bg);
	text-transform: var(--main-text-trans);
}
.margin-right {
	margin-right: 100px;
}

a {
	color: var(--a);
	text-decoration: none;
}
a:hover {
	color: unset;
	text-decoration: none;
}
a:not(.product):hover {
	color: var(--a-hover);
	text-decoration: none;
}

small {
	text-transform: none;
}

input[type="password"] {
	font-family: Arial;
	font-size: 16px;
}

.checkbox-inline {
	cursor: pointer;
}

.title {
	display: inline-block;
	font-weight: var(--head-title-fw);
	font-size: 17px;
	/*margin-bottom: 15px;*/
}

.head-title h1, .head-title h2, .head-title h3 {
	text-align: center;
	font-weight: var(--head-title-fw);
}
h3 {
	font-size: 1.5rem;
}

/* FORM CONTROL */

.custom-select, .form-control {
	border-radius: 0;
}
.custom-select:focus, .form-control:focus {
	box-shadow: none;
}

.form-control {
	border: none;
	transition: 0.3s;
	border-bottom: 2px solid transparent;
}
.form-control:hover {
	border-bottom: 2px solid black;
}
.form-control:focus {
	border-bottom: 2px solid var(--a-hover);
}

/* BOUTONS */
.btn {
	/*text-transform: uppercase;*/
	border-radius: 0;
}
.btn:focus {
	box-shadow: none;
}

.btn-cart {
	background-color: var(--button1);
	color: var(--button1-text);
	font-weight: 500;
	transition: 0.1s;
}
.btn-cart:hover {
	background-color: var(--button1-hover);
	color: var(--button1-text);
}
.btn-cart:active {
	background-color: var(--button1-active);
}

.btn-log {
	background-color: var(--button2);;
	color: var(--button2-text);
	transition: 0.1s;
}
.btn-log:hover {
	background-color: var(--button2-hover);;
	color: var(--button2-text);
}
.btn-log:active {
	background-color: var(--button2-active);;
}

/* DISCLAIMER */
.disclaimer {
	background-color: black;
	height: 50px;
	color: white;

	font-size: 13px;
	text-transform: uppercase;
}
.disclaimer .disclaimer-text {
	display: inline-block; /* important */
  	white-space: nowrap;
  	overflow: hidden;
  	/*text-overflow: ellipsis;*/
}
.disclaimer .disclaimer-text span {
	position: relative;
	left: 0;
}

.disclaimer .fas {
	color: yellow;
}

/* ==================== SIDE-NAVBAR =================== */

.side-navbar {
	z-index: 1030;
	display: flex;
	flex-direction: column;
	align-items: center;

	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	width: 120px;

	/*border: 1px solid black;*/
	padding: 20px;

	text-transform: var(--navbar-text-trans);
    font-weight: var(--navbar-text-fontweight);
	font-size: 25px;
	background-color: transparent;
}

.navbar-title {
	font-family: Arpona;
	font-weight: 300;
	
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transition-property: opacity, left;
  	transition-duration: 3s, 5s;
	transition: 0.5s;
}
.navbar-title a {
	top: 0;
	position: relative;
	transition: 0.5s;
	text-decoration: none;
}
.navbar-title.hidden a {
	top: -30px;
}

.navbar-cart {
	font-size: 18px;
	margin-bottom: 40px;
	margin-top: 20px;

	text-align: center;
}
.navbar-cart img {
	height: 50px;
	filter: invert(35%) sepia(79%) saturate(4131%) hue-rotate(352deg) brightness(99%) contrast(88%);
}
.navbar-cart span {
	position: absolute;
	right: 54px;
	top: 54px;

	color: #ee4423;
	font-size: 16px;
}

/* ====================== DRAGBOX (MODAL) ===================== */

.modal-backdrop {
	background-color: rgb(255, 246, 241);
}
.modal-content {
	border-color: rgba(242, 99, 99, 0.2);
}

.drag-box {
	position: absolute;
	background-color: white;

	color: var(--modal-text);
	/*text-transform: uppercase;*/
	font-weight: 400;
  	
  	cursor: move;

  	padding-bottom: 40px;
	padding-top: 40px;
}
#loginBox {
	top: 70px;
	left: 100px;

	/*background-image: url("/img/cloud1-1.png");
	background-repeat: no-repeat;
	background-size: 500px 500px;
	background-color: transparent;*/

	background-color: white;

	width: 370px;
}
#cartBox {
	top: 80px;
  	left: 430px;

	width: 500px;
}

.drag-body {
	margin-right: auto;
	margin-left: auto;
}
.drag-header {
	margin-bottom: 20px;
	text-align: center;
	color: var(--a-hover);
}

.log-pannel .form-control {
	/*height: 40px;*/
	font-weight: 400;
	font-size: 14px;
}
/*.log-pannel .form-control[type="password"] {
	font-size: 14px;
}*/

/* ===================== ACCOUNT ===================== */

.account-item {
	display: block;
	padding: 5px;
	padding-left: 10px;

	background-color: transparent;
	color: black;
	border-radius: 3px;
}
.account-item.main:hover {
	background-color: #ee442314;
	color: black;
}
.account-item.admin:hover {
	background-color: #9bcbcf40;
	color: #898989;
}
.account-item.logout:hover {
	background-color: #f2745c;
	color: white;
}

/* ===================== CART ===================== */

.cart-product {
	margin: 0;
}
.cart-product img {
	border-radius: 10px;
	object-fit: cover;
	height: 100px;
}
.dropdown-menu {
	font-weight: 400;
	width: 400px;
}
.cart-total-price {
	color: var(--a-hover);
}
.cart-total-title small, .cart-product-name {
	color: grey;
}

/* ===================== NAVBAR ===================== */

.navbar {
	text-transform: var(--navbar-text-trans);
    font-weight: var(--navbar-text-fontweight);
	/*font-size: 25px;*/
	background-color: var(--navbar-bg);
	justify-content: center;

	height: 45px;
	padding-top: 20px;
 	padding-bottom: 20px;

 	transition: 0.3s;
}
.navbar.focus {
	background-color: var(--navbar-bg2);
}
.navbar.focus a.navbar-name, .navbar.focus a.nav-link {
	color: var(--navbar-text2);
}

.navbar-brand {
	z-index: 1030;

	position: absolute;
	left: 0;
	margin-left: 0px;
	margin-left: 40px;

	filter: invert(40%) sepia(100%) saturate(2114%) hue-rotate(341deg) brightness(89%) contrast(111%);
}
.navbar-brand img {
	height: 40px;
}

.navbar-toggler-icon {
	background-image: url("/img/logoNavbar.svg") !important;
	filter: invert(40%) sepia(100%) saturate(2114%) hue-rotate(341deg) brightness(89%) contrast(111%);
}
.navbar.focus .navbar-toggler-icon {
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(154deg) brightness(119%) contrast(109%);
}

.navbar-name {
	position: absolute;
	text-align: center;
	font-family: Arpona;
	font-size: 30px;
	font-weight: 300;
    color: var(--navbar-text);

    transition: 0.2s;
}
.navbar-name:hover{
	color: var(--navbar-text-hover);
}
.navbar-name:focus {
    color: var(--navbar-text-focus);
}

.navbar.shadow {
	box-shadow: 0 .4rem 1rem rgba(0,0,0,.15) !important;
}

.navbar-collapse {
	transition: 0.3s;
}

#navbarContent {
	font-size: 18px;
}


/* ============================ DIVERS ============================ */

/* MOBILE DROPDOWN */
@media (max-width: 768px) { 
	#shopDropdownMenuLink + .dropdown-menu, 
	#accountDropdownMenuLink + .dropdown-menu, 
	#infoDropdownMenuLink + .dropdown-menu {
		background-color: transparent;
		border: none;	
	}
	#shopDropdownMenuLink + .dropdown-menu .dropdown-item, 
	#accountDropdownMenuLink + .dropdown-menu .dropdown-item,  
	#infoDropdownMenuLink + .dropdown-menu .dropdown-item {
		color: var(--navbar-text);
	}
	.dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus {
		background-color: transparent;
	}

	main {
		margin-right: 0;
		margin-top: 90px;
	}

	.margin-right {
		margin-right: revert;
	}

	.navbar {
		box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);

		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
		height: unset;

		justify-content: left;
	}

	.navbar-name {
		position: relative;
	}

	.navbar-brand {
		margin-left: 30px;
	}

	.navbar-cart {
		margin-bottom: 0;
		margin-top: 0;
	}
	.navbar-cart img {
		height: 40px;
	}
	.navbar-cart span {
		right: 30px;
		top: 30px;
	}

	/*#cartBox {
		width: 100%;
	}*/
}

li.nav-item {
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
}

/* NOTIF CONTAINER */
.notif-container {
	z-index: 1031;
	top: 20px;
	position: fixed;
}

.sticky-bottom {
	position: sticky !important;
	bottom: 0px;
	z-index: 99;
}

/* ===================== IMG MAP ===================== */

/*#imagemapPannel {
	display: flex;
	justify-content: center;
	align-items: center;
}*/
#imagemapPannel .maparea {
	max-height: 80vh;
	opacity: 0;
}
#imagemapPannel .highlight {
	position: absolute;
	max-height: 80vh;
	transition: 0.3s;
}
#imagemapPannel .highlight.hover {
	filter: grayscale(100%);
	transform: scale(1.03);
}

.modal#imagemapPannel {
	padding-top: 150px;
}
.modal#imagemapPannel .maparea, .modal#imagemapPannel .highlight {
	max-height: 70vh;
}