@import url('variables.css');

.profil-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem;
	padding: 2rem;
	background: var(--color-white-FCFCFD);
	border-radius: 16px;
	margin: 0 1rem;
}

.profil-sidebar {
	width: 100%;
	background: var(--color-white-FCFCFD);
	padding: 1rem;
	border-radius: 16px;
	border: 1px solid var(--color-white-F4F5F6);
	box-shadow: 0px 64px 64px -48px var(--color-black-0F0F0F14);
}

.profil-menu {
	list-style: none;
	padding: 0;
}

.profil-menu li + li {
	margin-top: 2.5rem;
}

.menu-icon-mon-profil a::before {
	content: "\f007";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 8px;
}

.menu-icon-signaler-un-probleme a::before {
	content: "\f0f3";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 8px;
}

.menu-icon-contacter-association a::before {
	content: "\f2a0";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 8px;
}

.menu-icon-faq a::before {
	content: "\f059";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 8px;
}

.menu-icon-parametres a::before {
	content: "\f013";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 8px;
}

.profil-menu li a {
	font-family: var(--font-libre-franklin);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	color: var(--color-grey-777E90);
	line-height: 16px;
	margin: 1rem 0;
}

.profil-menu li.current-menu-item a {
	font-weight: 700;
	color: var(--color-black-2F2D2D);
}

.profil-content {
	flex: 1;
	padding: 0;
	width: 100%;
}

.profil-inner {
	margin-top: 1rem;
}

@media (max-width: 767px) {
	#profileForm .row {
		flex-direction: column;
		gap: 0;
	}
}

@media (min-width: 768px) {
	.profil-wrapper {
		flex-direction: row;
		padding: 4rem 3rem;
	}

	.profil-sidebar {
		padding: 2rem;
		max-width: 250px;
	}
}

h1 {
	font-family: var(--font-archivo-black);
	font-weight: 400;
	font-size: 36px;
	line-height: 56px;
	color: var(--color-black-23262F);
}