@charset "UTF-8";

/* FONTS */
@charset "UTF-8";

@font-face {
  font-family: "Deja vu serif";	 /*	"et-book";
  src: url("../fonts/etbookot-roman-webfont.woff2");
  src: url("../fonts/etbookot-roman-webfont.woff");
 src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
*/
  font-weight: normal;
  font-style: normal;
}

:root {
	--gris: #6d6d6d;
	--grisClair: #888;
	--grisClairTrs: rgba(136, 136, 136, .8) ;
	--margedroite: 12%;
	--margegauche: 8%;
	--maxheigth: calc(100vh - 8em);
}

 /* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333;
  float: none;
  margin-top: 0;
}

/* Navigation links */
.navbar a, button.navbarbtn {
	font-family: sans-serif;
  float: left;
  font-size: 16px;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

.diapos navbar a{ 
  padding: .2em 1em;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
  width:inherit;
}

/* Subnav button */
.subnav .subnavbtn, a {
	font-family: sans-serif;
  font-size: 16px;
  font-variant: small-caps;
  border: none;
  outline: none;
  color: white;
  padding: 18px 16px;
  background-color: inherit;
  margin: 0;
  transition: all .3s ease-out;

  }
 
 .subnavbtn {
	background:  url("../images/fa-caret-blanc.svg");
	background-repeat: no-repeat;
	background-position: right;
}

/* Add a red background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: #664444;
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  float: none;
  background-color: #664444;
  z-index: 1;
  
}

/* Style the subnav links */
.subnav-content a {
  color: white;
  text-decoration: none;
  transition: all .3s ease-out;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}
.subnav-content a:focus{

  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
  margin-right: 32%;
} 

body {
	margin: 0 var(--margedroite) 0 var(--margegauche);
	background-image:  url(../images/N1.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-position: 25% 75%;

	/*filter: opacity(20%);*/
	font-family: "et-book", Georgia, serif;
	font-size: 1.618em;
	line-height: 1.4em;
	}
	

header img {
	max-width: 100%;
	max-height: 100%;
	height: 1.3em;
	}
	
h1 {
	margin: .5em .5em 0 10%;
	font-family: "et-book", Georgia, serif;
	font-size: 2em;
	font-style:  italic;
	color: var(--gris);
	line-height: .58em;
	text-align: left;
	}

/* //////////////*/

.dia img {
  align-self: center;
}

.texte {
	float: none;
	width: 100em;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: var(--maxheigth);
/*	max-width: 100%;
	position: sticky;
	max-height: 750px;*/
	text-align: justified;
	  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  word-wrap:break-word;

	}
	
.texte a {
	text-decoration:none;
	}
	
.section {
	display: flex;
}

.container {
/*	margin: 2em 0 2em 2em;*/
		overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: var(--maxheigth);
	text-align: right;
	}
.container div {
  height:auto;
  display: inline;
  display:inline-flex;
  max-width:200px;
  margin:0;
  padding: 0;
}

.container .dia{
  
 border-style:solid;
  border-width:1px;
  border-color:#222222;
  vertical-align:middle;
  text-align:center;
  display: flex;
  justify-content: center;
}
.container .dia div * {
	display:none;
	}

.container .dia * {

/*  max-width:200px;
  max-height:200px;
*/  border-style:none;
  vertical-align:middle;
}

.headline{
  position:relative;
  margin-bottom:10pt;
  margin-left:2em;
  color:#6a6868;
  vertical-align:text-top;
}
/* ////////////////*/

.diapos{
	background: #000;
	color: #ddd;
	
	}

.diapos header {
	height: 1.3em;
	font-size: .6em;
}

.diapos header h1 {
	line-height: .7em;
	text-align: left;
	}

article {
	clear: both;
	width: auto;
	}
	
#contact fieldset div input:nth-child(-3n+0){
	display: flex;
	flex-direction: column;
	}

p.legende {
	font: caption;
		/*normal .6em/1em var(--grisClair) sans-serif;  font-size: .6em;
  color: var(--grisClair);
*/
}
	
fieldset ul li {
	list-style-type: none;
	font: normal .6em/1em  sans-serif;
  color: var(--gris);
  width: auto;
}
	cite{
		padding: 0 1em 0 1em;
	}
	
.diapos footer {
	background: #000;

}
	
footer {
	z-index: 10;
	position: fixed;
	bottom:0;
	width: 100%;
	margin: .3em 0 0 0;
	padding: .5em;
	font-size: .6em;
	color: var(--grisClair);
/*	background-color: var(--grisClairTrs);*/
}

footer blockquote {
	text-align: center;
	display: inline;
}

footer a {
	color: var(--gris);
	text-decoration: none;
}
 .section div{
 margin-bottom: 0;
 }
 

 @media all and (max-device-width: 800px)
{
    /* Vos règles CSS pour les mobiles ici }(max-width: 800px) {*/
:root {
	--maxheigth: calc(100vh - 6em);
}

 
 body {
	margin:0;
	font-size: 1.5em;
}


 .section {
 display:block;
 margin-bottom: 2em;
 }
 
 
 .container {
 margin: 0;
 max-width: 100%;
 }
 
 .container div, #contact fieldset{
  display: flex;
  max-width: 100%;
  justify-content: center;
}

.container .dia *{
  max-width:100%;
  max-height:100%;
  border-style:none;
  vertical-align:middle;
}

 }