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

@font-face {
	font-family: "police2";
	src: url("../static/font/FramesPartOne-Regular.otf");
}

body {
	margin: 2px;
	padding: 2px;
	font-family: 'Whois';
	background-color: #ebebeb;
}
a {
	text-decoration: none;
	color: black;
	transition: 0.75s;
}

a:hover {
	color: #ebeceb;
	background: white;
}

a:has(h3):hover {
	background: transparent;
	color: black;
}

#menu a {
	display: block;
	padding: 8px;
	text-decoration: none;
	color: black;
	background-color: white;
	transition: 0.5s;
}

#menu a:hover {
	background-color: #ebebeb;

}

/* sauf si lien avec h3 */
#menu a:has(h3):hover {
	background-color: transparent;
}

#menu-cat {
	width: 16vw;
}

#menu-cat a {
	text-decoration: none;
	color: black;
	transition: 0.5s;
}

#menu-cat a:hover {
	background-color: #ebebeb;
}

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) */
	font-size: 1.37em;
}


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

/* Si tu veux un petit effet hover */
details summary:hover {
	background-color: white;
}

#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 */
}

/* même style que les summary */
.info-link {
	display: block; */
	cursor: pointer;
	margin: 10px 10px 5px 0px;	font-size: 1.37em;
	text-decoration: none;

	transition: 0.3s;
	list-style: none;


}

.info-link:hover {
	background-color: white;
}



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

#menu-cat a:hover {
	/*	color: white;*/
	/*border-radius: 5px;
	background-color: #ebebeb;
	*/}

#panel img {
	margin: 10px 0px 0px 60px;
	box-shadow: var(--box-shadow);
	width: 50vw;
	height: auto;
	max-height: fit-content;
}

#panel {
	display: flex;

}



a {
	text-decoration: none;
	color: black;
	transition-duration: 0.75s;
	flex-direction: column;
	align-content: stretch;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}

a:hover {
	text-decoration: none;
	color: #ebeceb;
	background: white;
	transition-duration: 0.75s;
	flex-direction: column;
	align-content: stretch;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}

/*
a > h3 {
background-image: url('img/scar-long_animated.svg');
background-size: 100%, 100%;
background-position: center center;
margin: 22px 10px 22px 12px;
text-align-last: end;
color: black;
font-family: 'police2';
}
*/


.main {
	display: flex;
	overflow: hidden;       /* empêche scroll de la div parent */

	justify-content: space-between;
	align-items: flex-start;
}


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

.work {
	display: flex;
	flex-direction: column;
	align-items: center;         /* centre le contenu à l’intérieur */
	justify-content: flex-start;
	width: auto;                 /* ajuste la largeur selon le contenu */
	margin: 10px 0px;              /* centre chaque work */
}


.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; */
	max-height: 90vh;
	max-width: 50vw;

}

/*
#works .work:hover .wimg img:hover {
filter: blur(10px);
display: block;
max-width: 100%;
}
*/

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

.desc {
	display: none;
}

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

.date {
	display: none;
}

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

h1 {
	text-align: center;
	font-size: 1.3em;
	margin: 2px;
	font-family: "Whois";
	display: block;
	color: black;
	font-weight: 100;
	transition: all 0.8s ease-in-out;
	filter: blur(0px);
}

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

h3 {
	margin: 10px 60px 0px 10px;
	font-size: 1.37em;
	font-weight: normal;
	width: 16vw;
}

ul {
	text-decoration: none;
	list-style: circle;
}

.info a {
	background-color: black;
	color: white;
}

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

.main-content-info {
	display: none;
	flex-wrap: nowrap;
	border: 0px solid black;
	border-radius: 5px;
	box-shadow: var(--box-shadow);
	overflow: hidden;
	padding: 10px 10px;
	width: 100%;
	margin: 10px 10px;
	flex-direction: row;
	align-content: space-around;
	justify-content: center;
}

.main-content-info .box {
	flex-basis: 50%;
	padding: 10px 49px;
}

.scar {
	display: inline-block;
}

.scar img {
	transform: rotate(90deg);
	translate: 495px -394px;
	width: 100%;
}


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

	/*	pour les mac écrans*/

	/*
	h3 {
	font-size: 3.4em;
}

	#panel img {
	height: 580px;
}

	#menu-cat ul {
	height: 580px;

}


	#menu-cat a {
	width: 350px;

}*/

}


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

	#panel {
		display: flex;
		flex-direction: column;
	}
	#menu-cat {
		width: inherit;

	}

	h3 {
		width: inherit;
		margin: inherit

	}



	#panel img {
		margin: 15px 0px;
		width: inherit;
	}

	/*	pour les petits écrans*/

	/*	#works {
	display: flex;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1px;
	justify-content: center;
	margin: 1px;
}

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

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

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

	.work {
	display: flex;
	border: 0px solid black;
	border-radius: 2px;
	box-shadow: var(--box-shadow);
	overflow: hidden;
	transition-duration: 1s;
	margin: 10px;
	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 {
	font-size: 0.55em;
	padding: 3px;
}

	#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: block;
	height: fit-content;
}

	#menu-cat li {
	margin: 5px 0;
	flex-grow: 1;
	text-align: center;
}

	#menu-cat a {
	padding: 8px;
	margin: 0;
	box-shadow: var(--box-shadow);
	text-decoration: none;
	color: black;
	background-color: white;
	transition-duration: 0.5s;
	width: auto;
	font-size: 0.8em;
	text-align: center;
}

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

	#panel img {
	box-shadow: var(--box-shadow);
	max-width: 100%;
	height: auto;
	margin: 10px;
}
	*/

}



@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;
}*/
}