/* Reset
-------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after{margin:0;padding:0;border:0;box-sizing:border-box}
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
*{-moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";}

/* Typeface
-------------------------------------------------- */
@font-face{font-family:'MNKYMarcelMd';src:url(../fonts/MNKYMarcel-Rg.woff2) format("woff2"),url(../fonts/MNKYMarcel-Rg.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}

/* Réglages
-------------------------------------------------- */
img{display:block;width:100%;height:auto}
ul,li{list-style: none}
em{font-style:italic;}
strong{font-weight:bold}
p+p{margin-top:22px}

/* Site
-------------------------------------------------- */
html{width:100%;height:100%}
body{overflow:hidden;width:100%;min-height:100%;background: #000000;color:white;;font-family:'MNKYMarcelMd', 'Helvetica', 'Arial', sans-serif;}
body, h1, h2, h3, h4{line-height:20px;font-size:15px }
body{align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: column nowrap;flex-flow: column nowrap }

/* Headings
-------------------------------------------------- */
h1, h2, h3, h4{font-size:1em;line-height:1.25em;display:inline-block;margin-bottom:0}
h1 a, h2 a, h3 a, h4 a{color:inherit;}

/* Main
-------------------------------------------------- */
main{width:100%;position:absolute;min-height: 100%;top:100%;display: -webkit-flex;display: flex;-webkit-flex-flow: column nowrap;flex-flow: column nowrap;align-items: flex-start;}

/* Liens
-------------------------------------------------- */
a{color:white;text-decoration:none;outline:0}

/* Header
-------------------------------------------------- */
header {transition:margin .5s cubic-bezier(0.65, 0, 0.35, 1);margin-left:0;background: #000000;;z-index: 999;height:56px;position:sticky;top:0;left:0;width:100%;display: -webkit-flex;display: flex;-webkit-flex-flow: column wrap;flex-flow: column wrap;}
header ul{width: 100%;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}
header ul li{display: flex;width:25%;border-right:1px solid;text-align: center;position:relative}
header ul li:after{content:'';height:1px;position:absolute;bottom:0;left:0;width:100%;background:white}
header ul li:nth-child(3){width:calc(25% - 28.5px)}
header ul li:nth-child(4){width:calc(25% - 28.5px)}
header ul li:last-child{width:57px;height:56px;border-right:0;}
header ul li:last-child a img:nth-child(1){display:none}
header ul li:last-child a img:nth-child(2){filter:invert(100%)}
header ul li:last-child:hover a img:nth-child(1){display:inline-block}
header ul li:last-child:hover a img:nth-child(2){display:none}
header ul li a{border-bottom:1px solid white;background:black;color:white;transition: color .25s ease;transition:background  .25s ease;padding:20px;line-height: 1;flex:1}
header ul li a.thetitle{pointer-events: none}
header ul li a:hover{background:white;color:#000000;}
header a{color:white;text-transform: uppercase}
header li.active:after{content:'';height:1px;position:absolute;bottom:0;left:0;width:100%;background:black}
header li.active:hover:after{content:'';height:1px;position:absolute;bottom:0;left:0;width:100%;background:white}
header.active{margin-left:50%}
header li.active.openapropos a{border-bottom:1px solid}

/* Home
-------------------------------------------------- */
.marquee {display:none;z-index:9999;z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;height:56px;width: 100%;line-height:1;border-bottom:1px solid;overflow: hidden;color:white;}
.marquee .js-marquee{padding:20px 0;}
.title {opacity:0;width: 100%;height:100%;filter:invert(100%);position:absolute;top:0;left:0;background-image:url(../images/logo-portequinze.svg);background-position:center;background-repeat:no-repeat;background-size:70%}


/* Switch
-------------------------------------------------- */
body.noirblanc{color:#000;background:#fff}
body.noirblanc header{color:#000;background:#fff}
body.noirblanc header a{color:#000;background:#fff;}
body.noirblanc header a:hover{background:#000;color:#fff}
body.noirblanc a{color:#000}
body.noirblanc section.apropos .logo{filter:invert(0)}
body.noirblanc main section article ul li a:hover{color:#9d00ff}
body.noirblanc main section article ul li a:hover .infos{color:#000}
body.noirblanc header ul li a{border-bottom:1px solid #fff}
body.noirblanc section.apropos .logo img{filter:invert(0)}
body.noirblanc section.apropos div.nav span:nth-child(2):hover{background:#000;color:#fff}
body.noirblanc section.apropos div.nav{background:#fff}
body.noirblanc main section article ul li .infos{color:#000}
body.noirblanc main section article ul li .infos .close{filter:invert(100%)}
body.noirblanc header ul li:last-child a img:nth-child(2){filter:none}
body.noirblanc header ul li:last-child a img:nth-child(1){filter:invert(100%)}

body.noirblanc header li.active:after{content:'';height:1px;position:absolute;bottom:0;left:0;width:100%;background:white}
body.noirblanc header li.active:hover:after{content:'';height:1px;position:absolute;bottom:0;left:0;width:100%;background:black}
body.noirblanc header ul li::after {background: black;}
body.noirblanc main section article ul li a.hover{cursor:pointer;color:#9d00ff}
body.noirblanc section.apropos div a{color:inherit;transition:color .5s ease; }
body.noirblanc section.apropos div a:hover{color:#9d00ff}

body.noirblanc section.apropos div:last-of-type div img{filter:invert(100%)}

section.home{height:100%;position:absolute;width:100%;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: column nowrap;flex-flow: column nowrap}
section.home article{cursor:pointer;position:absolute;top:0;left:0;bottom:0;right:0;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap }
section.home article div{cursor:pointer;width:10%;height:100%;}
section.home article div.back{cursor:pointer;z-index: -1;display:none;background-size:cover;width:auto;position:absolute;top:0;left:0;bottom:0;right:0;}
section.home article div.back.first{display:inline-block}
section.apropos{border-bottom:0;align-items:flex-start;justify-content:flex-start;align-content:flex-start;z-index:3;border-right:1px solid;left:-50%;width:50%;position:fixed;top:0;bottom:0;height:100%;transition:left .5s cubic-bezier(0.65,0,0.35,1);overflow:scroll}
section.apropos.active{position:fixed;left:0}
section.apropos .logo{width:100%;height:480px;display:flex;align-items:center;justify-content:center;padding-top:40px}
section.apropos .logo img{filter:invert(100%);width:auto;height:auto;max-width:100%;max-height:100%}
section.apropos div.nav{position:sticky;z-index: 9;background:#000000;top:0;left:0;width:100%;border-bottom:1px solid;}
section.apropos div.nav span{width:50%;float:left;text-transform: uppercase;text-align:center;padding:20px;line-height: 1;}
section.apropos div.nav span:first-child{border-right:1px solid}
section.apropos div.nav span:nth-child(2){cursor:pointer}
section.apropos div.nav span:nth-child(2):hover{background:white;color:black}
section.apropos div:not(.nav){width:100%;padding:20px;-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;}
section.apropos > div:nth-of-type(2){width:100%;padding-top:calc(20px + 56px);padding-right:60px;padding-left:60px}
section.apropos div:nth-of-type(3){-webkit-column-count:1;-moz-column-count:1;column-count:1;-webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px}
section.apropos div:nth-of-type(4){width:50%}
section.apropos div:nth-of-type(5){width:50%}
section.apropos::-webkit-scrollbar{display:none}
section.apropos{-ms-overflow-style:none;scrollbar-width:none}
section.apropos div:last-of-type{width:100%;align-items:flex-start;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap}
section.apropos div:last-of-type div{position:relative;width:25%;height:12.5vw;display: flex;
    justify-content: center;
    align-items: center;object-fit: contain}
section.apropos div:last-of-type div img{max-width:70px}
section.apropos div a{color:white;transition:color .5s ease; }
section.apropos div a:hover{color:#fff000}

/* Réalisations
-------------------------------------------------- */
main section{left:0;transition:left .5s cubic-bezier(0.65, 0, 0.35, 1);position: relative;height:calc(100% - 56px);width:100%;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}
main section.artistes{top:100%;position:absolute;width:100%;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}
main section.realisations{height: 100%;top:0;position:absolute;width:100%;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}


main section:last-child{border-bottom: 0}
main.active section{left:50%}
main section article{width:50%;height:100%;overflow: scroll}
main section article:first-of-type{border-right:1px solid}
main section article ul{position: absolute;
width: 100%;
height: calc(100% - 57px);
overflow: scroll;
padding: 20px;
top: 56px;
bottom: 0;overflow-x: hidden;}
main section.artistes article ul{position:relative;height:auto;top:0;width: 200%;}
main section.artistes article:first-of-type {
  border-right: 1px solid;
  padding-bottom: 20px;overflow-x: hidden;
}
main section.realisations article {padding-top:56px}

main section article ul li{width:100%;text-transform:uppercase;align-items:flex-start;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap}
main section article ul li a{width:100%;text-transform:uppercase;color:white;transition:color .5s ease;align-items:flex-start;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap}
main section article ul li a.hover{cursor:pointer;color:#fff000}
main section article ul li a:hover{cursor:pointer;color:#fff000}
main section article ul li a span:nth-child(2){position:absolute;width:50%;text-align:center}
main section article.liste ul li a span:nth-child(2){position:absolute;width:calc(50% - 12em);left:0;text-align:center;margin-left:6em;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
main section article ul li a span:nth-child(1){font-size:9px;line-height:22px}
main section article ul li a span:nth-child(3){position:absolute;right:calc(50% - 8px);font-size:9px;line-height:22px;padding-right:20px}

main section article.artistes ul{padding: 0;align-items: flex-start;display: -webkit-flex;display: flex;-webkit-flex-flow: column wrap;flex-flow: column wrap}
main section article.artistes ul:first-child{padding-top:20px}
main section article.artistes ul li > a > span:first-child{visibility:hidden}
main section article.artistes ul li:first-child a span:first-child{visibility:visible}

main section article.artistes ul li a span {padding:0 20px;}
main section article.artistes ul li a div span {text-transform: none;text-align: left;margin: 20px 0;border-top: 1px solid;border-bottom: 1px solid;}
main section article ul li .infos{color:white;position:relative}
main section article ul li .infos{width:calc(50% + 10px);align-items: flex-start;display:none}
main section article ul li .infos div{margin: 1em 0;border-top: 1px solid;border-bottom: 1px solid;width:100%;align-items: initial;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}
main section article ul li .infos div span{padding:20px;width:50%;line-height:20px;font-size:15px;float:left;display:inline-block;}
main section article ul li .infos div span:first-child{text-transform: none;border-right:1px solid}
main section article ul li .infos div span:nth-child(2){text-transform: none;position:relative;text-align:left}
main section article ul li .infos div span:nth-child(2) a{display: inline;text-transform: none}
main section article ul li .infos .close{cursor:pointer;padding:0;width:15px;height:15px;position:absolute;top:39px;right:20px;display:block}
.close:before,.close:after{position:absolute;left:7px;content:' ';height:15px;width:1px;background-color:#fff}
.close:before{transform:rotate(45deg)}
.close:after{transform:rotate(-45deg)}
main section article ul li.letter{padding:0 20px;font-size:9px;line-height:22px}
main section article .container{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}
main section article .container .vignette{border-bottom:1px solid;display: flex;height: calc(50% + 1px);;background-size:cover;background-position:center;filter:grayscale(100%);transition: filter .25s ease}
main section article .container a:nth-last-child(2){border-bottom:0;height:50%}
main section article .container .vignette.active{filter:grayscale(0%)}
main section article .container .vignette:hover{cursor:pointer;filter:grayscale(0%)}

main section article::-webkit-scrollbar {display: none;}
main section article {-ms-overflow-style: none;scrollbar-width: none;}
main section article .container::-webkit-scrollbar {display: none;}
main section article .container {-ms-overflow-style: none;scrollbar-width: none;}
body::-webkit-scrollbar {display: none;}
body {-ms-overflow-style: none;scrollbar-width: none;}
div.projet .containerprojet::-webkit-scrollbar {display: none;}
div.projet .containerprojet {-ms-overflow-style: none;scrollbar-width: none;}
div.projet .containerprojet .superprojet::-webkit-scrollbar {display: none;}
div.projet .containerprojet .superprojet {-ms-overflow-style: none;scrollbar-width: none;}

/* Projet
-------------------------------------------------- */
div.projet{height: calc(100% + 6px);width:100%;position: absolute;top: 100%;display:none}
div.projet.artistes{top: 200%;display:none}

div.projet header{min-width:100%;align-items: initial;display: -webkit-flex;display: flex;-webkit-flex-flow: row nowrap;flex-flow: row nowrap}
div.projet header ul li:first-child{width:50%}
div.projet header ul li:nth-child(2){width:calc(25% - 28.5px)}
div.projet header ul li:nth-child(3){width:calc(25% - 28.5px)}
div.projet .containerprojet{overflow:hidden;display:inline-block;min-width:100%;height:calc(100% - 63px);display: -webkit-flex;display: flex;-webkit-flex-flow: row nowrap;flex-flow: row nowrap}
div.projet .containerprojet .superprojet{overflow:scroll;display:inline-block;min-width:100%;height:100%;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}
div.projet .containerprojet .superprojet .titreprojet{padding:17px;-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;letter-spacing:-.075em;  -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";-ms-hyphens:auto;-moz-hyphens:auto;display:block;overflow:hidden;width:100%;font-size:207px;text-transform:uppercase;line-height:185px;border-bottom:1px solid}
div.projet .containerprojet .superprojet div article{width:50%}
div.projet .containerprojet .superprojet div article:nth-child(2){width:50%}

div.projet .containerprojet .superprojet div article:nth-of-type(1){overflow:hidden;border-right:1px solid}
div.projet .containerprojet .superprojet div article img{border-bottom:1px solid;width:100%}
div.projet .containerprojet .superprojet div article img:last-child{border-bottom:0}

div.projet .containerprojet .superprojet div{display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;width:100%}

/*div.projet .containerprojet .superprojet div:nth-child(2){height: 100%;
}*/
div.projet .containerprojet .superprojet div.scroll{}
div.projet .containerprojet .superprojet div.scroll::-webkit-scrollbar {display: none;}
div.projet .containerprojet .superprojet div.scroll {-ms-overflow-style: none;scrollbar-width: none;}
div.projet .containerprojet .superprojet div article:nth-of-type(1)::-webkit-scrollbar {display: none;}
div.projet .containerprojet .superprojet div article:nth-of-type(1){-ms-overflow-style: none;scrollbar-width: none;}
div.projet .containerprojet .superprojet div.videocontainer{height: calc(100% + 1px);
outline: 1px solid;position:relative;width:100%;overflow:hidden}
div.projet .containerprojet .superprojet article:nth-of-type(2) div{padding:20px;border-bottom:1px solid;display:inline-block}
div.projet .containerprojet .superprojet article:nth-of-type(2) div.last{display:flex;align-items:flex-end;padding:0;border:0;}
div.projet .containerprojet .superprojet article:nth-of-type(2) div:last-child span{padding:20px;width:100%;text-transform:uppercase;cursor:pointer}
div.projet .containerprojet .superprojet article:nth-of-type(2) div.cartel{display:-webkit-flex;display:flex;-webkit-flex-flow:column nowrap;flex-flow:column nowrap;padding:0;position:sticky;top:0;left:0;height:calc(100vh - 56px);border:0}
div.projet .containerprojet .superprojet article:nth-of-type(2) div:first-child{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;text-align:justify;text-align-last:left;-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;}



/* Lazyload
-------------------------------------------------- */
.lazyload,.lazyloading{opacity:0}
.lazyloaded{opacity:1;transition:opacity 300ms}




nav{display:none}
.minicaption{display:none}

.plyr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}
main section article ul li .infos.artistes{color:white;position:relative;display:none}
.infosartistes{display:none}

a.draft{pointer-events:none}

/*--------------------------------------
-   MEDIA QUERIES
---------------------------------------*/
@media only screen and (max-width:680px){
    header ul li,header ul li:nth-child(3),header ul li:nth-child(4){display:flex;border-right:1px solid;width:50%}
    header ul li:last-child{display:none}
    nav{display:inline-block;position:absolute;top:112px;width:100%;text-align:center;padding:20px;z-index: 99;
background: black;}
   main section.artistes article:first-of-type {
  border-right:0
 
}
    .artistes nav{top:0}
    nav span{width: 50%;
        display: inline-block;
        float: left;font-size:9px;line-height:22px;text-transform:uppercase;cursor:pointer;padding:0 10px}
    nav span:first-of-type{text-align:right}
    nav span:nth-of-type(2){text-align:left}
    nav span.active{line-height:20px;font-size:15px}
    main section article ul li a span:nth-child(3){display:none}
    main section article.liste ul li a span:nth-child(2){width:calc(100% - 82px);text-align:left;margin-left:62px}
    div.projet header ul li:first-child{display:none}
    div.projet header ul li:nth-child(2){width:50%}
    div.projet header ul li:nth-child(3){width:50%;border-right:1px solid}
    div.projet .containerprojet .superprojet .titreprojet{font-size:60px;line-height:60px}
    div.projet header{height:56px}
    main section article.liste{display:none}
    div.projet .containerprojet .superprojet div article{width:100%}
    div.projet .containerprojet .superprojet div article:nth-child(2){order:-1}
    header ul li:nth-child(1){order:3}
    header ul li:nth-child(2){order:4;border-right:0}
    header ul li:nth-child(3){order:1;border-right:0}
    header ul li:nth-child(4){order:0}
    header{height:calc(56px * 2)}
    main section.realisations article{padding-top:calc(87px * 2)}
    main section article{width:100%;padding-top:57px}
    section.apropos{width:100%;left:-100%}
    header.active{margin-left:100%}
    main.active section{left:100%}
    section.apropos .logo{height:232px}
    section.apropos div:nth-of-type(3){-webkit-column-count:1;-moz-column-count:1;column-count:1}
    section.apropos div:last-of-type a{position:relative;width:25%;height:25vw}
    div.projet .containerprojet .superprojet article:nth-of-type(2) div.cartel{height:auto}
    div.projet .containerprojet .superprojet article:nth-of-type(2) div:first-child{-webkit-column-count:1;-moz-column-count:1;column-count:1}
    main section.realisations article{border-right:0}
    main section article:first-child{border-right:0}
    main section{height:calc(100% - 112px)}
    main section article ul li .infos div{display:-webkit-flex;display:flex;-webkit-flex-flow:column wrap;flex-flow:column wrap}
    main section article ul li .infos div span{padding:20px;width:100%}
    main section article ul li .infos div span:first-child{border-right:0}
    main section article ul li .infos div span:nth-child(2){border-top:1px solid}
    section.apropos div:nth-of-type(4),section.apropos div:nth-of-type(5){width:100%}
    div.projet .containerprojet .superprojet div article:nth-of-type(1){height:auto}
    .minicaption{border-bottom: 1px solid;display:block;background:#000;text-transform:uppercase;padding:20px 20px 17px 20px}
    .minicaption div {display:table}
    .minicaption div span{display:table-cell}

    .minicaption div span.date{font-size:9px;line-height:22px;padding-right:20px;}



    div.projet .containerprojet .superprojet div article:nth-of-type(1) {
        border-right: 0;
    }
    section.home article div.back {
        z-index:-1;
        display:none
    }
    section.apropos div:nth-of-type(2) {
        padding-top: calc(20px + 20px);
    }
    .suivantlink b{display:none}
    main section article ul li .infos .close {
        display:none
    }
    header ul li a:hover{background:black;color:#fff;}
    main section article .container .vignette {
        border-bottom: 0;
        filter: grayscale(0);
    }
    main section article:first-of-type {
        border-right:0;
    }
    section.apropos {border-right:0}
    section.apropos div:nth-of-type(2) {
        width: 100%;
        padding-top: calc(20px + 56px);
        padding-right: 40px;
        padding-left: 40px;
    }
    section.apropos div:not(.nav) {
        width: 100%;
        padding: 20px 20px 0;}
    
    
    main > *{overflow:hidden}
    section.apropos div.nav span:nth-child(2):hover {
  background: black;
  color: white;
}
    
    
    
main section article .container{background:black}
.infosartistes{width:100%;align-items: flex-start;display:none;background:black}
.infosartistes div{border-bottom: 1px solid;width:100%;align-items: initial;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap}
.infosartistes div span{padding:20px;width:50%;line-height:17px;font-size:15px;float:left;display:inline-block;}
.infosartistes div span:first-child{text-transform: none;border-right:1px solid}
.infosartistes div span:nth-child(2){text-transform: none;position:relative;text-align:left}
.infosartistes div span:nth-child(2) a{text-transform: none}
.infosartistes div span.close{display: none}

    
    div.projet .containerprojet .superprojet div article:nth-child(2) {
  width: 100%;
}
    
main section.artistes article .container > a:nth-last-child(2) {

    border-bottom: 1px solid white;
    height:auto;

}
 main section.realisations article .container > a:nth-last-child(2) {

    border-bottom:0;
    height:50%;

}   
    header li.active::after {
  content: '';
height: 5px;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
background: black;
}
    .plyr__controls .plyr__control[data-plyr="play"]:after {
content: 'PLAY';
position: absolute;
        top: -8px;}
   header li.active:hover::after {
  content: '';
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: black;
}
    
  
    main section.artistes {outline:3px solid black}
   .back.lazyload{opacity:1}
   .back.lazyloaded{opacity:1;transition: none}
    
    
    main section article ul li {
  width: 100%;
  text-transform: uppercase;
  align-items: flex-start;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  position: relative;
}
main section.realisations article.liste ul {
  padding: 20px;
    padding-top: 20px;
  padding-top: 0;
  width: 100%;
  align-items: flex-start;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column nowrap;
  height: auto;
  overflow: scroll;
  padding-top: 121px;
}
    main section.realisations article:first-of-type {
  border-right: 0;
  overflow: scroll;
}
    
    .artistes nav {
  top: 0;background: black;
z-index: 9999;
  position: sticky;
}main section.artistes {
  
  overflow-y: scroll;
}
    main section article {
  width: 100%;
  padding-top: 0;
}
    main section article.artistes ul:first-child {
  padding-top: 0;
}
    header, nav {
  overflow:hidden
}
    main section article .container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}
    main section.artistes article .container {margin-top: 62px;
}
    html {  
    position: relative;
    overflow: hidden;
    height: 100%;
}

body {
    
    overflow: scroll;
    height: 100%;
}
    nav, header, .home, section.home article div{overflow:hidden}
    section.home article, section.home{touch-action:none}
    *{touch-action:pan-y}
    .container{touch-action:pan-y}
   nav, header, .home, section.home article div, section.home article, .title, section.home{touch-action:none}
body {
   height:300%;
    overflow: hidden!important
}
   body, html{overflow: hidden!important}
  section.home, section.home > * {
     touch-action:none;
    overflow: hidden!important
} 
   main section {
  height: calc(50% - 112px);
}
  
   section.home article{
z-index: 9999;background:black}
   
  .artistes nav {
  top: 0;
  background: black;
  z-index: 9999;
  position: absolute;
}
   header{position:fixed}
   
   main {
  width: 100%;
  position: absolute;
      min-height: 200%;}
   main section.realisations {
      height: 50%;}
   div.projet {
      height: calc(50% - 62px);}
   main section.artistes {
      top: calc(50% + 112px);z-index: 9;}
   div.projet {height: calc(50% - -7px);
width: 100%;
position: absolute;
top: calc(50% + 163px);
display: none;
margin-top: 117px;
z-index: 99999;
background: black;
}
   div.projet .containerprojet {
overflow: hidden;
min-width: 100%;
height: calc(100% - 63px);
top: 56px;
position: relative;
}
   div.projet.artistes {
top: 125%;
display: none;
}
   main section.artistes article:first-of-type {
  border-right: 1px solid;
  padding-bottom: 20px;
  height: calc(100% - 62px);
  margin-top: 62px;
}
   main section.artistes article:first-of-type {
      border-right: 0}
   main section.artistes article ul {
      width: 100%;}
   main section article ul li {
      width: 100%;}
   
   .title{z-index: 99999;}
      main section article.liste ul li a span:nth-child(2) {
         width: calc(100% - 63px);}
   
   section.apropos.active {
  position: fixed;
  left: 0;
      padding-bottom: 40px;}
   
   main section article ul li .infos {
      width: calc(100% + 10px);}
}