@charset "UTF-8";
@font-face {
    font-family: 'sangbleu_versaillesregular';
    src: url("fonts/sangbleuversailles-regular-webfont.woff2") format('woff2'),
         url('fonts/sangbleuversailles-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sangbleu_versaillesRgIt';
    src: url('fonts/sangbleuversailles-regularitalic-webfont.woff2') format('woff2'),
         url('fonts/sangbleuversailles-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/*GENERAL ---------------------------------------------------------------------------------------------------------------------------------------------------*/
body { margin:0px; padding:0px; overflow-x: hidden; font-family:'sangbleu_versaillesregular'; color:black; font-size:15px;}
.border-img {border: black solid 1px;}
.textnegatif {mix-blend-mode: difference; filter: invert(100%);}

/*texts*/
h1 {font-size: 50px; font-family:'sangbleu_versaillesRgIt';  }
h2 {font-size: 26px; font-family:'sangbleu_versaillesRgIt'; }
h3 {font-size:15px;font-family:'sangbleu_versaillesRgIt'; text-transform:uppercase; }

/*links*/
a {position: relative; overflow: hidden;}
a::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: black; z-index: -1; transition: width 0.4s ease;}
a:hover::before,a:active::before {width: 100%;}
a:link, a:visited  {font-family: 'sangbleu_versaillesRgIt'; color: black; text-decoration: none; }
a:hover, a:active  {font-family: 'sangbleu_versaillesRgIt'; color: white !important;   text-decoration: none; }

/* nav*/
.navbar-brand:hover   {color:black!important;}
.navbar-brand::before {display: none !important;}
.navbar-brand:hover::before {width: 0 !important;}

header {position: sticky !important; top:0px; background-color: white;z-index:200;}
.navbar {--bs-navbar-padding-y: 0rem;}





/*HOMEPAGE -----------------------------------------------------------------------------------------------------------------------------------------------*/
.home {font-family:'sangbleu_versaillesRgIt';}

/*trail effect*/
#trail-section {position: relative; width: 100%; height: 95vh; overflow: hidden;}
img.trail-image {position: absolute; pointer-events: none; width: 300px; height: auto; transform: translate(-50%, -50%);left:0px; z-index: -200;}
.texthome { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 100%; z-index: 20; }

/*works*/
.projets { border-top:black 1px solid; }
ul li.projets {list-style-type: none;}
li.projets::marker { content:none;}

.projets .img-works { display: none; position: absolute; top: 67%; left: 50%; transform: translate(-50%, -50%); max-height: 60%;  max-width: 45%; aspect-ratio: auto; z-index: 100; }
.projets:hover .img-works { display: none; }
.projets a::before {display: none !important;}
.projets a > div {position: relative;}
.projets a > div::before {content: "";position: absolute;top: 0; bottom: 0;      left: 0;width: 0;background: black;z-index: -1;transition: none !important; }
.projets a:hover > div::before {width: 100% !important;}



/*  WORKS DETAILS --------------------------------------------------------------------------------------------------------------------------------------- */
.category {text-transform:none ;}

/*sticky effect texte */
.sectionworksdetail {min-height: 80%;display: flex;flex-direction: column;}
#containerworksdetail {min-height: 70%;display: flex;margin-top: 2%;}
.padding-containerworksdetail {padding-bottom: 0%; }
#h1worksdetail {position: static;}
#h2worksdetail {position: static;padding-top: 30px;}
#contentworksdetail {min-height: 80%; margin-top:50px;}

.fixed {position: fixed;left: 20px; width: calc(100% - 40px); }
.fixed #h1worksdetail  {top: 20px;}
.fixed #h2worksdetail  {top: auto; }
.sticky {position:sticky; top:600px;}

.img-containerworksdetail {display:flex; justify-content: flex-end;}
.img-containerworksdetail img {max-height: 600px; width:auto; }

/*sticky effect img */
.sticky-image-1 {position: static; }
.sticky-image-2 {position: static; }
.sticky-image-3 {position: static;}
.sticky-image-4 {position: static; }
.sticky-image-5 {position: static; }
.sticky-image-6 {position: static; }
.sticky-image-7 {position: static; }
.sticky-image-8 {position: static; }
.sticky-image-9 {position: static; }
.sticky-image-10 {position: static; }

/*video lecteur ytb*/
.container-iframe {position: relative;overflow: hidden;width: 100%;padding-top: 56.25%}
.responsive-iframe {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}



/*ABOUT  --------------------------------------------------------------------------------------------------------------------------------------- */ 
.download-button {padding: 10px 20px;background-color: black;text-decoration: none;border-radius: 25px;position: fixed; top:15%;color: white !important;z-index: 100;}

.section-about { overflow-y: visible;   padding-bottom: 80px;}
.about { position: relative;padding-right: 70px;}
.text-about {padding-top: 70vh;text-indent: 20% ; position: relative;  z-index: 50; mix-blend-mode: difference;filter: invert(100%);}
.text-about h1 {font-family: 'sangbleu_versaillesregular'; margin-bottom: 1em;}
.about-italic  {font-family: 'sangbleu_versaillesRgIt';}
.scroll-image {position: fixed;right: -500px;width: 40%;max-width: 500px;transform: translateY(-50%);}

.image1 { top: 28%; }
.image2 { top: 75%;}
.image3 { top: 50%;}
.image4 { top: 60%;}
.image5 { top: 30%;}
.image6 { top: 80%;}
.image7 { top: 30%;}
.image8 { top: 70%;}





/*MEDIAQUERIES  --------------------------------------------------------------------------------------------------------------------------------------- */        
/* sm Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
body{ font-size:16px;}
h1 {font-size: 62px; }
h2 {font-size: 32px; }
h2.works { font-size: 16px;}
h3 {font-size:16px; }
.padding-containerworksdetail {padding-bottom: 0%; }
.img-containerworksdetail img {max-height:600px; width:auto;}

}


/*md Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
body{ font-size:17px;}
h1 {font-size: 72px; }
h2 {font-size: 35px; }
h2.works { font-size: 17px;}
h3 {font-size:17px; }

}


/* lg Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
body{ font-size:18px;}
h1 {font-size: 85px; }
h2 {font-size: 38px; }
h2.works { font-size: 18px;}
h3 {font-size:18px; } 

.projets:hover .img-works {display: block; }

#h1worksdetail {position: sticky;top: 100px;padding-bottom: 20px;}
#h2worksdetail {position: sticky; top: calc(100px + 120px);padding-top: 0px;}
.padding-containerworksdetail {padding-bottom: 15%; }

.sticky-image-1 {position: sticky; top: 10%;z-index:-20; }
.sticky-image-2 {position: sticky; top: 10%;z-index:0;}
.sticky-image-3 {position: sticky; top: 10%;z-index:20;}
.sticky-image-4 {position: sticky; top: 10%;z-index:40;}
.sticky-image-5 {position: sticky; top: 10%;z-index:50;}

}


/* xl X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

.projets .img-works {max-height: 10%;  max-width: 35%; aspect-ratio: auto; }

h2 {font-size: 42px; }

}


/* xxl  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
body{ font-size:21px;}
h1 {font-size: 100px; }
h2 {font-size: 47px; }
h3 {font-size:21px; }



.projets .img-works {max-height: 50%;  max-width: 40%; aspect-ratio: auto; }

}