<@font-face{
   font-family: 'helvetica';
   src: url("../fonts/helveticaneue.ttf") ;
}

body{
font-family: helvetica;
font-size: 1vw;
overflow-x: hidden;
}                                                                                                  

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

header a{
	color: black;
}

a:hover{
	cursor: pointer;
}

header{
	height: 5vh;
	width: 100%;
/*	border:2px solid red;*/
	justify-content: space-between;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}

.fullpage{
	display: flex;
}


.noclick{
	background: transparent;
	width: 70vw;
	height: 6vh;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;

}


.topgradient{
	background: white;
	width: 100%;
	height: 6vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

.gradient{
	background: linear-gradient(to top, transparent, white);
	width: 100%;
	height: 5vh;
	margin-top: 6vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

header h1{
	margin-left: 2vw;
}


header ul{
	display: flex;
	width: 	85vw;
/*	border: 2px solid pink;*/
	margin-top: 2.5vh;
	margin-right: 2vw;
	justify-content: space-between;
}

/*
   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

@media screen and (max-width:667px) {
	body{
	font-size: 4vw;
	}

	.noclick{
	width: 0vw;
	height: 0vh;

}

	header ul{
	width: 	95vw;
	margin-left: 1vw;
	margin-top: 1.8vh;
}
}

 /*                                                                                                                           
  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
 (_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_)                                                                                                                                                                                                                                                     
*/

.about{
/*	border: 2px solid blue;*/
	width: 32vw;
/*	la même que celle de la div fullpage*/
}

.textabout{
/*	border: 2px solid blue;*/
	margin-top: 10vh;
	width: 23vw;
	position: fixed;
}

.phoneabout{
/*	border: 2px solid blue;*/
	width: 32vw;
/*	la même que celle de la div fullpage*/
}

.phonetextabout{
/*	border: 2px solid blue;*/
	margin-top: 10vh;
	width: 23vw;
	position: fixed;
}

.wcc{
	/*border: 2px solid green;*/
	color: #0eed4a;
}

.wcc2{
	/*border: 2px solid green;*/
	color: black;
}

.sub{
	font-size: 0.7em;
}


/*
   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

@media screen and (max-width:667px) {
	.about{
/*	border: 2px solid blue;*/
	width: 0vw;
}

.textabout{
/*	border: 2px solid blue;*/
	width: 0vw;
	font-size: 0vw;

}
}

@media screen and (max-width:667px) {
	.phoneabout{
/*	border: 2px solid blue;*/
	width: 100%;
}

.phonetextabout{
/*	border: 2px solid blue;*/
	width: 90vw;
	margin-left: 5vw;
	font-size: 4vw;

}
}

 /*                                                                                                                           
  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
 (_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_)                                                                                                                                                                                                                                                     
*/


.contact{
/*	border: 2px solid blue;*/
	width: 24vw;
/*	la même que celle de la div fullpage*/
}

.textcontact{
	margin-top: 10vh;
	margin-left: 1vw;
	width: 16vw;
	position: fixed;
}

.phonecontact{
/*	border: 2px solid blue;*/
	width: 24vw;
/*	la même que celle de la div fullpage*/
}

.phonetextcontact{
	margin-top: 10vh;
	margin-left: 1vw;
	width: 16vw;
	position: fixed;
}
/*
   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

@media screen and (max-width:667px) {
	.contact{
/*	border: 2px solid blue;*/
	width: 0vw;
}

.textcontact{
/*	border: 2px solid blue;*/
	width: 0vw;
	font-size: 0vw;

}
}

@media screen and (max-width:667px) {
	.phonecontact{
/*	border: 2px solid blue;*/
	width: 100%;
}

.phonetextcontact{
/*	border: 2px solid blue;*/
	width: 90vw;
	margin-left: 5vw;
	font-size: 4vw;

}
}

 /*                                                                                                                           
  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
 (_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_)                                                                                                                                                                                                                                                     
*/

.artworks{
	margin-top:5vh;
	width: 56vw;
	margin-bottom: 5vh;
/*	border: 2px solid pink;*/
	z-index: 0;
}

.displaytext11{
	margin-top: 5vh;
}

p{
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.artwork11{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displaycobalt{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 5vh;
	margin-left: 2vw;

}


/*-------------------------------------------------------*/

.artwork12{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displayexemplaires{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;x
}


/*-------------------------------------------------------*/

.artwork1{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}

/*
.displaytext1{
	animation: displaytext1tr 1s;

}

@keyframes displaytext1tr{
	from{
		opacity: 0;
	}

	to{
		opacity: 1;
	}
}*/


.displayexperiencepapier{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}


/*-------------------------------------------------------*/


.artwork2{
	display: flex;
	width: 54vw;
/*		border: 2px solid pink;*/
}


.displaymep{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}


/*-------------------------------------------------------*/

.artwork3{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displayexperiencepoche{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}


/*-------------------------------------------------------*/

.artwork4{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displaypassages{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.artwork5{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displaykit{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.artwork6{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displaypartition{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.artwork7{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displayprocessing{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.artwork8{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displaypcbtype{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.artwork9{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displayeric{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}

/*-------------------------------------------------------*/

.artwork10{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.displayman{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}


/*
   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

@media screen and (max-width:667px) {
	.artworks{
	width: 100%;

/*	border: 2px solid pink;*/
}


.displaytext1, .displaytext2, .displaytext3, .displaytext4, .displaytext5, .displaytext6, .displaytext7, .displaytext8, .displaytext9, .displaytext10, .displaytext11, .displaytext12{
	font-size: 0;
}

/*-------------------------------------------------------*/

.artwork11{
	width: 100%;
/*		border: 2px solid pink;*/
}


.displaycobalt{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 5vh;
	margin-left: 5vw;

}
/*-------------------------------------------------------*/

.artwork12{
	width: 100%;
/*		border: 2px solid pink;*/
}

.displayexemplaires{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 3vh;
	margin-left: 5vw;

}
/*-------------------------------------------------------*/

.artwork1{
	width: 100%;
/*		border: 2px solid pink;*/
}


.displayexperiencepapier{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 3vh;
	margin-left: 5vw;

}


/*-------------------------------------------------------*/


.artwork2{
	width: 100%;
}


.displaymep{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
}


/*-------------------------------------------------------*/

.artwork3{
	width: 100%;
}


.displayexperiencepoche{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
}


/*-------------------------------------------------------*/

.artwork4{
	width: 100%;
}


.displaypassages{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
}

/*-------------------------------------------------------*/

.artwork5{
	width: 100%;
}


.displaykit{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
}

/*-------------------------------------------------------*/

.artwork6{
	width: 100%;
}


.displaypartition{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
}

/*-------------------------------------------------------*/

.artwork7{
	width: 100%;

}


.displayprocessing{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
}

/*-------------------------------------------------------*/

.artwork8{
	width: 100%;
}


.displaypcbtype{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;
	margin-bottom: 2vh;
}


/*-------------------------------------------------------*/

.artwork9{
	width: 100%;
/*		border: 2px solid pink;*/
}


.displayeric{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;

}

/*-------------------------------------------------------*/

.artwork10{
	width: 100%;
/*		border: 2px solid pink;*/
}


.displayman{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2vh;
	margin-left: 5vw;

}
}

 /*                                                                                                                           
  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
 (_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_)                                                                                                                                                                                                                                                     
*/


.liaboutcloseup a{
	color: transparent;
}

.licontactcloseup a{
	color: transparent;
}

.closeupartwork1{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img1{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 5vh;
	margin-left: 2vw;

}
/*-------------------------------------------------------*/


.closeupartwork2{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img2{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}


/*-------------------------------------------------------*/


.closeupartwork3{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img3{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}

/*-------------------------------------------------------*/


.closeupartwork4{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img4{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}

/*-------------------------------------------------------*/


.closeupartwork5{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img5{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}

/*-------------------------------------------------------*/


.closeupartwork6{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img6{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}


/*-------------------------------------------------------*/


.closeupartwork7{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img7{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}

/*-------------------------------------------------------*/


.closeupartwork8{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img8{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;

}


/*-------------------------------------------------------*/


.closeupartwork9{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img9{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.closeupartwork10{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img10{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/

.closeupartwork11{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img11{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/


.closeupartwork12{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img12{
	border-radius: 1vw;
	width: 28vw;
	margin-top: 3vh;
	margin-left: 2vw;
}

/*-------------------------------------------------------*/


.closeuptext{
	margin-top: 5vh;
	margin-left:32vw;
	width: 30vw;
	position: fixed;
/*	border: 2px solid green;*/
}

/*
   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

@media screen and (max-width:667px) {
.img1{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 82vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 5vw 10vw white;

}
/*-------------------------------------------------------*/


.closeupartwork2{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img2{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;

}


/*-------------------------------------------------------*/


.closeupartwork3{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img3{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;

}

/*-------------------------------------------------------*/


.closeupartwork4{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img4{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;
}

/*-------------------------------------------------------*/


.closeupartwork5{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img5{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;
}

/*-------------------------------------------------------*/


.closeupartwork6{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img6{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;}


/*-------------------------------------------------------*/


.closeupartwork7{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img7{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;}

/*-------------------------------------------------------*/


.closeupartwork8{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img8{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;}


/*-------------------------------------------------------*/


.closeupartwork9{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img9{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;}

/*-------------------------------------------------------*/

.closeupartwork10{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img10{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;}

/*-------------------------------------------------------*/

.closeupartwork11{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img11{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;}

/*-------------------------------------------------------*/


.closeupartwork12{
	width: 54vw;
	display: flex;
/*		border: 2px solid pink;*/
}


.img12{
	border-radius: 5vw;
	width: 90vw;
	margin-top: 2.5vh;
	margin-left: 5vw;
	box-shadow: 0px 0px 0vw 4vw white;
}

/*-------------------------------------------------------*/


.closeuptext{
	margin-top: 5vh;
	margin-left:5vw;
	width: 90vw;
	position: fixed;
	text-align: justify;
	font-size: 0.8em;
	z-index: -1;
/*	border: 2px solid green;*/
}
}


     /*                                                                                                                           
  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
 (_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_)                                                                                                                                                                                                                                                     
*/


.space{
	height: 40vh;
}


/* Étape 1 : Définir l'état de base et la transition pour les éléments qui seront floutés */
body > *:not(.more):not(script) {
  filter: blur(0px); /* Commencez sans flou */
  transition: filter 0.5s ease-in-out; /* Animez les changements de la propriété 'filter' sur 0.3 secondes */
                                        /* 'ease-in-out' assure un démarrage et une fin en douceur */
}

/* Étape 2 : Définir l'état flou lorsque la classe 'blur-active' est présente sur le body */
body.blur-active > *:not(.more):not(script) {
  filter: blur(10px); /* Cible de l'état : flou de 20px */
  /* La propriété 'transition' définie dans la règle ci-dessus s'occupera de l'animation */
}

h3{
	 font-style: italic;
}

.sort{
	width: 100%;
/*	border:2px solid red;*/
	justify-content: space-between;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
}

.sort h1{
	margin-left: 2vw;
}

.sort ul{
	display: flex;
	margin-right: 2vw;
	width: 	100%;
	height: 2.5vh;
/*	border: 2px solid pink;*/
	margin-top: 2.5vh;
	justify-content: space-between;
}


.filter.active {
  color: blue; /* même couleur que le hover */
}

.filter{
	color: black;
}

.sorthover{
	height: 5vh;
	width: 100%;
/*	border:2px solid red;*/
	justify-content: space-between;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}

.type:hover, .theme:hover, .date:hover{
	color: blue;
	cursor: pointer;
}

.sorthover h1{
	margin-left: 2vw;
}

.sorthover ul{
	display: flex;
	width: 	100%;
/*	border: 2px solid pink;*/
	margin-top: 5vh;
	justify-content: space-between;
}

.simple, .type, .theme, .date, .alltypes, .allthemes, .alldates{
/*	border: 2px solid green;*/
	width: 10vw;
}

.alltypes, .allthemes, .alldates {
  	 background-color: rgba(255, 255, 255, 0.95); /* Ensure the container itself is transparent */
     mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) calc(100% - 5vh), /* Full opacity until 5vh from the bottom */
        rgba(0, 0, 0, 0) 100%             /* Fully transparent at the bottom */
    );
    z-index: 1; 
    width: 100%;
    padding-bottom: 7vh;
    height: fit-content;   
  }

.alltypes a{
	margin-left: 43.5vw;
}

.allthemes a{
	margin-left: 54.7vw;
}

.alldates a{
	margin-left: 65.8vw;
}

.double{
	width: 20vw;
/*	border: 2px solid blue;*/
}

.article{
	width: 100%;
	justify-content: space-between;
	display: flex;
}

.article ul{
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding-top: 1vh;
	padding-bottom: 2.5vh;
	border-top: 0.5px solid black;
	padding-right: 2vw;
}


.article h1{
	margin-left: 2vw;
}

.itemBox img{
	position: absolute;
	left: 43vw;
	width: 10vw;
}

.article:hover{
	cursor: pointer;
}

footer{
	height: 2vh;
/*	border: 2px solid blue;*/
}

.topgradienthovertype{
	background: white;
	opacity: 95%;
	width: 100%;
	height: 30vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

.gradienthovertype{
	background: linear-gradient(to top, transparent, white);
	opacity: 95%;
	width: 100%;
	height: 20vh;
	margin-top: 30vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}


.topgradienthovertheme{
	background: white;
	opacity: 95%;
	width: 100%;
	height: 70vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

.gradienthovertheme{
	background: linear-gradient(to top, transparent, white);
	opacity: 95%;
	width: 100%;
	height: 20vh;
	margin-top: 70vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

.topgradienthoverdate{
	background: white;
	opacity: 95%;
	width: 100%;
	height: 28vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

.gradienthoverdate{
	background: linear-gradient(to top, transparent, white);
	opacity: 95%;
	width: 100%;
	height: 20vh;
	margin-top: 28vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;

}

.blur{
	background-color: white;
	width: 20vw;
	height: 10vh;
	position: fixed;
	top:90vh;
	filter: blur(20px);
}

.plus{
	position: fixed;
	top:95vh;
	left: 2vw;
	display: flex;
	justify-content: space-between;
	width: 13.5vw;
}

#no-results-message {
margin-left: 2vw; 
margin-top: 2.5vh;

}


/*
   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/


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


.filter.active {
    color: blue; /* Color for active filters */
}

  	.sort li{
  	text-align: center;
  	}

  	.article {
    width: 100%;
    display: flex;
    height: fit-content;
	}

	.article h1{
	margin-left: 0vw;
}


.article ul {
    display: flex;
    flex-direction: column; /* Stack list items vertically */
	/* Retire ou remplace justify-content si present et causant le centrage */
	margin-left: 5vw;
	width: 90vw;
	border-top: none;

}

.article ul li {
    
    padding: 0.5vh 0; /* Add vertical padding */
    text-align: left; /* Aligner le texte à gauche */
    border: none;
  	 border-bottom: 0.5px solid black;
    
}

/* Article Image Styles */
.itemBox img {
        position: static; /* Retirer le positionnement absolu */
        box-sizing: border-box;
        display: block !important; /* Afficher l'image et utiliser !important pour remplacer le display: none; initial */
        height: auto; /* Maintenir le ratio d'aspect */
        margin-top: 0.5vh;
		  width: 90vw;
    }


/* No Results Message */
#no-results-message {
    font-size: 1.2em;
    color: #555;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5vh;
    padding: 0 5vw;
}


/* More section and blur */
.more {
    width: 100%; /* Use full width */
    position: fixed;
    bottom: 0; /* Fix to the bottom */
    left: 0;
    z-index: 10;
    box-sizing: border-box;
}

.blur {
	 display: none;
}

.plus {
	height: 5vh;
    position: static; /* Remove fixed positioning */
    width: 100%; /* Use full width */
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    z-index: 10;
    padding-top: 7vh;
    background-color: rgba(255, 255, 255, 1); /* Ensure the container itself is transparent */
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%, /* Full opacity until 5vh from the bottom */
        rgba(0, 0, 0, 1) calc(0% + 5vh)             /* Fully transparent at the bottom */
		 );
}


    .space{
    	height: 10vh;
    }


    .simple, .type, .theme, .date, .double{
        width: auto; /* Allow width to adjust based on content */
        flex-grow: 1; /* Allow items to grow */
        text-align: left; /* Aligner le texte à gauche */
    }

	.sort .simple, .sort .double {
		display: none;
	}

	
  /* Specific positioning for each filter list on mobile */
  .alltypes {
    top: /* Adjust top position to be below the header */;
    left: /* Adjust left position */;
  }

  .allthemes {
    top: /* Adjust top position */;
    left: /* Adjust left position */;
  }

  .alldates {
    top: /* Adjust top position */;
    left: /* Adjust left position */;
  }

.sorthover {
    position: fixed; /* Keep fixed positioning */
    top: 5vh; /* Adjust this value if your header height is different */
    left: 0;
    width: 100%;
    z-index: 3; /* Ensure it's above the article content */
    height: auto;
  }

  .alltypes, .allthemes, .alldates {
  	 background-color: rgba(255, 255, 255, 0.95); /* Ensure the container itself is transparent */
     mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) calc(100% - 5vh), /* Full opacity until 5vh from the bottom */
        rgba(0, 0, 0, 0) 100%             /* Fully transparent at the bottom */
    );
    width: 100%; /* Take full width of the container */
    z-index: 1; /* Higher z-index than the pseudo-element's -1 */
    margin-top: -4vh;
    padding-bottom: 7vh;
    height: fit-content;
  }

  .alltypes a{
		margin-left: 5vw;
	}	

	.allthemes a{
		margin-left: 32vw;
	}

	.alldates a{
		margin-left: 72vw;
	}

footer{
	height: 10vh;
}

.article:hover{
	color: black;
}

a:hover{
	color: black;
}

}


     /*                                                                                                                           
  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
 (_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_)                                                                                                                                                                                                                                                     
*/


.open{
 z-index: 1;
 cursor: pointer;
 margin-bottom: 2vw;
 display: none;
}

.open p{
	margin: 0;
	margin-bottom: 1vw;
	margin-left: 22.3vw;
	margin-right: 2vw;
	text-align: justify;
}

/*Commenter pour les images affichées constamment*/


.open img{
	position: fixed;
    bottom: +10%; 
    left: 0;
    z-index: 0; 
}

/*Décommenter pour les images affichées constamment*/

/*.open img {
  float: right;              
  width: 20vw;           
  margin: 1em 1em 1em 1em;       
  height: auto;
  display: block;
}*/


.open a{
	color: blue;
}


span{
	color: blue;
}

em{
	font-style: italic;
}

#fig-hover-image {
  position: fixed;
  top: 50%;
  left: 50%;
  display: none;
  z-index: 9999;
  pointer-events:none;
  background: white;
  box-shadow: 1px 1px 10px rgb(0,0,0,0.1);
}

#fig-hover-image img {
  max-width: 100vw;
  height: auto;
  display: block;
}

sup {
  vertical-align: super;
  font-size: xx-small;
}


.notes{
	columns: 2;
	margin-top: 10vh;
	margin-left: 22.3vw;
	margin-right: 2vw;
}
.notes p{
	margin: 0;
	margin-bottom: 1vw;
	text-align: justify;
}

.open.active {
  display: block;
}

iframe{
	margin-left: 22vw;
	width: 31vw;
	height: 31vh;
}


    .formulaire{ font-family: sans-serif; padding: 2rem; max-width: 50vw; margin: auto; }
    textarea { width: 100%; margin: 0.5rem 0; }	
    #contributionForm {margin-top: 5vh;}
    .multi-input { margin-bottom: 1rem; margin-top: 1rem; }
    .multi-input button { margin-top: 0.5rem; }
    label small { display: block; font-size: 0.85rem; color: #555; }
    .fig-label { font-weight: bold; margin-top: 0.5rem; }
    .rules a{color:blue;}


   fieldset {
  border: none;
  margin-bottom: 5vh;
}

fieldset label {
  display: flex;
  gap: 0.5rem; /* espace fixe entre texte et checkbox */
  cursor: pointer;
  margin-bottom: 0.5rem;
}
fieldset label input[type="checkbox"] {
  margin: 0; /* on enlève tout margin pour pas rajouter d'espace */
}

input[type="text"] {
width: 100%;
margin-bottom: 1rem;
}


fieldset legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
 }


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


.open{
 z-index: 1;
 cursor: pointer;
 margin-bottom: 2vw;
 display: none;
}

.open p{
	margin: 0;
	margin-bottom: 1vw;
	margin-left: 15vw;
	margin-right: 5vw;
	text-align: justify;
}

iframe{
	margin-left: 5vw;
	width: 90vw;
	height: auto;
}
}