/* =========================
   RESET
========================= */

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

/* =========================
   GLOBAL
========================= */

html,
body {
	width: 100%;
	min-height: 100vh;

	overflow-x: hidden;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	background: var(--fond, #fbf7f6);

	color: var(--texte, #111827);

	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Arial,
		"Noto Sans",
		"Liberation Sans",
		sans-serif;
}

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

/* =========================
   PAGE
========================= */

.inscription {
	min-height: calc(
		100vh - var(--hauteur-entete, 0px)
	);

	display: flex;

	align-items: center;

	justify-content: center;

	padding:
		40px 16px
		60px;
}

/* =========================
   CADRE
========================= */

.cadre {
	width: 100%;

	max-width: 520px;

	text-align: center;
}

/* =========================
   LOGO
========================= */

.logo {
	width: 34px;

	height: 34px;

	object-fit: contain;

	margin: 0 auto 14px;

	opacity: 0.9;
}

/* =========================
   ENTETE
========================= */

.entete {
	margin-bottom: 24px;
}

.titre {
	font-size: clamp(28px, 6vw, 34px);

	line-height: 1.15;

	font-weight: 700;

	font-family:
		ui-serif,
		Georgia,
		Cambria,
		"Times New Roman",
		Times,
		serif;

	letter-spacing: 0.2px;

	word-break: break-word;
}

.description {
	margin-top: 8px;

	font-size: 14px;

	line-height: 1.6;

	color: var(
		--texte-secondaire,
		#6b7280
	);

	word-break: break-word;
}

/* =========================
   FORMULAIRE
========================= */

.formulaire {
	width: 100%;

	max-width: 420px;

	margin: 0 auto;

	display: grid;

	gap: 14px;
}

/* =========================
   LIGNES
========================= */

.lignes {
	display: grid;

	gap: 14px;
}

.deux-colonnes {
	grid-template-columns: 1fr;
}

/* =========================
   GROUPES
========================= */

.groupe {
	width: 100%;

	text-align: left;
}

.groupe label {
	display: inline-block;

	margin-bottom: 8px;

	font-size: 12px;

	line-height: 1.4;

	color: #374151;
}

.requis {
	color: var(
		--accent-fonce,
		#cc7e97
	);

	font-weight: 700;
}

/* =========================
   INPUTS
========================= */

.groupe input {
	width: 100%;

	height: 44px;

	padding: 10px 12px;

	border-radius: 10px;

	border: 1px solid var(
		--bordure,
		#e5e7eb
	);

	background: #ffffff;

	color: var(
		--texte,
		#111827
	);

	outline: none;

	font-size: 14px;

	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.groupe input::placeholder {
	color: #9ca3af;
}

.groupe input:focus {
	border-color: var(
		--accent,
		#d88fa4
	);

	box-shadow:
		0 0 0 4px
		var(
			--focus,
			rgba(216, 143, 164, 0.35)
		);
}

/* =========================
   BOUTON
========================= */

.bouton {
	width: 100%;

	height: 44px;

	border: none;

	border-radius: 10px;

	background: var(
		--accent,
		#d88fa4
	);

	color: #fff;

	font-size: 14px;

	font-weight: 700;

	letter-spacing: 0.2px;

	cursor: pointer;

	transition:
		background 0.2s,
		transform 0.2s;
}

.bouton:hover {
	background: var(
		--accent-fonce,
		#cc7e97
	);

	transform: translateY(-1px);
}

/* =========================
   AIDE
========================= */

.aide {
	margin-top: 6px;

	font-size: 12px;

	line-height: 1.6;

	color: var(
		--texte-secondaire,
		#6b7280
	);

	text-align: center;
}

.lien {
	color: var(
		--accent-fonce,
		#cc7e97
	);

	text-decoration: none;

	font-weight: 600;

	word-break: break-word;
}

.lien:hover {
	text-decoration: underline;
}

/* =========================
   ERREURS
========================= */

.erreurs {
	width: 100%;

	max-width: 420px;

	margin:
		0 auto
		18px;

	padding: 14px;

	border-radius: 12px;

	background: #fee2e2;

	border: 1px solid #fecaca;

	text-align: left;
}

.erreurs p {
	font-size: 13px;

	line-height: 1.5;

	color: #991b1b;
}

.erreurs p + p {
	margin-top: 8px;
}

/* =========================
   TABLET
========================= */

@media screen and (min-width: 560px) {

	.deux-colonnes {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 768px) {

	.inscription {
		padding:
			32px 14px
			50px;
	}

	.cadre {
		max-width: 100%;
	}

	.formulaire,
	.erreurs {
		max-width: 100%;
	}

	.titre {
		font-size: 30px;
	}
}

/* =========================
   MOBILE
========================= */

@media screen and (max-width: 480px) {

	.inscription {
		padding:
			24px 12px
			40px;
	}

	.logo {
		width: 30px;

		height: 30px;

		margin-bottom: 12px;
	}

	.entete {
		margin-bottom: 20px;
	}

	.titre {
		font-size: 26px;
	}

	.description {
		font-size: 13px;
	}

	.formulaire {
		gap: 12px;
	}

	.lignes {
		gap: 12px;
	}

	.groupe label {
		font-size: 11px;
	}

	.groupe input {
		height: 42px;

		font-size: 13px;
	}

	.bouton {
		height: 42px;

		font-size: 13px;
	}

	.aide {
		font-size: 11px;
	}

	.erreurs {
		padding: 12px;
	}

	.erreurs p {
		font-size: 12px;
	}
}

/* =========================
   TRES PETITS ECRANS
========================= */

@media screen and (max-width: 340px) {

	.inscription {
		padding:
			20px 8px
			32px;
	}

	.titre {
		font-size: 22px;
	}

	.groupe input,
	.bouton {
		height: 40px;
	}
}