@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';
}




.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 */
/*	font-style: italic;*/

}

a:hover h1 {
	font-style: normal !important;
	font-weight: normal !important;
}

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


#menu-cat a.active {
	font-weight: 700;
	font-size: 1.3em;
	font-style: italic;
	transform: none;
}




h1 {
	font-size: 1.8em;
	font-weight: normal;
	font-family: 'Helvetica';


}



/* Menu (garde ta structure actuelle) */
#panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: sticky;
	top: 0;                       /* rester collé en haut */
	height: 100vh;                /* limite à la hauteur de la fenêtre */
	overflow-y: auto;             /* si le menu est plus grand, scroll interne */
}

/* Article : scroll vertical sur tout le contenu */
.article {
	display: flex;
	width: 50vw;
	overflow-y: auto;
	padding: 20px;
	box-sizing: border-box;
	align-items: center;
}

.article a {
	text-decoration: none;
	font-family: 'helvetica';
	font-size: 1em;
	color: blue;
	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;
}



.article a:hover {
	text-decoration: underline;
	transform: none;
	font-weight: normal;
}

p {
 font-size: 0.9em;
}


h4 {
	font-size: 23px;

	margin: 1px 0px;
}



h2 {
	font-size: 24px;
	margin: 10px;
}


h3 {
	margin: 0px;
	font-size: 19px;
}


img {
	width: 50vw;
	height: auto;
}

.cartel {
	display: flex;
	/* background-color: white; */
	flex-direction: column;
	align-items: stretch;
}

.article:has(video) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wimg {
	display: flex;
	justify-content: center;
}	

.cartel img {

	max-width: 100%;
	max-height: 70vh;
}

.bio-image {
	width: 27vw;
}


a.menu-btn {
	color: black;
	text-decoration: none;
	transition-duration: 0.8s;

}

a.menu-btn:hover {
	font-size:  1em;
	color: white;
	background-color: black;
	text-decoration: none;
	letter-spacing: 5px;
	margin: 10px;
}





.article .wdesc h3,
.article .wdesc h4,
.article .wdesc h5 {
	text-align: end;
	font-family: 'Whois';
	margin: 0px 0px 10px 10px;

}

.article .wdesc h5 {
	text-align: end;
	margin: 0px;
	font-size: 19px;

}

.wdesc {
	color: black;
	width: 100%;

}




#gallery img {
	align-items: center;
	margin: 5px ;
	max-width: 100%;
	height: auto;
}


.wdesc img  {
	align-items: center;
	margin: 5px 0px;
	max-width: 100%;
	height: auto;
	/* max-height: 750px; */
	/*	width: auto;*/
}

video {
	display: block;
	margin: 10px;
	max-width: 500px;
	height: auto;
	width: 500px;
}

table {
	width: 95vw;
}


td {
	text-align: -webkit-center;
}




/*
iframe {
display: block;
margin: 10px;
max-width: 50%;
height: auto;
width: 50%;
}
*/


#gal {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	grid-gap: 1px;

	justify-content: center;
	margin: 1px;
}

.img_containers {
	display: flex;
	justify-items: center;
	justify-content: center;
	align-items: center;
}

.img_containers img{
	height: 0px;
}

.fullImg{
	grid-column: span 4;
	height: auto!important;
}

.fullImg img{
	width:70%;
}

em img, em video{

	display: flex;
	justify-content: center; /* Centrer le contenu horizontalement */
	align-items: center; /* Centrer le contenu verticalement */
	margin: 50px auto;
	margin: 50px auto;
	max-width: 100%;
	height: auto;
	width: 75%;
	max-height: 750px;
}


em a {


	color: white;
	transition-duration: 0.5s
}
em a:hover {


	color: white;
	background-color: black;
	border-radius: 5px;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

/* Appliquer display: flex; aux éléments <em> contenant des images ou des vidéos */
em:has(img), em:has(video) {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50px auto;
	flex-direction: column;
}

em:has(video) {
	margin: 0px auto;
}






#sliderShow {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;

}

.slider-controls {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	width: 100%;
}

#sliderShow img {

	object-fit: contain;
}

#sliderShow button {
	background: none;
	cursor: pointer;
	font-size: 0.9em;
	font-family: 'Times';
	border: 0px solid black;
	font-family: "helvetica"
}

#sliderShow button:hover {
	background: black;
	color: white;
}








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

	.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;
	}

	.article {
		display: flex;
		width: 80vw; 
		padding: inherit;

	}

	#sliderShow {
		margin: inherit
	}

	.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;
	}

	video {
		display: block;
		margin: 10px;
		max-width: 500px;
		height: auto;
		width: 300px;
	}
	
	a.menu-btn:hover {
	color: black;
	background-color: white;

}



	#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 {
		display: none;
	}

	#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;
	}

	img {
		width: 100%;
	}

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


}


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







}