/* Structure */
body {
	font-family: 'Luciole';
	margin: 0;
	color:black;
	background-color:rgb(250, 250, 250);
	background-size:100%;
	background-image: url("backgroundcyanotype.jpg");
}
#container {
	max-width: 900px;
	margin: 0 auto;
}
#container a {
	color:black;
	text-decoration-style:dotted;
}
#header {
	width: 100%;
	background-color:none;
	padding-top:15px;
	text-align: center;
}
main {
	background-color:rgb(250, 250, 250);
	flex: 1;
	padding: 20px;
	order: 2;
}
footer {
	background-color:rgb(250, 250, 250);
	height: 40px;
	padding: 10px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 0.7em;
	grid-column: 1 / -1;
}
									/* navigation section!! */
#navbar {
	background-color:rgb(250, 250, 250);
	width: 100%;
	padding-top: 20px;
}
#navbar ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
	justify-content: space-evenly;
}
#navbar li {
	border-style: solid;
	border-width: 1px; 
	border-color: black;
	border-radius: 10px;
	padding: 6px;
	padding-top: 9px; 
}
#navbar li a {
	color:black;
	font-weight: 800;
	text-decoration: none;
}
#navbar li a:hover {
	color: black;
	text-decoration: none;
	}
									/* Photo + lien vers "news" */
#indeximage {
	text-align: center;
	position:relative;
}
#inprogress {
	position:absolute;
	bottom: 3rem; 
	left: 22rem;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: rgb(250, 250, 250);
	color:rgb(250, 250, 250);
	text-align:center;
	transition: all 0.5s ease-in-out;
	padding-top:1rem;
	padding-right:0.5rem;
	padding-left:0.5rem;
}
#inprogress:hover {
	background-color: rgb(250, 250, 250);
	box-shadow: 0px 5px 10px black;
	color:black;
}
#inprogress a {
	text-decoration:none;
}
#inprogress a:hover {
	text-decoration:none;
	cursor:crosshair;
}
											/* Mise en page */
div.news {
	border-style:dotted;
	max-width:900px;
	padding:0.3rem;
	position:relative;
	z-index:0;
	margin-top:5rem;
}
div.news img {
	width: 200px;
	padding-bottom:3px;
}
div.title-news {
	position:absolute;
	top: -1rem; 
	left: 1rem;
	z-index:3;
	background-color:rgb(250, 250, 250);
	padding-left:0.5rem;
	padding-right:0.5rem;
}
div.publications {
	padding-top:20px;
	border-bottom:2px dotted;
	max-width:900px;
}
div.publications img {
	max-width: 250px;
	padding-bottom: 5px;
}
figure {
	float: left;
	text-align: center;
	font-family: 'Luciole-italic';
	font-size: smaller;
	text-indent: 0;
	border: none;
	margin: 0.5em;
	padding: 0.5em;
}
figure img {

	object-fit: contain;
}
figcaption { 
	text-align: center; 
	margin: -1em ;
}
.grid {
    display: grid;
    margin: 0 auto;
	max-width:900px;
    /* autant de colonnes que nécessaire */
    /* les colonnes font au moins 250px de large */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* autant de lignes que nécessaire */
    /* les lignes font au moins 100px de haut */
    grid-auto-rows: minmax(100px, auto);
    /* permet de combler les “trous” dans la grille */
    grid-auto-flow: dense;
}
.tall { grid-row-end: span 2; }
.large { grid-column-end: span 2; }
.grid img{
    width: 100%;
    height: 100%;
	object-fit: contain;
}
.grid video{
    width: 100%;
    height: 100%;
	object-fit: cover;
}
.grid a {
    padding: 5px;
}
												/* Typo */
@font-face {
    font-family: 'Luciole';
    src: url('Fonts/Luciole-Regular/Luciole-Regular.eot'); /* IE9 Compat Modes */
    src: url('Fonts/Luciole-Regular/Luciole-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/Luciole-Regular/Luciole-Regular.woff') format('woff'), /* Modern Browsers */
         url('Fonts/Luciole-Regular/Luciole-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Fonts/Luciole-Regular/Luciole-Regular.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Luciole-Bold';
    src: url('Fonts/Luciole-Bold/Luciole-Bold.eot'); /* IE9 Compat Modes */
    src: url('Fonts/Luciole-Bold/Luciole-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/Luciole-Bold/Luciole-Bold.woff') format('woff'), /* Modern Browsers */
         url('Fonts/Luciole-Bold/Luciole-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Fonts/Luciole-Bold/Luciole-Bold.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: strong;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Luciole-Italic';
    src: url('Fonts/Luciole-Italic/Luciole-Italic.eot'); /* IE9 Compat Modes */
    src: url('Fonts/Luciole-Italic/Luciole-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/Luciole-Italic/Luciole-Italic.woff') format('woff'), /* Modern Browsers */
         url('Fonts/Luciole-Italic/Luciole-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Fonts/Luciole-Italic/Luciole-Italic.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
h1 {
	font-size:30px;
	font-family: 'Luciole-Bold';
}
h2 {
	font-size:15px;
    font-family: 'Luciole-Bold';
}
a:hover {
	cursor:crosshair;
}
a {
	color:black;
	text-decoration-style:dotted;
}
ul {
  list-style-type: circle;
}
span.english {
	color:grey;
	font-style:italic;
}

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

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
	main {
		order: 1;
	}
	#navbar ul {
		flex-wrap: wrap;
	}
.large { grid-column-end: span 1; }

            }