/*
Theme Name: Neuraly

*/

/*==============================================================*/
/*========================================================GLOBAL*/
/*==============================================================*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
	--main: #7c43b6;
}

* {
	padding: 0;
	margin: 0;
	font-family: 'DM Sans';
}

body {
	background: #fdfcff;
}

a {
	text-decoration: none;
	color: initial;
}

ul {
	list-style: none;
}

img {
	display: block;
}




/*==============================================================*/
/*=======================================================MEMBERS*/
/*==============================================================*/
.members-title-container {
	padding: 1rem;
	text-align: center;
	background: var(--main);
	color: white;
}

.members-title-filterbutton-div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.members-filters-container {
	display: none;
	background: #7c43b60d;
	padding: 1.5rem 3rem;
	border-bottom: solid var(--main) 3px;
	}

.members-filters-container-visible {
	display: block;
}

.members-filters-form {
	display: flex;
	gap: 1rem;
    justify-content: space-around;
}

.members-filters-form p {
	color: var(--main);
	font-size: 1.2rem;
	font-weight: bold;
}

.members-filters-age-container {
	display: flex;
	gap: 1rem;
}

.members-filters-age-container label {
	display: flex;
    flex-direction: column;
	align-items: center;
}

.members-filters-age-container p {
	margin-bottom: 0.5rem;
}

.members-filters-age-container label input {
	height: 4rem;
    border-radius: 8px;
    width: 4rem;
}

.members-filters-genre-container {
	
}

.members-filters-genre-container p {
	margin-bottom: 0.5rem;
}

.members-filters-genre-container label {
	display: block;
}

.members-filters-atypies-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.members-filters-atypies-container p {
	grid-column: 1/3;
	margin-bottom: 0.5rem;
}

.members-filters-atypies-container label {
	display: block;
}

/*---------------------------GRID*/
.members-grid {
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	gap: 2rem;
	width: 70%;
	margin: auto;
	padding: 1rem 0;
}
  
  	.members-grid-div {
  		border-radius: 8px;
		box-shadow: #00000020 0px 5px 10px 0px;	
		position: relative;
		height: 55dvh;
		background: #fff;
		overflow: auto;
  	}
	
	.members-grid-div-interact-menu {
		position: absolute;
		top: 1rem;
		right: 1rem;
		display: flex;
    	justify-content: center;
    	align-items: center;
		border-radius: 50%;
		height: 1.7rem;
		width: 1.7rem;
		background-color: #efecf1;
		text-align: center;
		border: solid 3px #7c43b6;
		z-index: 1;
	}
	
	.members-grid-div-interact-menu button {
		background: none;
		border: none;
		cursor: pointer;
		font-weight: bold;
		font-size: 1.3rem;
	}
	
.members-grid-recto {
	height: 100%;
    display: block;
}
	
	.members-grid-recto-invisible {
		display: none;
	}
  
  	.members-grid-div-img {
  		width: 100%;
  		max-height: 20rem;
  		object-fit:cover;
		border-radius: 8px 8px 0 0;
		height: 60%;
  	}
	
.members-grid-content-container {
	padding: 0 0.5rem;
	height: 40%;
	display: flex;
    flex-direction: column;
}
	
	.members-grid-first-contentpart {
		display: flex;
    	align-items: center;
		justify-content: center;
    	gap: 0.5rem;
		padding: 0.3rem 0;
	}
	
	.members-grid-firstname {
		text-align: center;
		font-size: 1.5rem;
		font-weight: bold;
		text-transform: capitalize;
	}
	
	.members-grid-age {
		font-size: 1.5rem;
	}
	
	.members-grid-atypies-ul {
		list-style: none;
		display: flex;
		gap: 0.5rem;
		justify-content: center;
		padding: 0;
		margin: 0;
	}
	
	.members-neuroa-tag {
		padding: 0.3rem;
		border-radius: 8px;
	}
	
	.tag-hpi {background: #c093ed; color: #7c43b6;}
	.tag-sus-hpi {background: #deceed; color: #7c43b6;}
	.tag-tsa {background: #6ca8e7; color: #2e436b;}
	.tag-sus-tsa {background: #9acbff; color: #2e436b;}
	.tag-tdah {background: #ffeb50ad; color: #615c1c;}
	.tag-sus-tdah {background: #ede793; color: #615c1c;}
	.tag-dys {background: #f96868; color: ;}
	.tag-sus-dys {background: #ed9393; color: #794949;}
	.tag-autre {background: #53535378; color: #00000078;}

.members-hr {
	margin: 0.7rem 0 0.5rem;
}

	
	.members-grid-second-contentpart {
		display: flex;
		flex: 1;
	}
	
	.members-grid-second-contentpart-left {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 0.5rem;
	}
	
	.member-grid-second-contentpart-left-img {
		width: 2.2rem;
		height: 2.2rem;
	}
	
	.members-grid-departement {
		font-size: 1.2rem;
		margin: 0 0 0.5rem;
	}
	
	.members-grid-ville {
		font-size: 1rem;
	}
	
	.members-grid-second-contentpart-separator {
		width: 3px;
		background: pink;
	}
	
.members-grid-second-contentpart-right {
	width: 50%;
	display: flex;
    flex-direction: column;
    gap: 1rem;
	padding: 0 0.5rem;
	}
	
	.members-grid-re-container {
		display: flex;
    	height: fit-content;
    	line-height: 1;
    	margin-bottom: 0;
		gap: 0.2rem;
	}
	
	.members-grid-re-icon {
		width: 1rem;
		height: 1rem;
	}
	
	.members-grid-moreinfo-container {
		text-align: center;
		display: none;
	}
	
	.moreinfo-visible {
		display: block;
	}
	
	.members-grid-moreinfo-sticky {
		
	}
	
	.members-grid-moreinfo-sticky-img {
		width: 3rem;
		display: inline-block;
	}
	
	.members-grid-moreinfo-sticky-firstname {
		
	}
	
	.members-grid-moreinfo-sticky-age {
		
	}
	
	.members-grid-moreinfo-content-container {
		background: #efecf1;
	}
	
	.members-grid-moreinfo-title {
		font-weight: bold;
		font-size: 1.2rem;
		text-align: left;
	}
	
	.members-grid-moreinfo-answer {
		text-align: left;
	}
	
	
	.members-nav-container {
	
	}
	
	.members-nav-ul {
		list-style: none;
		display: flex;
		gap: 1rem;
	}
/*------------Animation*/
@keyframes burgerflip {
	0% {
		 transform: rotateY(0deg);
	}
	
	100% {
		 transform: rotateY(180deg);
	}
}


.burgerflip {
	animation: burgerflip 0.3s linear forwards;
}

.inversed {
	transform: rotateY(-180deg);
}

.inversed-pos {
	left: 1rem;
	right: 0;
}

/*------------Resonsive*/

@media (max-width:767px) {
.members-grid {
	grid-template-columns: 1fr;
	width: 90%;
}

.members-grid-div {
	height: auto;
	min-height: 65dvh;
    max-height: 90dvh;
}
}