@charset "UTF-8";

/* GÉNÉRALITÉS */

* {
	margin:0;
	padding:0;
}

*:focus {
outline:0;
}

#body {
background-color:#FDFDFD;
position:relative;
width:100vw;
height:100vh;
overflow-y:scroll;
overflow-x:hidden;
}

figure {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

/* MENU */

#menu {
width:50vw;
height:100vh;
position:fixed;
z-index:999;
overflow-y:auto;
overflow-x:hidden;
left:-50vw;
top:0;
color:#333;
background-color:#FFF;
font-family: 'Lato', sans-serif;
font-size:1.1rem;
font-weight:400;
text-align:center;
-webkit-transition: left 1s, width 1s; /* Safari */
transition: left 0.5s, width 0.5s;
//border-right:1px solid #F6F6F6;
}

#menuCache {
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:#00F;
cursor:pointer;
//overflow:hidden;
}

.cacheOn {
z-index:1;
opacity:0.6;
transition: opacity 0.5s 0s, z-index 0s 0s;
}

.cacheOff {
opacity:0;
z-index:-1;
transition: opacity 0.5s 0s, z-index 0s 0.5s;
}

#menuWrap {
text-align:left;
display:inline-block;
line-height:2.5rem;
//margin-bottom:6rem;
}

#menuBouton {
text-align:right;
cursor:pointer;
color:#333;
position:fixed;
right:100%;
top:0;
white-space:nowrap;
display:inline-block;
height:1.6rem;
margin-top:0;
padding:1rem 1.5rem 1rem 1.5rem;
-ms-transform: rotate(-90deg); 
-ms-transform-origin: top right; 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: top right; 
transform: rotate(-90deg);
transform-origin: top right;
font-family: 'Lato', sans-serif;
font-weight:400;
font-size:0.9rem;
z-index:9999;
}

#suiteWrap {
	position:absolute;
	width:100vw;
	z-index:999;
	text-align:center;
	bottom:5vh;
	display:none;
}

#suite {
	width:7rem;
	cursor:pointer;
}

#titre {
width:60vw;
margin-top:4.2rem;
margin-bottom:4rem;
display:inline-block;
font-family: 'Lato', sans-serif;
font-weight:700;
letter-spacing:0.1rem;
font-size:1.2rem;
color:#00F;
}

.somicono, #menuBouton {
cursor:pointer;
}
.somicono:hover, #menuBouton:hover {
color:#00F;
}

#paragrapheBouton input {
border:none;
font-size:0.9rem;
font-weight:300;
width:12rem;
color:#CCC;
}

#paragrapheBouton input:focus {
color:#00F;
font-weight:700;
outline:none;
}

#paragrapheBouton button {
border:none;
font-size:0.7rem;
font-weight:300;
background-color:transparent;
cursor:pointer;
color:#CCC;
border:1px solid #CCC;
padding:0.2rem 0.4rem 0.2rem 0.4rem;
-webkit-border-radius: 0.2rem; 
-moz-border-radius: 0.2rem; 
border-radius: 0.2rem; 
}

#paragrapheBouton input:focus + button {
color:#00F;
border:1px solid #00F;
outline:none;
}


.grandEspace {
display:inline-block;
width:1.8rem;
}

.icons {
display:inline-block;
width:1.1rem;
margin-bottom:-0.1rem;
}


/* SOMMAIRE */

#sommaire {
position:relative;
display:none;
text-align:left;
margin-bottom:6rem;
width:90vw;
}

#sommaire h1 {
display:none;
}

#sommaire h2, #sommaire h3, #sommaire h4, #sommaire h5, #sommaire h6 {
color:#333;
text-align:left;
display:block;
margin:0;
padding:0.8rem 2rem 1rem 2rem;
cursor:pointer;
line-height:2rem;
}

#sommaire h2:hover, #sommaire h3:hover, #sommaire h4:hover, #sommaire h5:hover, #sommaire h6:hover {
color:#00F;
}

#sommaire h2 {
font-size:1rem;
font-weight:700;
margin-left:0rem;
width:auto;
overflow:hidden;
}
#sommaire h3 {
font-size:1rem;
font-weight:400;
margin-left:1rem;
width:auto;
overflow:hidden;
}
#sommaire h4 {
font-size:1rem;
font-weight:300;
margin-left:2rem;
}
#sommaire h5 {
font-size:1rem;
font-weight:100;
margin-left:3rem;
}
#sommaire h6 {
font-size:1rem;
font-weight:100;
margin-left:4rem;
}

.partieMark {
text-transform:uppercase;
font-weight:300;
font-size:1rem;
margin-left:2rem;
margin-top:2rem;
margin-bottom:-0.5rem;
color:#00F;
}


/* ICONOGRAPHIE */

#iconographie {
display:none;
text-align:left;
width:80vw;
padding:0 10vw 10vw 10vw;
margin:0;
}

.iconoSmall {
display:inline-block;
width:34vw;
margin:3vw;
cursor:pointer;
position:relative;
}

.iconoSmall figure {
display:inline-block;
margin-bottom:0;
}

.iconoSmall figure video, .iconoSmall figure img {
vertical-align:top;
}

.iconoSmall figure {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

.iconoSmall:hover figure {
	-webkit-filter: none;
	filter: none;
	filter: none;
	filter: none;
}

.iconoSmall figure figCaption  {
display:none;
}

.iconoSmall .iconoNum {
	font-size:1.5rem;
	font-weight:700;
	position:absolute;
	top:0.5rem;
	left:0.5rem;
	color:#FFF;
	text-shadow: #00F 0.2rem 0.2rem 0px;
}
.iconoBig .iconoNum {
	display:none;
}

.iconoBig {
display:inline-block;
width:100vw;
min-height:100vh;
margin-left:-10vw;
margin-top:0vw;
margin-bottom:-10vw;
margin-right:-10vw;
}

.iconoBig figure {
width:80vw;
min-height:100vh;
padding:10vw;
margin:0;
}

.iconoNone {
display:none;
}

/* BIBLIOGRAPHIE */

#bibliographie {
display:none;
text-align:left;
margin-bottom:6rem;
width:60vw;
font-weight:400;
font-size:0.9rem;
line-height:1.4rem;
}

#bibliographie h1 {
display:none;
}

#bibliographie h2, #bibliographie h3, #bibliographie h4, #bibliographie h5, #bibliographie h6 {
color:#333;
text-align:left;
display:block;
margin-bottom:2rem;
line-height:2rem;
}

#bibliographie h2 {
font-size:1.5rem;
font-weight:700;
width:auto;
overflow:hidden;
}
#bibliographie h3 {
font-size:1.2rem;
font-weight:400;
width:auto;
overflow:hidden;
}
#bibliographie h4 {
font-size:1.1rem;
font-weight:300;
}
#bibliographie h5 {
font-size:0.8rem;
font-weight:100;
}
#bibliographie h6 {
font-size:0.8rem;
font-weight:100;
}

.numEl {
	display:inline-block;
	width:12vw;
	padding-right:4vw;
	margin-left:-16vw;
	text-align:right;
	float:left;
	font-size:0.8rem;
	font-weight:400;
	font-style:normal;
	color:#00F;
}

#bibliographie .italique {
	font-style:italic;
}

#bibliographie .gras {
	font-weight:600;
}

#bibliographie .barre {
	text-decoration:line-through;
}

#bibliographie .exposant {
	font-style:normal;
	font-size:0.80rem;
	vertical-align:super;
	line-height:0;
}

#bibliographie .smallcaps {
	text-transform:uppercase;
	font-size:0.95rem;
	//display:inline-block;
	letter-spacing:0.15rem;
}


/* A PROPOS */

#aPropos {
display:none;
text-align:center;
margin-bottom:6rem;
width:60vw;
font-weight:400;
font-size:0.9rem;
line-height:1.4rem;
}




/* CONTENT */


#content {
width:74vw;
position:relative;
padding-right:30vw;
margin-left:16vw;
color:#333;
font-family: 'Merriweather', serif;
font-size:0.9rem;
line-height:1.9rem;
font-weight:400;
/*text-align:justify;*/
transition: margin 1s;
}

p {
margin-bottom:2rem;
}

h1 {
text-align:left;
font-size:6rem;
line-height:6rem;
margin-top:6rem;
margin-bottom:6rem;
width:74vw;
overflow:visible;
}
h2 {
text-align:left;
font-size:2rem;
line-height:2.5rem;
margin-top:4rem;
margin-bottom:4rem;
width:74vw;
overflow:visible;
}
h3 {
text-align:left;
font-size:1.8rem;
line-height:2.2rem;
margin-top:6rem;
margin-bottom:3rem;
width:74vw;
overflow:visible;
}
h4 {
text-align:left;
font-size:1rem;
margin-top:2rem;
margin-bottom:2rem;
}
h5 {
text-align:left;
margin-top:1.4rem;
margin-bottom:2rem;
}
h6 {
text-align:left;
margin-top:1.2rem;
margin-bottom:2rem;
}
.hidden {
visibility:hidden;
height:0;
margin:0;
padding:0;
overflow:hidden;
}

.numPar {
font-family: 'Lato', sans-serif;
	display:inline-block;
	width:12vw;
	padding-right:4vw;
	margin-left:-16vw;
	text-align:right;
	float:left;
	font-size:0.9rem;
	font-weight:300;
	font-style:normal;
	color:#333;
}

#conclusion {
font-size:1rem;
line-height:1.8rem;
background-color:#00A;
color:#FFF;
font-family: 'Lato', sans-serif;
font-weight:300;
	width:100vw;
	margin-left:-16vw;
	padding-top:30vw;
	padding-bottom:30vw;
	text-align:center;
	position:relative;
}

#conclusion p {
padding-bottom:0.9rem;
margin:0 10vw 0 10vw;
}

#conclusion .numPar {
display:none;
}

.italique {
	font-style:italic;
}

.gras {
	font-weight:600;
}

.barre {
	text-decoration:line-through;
}

.exposant {
	font-style:normal;
	font-size:0.80rem;
	vertical-align:super;
	line-height:0;
}

.smallcaps {
	text-transform:uppercase;
	font-size:0.95rem;
	//display:inline-block;
	letter-spacing:0.1rem;
}

.lettrine {
	float:left;
	font-size:7rem;
	line-height:6rem;
	font-weight:100;
	padding-right:0.6rem;
	padding-top:0rem;
	font-family: 'Lato', sans-serif;
}

figure {
	width:100%;
	margin-bottom:6rem;
}

img {
	width:100%;
}

audio {
	width:100%;
}

video {
	width:100%;
	cursor:pointer;
}

.full video {
	display:inline-block;
	height:80vh;
	margin:10vh 10vw 10vh 10vw;
	max-width:80vw;
	cursor:pointer;
	position:relative;
}

.full {
	width:100vw;
	margin-left:-16vw;
	text-align:center;
	clear:right;
	position:relative;
}

figcaption {
	font-family: 'Lato', sans-serif;
	font-size:1rem;
	padding-top:2rem;
	font-weight:300;
}

.full figcaption {
	font-size:1rem;
	padding-bottom:4rem;
	padding-top:2rem;
	margin-left:5vw;
	margin-right:5vw;
}

.spacer {
width:100vw;
margin-left:-16vw;
height:2rem;
clear:right;
}

.transition {
	width:100vw;
	min-height:100vh;
	margin-left:-16vw;
	margin-top:6rem;
	text-align:center;
	clear:right;
	line-height:100vh;
	vertical-align:middle;
}
.transition a {
	display:inline-block;
	width:60vw;
	margin-top:10vh;
	margin-bottom:10vh;
	font-size:1.8rem;
	line-height:2.5rem;
	text-decoration:none;
	color:#FFF;
	font-weight:400;
	font-style:normal;
	vertical-align:middle;
}
.transition a:hover {
	text-decoration:underline;
}


.lien:link {
	text-decoration:none;
	color:#00F;
}
.lien:visited {
	text-decoration:underline;
	color:#00C;
}
.lien:hover, a:focus, a:active {
	text-decoration:none;
}

.note {
display:block;
overflow:hidden;
height:auto;
float:right;
clear:right;
width:50vw;
margin-right:-70vw;
padding-right:10vw;
cursor:pointer;
font-size:0.8rem;
font-weight:300;
text-align:left;
height:auto;
}

.unroll {
white-space:normal;
text-overflow:clip;
}

.roll {
white-space:nowrap;
text-overflow:ellipsis;
}

.on {
color:#00F;
}

.off {
color:#333;
}

.onM {
color:#00F;
}

.offM {
color:#00F;
}


.noteMark {
font-family: 'Lato', sans-serif;
cursor:pointer;
text-align: center;
line-height:1.2rem;
font-size:0.9rem;
font-weight:300;
margin-left:0.3rem;
margin-right:0.2rem;
vertical-align:super;
}

.noteNum {
font-family: 'Lato', sans-serif;
color:#00F;
margin-right:1rem;
font-size:0.9rem;
font-weight:300;
}