@charset "UTF-8";

/* ================= BASE ================= */
body{
	margin:0;
	font-family: 'LibreFranklin'; 
	color: #181818;
	background-color: #f2f2f2;
}

/* ================= ZONE CENTRAGE ================= */
.page{
	display: block;
	position: relative;
	width: 100%;
	margin-top: 50px;
}
.center-zone{
	flex:1;
	display:flex;
	justify-content:center;
	align-items:center;
	width: 100%;
	padding:20px 0px;
}

/* ================= CARD ================= */
.card{
	width:100%;
	max-width:520px;
	/* background:#1c1c1c; */
	border-radius:14px;
	padding:20px;
	box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* ================= TITLE ================= */
h1{
	text-align:center;
	font-size:26px;
	margin:0 0 15px;
}

/* ================= CONTEXT ================= */
.context{
	/* background:#2a2a2a; */
	padding:12px;
	border-radius:10px;
	margin-bottom:15px;
	text-align:center;
	line-height:1.4;
}
.context strong{
	font-size:16px;
}

/* ================= FORM ================= */
form{
	display:flex;
	flex-direction:column;
	gap:12px;
}
label{
	font-size:13px;
	opacity:.8;
}
input{
	padding:14px;
	border-radius:10px;
	border:1px solid #333;
	/* background:#222; */
	/* color:#fff; */
	font-size:16px;
}
input:focus{
	border-color:#4caf50;
	outline:none;
}

/* ================= BUTTON ================= */
button{
	margin-top:10px;
	padding:14px;
	font-size:17px;
	font-weight:bold;
	border:none;
	border-radius:10px;
	background:#4caf50;
	color:#fff;
	cursor:pointer;
}

/* ================= MOBILE ================= */
@media (max-width:600px){
	.center-zone{
		align-items:stretch;
		padding:0;
	}
	.card{
		border:none;
		box-shadow: none;
	}
}