@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:itlic;}
@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;}

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

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:#111; font-style:normal; text-decoration:none; background-color:#fff; }
a.bouton-interne{display:inline-block; background-color:#EF604D;  color: #000;  text-decoration:none;   font-size:1.8rem; font-family:"menlo", sans-serif; font-style:bold;  margin-top:20px; text-transform:uppercase; text-align:center; padding: 15px 10px 12px 10px;}



body.flex{ display:flex; flex-direction:column; width:100vw; height:100vh; overflow:hidden; }
body.flex iframe { flex-grow:1; }
body.flex nav { flex-grow:0; background-color:#eee; font-family:"menlo"; }
body.flex nav ul{ display:flex; width:100%; height:100%; padding:0; margin:0; list-style-type:none; }
body.flex nav ul li{ flex-grow:1; }
body.flex nav ul li a{ display:block; background-color:#555; color:#fff; text-decoration:none; font-weight:normal; font-size:1.6rem; line-height:3rem; text-align:center; }
body.flex nav ul li a:hover{ background-color:#fff; color:#222; cursor:pointer;}
body.flex nav ul li:nth-child(1) a{ background-color:#000; color:#fff;}
body.flex nav ul li:nth-child(1) a:hover{ background-color:#fff; color:#555;}
body.flex nav ul li:nth-child(15) a,
body.flex nav ul li:nth-child(16) a,
body.flex nav ul li:nth-child(17) a{ background-color:#888; color:#555; }
body.flex nav ul li:nth-child(15) a:hover,
body.flex nav ul li:nth-child(16) a:hover,
body.flex nav ul li:nth-child(17) a:hover{ background-color:#000; color:#fff; }

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



div#ALL { background-color:#000;  }
div#ALL p{ font-family:"menlo","infini",sans-serif; margin:10px 20px; color:#fff; font-size:1.6rem; }
div#ALL p.gris { color:#ccc;}

div#ALL h1 { font-size:2rem; color:#fff; font-family:"menlo",Helvetica,sans-serif;  }
div#ALL h2, div#ALL  h3 { font-size:1.3rem; color:#fff; font-family:"menlo",Helvetica,sans-serif; color:#eee;  }
div#ALL h4{ font-size:3rem; 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;}
div#ALL h5, div#ALL h6{ font-size:1.4rem; margin:0.5rem 0; color:#ccc; font-weight:normal; font-family:"menlo", Helvetica,sans-serif;}

/*accroche*/
div#accroche { margin:0; padding:5px ; font-style:normal; font-size:2rem; text-align:center; background-color:#000; color:#fff;  	font-family:"menlo",sans-serif; }


*[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'; } 


/* Portraits*/
ol { list-style-type:decimal; padding-left:1vw; }

ol.casier { list-style-type:none; display:flex; position:relative; margin:0 auto; padding:0; justify-content:space-between; align-items:center; align-content:center; flex-wrap:wrap; width:100vw; }
ol.casier > li { position:relative; overflow:hidden; background-size:100% 100%; background-position:center center; transition:all 0.6s ease-in-out; cursor:pointer; }
ol.casier > li.over,
ol.casier > li:hover { background-size:120% 120%; }

ol.casier > li > div[class*="voile-"]{ position:absolute; top:0; left:-100%; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; padding:2vw; transition:all 0.6s ease-in-out; cursor:pointer; }
ol.casier > li > div[class*="voile-"] > *{ margin:1vh 0; }
ol.casier > li > div[class*="voile-"]::after{ content:'»'; font-family:"infini", "verdana"; font-size:5rem; line-height:0; position:absolute; bottom:2vw; right:2vw; color:#be5432; }

ol.casier.by4{ min-height:45vw; }
ol.casier.by4 > li { width:25vw; height:16vw; }
ol.casier > li.over div,
ol.casier > li:hover div{ left:0; }



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:"menlo","infini",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:"infini", Helvetica,sans-serif;  }
div.signature p{ font-family:"menlo","infini",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; }


@media (max-width:1023px) { html{ font-size:1.2vw; } /*body::before { content:'T 1.2'; }*/ }

@media (max-width:736px ) { html{ font-size:2.0vw; } /*body::before { content:'M 2.0'; }*/ }

@media (max-width:568px ) { html{ font-size:2.2vw; } /*body::before { content:'M 2.2'; }*/ } 

@media (max-width:335px ) { html{ font-size:2.4vw; } /*body::before { content:'M 2.4'; }*/ } 

@media screen and (min-device-width:375px ) and (max-device-width:768px ) and (orientation:landscape)
{
	div#accroche { font-size:0.8rem;}
	#ALL ol.casier > li > div{ display:none; }
}


@media screen and (max-device-width:736px ) and (orientation:portrait), screen and (max-device-width:374px ) and (orientation:landscape),
{
	div#accroche { font-size:1.3rem;}
	#ALL ol.casier { }
	#ALL ol.casier > li { width:100vw; height:72vw; }
	#ALL ol.casier > li.reveal > div{ left:0; }
}