@charset "UTF-8";

/**************************/
/**************************/
/********** FORM **********/
/**************************/
/**************************/

fieldset {
	position:relative;
	border:none;
	margin:0;
	padding:0;	
}
form {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
	    -ms-flex-wrap:wrap;
	        flex-wrap:wrap;
	-webkit-box-pack:start;
	-webkit-justify-content:flex-start;
	   -moz-box-pack:start;
	    -ms-flex-pack:start;
	        justify-content:flex-start;
	gap:1em;
	font-size: var(--body-font-size);
	text-align:left;
	margin:0 auto;
	width: 100%;
}
form input,
form textarea,
form button,
form select {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	width:auto;
	font-family: inherit;
	font-size: var(--body-font-size);
	line-height:1em;
	padding:1em;
	border:0;
	background:var(--light-color);
}
form textarea {
	resize:none;
	min-height:6em;
}
form input[type="number"] {
	text-align:center;
	width:auto;
}
form input,
form textarea,
form button,
form select {
	width:100%;
}
form select,
form input[type=submit],
form button {
	cursor:pointer;
}

/********** BROWSERS **********/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
::-webkit-input-placeholder {
	color:inherit;
	opacity:.5;
}
:-moz-placeholder {
	color:inherit;
	opacity:.5;
}
::-moz-placeholder {
	color:inherit;
	opacity:.5;
}
:-ms-input-placeholder {
	color:inherit;
	opacity:.5;
}
form input,
form textarea,
form button {
	-webkit-appearance:none;
	-moz-appearance:none;
}

/********** CHROME AUTOFILL **********/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
	-webkit-text-fill-color:var(--dark-color) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--bright-color) inset;
	background-color: transparent;
}

/********** COLORS **********/

/* cf. colors.css */

/********** @MEDIA **********/


/***************************/
/***************************/
/********** LOGIN **********/
/***************************/
/***************************/

.password-toggle {
	position:absolute;
	top:50%;
	right:0;
	margin:0;
	padding:1em;
	-webkit-transform:translate3d(0,-50%,0);
	   -moz-transform:translate3d(0,-50%,0);
	        transform:translate3d(0,-50%,0);
}

/**************************************/
/**************************************/
/********** CHECKBOX / RADIO **********/
/**************************************/
/**************************************/

form input[type="radio"],
form input[type="checkbox"] {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	height:.75em !important;
	width:.75em !important;
	padding:0 !important;
	cursor:pointer;
	color:inherit;
	text-shadow:inherit;
	-webkit-box-shadow:inset 0 0 0 0;
	   -moz-box-shadow:inset 0 0 0 0;
	        box-shadow:inset 0 0 0 0;
	background:var(--light-color);
}
form input[type="radio"] {
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	        border-radius:50%;
}
form input[type="radio"]:hover,
form input[type="radio"]:checked,
form input[type="checkbox"]:hover,
form input[type="checkbox"]:checked {
	-webkit-box-shadow:inset 0 0 0 .5rem;
	   -moz-box-shadow:inset 0 0 0 .5rem;
	        box-shadow:inset 0 0 0 .5rem;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	cursor:pointer;
} 

/***************************/
/***************************/
/********** LABEL **********/
/***************************/
/***************************/
/* WIP > work like title font-weight !!! */

label {
	display:inline-block;
}
form label {
	width: 100%;
}

/*************************************/
/*************************************/
/********** SUBMIT / BUTTON **********/
/*************************************/
/*************************************/

form button,
form input[type="submit"] {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	gap:1em;
	width:auto !important;
	line-height:1em;
	text-decoration:none;
	text-transform: uppercase;
	letter-spacing: inherit;
	-webkit-border-radius:0;
	   -moz-border-radius:0;
	        border-radius:0;
	color:inherit;
	text-shadow:inherit;
}
form button > *,
form input[type="submit"] > * {
	margin:0;
}

/*************************************/
/*************************************/
/********** INPUT CONTAINER **********/
/*************************************/
/*************************************/
/* input-container > input */

.input-container {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	width:100%;
}

/********** INPUT **********/

.input-container input {
	padding-right:-webkit-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:-moz-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:calc(var(--body-font-size) * 3 + var(--line-height) * 3);
}
.input-container input + button {
	position:absolute;
	z-index:10;
	top:50%;
	right:0;
	height:100%;
	aspect-ratio:1/1;
	text-align:center;
	margin:0;
	border:0;
	background:none;
	-webkit-transform:translate3d(0,-50%,0);
	   -moz-transform:translate3d(0,-50%,0);
	        transform:translate3d(0,-50%,0);
}
.input-container input + button:hover {
	color:var(--primary-color);
	text-shadow:0 0 0;
	-webkit-transform:translateY(-50%) scale(.9);
	   -moz-transform:translateY(-50%) scale(.9);
	    -ms-transform:translateY(-50%) scale(.9);
	     -o-transform:translateY(-50%) scale(.9);
	        transform:translateY(-50%) scale(.9);
}

/********** ICONS **********/
/* icon on input-container */

.input-container[class^="icon-"]:before,
.input-container[class*=" icon-"]:before {
	font-family:"icomoon";
	position:absolute;
	z-index:10;
	top:50%;
	left:0;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	height:100%;
	aspect-ratio:1/1;
	text-align:center;
	margin:0;
	border:0;
	background:none;
	-webkit-transform:translate3d(0,-50%,0);
	   -moz-transform:translate3d(0,-50%,0);
	        transform:translate3d(0,-50%,0);
	opacity:.5;
	pointer-events:none;
}
.input-container[class^="icon-"] input,
.input-container[class*=" icon-"] input {
	padding-left:-webkit-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-left:-moz-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-left:calc(var(--body-font-size) * 3 + var(--line-height) * 3);
}

/**************************************/
/**************************************/
/********** NUMBER CONTAINER **********/
/**************************************/
/**************************************/

.number-container {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
}
.number-container input {
	padding-left:-webkit-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-left:-moz-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-left:calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:-webkit-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:-moz-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:calc(var(--body-font-size) * 3 + var(--line-height) * 3);
}
.number-container .number-less,
.number-container .number-more {
	position:absolute;
	z-index:10;
	top:50%;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	height:100%;
	aspect-ratio:1/1;
	text-align:center;
	margin:0;
	border:0;
	background:none;
	-webkit-transform:translate3d(0,-50%,0);
	   -moz-transform:translate3d(0,-50%,0);
	        transform:translate3d(0,-50%,0);
}
.number-container .number-less {
	left:0;
}
.number-container .number-more {
	right:0;
}

/**************************************/
/**************************************/
/********** SELECT CONTAINER **********/
/**************************************/
/**************************************/

.select-container {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	width:100%;
}

/********** SELECT **********/

.select-container select {
	padding-right:-webkit-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:-moz-calc(var(--body-font-size) * 3 + var(--line-height) * 3);
	padding-right:calc(var(--body-font-size) * 3 + var(--line-height) * 3);
}
.select-container:after {
	font-family:'icomoon';
	content:'\e918';
	position:absolute;
	z-index:10;
	top:50%;
	right:var(--line-height);
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	height:-webkit-calc(100% - var(--line-height) * 2);
	height:-moz-calc(100% - var(--line-height) * 2);
	height:calc(100% - var(--line-height) * 2);
	aspect-ratio:1/1;
	text-align:center;
	margin:0;
	background:var(--bright-color);
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	     -o-transform:translateY(-50%);
	        transform:translateY(-50%);
}
.select-container:hover:after {
	-webkit-transform:translateY(-50%) rotate(-180deg);
	   -moz-transform:translateY(-50%) rotate(-180deg);
	    -ms-transform:translateY(-50%) rotate(-180deg);
	     -o-transform:translateY(-50%) rotate(-180deg);
	        transform:translateY(-50%) rotate(-180deg);
}

/************************************************/
/************************************************/
/********** RADIO / CHECKBOX CONTAINER **********/
/************************************************/
/************************************************/

.radio-container,
.checkbox-container {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap:.5em;
	width:100%;
}