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

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

body {
	font-family: 'Helvetica';
	background-color:hsl(0, 0%, 95%) ;
	padding: 35px;
}

body.no-scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}


.main {
	display: flex;
	justify-content: space-between;


}

#panel {
	width: 400px;
}

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

span.title {
	font-style: italic;
}



span.author {
	display: none;
}

h2 {
	text-decoration: underline;
	margin: 65px 0px 20px 0px;
	padding: inherit;
	font-size: 1em;
	font-weight: inherit;
}

.credit h2 {

	text-decoration: inherit;
}

h3 {
	text-decoration: underline;
	margin: 50px 0px 13px 0px;
	padding: inherit;
	font-size: 1em;
	font-weight: inherit;
}

h1 {
	margin:  0px 35px 0px 0px;
	letter-spacing: 1px;

	padding: inherit;
	font-size: 1em;

}

li {
	transition: all 0.25s ease;
	margin: 0px 0px 3px;

}

li a:hover {
	font-size: 1em;
	font-weight: bold;
	/*	margin: 1px 0px;*/
	/*    transition-duration: 4s;*/
}



ul {
	text-transform: uppercase;
	padding: inherit; 
	margin: inherit;
}

div#work {
	padding: 0px 8px 0px;
}


details summary {
	cursor: pointer;        /* curseur demandé */
	margin: 10px 10px 5px 0px;
	display: block;         /* se comporte comme un bloc (plus facile à styler) */
	user-select: none;      /* évite la sélection de texte au clic */
	outline: none;          /* évite outline par défaut (mais garde accessibilité, voir remarque) */
}


details[open] summary {
	font-weight: bold;
}

details ul {

	list-style: none;
}

details summary:focus {
	/*	box-shadow: 0 0 0 3px rgba(0,0,0,0.08);*/
	outline: none;
}

#menu-cat a .year {
	display: none;
	font-style: normal;
	/* text-transform: none; */
	font-weight: normal;
	color: black;

}

#menu-cat a.active {
	font-weight: bold;
	font-style: italic;
}

#menu-cat a {
	display: inline-flex;
	flex-direction: column;
}

#menu-cat a .author,
#menu-cat a .year {
	display: none;
	font-style: normal;
	/* text-transform: none; */
	font-weight: normal;
	color: black;

}

#menu-cat a.active .author,#menu-cat a.active h2,
#menu-cat a.active .year {
	display: block;
}



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

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

.wimg img {
	display: flex;
	justify-content: center;
	width: 100%;
}	

.cartel img {

	max-width: 100%;
	/*	max-height: 13vh;*/
	margin: 0px 0px 10px 0px;
}


.wimg img {

	max-width: 100%;
	/*	max-height: 13vh;*/
	margin: 0px 0px 10px 0px;
}



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 {
	text-align: end;
	color: black;
	color: black;
	width: 100%;
	width: 100%;
	text-decoration: underline;
}

p {
	padding: inherit;
	margin: inherit;
	margin: 10px 0px;

}




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

table {
	width: 95vw;
}


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


.Documentation summary {
	/*	cursor: pointer;*/
	list-style: none;
	text-decoration: underline;

	color: black;
	margin: 10px 0;
}

.Documentation[open] #gal {
}

.Documentation summary::-webkit-details-marker {
	display: none;
}

.Documentation summary::marker {
	content: "";
}

#gal {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
	margin: 10px 0px;


	align-content: center;
	align-items: center;
	justify-items: center;
}

/* LIGHTBOX */
.lightbox {
	position: fixed;
	inset: 0;
	background-color: rgba(255,255,255,0.90);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.lightbox.active {
	display: flex;
}

.lightbox img {
	max-width: 75vw;
	max-height: 88vh;
	object-fit: contain;
}


/* Flèches lightbox */
.lightbox .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;        /* plus petites */
	color: black;           /* flèche noire */
	background: none;       /* pas de fond */
	border: none;
	cursor: pointer;
	opacity: 0.1;           /* discrète par défaut */
	transition: opacity 0.3s;
	z-index: 10000;
	padding: 0;             /* pas d’espace autour */
}

/* Flèches deviennent plus visibles au survol */
.lightbox .nav:hover {
	opacity: 0.6;
}

/* Position à gauche et à droite */
.lightbox .prev { left: 8%; }
.lightbox .next { right: 8%; }

/* Faire apparaître flèches uniquement si on survole l'image */
.lightbox:has(img:hover) .nav {
	opacity: 0.2;
}


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



@media only screen and (max-width: 1000px) {
	body {
		padding: inherit;
		padding: 5px
	}

	.main {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	#panel {
		width: inherit;
	}

	nav {
		width: inherit;
	}

	#works {

	}

	ul {
		display: flex;
		flex-wrap: wrap;
		margin: inherit;
		padding: inherit;

	}
	h2 {
		margin: 0px 0px 20px ;
		padding: inherit;
		display: none;
	}

	#menu-cat a.active .year {
		display: block;
	}

	#works {

		margin: 0px 0px 20px;
	}

	li {
		text-decoration: none;
		list-style-type: none; /* Enlève les puces */

	}


	h3 {
		display: none;
	}

	div#work {
		padding: inherit;
	}

	.cartel {
		width: inherit;
	}

	h1 {
		font-size: 1em;
		padding: 20px 0px 35px;
		color: black;


	}

	#menu-cat li {
		display: none;
	}

	#menu-cat li:has(a.active) {
		display: block;
	}

	.wdesc {
		text-align: start;
	}


	img {
		width: 100vw
	}

	#gal {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 15px;
		margin: 10px 0px;
		align-content: center;
		align-items: center;
		justify-items: center;
	}

	.lightbox img {
		max-width: 87vw;
		max-height: 88vh;
		object-fit: contain;
	}

	.lightbox .prev { left: 9%; }
	.lightbox .next { right: 9%; }



}