@charset "UTF-8";
/*reset*/

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

body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure,
blockquote,
dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}
/*--*/

:root {
	--grey-00: #f7f7f7;
	--grey-20: #E6E6E8;
	--grey-100: #00313c;
	--grey-100-05: rgba(24, 26, 34, .05);
	--grey-100-10: rgba(24, 26, 34, .10);
	--grey-100-20: rgba(24, 26, 34, .20);
	--grey-100-30: rgba(24, 26, 34, .30);
	--grey-100-50: rgba(24, 26, 34, .50);
	--primary: #99d6ea;
}

/* -- fonts -- */
@font-face {
	font-family: "Typo-r";
	src: url("fonts/ATR-INNOVA-Regular.ttf");
}

@font-face {
	font-family: "Typo-sb";
	src: url("fonts/ATR-INNOVA-Medium.ttf");
}

@font-face {
	font-family: "Typo-b";
	src: url("fonts/ATR-INNOVA-Bold.ttf");
}
/**/

body>div.ck>div.ck-cgu {
	display: none;
}

body.fr>div.ck>div.ck-cgu>div.ck-cgu-dlg>div.ck-cgu-text.fr,
body.en>div.ck>div.ck-cgu>div.ck-cgu-dlg>div.ck-cgu-text.en,
body.es>div.ck>div.ck-cgu>div.ck-cgu-dlg>div.ck-cgu-text.es,
body.it>div.ck>div.ck-cgu>div.ck-cgu-dlg>div.ck-cgu-text.it,
body.de>div.ck>div.ck-cgu>div.ck-cgu-dlg>div.ck-cgu-text.de {
	display: block;
	white-space: break-spaces;
}

/* nouveau code - styles pour autoremplissage Chromium */
@keyframes onAutoFillStart {}

@keyframes onAutoFillCancel {}

input:-webkit-autofill {
	animation-name: onAutoFillStart;
}

input:not(:-webkit-autofill) {
	animation-name: onAutoFillCancel;
	box-shadow: 0 0 0px 1000px transparent inset !important;
	-webkit-text-fill-color: inherit !important;
	background-color: transparent !important;
}

html {
	position: relative;
	height: 100%;
	box-sizing: border-box;
}

body {
	font-family: "Typo-r", arial, sans-serif;
	font-weight: normal;
	font-style: normal;

	/*background-image: url("assets/images/simone-viani-LDHk9Cosj0w-unsplash.jpg");*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	min-height: 100vh;
	width: 100vw;
	
	margin: 0;
	position: relative;
	overflow-x: hidden;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	font-size: 1rem;
	letter-spacing: 0.4px;
	color: var(--grey-00);
	text-align: center;
}

.aja-ui-icon.aja-ui-size-s {
	width: 16px;
	height: 16px;
}

/* -- backgrounds -- */
body>div.bg,
body>div.bg>div.grid,
body>div.bg>div.img {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
}

body>div.bg>div.grid {
	display: grid;
	box-sizing: border-box;
}

body>div.bg>div.grid>div.cell {
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

body>div.bg>div.credits {
	z-index: 1;
}

body>div.bg>#credits {
	position: absolute;
	bottom: 20px;
	left: 40px;
	color: #f7f7f7;
	text-shadow: 1px 1px 2px #000;
	font-weight: 100;
	font-size: 12px;
	font-family: sans-serif;
	transform-origin: left bottom;
	transform: rotate(-90deg);
	background-color: #00000073;
	padding: 8px 12px;
	border-radius: 8px;
}

body>div.bg>#credits.off,
body>div.bg>#credits:empty {
	display: none;
}

/* -- other -- */
#logo {
	display: flex;
	justify-content: flex-start;
	align-self: baseline;
	width: 216px;
	height: 128px;
	padding: 16px 24px 32px 24px;
	box-sizing: border-box;
	background-color: var(--grey-100) ;
	border-radius: 0 0 8px 8px;
}

#logo img {
	max-width: 100%;
  	display: block;
}

#blocform-conteneur {
	z-index: 1;
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 1600px;
	gap: 40px;
	padding: 0 64px;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#connectform {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: 424px;
	gap: 8px;
}

.blocLogin{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 2rem;
	gap: 24px;
	border-radius: 8px;
	overflow: hidden;
	background-color: rgba(0, 49, 60, 0.8);
	position: relative;
}

h1, h2, h3 {
	font-family: "Typo-b";
	color: var(--grey-00);
}
h1 {
	font-size: 56px;
}

h2 {
	font-size: 28px;
	text-transform: uppercase;
	text-align: center;
}
h3 {
	font-size: 16px;
	font-weight: 700;
	text-align: left;
}
.typebase{
	position: absolute;
	margin: 0 auto;
	padding: 0 0 64px 0;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-self: flex-end;
}

#blocLogin {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	gap: 1.5rem;
}

.input-field {
	padding: 0 1rem;
	height: 56px;
	text-align: left;
	background-color: var(--grey-100);
	border-radius: 4px;
	position: relative;
	display: flex;
	box-shadow: none !important;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.input-field:hover {
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.input-field.psswd {
	padding: 0 0.5rem 0 1rem;
}

.input-field label {
	position: absolute;
	top: 0;
	font-size:16px;
	color: var(--grey-20);
	cursor: text;
	-webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
	transition: color .2s ease-out, -webkit-transform .2s ease-out;
	transition: transform .2s ease-out, color .2s ease-out;
	transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	text-align: initial;
	-webkit-transform: translateY(18px);
	transform: translateY(18px);

}

.input-field.active label {
	font-size: 12px;
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	color: var(--primary);
}

.input-field.active input {
	opacity: 1 !important;
	background-color: transparent;
}

.input-field input {
	font-size: 1rem;
	padding-top: 14px;
	box-shadow: none;
	outline: 0;
	border: 0;
	background: none;
	color: var(--grey-00) !important;
	opacity: 0 !important;
	width: 100%;
}

input:focus {
	background-color: var(--grey-00);
	box-shadow: none;
	outline: 0;
}

/*ico champs de saisie mdp*/
.input-field.psswd .ico-psswd {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 8px;
	cursor: pointer;
	fill: var(--primary);
	opacity: 0.8;
}

.input-field.psswd .ico-psswd:hover {
	opacity: 1;
}

.input-field.psswd .ico-psswd div {

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

.input-field.psswd .ico-psswd div.off {
	display: none;
}

.input-field.psswd .ico-psswd div.on {
	display: flex;
}

.input-field.psswd .ico-psswd.active div.off {
	display: flex;
}

.input-field.psswd .ico-psswd.active div.on {
	display: none;
}


/* -- -- */
.btn {
	font-family: "Typo-sb";
  	font-size: inherit;
  	font-weight: inherit;
  	line-height: inherit;
  	letter-spacing: inherit;

 	border: none;
  	appearance: none;
	-webkit-appearance: none;

	width: auto;
	height: 48px;
	background: linear-gradient(to right, #009a84, #56c177, #99d6ea);;
	color: var(--grey-100);
	margin: 0;
	padding: 0 1.5rem;
	align-self: center;
	border-radius: 32px;

	cursor: default;

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

	transition: 0.2s ease opacity, 0.2s ease filter;
}

.btn:hover:not([disabled]) {
  opacity: 0.9;
  cursor: pointer;
}

.btn.btn-l {
	font-size: 18px;
	min-width: 128px;
}

.btn.primary:not[disabled]:hover {
	background: var(--primary-hover) !important;
}

.btn[disabled] {
	background: rgb(89, 117, 124) !important;
	color: #011B21;
}

.btn.btn-s {
	height: 40px;
}

.btn-link {
	text-decoration: underline !important;
	color: var(--primary);
	opacity: 1;
	cursor: pointer;
	text-align: left;
	font-size: 14px;
}

.c1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 4px;
}

.c1 p {
	font-family: "Typo-b";
	font-size: 18px;
	padding-bottom: 12px;
	margin: 0;
	text-align: left;
}

.c2 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 8px;
}

.c3 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
}

.c3 p {
	font-size: 14px;
}

/* -- MOBILE -- */
@media (max-width: 768px) {

	#blocform-conteneur {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		margin: 0 auto !important;
		padding: 0 24px 40px 24px;
		gap: 32px;
	}

	#logo{
		height: auto;
		width: 188px;
    	padding: 24px;
	}

	#connectform {
		width: 100%;
	}
	.typebase{
		position: relative;
		order: 3;
		padding: 0;
	}
	h1{
		font-size: 32px;
	}
}