@font-face {
  font-family: ysabeau;
  color: #292428;
  font-weight: thin;
  src: url(../police/ysabeau/Ysabeau-VariableFont_wght.ttf);
  ;
}
 


/* { border:1px solid red; f2f3f5 e1ecfe  padding:16px; margin: 0;  }*/



body {
	background-image: url("../background-transparent.jpg");
  background-repeat: no-repeat; background-attachment: fixed; background-size: cover;
/*	background-color: #f7faff ;*/
	margin: 0; padding: 48px;
	font-size: 17px ; font-family: 'ysabeau' ; color: #292428; font-weight: 100; 
}


header {
	position: fixed; left:0;right:0; top :0; z-index: 1;
	border: 0px solid #f88; 
	padding: 5px 48px;
	display: flex; 
	justify-content: space-between;
	align-items: center;
	background-color: transparent;
	background-image: url("../background-transparent.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

/*barre de navigation*/
h1 { z-index: 2;}
h1 a { font-size: 30px; font-weight: 150; color: #292428; text-decoration: none; }
h1 a:hover { color: #aaaa55; font-weight: 150; }

header nav {font-size: 24px; font-weight: 150;}
header nav a {color: #292428; text-decoration: none; margin: 0 0 0 5px; }
header nav a:hover { color: #aaaa55; font-weight: 150;}
header nav a.laouonest { color: #958395; font-weight: 200; }


li { list-style-type: none; }

.grid-biographie {
			display: grid;  gap: 0vw;
			width: 100%; height: auto; margin: 1vw auto;
			border: 1px solid blue;
		}

div.grid-biographie li { border: 1px solid darkred; }


/*menu oeuvres top*/
div.menu-oeuvre { display : flex; justify-content: space-between; position: fixed; left:0px; right:0; top: 150px; bottom: 0; font-size: 18px; font-weight: 150; padding: 30px 48px ;}
div.menu-oeuvre li a { color: #292428; display: block; text-decoration: none; padding-bottom: 1px; }
div.menu-oeuvre li a:hover { color: #aaaa55 }


/*menu oeuvres bottom*/
aside { border: 0px solid red; text-align: right; font-size: 18px; font-weight: 150; }
aside li a { justify-content: right; color: #292428; text-decoration: none; padding-bottom: 1px; }
aside li a:hover { color: #aaaa55 }


/*titres oeuvres top*/
div ul { padding: 0 0 0 0; color: #292428; font-size: 18px;}
div.title-oeuvre { color: #292428; margin-top: 84px; }



.main-oeuvre { max-width: 850px;
		  margin: 4vw auto auto auto; 
		 	border: 0px solid red; }

.grid-oeuvre {
			display: grid;  gap: 2vw; 
			width: 100%; height: auto; margin:4vw auto;
			border: 0px solid blue;
		}

.grid-tissage {
			display: grid;  gap: 5vw; max-width:500px;
			height: auto; margin:4vw auto;
			border: 0px solid blue;
		}

.grid-geologie {
			display: grid;  gap: 2vw; 
			width: 100%; height: auto; margin: 4vw auto;
			border: 0px solid blue;
		}

.grid-cadre {
			display: grid;  gap: 1vw; 
			width: 100%; height: auto; margin:4vw auto;
			border: 0px solid blue;
		}

.grid-aurlandsvangen {
			display: grid;  gap: 1vw; 
			width: 100%; height: auto; margin:7vw auto;
			border: 0px solid blue;
		}

.grid-photos {
			display: grid;  gap: 2vw; 
			width: 65%; height: auto; margin: 4vw auto;
			border: 0px solid blue;
		}

		
		.gridx1 { grid-template-columns: 1fr; }
		.gridx2 { grid-template-columns: 1fr 1fr; }
		.gridx3 { grid-template-columns: 1fr;}
		.gridx4 { grid-template-columns: 1fr 1fr 1fr 1fr;}
/*		.gridx5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}*/
		.gridx5 { grid-template-columns: 1fr 1fr;}
		.gridx6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
		.gridx7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}  

		figure { display: block; width: 100%; margin: 0 auto;  outline: 0px solid red;}
		figure img { width: 100%;  outline: 0px solid lime; }
		figcaption { color: #292428; text-align: right; font-size: 13px; padding-top: 10px; }
	

		figure.center-small-image { text-align: center }
		figure.center-small-image img { display: block; max-width: 100%; margin: 0 auto; }
		figure.center-small-image figcaption { text-align: right; width: 100%; ; padding-top: 10px; font-size: 13px; display: block; margin: 0 auto; }
	
		
		/*fragments de cadre responsive
		@media screen and (min-width: 600px) {
		 	figure.center-small-image img {  max-width: 60%;  }	
			 figure.center-small-image figcaption { width: 60%; }
			 .gridx5 { grid-template-columns: 1fr 1fr 1fr;}
		}
		@media screen and (min-width: 900px) {
			 figure.center-small-image img {  max-width: calc(33.33% - 16px);   }	
			 figure.center-small-image figcaption { width: calc(33.33% - 16px); }
			 .gridx5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}	
		} */

		
		/*tissages*/
		@media screen and (min-width: 800px) {
		 	figure.center-small-image img {  max-width: 60%;  }	
			 figure.center-small-image figcaption { width: 60%; }
			 .gridx3 { grid-template-columns: 1fr;}
		}
		@media screen and (min-width: 700px) {
			 figure.center-small-image img {  max-width: calc(33.33% - 16px);   }	
			 figure.center-small-image figcaption { width: calc(33.33% - 16px); }
			 .gridx3 { grid-template-columns: 1fr 1fr 1fr;}	
		}

		/*video oeuvres*/
		video { width: 100%; height:auto; align-content: center; display: block; top: 0;}


		/*many thanks to Mohamed Nasr, Guillaume Stagnaro and Gregory Pignot for their help and patience*/