@font-face{ font-family:'Faune'; src:url('../font/faune/eot/Faune-Display_Black.eot'); src:url('../font/faune/eot/Faune-Display_Black.eot?#iefix') format('embedded-opentype'), 
url('../font/faune/woff/Faune-Display_Black.woff') format('woff'), 
url('../font/faune/woff2/Faune-Display_Black.woff2') format('woff2'), 
url('../font/faune/ttf/Faune-Display_Black.ttf') format('truetype'), 
url('../font/faune/svg/Faune-Display_Black.svg#svgFontName') format('svg'); font-weight:900; font-style:normal; }
@font-face{ font-family:'Faune'; src:url('../font/faune/eot/Faune-Display_Bold_Italic.eot'); src:url('../font/faune/eot/Faune-Display_Bold_Italic.eot?#iefix') format('embedded-opentype'), 
url('../font/faune/woff/Faune-Display_Bold_Italic.woff') format('woff'), 
url('../font/faune/woff2/Faune-Display_Bold_Italic.woff2') format('woff2'), 
url('../font/faune/ttf/Faune-Display_Bold_Italic.ttf') format('truetype'), 
url('../font/faune/svg/Faune-Display_Bold_Italic.svg#svgFontName') format('svg'); font-weight:bold; font-style:italic; }
@font-face{ font-family:'Faune'; src:url('../font/faune/eot/Faune-Display_Thin.eot'); src:url('../font/faune/eot/Faune-Display_Thin.eot?#iefix') format('embedded-opentype'), 
url('../font/faune/woff/Faune-Display_Thin.woff') format('woff'), 
url('../font/faune/woff2/Faune-Display_Thin.woff2') format('woff2'), 
url('../font/faune/ttf/Faune-Display_Thin.ttf') format('truetype'), 
url('../font/faune/svg/Faune-Display_Thin.svg#svgFontName') format('svg'); font-weight:100; font-style:normal; }
@font-face{ font-family:'Faune'; src:url('../font/faune/eot/Faune-Text_Bold.eot'); src:url('../font/faune/eot/Faune-Text_Bold.eot?#iefix') format('embedded-opentype'), 
url('../font/faune/woff/Faune-Text_Bold.woff') format('woff'), 
url('../font/faune/woff2/Faune-Text_Bold.woff2') format('woff2'), 
url('../font/faune/ttf/Faune-Text_Bold.ttf') format('truetype'), 
url('../font/faune/svg/Faune-Text_Bold.svg#svgFontName') format('svg'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'Faune'; src:url('../font/faune/eot/Faune-Text_Italic.eot'); src:url('../font/faune/eot/Faune-Text_Italic.eot?#iefix') format('embedded-opentype'), 
url('../font/faune/woff/Faune-Text_Italic.woff') format('woff'), 
url('../font/faune/woff2/Faune-Text_Italic.woff2') format('woff2'), 
url('../font/faune/ttf/Faune-Text_Italic.ttf') format('truetype'), 
url('../font/faune/svg/Faune-Text_Italic.svg#svgFontName') format('svg'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'Faune'; src:url('../font/faune/eot/Faune-Text_Regular.eot'); src:url('../font/faune/eot/Faune-Text_Regular.eot?#iefix') format('embedded-opentype'), 
url('../font/faune/woff/Faune-Text_Regular.woff') format('woff'), 
url('../font/faune/woff2/Faune-Text_Regular.woff2') format('woff2'), 
url('../font/faune/ttf/Faune-Text_Regular.ttf') format('truetype'), 
url('../font/faune/svg/Faune-Text_Regular.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; }

/*@font-face{ font-family:'infini_safari'; src:url('../font/infini-gras-safari.woff2') format('woff2'), url('../font/infini-gras-safari.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'infini'; src:url('../font/infini-gras.woff2') format('woff2'), url('../font/infini-gras.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'infini_safari'; src:url('../font/infini-italique-safari.woff2') format('woff2'), url('../font/infini-italique-safari.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'infini'; src:url('../font/infini-italique.woff2') format('woff2'), url('../font/infini-italique.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'infini_picto'; src:url('../font/infini-picto.woff2') format('woff2'), url('../font/infini-picto.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'infini_safari'; src:url('../font/infini-romain-safari.woff2') format('woff2'), url('../font/infini-romain-safari.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'infini'; src:url('../font/infini-romain.woff2') format('woff2'), url('../font/infini-romain.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'print_clearly'; src:url('printbold-webfont.woff2') format('woff2'), url('printbold-webfont.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'print_clearly'; src:url('printclearly-webfont.woff2') format('woff2'), url('printclearly-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'print_clearly'; src:url('printdashed-webfont.woff2') format('woff2'), url('printdashed-webfont.woff') format('woff'); font-weight:normal; font-style:italic; }
*/
@font-face{font-family:'menlo';src:url('../font/menlo-bold-webfont.woff2') format('woff2'), url('../font/menlo-bold-webfont.woff') format('woff');font-weight:bold;font-style:normal;}
@font-face{font-family:'menlo';src:url('../font/menlo-bolditalic-webfont.woff2') format('woff2'), url('../font/menlo-bolditalic-webfont.woff') format('woff');font-weight:bold;font-style:italic;}
@font-face{font-family:'menlo';src:url('../font/menlo-italic-webfont.woff2') format('woff2'), url('../font/menlo-italic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}
@font-face{font-family:'menlo';src:url('../font/menlo-regular-webfont.woff2') format('woff2'), url('../font/menlo-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;}

*, *::before, *::after { margin:0; padding:0; border:0; background-repeat:no-repeat; box-sizing:border-box; }
*:lang(fr), *:lang(fr) * { quotes:"« " " »" "‘" "’"  }
*:lang(en), *:lang(en) * { quotes:"“" "”" "‘" "’" }

html { font-size:0.58vw; }
body { font-family:Verdana,Helvetica,sans-serif; font-size:1.3rem; color:#333; background-color:#000;}

html, body, canvas { position:relative; width:100%; height:100%; overflow:hidden; background-color:#000; }
video, img, audio { width:100%; height:auto;}

p img { width:100%; height:auto;}
a{ background-color:#fff; line-height:1%;}

img.full { height:100%; width:auto; width:auto;}


div#ALL{ position:relative; background-color:#000; width:100vw; height:100vh; }
body#teaser {  background-color:#000; }
body#teaser div#ALL { display:flex; flex-wrap:nowrap; justify-content:center; align-content:center; align-items:center; }
body#teaser video { width:100vw; height:calc(480/1280 * 100vw);  }

button.play
{
	display:none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -5rem 0 0 -5rem;
	width: 10rem;
	height: 10rem;
	cursor: pointer;
	border-radius: 5rem;
	background-color: rgba(255,255,255,0.6);
	box-shadow: 0 0px 2rem rgba(255, 255, 255, 1);
	overflow: hidden;
	background-size: cover;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath fill='%23000' d='M171 100L65 39v122z'/%3E%3C/svg%3E")
}
/*%3Ccircle fill='%23FFF' cx='100' cy='100' r='100'/%3E*/


article { position:relative;}

a{ color:#ccc; background-color:transparent; }
a:hover{ color:#fff; }
.capital { text-transform:uppercase; font-size:4rem; }
.zone-lien {color:#ccc ;text-decoration:none; background-color:transparent;font-weight:normal; }

a.lien-externe {color:#ccc ;text-decoration:none; font-weight:normal; }
a.lien-externe:hover {color:#EF604D; text-decoration:underline; font-weight:normal; }

p.boutoncentre{text-align:center;}
a.bouton-interne:hover {color:#000; font-style:normal; text-decoration:none; background-color:#fff; }
a.bouton-interne{display:inline-block; background-color:transparent;  color: #fff; border:2px solid white; text-decoration:none;   font-size:2rem; font-family:"faune", sans-serif;  font-weight: bold;
    font-style: normal; margin-top:20px; text-transform:uppercase; text-align:center; padding: 15px 10px 15px 10px;}


span.maj { text-transform:uppercase; font-style:normal; background-color:#000; color:#EF604D;padding:5px 7px; font-family:"Verdana", Helvetica,sans-serif; }
span.colore, a.lien-externe span.colore {color:#EF604D;}
span.maj { text-transform:uppercase; font-style:normal; background-color:#000; color:#EF604D;padding:5px 7px; font-family:"Verdana", Helvetica,sans-serif; }
span.cible { font-size:3rem; text-transform:uppercase; font-style:normal; background-color:#000; color:#fff; padding:5px 7px; font-family:"Verdana", Helvetica,sans-serif; }
span.cible:before{content:' \0025C9';}

/*div#GLOBAL { background-color:#999;  }
div#GLOBAL p{ font-family:"menlo","infini",sans-serif; margin:10px 20px; color:#fff; font-size:1.6rem; }
div#GLOBAL p.gris { color:#ccc;}
*/
/*div#GLOBAL h1 { font-size:2rem; color:#fff; font-family:"menlo",Helvetica,sans-serif;  }*/
/*div#GLOBAL h2, div#GLOBAL  h3 { font-size:1.3rem; color:#fff; font-family:"menlo",Helvetica,sans-serif; color:#eee;  }
div#GLOBAL h4{ font-size:3rem; font-family:"menlo",Helvetica,sans-serif; }
div#GLOBAL h5, div#GLOBAL h6{ font-size:1.4rem; margin:0.5rem 0; color:#ccc; font-weight:normal; font-family:"menlo", Helvetica,sans-serif;}
*/
h4.capital { text-transform:uppercase; color:#fff;  font-size:5rem; font-style:normal; font-style:normal; font-family:"menlo", Helvetica,sans-serif;}

/*accroche*/
div#accroche { height:10%; margin:0; padding:0;text-align:left; background-color:#444; z-index:300; font-style:normal;}


h1#slogan { 
	font-family:Helvetica, Arial,sans-serif;  
	position:absolute;
	top:5%;
	left:2%;
	font-size:5rem;
	width:40%;
	height:20%;
	line-height:5rem;
	margin:0; padding:5px 15px 10px 15px;  
	color:#fff; 
	font-weight:bold;
	z-index:1; 
	text-shadow: 5rem 1rem 10rem #fff;
/*	text-shadow: 0.1rem 0.1rem 0.1rem #fff;*/
	/*background : url("titre.svg") no-repeat top left ;*/
}
h1#slogan strong { font-style:italic; font-family:"Faune",sans-serif; display:block;   font-weight:bold; font-size:6rem; margin-bottom:15px;  }
h1#slogan span{ 	
	font-size:3rem;
	font-weight:normal;
	text-align:right;
	/*display:none;*/
}

p#logoestienne ,p#logomarto ,p#logocd92 { 
	position:fixed;  width:16%; height:10%;
	bottom:5%;
	z-index:100;	
	background-repeat: no-repeat;
	background-size: contain, cover;
}
div#logos{ position:relative; z-index:1000; left:0;  bottom:40%; width:100%;}


p#logoestienne { 
	left:20%;		
	background-image  : url("logoestienne.png"); 
	height:10%;
}
p#logocd92 { 
	left:40%;		
	background-image : url("logocite.png");  
}
p#logomarto{ 
	left:60%;	
	background-image  : url("logonuitlecture.png") ; 
}
p#logoestienne span,p#logomarto span,p#logocd92 span{ 
	font-size:6rem; 
	display:none;
}

ol.liste li { /*width:40%; height:20%; padding-left:5%;*/ list-style-type:none; /*display:flex;  flex-wrap:wrap; width:50vw; height:20vw;*/ border:1px solid red;}

div#accroche {   margin:0; padding:0;text-align:center; background-color:#000;}

div.signature{ position:absolute; bottom:2%; width:100%; height:20%; margin:0; padding:0;text-align:center;  z-index:120; }
div.signature h1{ font-family:"faune","menlo",sans-serif;  margin:0; padding:5px 15px 10px 15px; font-size:3rem; color:#fff;   }
div.signature h2{ text-transform:uppercase; padding:25px 7px; font-size:2rem; color:#ccc; font-family:"faune", menlo, Helvetica,sans-serif;  }
div.signature p{ font-family:"faune","menlo",sans-serif; margin:10px 20px; color:#ccc;text-align:right; font-size:1.6rem; }
div.signature span{  color:#fff; }

.colonne {  display:flex; flex-wrap: wrap ; flex-direction: row ; justify-content: center; align-items: stretch;}
.colonne section{flex-wrap: wrap ; max-width:40%;}
.colonne section:nth-of-type(2){ justify-content: flex-end;}
.colonne section:nth-of-type(1) p{ text-align:left; margin-left:15%;}
.colonne section:nth-of-type(2) p{ text-align:right; margin-right:15%;}
.colonne section p {background-color:#000; opacity:0.8;}

.signature.colonne2 { height:25%;  display:flex; flex-wrap: wrap ; flex-direction: row ; justify-content: center; align-items: baseline;}
.colonne2 section{flex-wrap: wrap ; font-style:normal;  }
.colonne2 section:nth-of-type(1) p{ text-align:center; }
.colonne2 section:nth-of-type(2) p{ text-align:center; }

/*CARTEL*/
div.cartel{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; display:none; }
div.cartel div.overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.8; }
div.cartel > section{  position:absolute; top:50%; left:50%; min-width:150px; max-width:90%; transform:translateX(-50%) translateY(-50%);  }
/*div.cartel.on ~ canvas{ filter:blur(30px); }*/

body#teaser2 div.cartel { margin-top:15%; }

div#bloc{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; }
div#bloc > section{  position:absolute; top:25%; left:20%;   max-width:60%; }
div#bloc > section p{  font-size:2.6rem; text-align:center;  font-weight:100;  }
div#bloc > section p span{  font-size:2.8rem; text-align:center;  font-weight:100;  font-style:italic;}

div#bloc > section p strong{  font-weight:normal; }

div#bloc2{ position:fixed; top:0; left:0;   width:100%; height:100%; z-index:10; }
div#bloc2 > section{  position:absolute;  line-height:4rem; top:30%; right:10%; min-width:150px; max-width:50%;}
div#bloc2 section p{ font-size:2.5rem; font-style:normal; font-weight:100; text-align:right;}
div#bloc2 section p strong{ font-size:3rem; font-style:normal;  font-weight:200;  }

div#bloc3{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; }
div#bloc3 > section{  position:absolute; top:35%; left:10%; min-width:150px; max-width:40%; }
div#bloc4 h1, div#bloc3 h1, div#bloc2 h1,  div#bloc h1, div.cartel h1{ margin:20px 20px; text-align:center; font-size:4.0rem; color:#fff; font-family:"faune",Helvetica,sans-serif; font-style: italic;  font-weight: normal; }
div.cartel section h2,
div.cartel section h3,
div.cartel section h4,
div.cartel section h5 { text-align:center; font-family:"faune",sans-serif; font-size:2rem;  font-weight:normal; color:#ccc; font-style:normal; }
div.cartel p {text-align:center; }
div#bloc3 h1 {text-align:left;}
div#bloc4 h1#principal, div#bloc3 h1#principal, div#bloc2 h1#principal, div#bloc h1#principal,div.cartel h1#principal { font-family:"faune",sans-serif; font-style:normal; font-size:4rem;}
div#bloc3 h1#principal, div#bloc2 h1 {text-align:left; }
div#bloc4 h4#principal {text-align:right; }
div#bloc4 p, div#bloc3 p, div#bloc2 p, div#bloc p, div.cartel p{ font-family:"faune",helvetica, "menlo",sans-serif; margin:10px 20px; font-style:normal;  font-size:2rem; color:#fff;}
div#bloc3 p.gris, div#bloc2 p.gris, div#bloc p.gris, div.cartel p.gris { color:#666; font-weight:normal;}
div#bloc3 p.gris a,div#bloc2 p.gris a, div#bloc p.gris a, div.cartel p.gris a{ color:#666; font-weight:10;  
    font-style: normal; }

div#bloc4{ position:fixed; top:0; right:0;   width:20%; height:100%; z-index:10; background-color:#000;}
div#bloc4 > section{  position:absolute;  line-height:4rem; top:10%; right:5%; min-width:20%; max-width:90%; }
div#bloc4 section p{ /*font-family:Helvetica,Verdana,sans-serif;*/font-size:2.5rem; font-weight:100; font-style:normal; text-align:right; color:#fff;}
div#bloc4 section p strong{ font-size:3rem; font-style:normal; font-weight:normal; }




div.cartel h2, div.cartel h3, div.cartel h4
{ 
	margin:0 20px; font-size:1.3rem; color:#fff; font-family:Verdana,Helvetica,sans-serif; font-size:2rem; color:#333;  
}
div.cartel p.bouton { text-align:center;  margin:20px 0;  }
div.cartel p.bouton button{ display:inline-block; font-family:"menlo",sans-serif; font-size:1.8rem; color:#000; background-color:#fff;  font-weight:bold; font-style:normal;  text-transform:uppercase; text-align:center; padding:10px 30px; cursor:pointer;}
div.cartel p.bouton button:hover {color:#000; background-color:#fff; }


*[class*="voile-"]{ color:#fff; }
*[class*="voile-"] > * { position:relative; color:#fff; }
*[class*="voile-"]::before{ position:absolute; content:''; top:0; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.6); }
*.voile-noir::before  { background-color:rgba( 0, 0, 0, 0.6); --wip-tag:'section div'; }