html {
	width: 100%;
	height: 100%;
}

body {
	overflow-x: hidden;

	width: 100%; height: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	font-weight: 300;
	background: #F7F7F7;
}

.tier {
	width: 33.333%;
	float: left;

	height: 100%;

	position: relative;
}

.deux-tiers {
	width: 66.666%;
	float: left;
}
.trois-tiers {
	width: 100%;
	clear: both;
	overflow: hidden;

}

.hidden {
    display: none;
}

/*======
    NAV
  ======*/

nav {
    position: fixed;
    right: 0;
    width: 50%;
    
    text-align: right;
    z-index: 99999999999;
}

nav p {
    font-family: "brandon grotesque", "brandon-grotesque", sans-serif;
    font-size: 16px;
    width: auto;
    float: right;
    padding-right: 20px;
    padding-top: 20px;
}

nav a {
    color: #000;
    text-decoration: none;
    transition: all .3s;
}

nav a:hover {
    color: #B7B7B7;
}

.selected {
    color: #B7B7B7;
}



/*===========
    HEADER
  ===========*/


header {
	overflow: hidden;
    
    height: 100%;
	min-width: 100%;
	min-height: 100%;
    
    background: url(../images/visual-header.jpg)no-repeat center;
    background-size: cover;

	position: relative;
}

header h1, header h2, header a, header img {
    position: relative;
	z-index: 9999;
}

header h1, header h2 {
	text-align: center;
	font-weight: 300;

	color: white;
}


header img {
	display: block;
	margin: 0 auto;
	width: 10%;
	margin-top: 10%;
	margin-bottom: 5%;
}

header h1 {
	letter-spacing: 1px;
	font-size: 70px;
	line-height: .8;
	text-transform: uppercase;
}

header h2 {
    margin-top: 2em;
    
	line-height: .2;
	font-size: 32px;
	text-transform: none;
}

#video_container_trame {
    width: 100%;
    height: 100%;
    background: #000000;
    position: absolute;
    left: 0;
    top: 0;
    background: #000000;
    opacity: .3;
    z-index: 0;
}

.arrow {
	cursor: pointer;

	width: 50px;
	height: 25px;

	background: url(../images/fleche.svg) center center no-repeat;
    background-size: 80%;

	position: absolute;
	bottom: 50px;
	left: calc(50% - 25px);

	text-decoration: none;
    
    transition: all .3s;
}

.arrow:hover {
	background-size: 100%;
}

section {
	background: #FFF;
	clear: both;
}

img {
	max-width: 100%;
}

video {
	width: 100%; height: auto;
	min-height: auto; min-width: 100%;
	cursor: pointer;
}


.section--video {
    width: 66.666%;
	height: 66.666%;
	float: left; 
}

.video-wrapper {
    position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
    
    overflow: hidden;
}

iframe {
    position: absolute;
	width: 100%;
	height: 100%;
}


header video {
	position: absolute;
	margin: 0;
	z-index: -9999;
	top: 0px;
	left: 0px;
	height: auto;
	width: auto;
	min-height: 100%;
	min-width: 100%;
	overflow: hidden;
}

h1 {
	font-family: "brandon grotesque", "brandon-grotesque", sans-serif;
	padding: 0 5%;
	margin: 0;

	text-transform: uppercase;
	font-weight: 400;
}

footer {
	background: #F7F7F7;
}

section h1 {
	font-size: 22px;
	margin-top: 1em;
    margin-bottom: 2em;
	font-weight: bold;
	letter-spacing: 1.5px;
}

header h2 {
	font-family: "minion pro", "minion-pro",serif;
}

p {
	padding: 1em 5%;
	padding-bottom: 0;
	margin: 0;

	color: #111;

	line-height: 1.8;
	font-size: 18px;

	font-weight: 400;
	font-family: "minion pro", "minion-pro",serif;
}

.introduction {
	background: #FFF;
	z-index: 90;
	padding: 150px 0;
}

.introduction p {
	width: 66.666%;
	max-width: 740px;
    margin: 0 auto;
    padding: 0;
    
	font-style: italic;
    font-weight: 300;
    font-family: "brandon grotesque", "brandon-grotesque", sans-serif;
    font-size: 27px;
	line-height: 1.4;
}

.introduction strong {
	font-weight: normal;
}

.button {
	background: none;
	border: 1px solid #111;
	width: 40px;
	height: 10px;
	padding: 9px 12px;

	color: #111;
	text-decoration: none;
    cursor: pointer;

	position: relative;
	left: 45%;
	top: 50px;	/* old : 60px	*/
}

.button.open {
    padding: 9px 15px;
}

button:focus {
	outline: none;
}

.bouton {
	font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif;
}
.separation {
	width: 100%;
	background: #FFF;
	clear: both;
}

.button, .bouton-gabarit {
	transition: opacity .3s;
}

.button:hover, .bouton-gabarit:hover {
	opacity: .3;
}

.fil {
	margin: 0 auto;
	width: 50%;
	height: 1px;
	background: #e7e7e7;			/*	black est un peu violent, je mettrais ptt plutôt le gris utilisé pour le fond, comme dit Denis, normalement c'est un fil fin et délicat	*/
	margin-top: 20px;
	margin-bottom: 20px;
}
.fil:first-child {
	margin-top: 150px;
}
.fil:last-child {
	margin-bottom: 150px;
}
.fil-left {
	-webkit-transform: translateX(2%);
	-ms-transform: translateX(2%);
	-moz-transform: translateX(2%);
}
.fil-right {
	-webkit-transform: translateX(-2%);
	-ms-transform: translateX(-2%);
	-moz-transform: translateX(-2%);
}


.toggle {
	clear: both;
	overflow: hidden;
	background: #F7F7F7;
}



.toggle p {
	padding: 0 5%;
}
.toggle .ptop {
	padding-top: 3em;
	padding-bottom: 0.5em;
}
.toggle .pbot {
	padding-top: 0.5em;
	padding-bottom: 3em;
}
.toggle .pmid {
	padding: 3em 5%;
}

.pbot--center {
    text-align: center;
}

.pbot a {
	color: #111;
	text-decoration: none;

}

.pbot a:hover {
	border-bottom: 1px solid #111;
}




.toggle h2 {
	padding: 0 5%;
	margin-top: 2.5em;
	margin-bottom: .2em;

	color: #111;
}

.bouton-gabarit {
	margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 0.8em;
	padding: 5px ;
	display: block;
	width: 60%;

	text-decoration: none;
	color: #000;
	text-align: center;
	border: 1px solid #000;
}

.bouton-gabarit-2 {
    font-size:13px;
    opacity: .6;
}


.additionnel p, .additionnel a{
	color: transparent;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	border:none;
	cursor: default;
}

.add1 {
	background: url(../images/contenu-additionnel/add-content1.jpg) no-repeat center;
	background-size: cover;
}
.add2 {
	background: url(../images/contenu-additionnel/add-content2.jpg) no-repeat center;
	background-size: cover;
}
.add3 {
	background: url(../images/contenu-additionnel/add-content3.jpg) no-repeat center;
	background-size: cover;
}
.add4 {
	background: url(../images/contenu-additionnel/add-content4.jpg) no-repeat center;
	background-size: cover;
}
/*.add5 {
	background: url(../images/contenu-additionnel/add-content5.jpg) no-repeat center;
	background-size: cover;
}
.add6 {
	background: url(../images/contenu-additionnel/add-content6.jpg) no-repeat center;
	background-size: cover;
}*/

.additionnel {
    opacity: 0;
    transition: all .8s;
    transition-delay: 0;
}

.additionnel.open {
    opacity: 1;
    transition: all .8s;
    transition-delay: 1s;
}    

.add-big {
	margin: 0 auto;
	width: 100%;
	height: 500px;
	background: white;
	clear: both;
    opacity: 0;
    transition: all .8s;
    transition-delay: 0;
}
.add-big.open {
    opacity: 1;
    transition: all .8s;
    transition-delay: 1s;
}

.add-big1 {
	background: url(../images/contenu-additionnel/add-big1.jpg) no-repeat bottom center;
	background-size: cover;
}

.add-big2 {
	background: url(../images/contenu-additionnel/add-big2.jpg) no-repeat center center;
	background-size: cover;
}

h2 {
	font-family: "brandon grotesque", "brandon-grotesque", sans-serif;
	text-transform: uppercase;
	font-weight: bold;

	font-size: 27px;
}
.toggle p.toggle--title__text {
	padding-top: 0;
	margin-top: 0;
}

.contact, .publication {
	padding: 5em 0;
}

.contact h1, .publication h1, .publication h2 {
	padding: 0 1.5%;
}

.publication h1 {
	display: none;
}

.publication p {
	font-family: "brandon grotesque", "brandon-grotesque", sans-serif;
	padding: 0;
	text-transform: none;
	font-weight: 300;
	margin-top: .2em;
	margin-right: 1em;
    color: #555;
}

.publication p:nth-child(2) {
	margin-bottom: 2em;
}
#titre-livre {
	font-weight: 400;
}

.publication a {
	color: #555;
	text-decoration:none;
}
.publication a:hover {
	border-bottom: 1px solid #555;
}

.publication {
	background: #FFF url(../images/publication.jpg) no-repeat center center;
	background-size: cover;
}

.publication--container {
	width: 33.333%;
	margin: 5em 0;
	margin-left: calc(66.666% - 1em);
	padding: 1.2%;
}

.publication--container .bouton {
	display: inline;
	text-align: center;
	padding: 10px 20px;
	color: #555;
	border: 1px solid #555;
}

.contact p, .contact a {
	padding: 0;
	line-height: 2;
	color: #111;

	font-family: "minion pro", "minion-pro",serif;

	font-size: 22px;
	text-decoration: none;
}

.contact a:hover {
	border-bottom: 1px solid #111;
}

.contact {
	text-align: center;
}

footer, footer p, footer a {
	font-family: "brandon grotesque", "brandon-grotesque", sans-serif;
}

footer p {
	padding: 1em 1.5%;

	color: #555;
	font-weight: lighter;
	font-size: 15px;
	text-align: right;
}

footer a {
	text-decoration: none;
	font-weight: lighter;
	color: #555;
}

footer a:hover {
	border-bottom: 1px solid #111;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.galerie img {
	width: 16.66666%;
	float: left;

	transition: .5s all;
	cursor: pointer;
}

.galerie img:hover {
	opacity: .5;
}

.container {
	max-width: 1500px;
	margin: 0 auto;
	background: #FFF;
}


::selection {
	color: #111;
	background: #e7e7e7;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}


b {
	font-size: 14px;
	font-weight: 700;
}

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

	.container {
		background: white;
	}

	section h1 {
		font-size: 20px;
	}

	section p, footer {
		font-size: 16px;
	}

}

@media only screen and (max-width: 1023px) {		/* old : 1080px	*/

	* {
		float: none;
		width: 100%;
	}

	.introduction, .tier, .deux-tiers, .trois-tiers {
		float: none;
		width: 100%;
	}

	.introduction p,
	.tier h1, .deux-tiers h1, .trois-tiers h1,
	.tier h2, .deux-tiers h2, .trois-tiers h2,
	.tier p, .deux-tiers p, .trois-tiers p {
		width: 85%;
		margin: 0 auto;
	}

	.tier h1, .deux-tiers h1, .trois-tiers h1,
	.tier h2, .deux-tiers h2, .trois-tiers h2,
	.tier p, .deux-tiers p, .trois-tiers p {
		max-width: 480px;	
	}

	.base {
		background: white;
	}

	.section--text {
		padding: 7em 0;
	}

	.publication--container {
		width: 90%;
		margin: 0 auto;

		padding: 10px;

		position: relative;
	}
    
    .publication p:nth-child(2) {
        display: none; 
    }
    
    .publication p:nth-child(3) {
        text-align: right;
        margin-top: 2em;
        margin-bottom: 2em;
    }

	.publication--container h2 {
		padding-bottom: 50px;
	}

	.container {
		background: white;
	}

	body {
		background: white;
	}

	#galerie-ul {
		width: 100%;
		display: block;
	}

	.galerie img {
		width: 33.333%;
	}

	footer p {
		width: 90%;
	}
	.toggle .pmid {
		text-align: center;
	}
    header h1 {
        padding-left: 0;
	}
    
    #chapitre-3 {
        padding-bottom: 0;
    }
    
    .fil:first-child {
	    margin-top: 7em;
    }
    .fil:last-child {
        margin-bottom: 7em;
    }

}

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

	header h1 {
		font-size: 50px;
		width: 100%;
		margin: 0 auto;
        padding-left: 0;
		text-align: center;
		line-height: 70px;
	}
    
    header img {
        width: 20%;
        
    }
    
    video {
        display: none;
    }
    

	.galerie img {
		width: 50%;
	}
    
    .button:hover, .bouton-gabarit:hover {
	   opacity: 1;
        transition: none;
    }
    
    
    
    

}