@charset "utf-8";
/* CSS Document */


/**************************************************
	RESET ERIC MEYER
**************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* Fin RESET Meyer*/

/**************************************************
	GLOBAL STYLES
**************************************************/

@font-face {
 font-family: "OpenSansReg";
 src: url('../fonts/OpenSans/opensans-regular-webfont.eot');
 src: url('../fonts/OpenSans/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/opensans-regular-webfont.woff') format('woff'), url('../fonts/OpenSans/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/OpenSans/opensans-regular-webfont.svg#open_sans_condensedbold') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "OpenSansItalic";
 src: url('../fonts/OpenSans/opensans-italic-webfont.eot');
 src: url('../fonts/OpenSans/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/opensans-italic-webfont.woff') format('woff'), url('../fonts/OpenSans/opensans-italic-webfont.ttf') format('truetype'), url('../fonts/OpenSans/opensans-italic-webfont.svg#open_sans_condensedbold') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "OpenSansSemiBold";
 src: url('../fonts/OpenSans/opensans-semibold-webfont.eot');
 src: url('../fonts/OpenSans/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/opensans-semibold-webfont.woff') format('woff'), url('../fonts/OpenSans/opensans-semibold-webfont.ttf') format('truetype'), url('../fonts/OpenSans/opensans-semibold-webfont.svg#open_sans_condensedbold') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "OpenSansBold";
 src: url('../fonts/OpenSans/opensans-bold-webfont.eot');
 src: url('../fonts/OpenSans/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/opensans-bold-webfont.woff') format('woff'), url('../fonts/OpenSans/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/OpenSans/opensans-bold-webfont.svg#open_sans_condensedbold') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "OpenSansCondBold";
 src: url('../fonts/OpenSansCond/OpenSans-CondBold-webfont.eot');
 src: url('../fonts/OpenSansCond/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSansCond/OpenSans-CondBold-webfont.woff') format('woff'), url('../fonts/OpenSansCond/OpenSans-CondBold-webfont.ttf') format('truetype'), url('../fonts/OpenSansCond/OpenSans-CondBold-webfont.svg#open_sans_condensedbold') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "OpenSansCondLight";
 src: url('../fonts/OpenSansCond/OpenSans-CondLight-webfont.eot');
 src: url('../fonts/OpenSansCond/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSansCond/OpenSans-CondLight-webfont.woff') format('woff'), url('../fonts/OpenSansCond/OpenSans-CondLight-webfont.ttf') format('truetype'), url('../fonts/OpenSansCond/OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
 font-weight: normal;
 font-style: normal;
}
h1, h2, h3 {
 font-weight: normal\9;
}
html {
 position: relative;
}
body {
 font-family: OpenSansReg;
 position: relative;
 color: #666;
 font-size: 1em;
}
header#masthead, nav, section, footer {
 width: 100%;
}
section, footer {
 padding: 2% 0 4% 0;
 float: left;
}
section {
 position: relative;
}
.wrapper {
 width: 1000px;
 margin: 0 auto;
}
nav.menu, footer {
 background: #000;
}
a {
 color: #000;
 text-decoration: none;
}
section.bleu {
 background: #e4eff8;
}
section.slogan {
	width:80%;
	padding:0.5% 10% 0 10%;
	text-align:center;
	}
section.slogan h1 {
	 font-family:OpenSansCondBold;
	font-size:1.4em;
	line-height:1.25em;
	color:#009fe3;
	}

p.breakingnews {
	font-size:0.8em;
	padding:0.5em 0 1em 0;
	}	
p.breakingnews a, p.breakingnews span {
	color:#fff;
	display:inline-block;
	padding:0.5em;
	}
p.breakingnews span {
	
	background:#ec008c;

	}	
p.breakingnews a {
	background:#009fe3;
	
	}	
p.breakingnews a:hover {
background:#ccc;
	}	
	
section.recyclum p.cta {
	font-size:1.5em; text-align:center;
	clear:both;
		}
		
section.recyclum p.cta a {
	background:none; border:solid 1px #ec008c; padding:0.75em; font-size:0.9em; margin-top:1em;
		}			
section.recyclum p.cta a:hover {
border-color:#666;
		}	
section.recyclum img {
	margin-bottom:2em;
	}	
	
		
	div.message {
	background:#ec008c;
	text-align:center;
	width:100%;
	font-size:0.8em;
	padding:1em 0;
	margin:0;
	color:#fff
		}	
/*
Header
*/
header#masthead div.wrapper {
 font-family: OpenSansCondLight;
 position:relative;
}
header#masthead a.logo, header#masthead a.logo img, header#masthead h1 {
display:inline-block;
vertical-align: middle;
}
header#masthead a.logo img {
	margin-right:15px;
}
header#masthead h1 {
	margin:0.2em;
}
ul.langue, ul.langue li, ul.langue li a {
	display: inline-block;

}

ul.langue li a {
	font-family: "OpenSansSemiBold";
	font-size: 0.6em;
	color:#666;
	text-transform: uppercase;
	letter-spacing:0.02em;
}
ul.langue li a:hover {
	color:#ccc;
}

ul.langue {
position:absolute;
top:0;
right:120px;
}
ul.langue li {
padding: 0.6em;
border-right: solid 1px #666;
}
ul.langue li:last-child {
border-right:none;
}
ul.langue li a.lang-active {
color:#00bfe5;

cursor:default;
}

/*
footer
*/
footer {
 clear: both;
}
footer .wrapper {
 text-align: center;
}
footer li {
 display: inline;
 margin: 0 2%;
}
footer li img {
 height: 100px;
 width: auto
}
footer ul.labo li img {
 height: 60px;
 width: auto
}
footer h1 {
 font-size: 1.4em;
 margin: 5% 0 1% 0;
 text-align: left;
 border-top: dotted 1px #ccc;
 color: #ddd
}
/**************************************************
NAVIGATION STYLES
**************************************************/

/*
Main menu
*/
nav.menu {
 font-family: OpenSansSemiBold;
}
nav.menu .wrapper {
 position: relative;
 text-align: center;
}
nav.menu li {
 display: inline;
 line-height: 2em;
 border-right: solid 1px #ccc;
 padding: 0.25em 1em;
 font-size: 0.7em;
}
nav.menu li:first-child {
 border-left: solid 1px #ccc;
}
nav.menu li a {
 color: #fff;
 text-transform:uppercase;
}
nav.menu li a:hover {
 color: #666;
}
.index nav.menu li a.index, .projet nav.menu li a.projet, .oeuvre nav.menu li a.oeuvre {
 color: #00d5ff;
}
/*
Footer menu
*/
footer nav.menu {
 margin-top: 10%;
}
footer nav.menu li:first-child {
 border-left: none;
}
footer nav.menu li:last-child {
 border-right: none;
}
footer nav.menu li {
 margin: 0;
 padding: 0.25em 2.5em;
}
/*
Navigation arrows
*/
a.arrow {
 position: fixed;
 top: 50%;
 z-index: 100;
 display: block;
 padding: 1%;
 background: #000;

}
a.arrow.left {
 left: 0;
}
a.arrow.right {
 right: 0
}
a.arrow:hover, a.up:hover {
 opacity: 0.5;
}
a.arrow img {
 height: auto;
 width: 20px;
}
a.up {
 position:fixed;
 right: 10px;
 bottom:10px;
 z-index: 100;
 display: block;
 padding: 0.5%;
 background: #000;
 opacity: 0.5;
}
a.up img {
width:25px;
height: 20px
}
/*
Intrapage nav
*/
nav.navInt {
 width: 100%;
 text-align: center;
}
nav.navInt ul, nav.navInt li {
 display: inline;
}
nav.navInt ul {
 margin: 0;
}
nav.navInt li a {
 padding: 0.4em 1.2em;
 border: solid 1px #999;
 background-color: #000;
 color: #fff;
}
nav.navInt li a:hover {
 background: #999;
}
/*
encres
*/
.content a.encre {
 background: transparent;
 color: #000;
 padding-left: 1.2em;
 padding-bottom: -0.2em;
 position: absolute;
 top: 10px;
 right: 0;
}
.content a.encre.top {
 background: url(../picts/topArrow.png) no-repeat center left;
}


/**************************************************
	CONTENT STYLES
**************************************************/

.columns {
 margin-top: 4%;
 float: left;
}
.col {
 width: 45%;
}
.col.left {
 float: left;
}
.col.right {
 float: right;
}
h1, h2 {
 font-family: OpenSansCondLight;
 line-height: 1em;
 margin-bottom: 0.5em;
 color: #000;
}
h1 {
 font-size: 3em;
}
h2 {
 font-size: 2em;
}
h3 {
 font-family: OpenSansSemiBold;
 color: #666;
 margin: 1.5em 0 0.5em 0;
 line-height: 1.2em;
}
h3 span {
 font-family: OpenSansReg;
}

article h1 {
	padding-top:0.5em;
}




.content p, .content li {
 color: #333;
 margin: 0.8em 0;
 font-size: 1em;
 line-height: 1.5em;
}
.content ul {
 margin: 0.8em 2.4em;
}
.content li {
 margin: 0;
list-style-image: url(../picts/liDash.png);
}


}
.content.fiche .col {
padding-top:20% !important;
}
.content i, .content em {
 font-family: OpenSansItalic;
}
.content b, .content strong {
 font-family: OpenSansSemiBold;
}
.content .notes {
 font-family: OpenSansBold;
 font-size: 0.8em;
}
.content .notes p {
 margin: 0;
}
p.chapo {
 font-family: OpenSansBold;
 color: #000;
 margin-bottom: 2.5%;
}

p.chapo a {
 font-family: OpenSansBold;
 color: #000;

}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box {
 position: relative;
 background: #e4eff8;
 float: left;
 padding: 2%;
 margin-bottom: 5%;
 width: 96%;
}

.box .videowrapper {
 position: relative;
 padding-bottom: 56.25%;/* 16:9 */
 padding-top: 25px;
 height: 0;*
}

.box .videowrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 margin-bottom: 0;

}


section.bleu .box {
 background: #fff;
}
.box img {
 float: left;
 margin: 0 2% 2% 0;
}
.box.definitions {
 padding: 10%;
 width: 80%;
}
.definitions p, .definitions h3 {
 font-size: 0.85em;
 color: #333;
}
.box audio, .box video {
 width: 100%;
}
article.fiche h1 div {
 font-size: 0.6em;
 line-height: 1em;

}
.content img {
 width: 100%;
 height: auto;
}
.box.instagram {
 margin-top: 5%;
}
.box.instagram a {
 font-size: 0.95em;
}
.box.instagram h3 {
 margin: 0;
 font-size: 1.5em
}
/*
Accueil
*/
article.autrePage {
 margin-top: 2.5%;
}
section.une {
 background-color: #000;
min-height: 70vh;
background: url(../../img/bg.jpg) no-repeat top center;
background-size: cover;
 font-family: "OpenSansCondBold";
/* height:600px\9;*/
padding:0;
}
section.une iframe, section.une object {
 width: 900px;
 height: 500px;
 margin-bottom: 100px;
 /*display:none\9;*/
}
.visiterPlatonium ul {
 margin: 0;
}
.visiterPlatonium li {
 vertical-align: top;
 width: 47%;
 margin: 0 1%;
 display: inline-block;
 padding: 0;
 list-style-image: none\9;
 width: 46.5%\9;
 display: block\9;
 float: left\9;
}
.visiterPlatonium li a {
 font-size: 0.8em;
 color: #fff;
 letter-spacing: 0.05em;
 padding: 0;
 float: none;
 background: none;
 text-align: center;
 color: #000;
 font-family: "OpenSansCondBold";
}
.visiterPlatonium li a:hover {
 background: none;
}
.visiterPlatonium li a:hover img {
 opacity: 0.5;
}
.visiterPlatonium li img {
 width: 100% !important;
}

.box.ericMichel  {
margin-top:2em;
float: none;
}

.box.ericMichel img {
 width: 30%;
 max-width:120px;
 margin: 1% 2%;
}


.ericMichel h2, .ericMichel h3 {
 margin: 0;
 padding: 0;
 line-height: 1.2em;
}



.index .visiterPlatonium {
text-align:center;
}
.index .visiterPlatonium h2 {
text-align:left;
}

.index .visiterPlatonium a {
color:#000;
text-decoration:none;
 font-family: OpenSansSemiBold;
 font-size:0.8em;
}
.index .visiterPlatonium li {
padding-bottom:2%;}

/*
autrePage : Oeuvre / Projet
*/
.content.autrePage section {
 padding: 3% 0;
}
.content a, div.button a {
 font-family: OpenSansSemiBold;
 display: inline-block;
 background: #00bfe5;
 padding:0.25em 1em;
 font-size: 0.75em;
 line-height: 1.5em;
 border:solid 1px #ccc;
 color:#fff;
}
.content a:hover, div.button a:hover  {
 background: #fff;
 color:#333;
}
.content a.ImgLink {
 display: block;
 background: none;
 padding: 0;
 border:none;
}

div.button {
text-align: center;
padding: 2em 0;
}
div.button a {
padding: 1em 3em;
font-size:1.1em;
text-transform: uppercase;
}


.autrePage .box {
 margin-bottom: 0;
 width: 100%;
 padding: 0;
}
.oeuvre .installations div {
 clear: both;
}
.oeuvre .installations a.ImgLink {
 width: 30%;
 height: auto;
 float: left;
 margin: 0 2.5% 2.5% 0;
}
.oeuvre section.atrium, .visite {
 background : #fff url(../../img/bg-atrium.jpg) no-repeat center bottom;
 background-size: cover;
 margin-top: 2.5%;
}

.visite h1  {
margin-bottom:1.5em;
}

.oeuvre .atrium h2, .oeuvre .atrium p, .oeuvre .atrium h3, .visite h1, .visite h2, .visite h3 {
 color: #ccc;
}
.oeuvre .atrium img, .visite img {
 width: 100%;
 height: auto;
}
.oeuvre .atrium ul, .visite ul {
 margin: 0;
 padding-top:5%;
 text-align:center;
}
.oeuvre .atrium li, .visite li {
 width: 19%;
 height: 12em;
 margin: 1% ;
 display:inline-block;
 text-align: center;
 list-style-image: none;
 vertical-align: top;
}
.oeuvre .atrium li a, .visite li a {
 padding: 0;
 background: none;
 line-height: 1em;
 font-size: 0.85em;
 text-align:center;
 border:none;
}
.oeuvre .atrium li a:hover,  .visite li a:hover {
	opacity:0.5;
}

.oeuvre .atrium li a h3, .visite li a h3 {
 margin: 0;
 padding-top: 0.3em;
}
#laboratoires .gp-titre, #partenaires .gp-titre {
 margin-top: 6%;
}
.projet .gp-titre p strong {
 margin-top: 0;
 color: #666;
}
#production ul {
 margin-left: 110px;
}
.fiche li {
list-style:none;
}
.fiche ul {
margin:0;
}

article.credits {
 padding-bottom: 5%;
}
article.credits h2 {
 margin-top: 1.25em;
}



/*
Images / Legendes
*/
section.plusLoin {
margin-bottom:0;
padding-bottom:5%;
 }


figure {
 background: #e4eff8;
 }
 
figcaption {
 margin:0 ;
 padding: 1%;
 font-size:0.85em;
 line-height:1.5em;
 font-family: "OpenSansSemiBold";
 color:#333;
 }
figcaption span {
  font-family: "OpenSansReg";
  display:block;
}



.fiche .box, .fiche .nobox {
 margin-top:5%;
 }

.fiche figure {
 margin-bottom:3%;
}

.socialBoxPasMobile {
	position: fixed;right: 8px; top: 4px;z-index: 100;
}
.socialBoxMobile {
	position: fixed;right: 0px; top: 0px;z-index: 100;background: #000;
	display: none;     overflow: hidden;
}
.socialBoxPasMobile .ico {
	display: inline-block;width: 22px;
}
.socialBoxPasMobile .text {
	text-align: center;
	font-size: 0.8em;
	display: block;width: 100%
}
.socialBoxMobile .social:hover .ico, .socialBoxMobile .social.hover .ico {
	height: 32px; margin-bottom: 10px; opacity: 1; transition: 1s
}
.socialBoxMobile .ico {
	height: 0px; opacity: 0
}
.socialBoxMobile .ico img {
	transition: .6s;
	width: 26px;
}
.socialBoxMobile .ico img:hover, .socialBoxPasMobile .ico img:hover {
	opacity: .5
}
.socialBoxMobile .ico.share {
	height: 28px; opacity: 1; cursor: pointer;
}
.socialBoxMobile:hover .ico.share, .socialBoxMobile.hover .ico.share {
	opacity: .5
}
.socialBoxMobile .ico.share img {
	margin-top: 1px;
}
.socialBoxMobile .text {
	display: none;
}



/**************************************************
	  SMALL SCREENS STYLES
**************************************************/


@media all and (max-width: 1000px) {
.wrapper {
 width: 90%;
 padding: 0 5%;
}
.col {
 width: 100%;
}
.col.left, .col.right {
 float: none;
}
.col.right {
 margin-top: 5%;
}
#masthead .wrapper, nav.menu .wrapper {
 width: 98%;
 padding: 0 0 0 1%;
}
section.une {
min-height: 50vh;
}
section.une .videowrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
section.une .videowrapper iframe, section.une .videowrapper object {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 margin-bottom: 0;
}
section.une li {
 width: 24%;
}
.visite li {
 width: 30%;
}
.visite-atrium li {
 width: 24%;
}
footer h1 {
 margin-bottom: 5%;
}
.visite h1 {
 font-size: 2em;
}
.visite h2 {
 font-size: 1.6em;
}

.oeuvre .atrium li {
 width: 30%;
 height: 9em;
}
}

@media all and (max-width: 768px) {

nav.menu {
 margin-top: 0;
}
nav.menu .wrapper {
 text-align: center;
}
.visite-atrium li {
 width: 30%;
 height: 13em;
}
section.slogan h1 {
	font-size:0.9em;
	padding:1%
	}

	#masthead h1 {
	    font-size: 2.4em;
	}
	ul.langue {
	    right: 30px;
	}
	ul.langue li {
	    padding: 0.1em 0.5em 0.5em 0.5em;
	}
	.socialBoxPasMobile {
		display: none;
	}
	.socialBoxMobile {
		display: block;
	}


}

@media all and (max-width: 480px) {

body {
 font-size: 0.9em;
}
nav.menu li, nav.navInt li a {
 font-size: 0.6em;
}

ul.langue li a {
	font-size: 0.55em;
}
ul.langue li {
padding: 0.3em;
}
ul.langue {
    right: 26px;
    right: 33px;
}
.socialBoxPasMobile {
	display: none;
}
.socialBoxMobile {
	display: block;
}


header#masthead .logo img {
 height: 50px;
 width: auto;
 margin-right: 10px!important; 
}
header#masthead h1 {
font-size:2em;
}
footer li img {
 height: 55px;
 width: auto
}
footer ul.labo li img {
 height: 35px;
 width: auto
}
footer h1 {
 font-size: 1.2em;
}
.content h1 {
 font-size: 2em;
}
.content h2 {
 font-size: 1.5em;
}
.oeuvre .atrium li {
 width: 48%;
 height: 11em;
 margin: 1%;
}
.oeuvre .visite-atrium li {
 width: 47%;
 height: 12em;
 margin: 1%;
}
a.arrow img {
    width: 10px;
    height: 30px;
}
.projet #production ul {
 margin-left: 0;
}
footer nav.menu li {
 padding: 0.25em 1em;
}
}
.projet h3 {
margin-bottom:-0.5em;
color:#333;
}