@font-face {
	font-family: "helvetica";
	src:url("../static/font/Helvetica.ttf") ;
}

@font-face {
	font-family: "Times";
	src: url("../static/font/times.ttf");
}

body {
	font-family: 'Helvetica';
	/*	background-color: #bababa;*/
}

.back {

	background-color: white;
	/*	border: 1px solid black;*/
	height: 98.5vh;

}




.main {
	display: flex;
	overflow: hidden;
	justify-content: flex-start;
	align-items: stretch;
	background-color: white;
	padding: 25px 60px

}

nav {

	width: 40vw

}




#menu-cat ul {
	list-style: none;  /* enlève les puces de tous les ul du menu */
	padding-left: 0;   /* enlève le décalage à gauche par défaut */
	margin: 0;         /* optionnel : supprime marge par défaut */
}

a {
	text-decoration: none;
	font-family: 'Times';
	font-size: 0.9em;
	color: black;
	transition-duration: 0.75s;
	flex-direction: column;
	align-content: stretch;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	transition: transform 0.3s ease, letter-spacing 0.3s ease;

}

a:hover {
	transform: scale(1.2);
	font-weight: 700; /* le bold viendra d’un coup */


}

h1 {
	/*	font-size: 1.5em;*/
	font-weight: 500;
	font-family: 'Helvetica';


}

#menu-cat li {
	margin: 3px 0px;
}

.home-img {
	width: 60vw;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}



#menu-cat ul {
	/*display: flex;
	height: 80vh;
	justify-content: space-between;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: stretch;*/
}

#menu-cat li {
	/*margin: 0 5px;
	text-align: center;*/

}

#menu-cat a {
	/*	padding-left: 1rem;*/
	/*display: flex;
	padding: 8px;
	margin: 0px 50px 0px 5px;
	box-shadow: var(--box-shadow);
	text-decoration: none;
	color: black;
	background-color: white;
	transition-duration: 0.5s;
	width: 26vw;
	font-size: 1.1em;*/
}


img {
	width: 35vw;
	height: auto;
	max-height: fit-content;
}

#panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

}










#works {
	width: 70vw; 
	margin: 20px, auto;
}

.work {
	display: flex;
	flex-direction: column;
	align-items: center;         
	justify-content: flex-start;
	width: auto;                 
	margin: 0 auto;              
}


.work:hover {
	color: black;
}

.work:hover .wdesc {
	color: black;
}

.wimg {
	display: flex;
	justify-content: center;
	transition-duration: 1s;
}

.wimg img {
	width: 100%;
	display: block;
	transition: 0.5s ease-in-out;
	object-fit: cover;
	/*	max-height: 80vh;*/
	width: 50vw;
}



.wdesc {
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 5px 1px 1px 1px;
	transition-duration: 1s;
	/*	text-align-last: justify;*/
	width: auto;
}

.desc {
	display: none;
}

.cat, .cat a {
	color: black;
	box-shadow: none;
}

.date {
	display: none;
}

h2 {
	margin: 1px 0px 5px;
}



.work:hover h1 {
	color: black;
	display: block;
	filter: none;
}

h3 {

}





footer {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/*	padding: 10px;*/
	display: flex;
	justify-content: space-between;
}







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

	/*	pour les petits écrans*/

	.main {
		margin: 0px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: inherit;
	}

	nav {
		width: inherit;
	}


	#works {

	}

	#menu ul {
		display: flex;
		flex-wrap: wrap;
	}

	h3 {
		margin: 5px 1px;
		font-size: 1.8em;
		text-align: right;
		font-family: 'police2';
	}

	h1 {
		font-size: 2.6em;
		color: black;
	}

	.work {
		display: flex;
		border: 0px solid black;
		border-radius: 2px;
		overflow: hidden;
		transition-duration: 1s;
		flex-grow: 1;
		flex-direction: column;
		align-content: space-around;
		justify-content: space-between;
		color: black;
		align-items: flex-start;
		background-color: white;
	}

	.wdesc {
		font-size: 0.8em;
	}



	#menu a.home {
		font-size: 1em;
	}

	#menu a.info {
		font-size: 1em;
	}

	#menu ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	#menu-cat ul {

		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	#menu-cat li {

	}

	#menu-cat a {
		font-size: 1.2em;

	}

	#menu-cat a:hover {
		color: white;
		border-radius: 3.5px;
		background-color: black;
	}

	#panel img {
		max-width: 100%;
		height: auto;
		margin: 10px;
	}

	.home-img img {
		
		display: none;
	}

	.home-img {
		margin: 10px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}




}

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

	/*	pour les grands écrans*/
	/*	#panel img {
	box-shadow: var(--box-shadow);
	height: 1050px;
	max-width: none;
}

	.wimg img {
	max-width: 56vw; 
	width: 100%;
	display: block;
	transition: 0.5s ease-in-out;
	object-fit: cover;
	max-height: 1070px;
}

	#menu-cat ul {
	display: flex;
	height: 1050px;
	justify-content: space-between;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: stretch;
}*/


	/*	h1 {
	font-size: 1.3em;

	font-family: "Whois";
	display: block;
	color: #ebebeb;
	transition: all 0.8s ease-in-out;
	filter: blur(0px);
	min-width: 10vw;
}

	#menu-cat a {
	display: flex;
	padding: 8px;
	margin: 0px 50px 0px 5px;
	box-shadow: var(--box-shadow);
	text-decoration: none;
	color: black;
	background-color: white;
	transition-duration: 0.5s;
	width: 450px;
	font-size: 1.2em;
}

	#works {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(590px, 2fr));
	grid-gap: 1px;
	justify-content: center;
	margin: 1px;
}*/
}