*{
    margin:0;
    padding:0;
    font-feature-settings: "liga"; /* Turn ligatures on */
    font-variant-ligatures: common-ligatures;
}

:root{
--global: #000000;
--contrast: #fcfdd5;
--lines: #88847980;
--highlight: #fcfdd5;

/* BKP BLANC CASSE fffaeb */
}




h1, h3, h4, h5, h6 { /*reset for mobile browsers */
    font-weight: normal;
}


/************** GADGET ***************/

::selection {
    background: var(--highlight); /* WebKit/Blink Browsers */
    color:var(--global);
}
::-moz-selection {
    background: var(--highlight); /* WebKit/Blink Browsers */
    color:var(--global);
}

/************** FIN GADGET ***************/




/************* PREVIOUS NEXT***************/
.prev{
    transition: 1s;
    position: absolute;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: transparent;
}
.next{
    transition: 1s;
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: transparent;
}
.prev:hover{
    transition: 0.5s;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
}
.next:hover{
    transition: 0.1s;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
}




/****************************/





html{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    height: -webkit-fill-available;
}

body{
    text-align:center;

    background: var(--global);
    color: var(--contrast);

    text-align:center;
    font-family: Helvetica, Arial, sans-serif;

    --space: 0rem;
    --space-md: calc(var(--space) * 2);
    --gap: var(--space-md);

    font-size: 1rem;
    
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
  }

hr{
    border: none;
    height: 1px;
    background-color: var(--lines);
}


.mobile{
    display: none;
}
.desktop{
    display: block;
}


.swipe{
    margin: 50px auto 0 auto;
    width: 32px;
    border-radius: 5px;
}

#dot{
    background-color: rgba(255,255,255,0.3);
    height: 8px;
    width: 8px;
    border-radius: 5px;
    -webkit-animation: SWIPE 3s ease-in-out infinite; /* Safari 4+ */
    -moz-animation:    SWIPE 3s ease-in-out infinite; /* Fx 5+ */
    -o-animation:      SWIPE 3s ease-in-out infinite; /* Opera 12+ */
    animation:         SWIPE 3s ease-in-out infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes SWIPE {
    0% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    35% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    40% { opacity: 1; width: 8px; margin: 0 0 0 24px; }
    50% { opacity: 1; width: 16px; margin: 0 24px 0 0; }
    80% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    94% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    100% { opacity: 0; width: 8px; margin: 0 24px 0 0; }
}
@-moz-keyframes SWIPE {
    0% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    35% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    40% { opacity: 1; width: 8px; margin: 0 0 0 24px; }
    50% { opacity: 1; width: 16px; margin: 0 24px 0 0; }
    80% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    94% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    100% { opacity: 0; width: 8px; margin: 0 24px 0 0; }
}
@-ms-keyframes SWIPE {
    0% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    35% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    40% { opacity: 1; width: 8px; margin: 0 0 0 24px; }
    50% { opacity: 1; width: 16px; margin: 0 24px 0 0; }
    80% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    94% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    100% { opacity: 0; width: 8px; margin: 0 24px 0 0; }
}
@-o-keyframes SWIPE {
    0% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    35% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    40% { opacity: 1; width: 8px; margin: 0 0 0 24px; }
    50% { opacity: 1; width: 16px; margin: 0 24px 0 0; }
    80% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    94% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    100% { opacity: 0; width: 8px; margin: 0 24px 0 0; }
}
@keyframes SWIPE {
    0% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    35% { opacity: 0; width: 8px; margin: 0 0 0 24px; }
    40% { opacity: 1; width: 8px; margin: 0 0 0 24px; }
    50% { opacity: 1; width: 16px; margin: 0 24px 0 0; }
    80% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    94% { opacity: 1; width: 8px; margin: 0 24px 0 0; }
    100% { opacity: 0; width: 8px; margin: 0 24px 0 0; }
}



/** GALLERIE **/

  .content{

    display: grid;
    grid-template-columns: 1fr min(60ch, calc(100% - var(--gap) * 2)) 1fr;
    column-gap: var(--gap);
    margin-inline: auto;

    transition:0.5s;
    width:100%;

    -webkit-animation: HEIGHT 3s normal; /* Safari 4+ */
    -moz-animation:    HEIGHT 3s normal; /* Fx 5+ */
    -o-animation:      HEIGHT 3s normal; /* Opera 12+ */
    animation:         HEIGHT 3s normal; /* IE 10+, Fx 29+ */

  }

  .content > * {
    grid-column: 2;
  }

  .content > * + * {
    margin-block-start: var(--space);
  }


  .gallery {
    background-image: url(../img/croix.png);
    background-size: 33px;
    background-attachment: fixed;


    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: inherit;
    /*padding-block: var(--space-md);*/
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    inline-size: 0 !important;
    display: none;
  }

  .gallery .wrap {
    grid-column: 2;
    display: flex;
    gap: var(--space);
  }

  .gallery .wrap::after {
    content: "";
    padding-inline-end: calc(var(--gap) / 2);
  }

  .gallery .item {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    position: relative;
    /*
    inline-size: 100%;
    max-inline-size: 600px;
    aspect-ratio: 4 / 5;
    */
    width: 90vmin; /* Set the width to 90% of the viewport's smaller dimension */
    height: 90vmin; /* Set the height to 90% of the viewport's smaller dimension */
    max-width: 90vw; /* Set the maximum width to 90% of the viewport width */
    max-height: 90vh; /* Set the maximum height to 90% of the viewport height */  
    overflow: hidden;
  }

.image{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
}

.wrapperImage{
    background-color: rgba(255,255,255,0.1);
    padding: 0;
    margin: 0;
}

  .wrapperTitre{
    padding: 0 3vw;
    max-width: 600px;
  }


.item{
    text-align: center;
    background-size: cover;
    background-position: center;
    border-right: 1px solid var(--lines);
}

.item:first-child{
    border-left: 1px solid var(--lines);
}
.item p{
    margin: 0 auto;
    font-size: 14px;
    display: block;
}

#texteIntro h2, #contact p{
    color: var(--contrast);
    /*mix-blend-mode: difference;*/
    z-index: 5;
    display: inline;
    font-size: 50px;
    letter-spacing: -0.05em;
    line-height: 1em;
}
#contact p{
    width: 90%;
    max-width: 800px;
    display: inline-block;
    font-weight: bold;
}

#texteIntro {
    width: 90%;
    max-width: 560px;
    z-index: 2;
    text-align: left;

    display: block;
    position: absolute;
    left: 60px;
    bottom: 12vh;
}

h3{
    display: inline-block;
    font-size: 0.6em;
    text-transform: uppercase;
    margin: 0 auto 1vw auto;
    letter-spacing: 0.1em;

}
.item h4{
    display: inline-block;
    font-size: 18px;
}

#fullPage .titreSection{
    position: sticky;
    display: block;
    top: 0;
    left: 0;
    z-index: 99;
    width: 94vw;
    padding: 5px 3vw;
    margin: 0 auto;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--contrast);
    background-color: var(--global);
    border-top: 1px solid var(--lines);
    border-bottom: 1px solid var(--lines);
    text-align: center;
}

.noTopBorder{
    border-top: 1px solid var(--global)!important;
}

.tag{
  border-radius: 50px;
  margin: 5px auto 15px auto;
  padding: 5px 15px;
  border: 1px dashed var(--lines);
  color: var(--contrast);
  font-size: 9px!important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block!important;
}

.credit{
    color: var(--contrast);
    background-image: url(../img/entoure2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    font-size: 10px;
    padding: 8px 10px;
    width: fit-content;
    display: inline-block;
}

.texte{
    text-align: left;
}

.texte a{
    font-size: 10px;
    padding: 7px 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: block;
}


.texte a:hover{
    text-decoration: underline;
}

.texte p{
    display: block;
    color: var(--contrast);
    margin: 15px auto;
    font-size: 1.5em;
}

.texte h3, .texte h4{
    font-weight: bold;
    font-size: 0.7em;
    color: var(--highlight);
}





#weLoveGreenTV #titre h2{
    /*
    text-shadow: var(--welovegreen) 0 0 5px;
    */
    color: var(--welovegreen);
}

#brochureCafe #titre h2{
    color: #998e89;
}

#paysages #titre h2{
    color: #7690da;
}

#spica #titre h2{
    /*
    text-shadow: var(--spica) 0 0 5px;
    */
    color: var(--spica);
}


#pvqp .une{
    background-image: url(../img/pvqp/1.jpg?rld);
}
#pvqp .deux{
    background-image: url(../img/pvqp/2.jpg?rld);
}
#pvqp .trois{
    background-image: url(../img/pvqp/3.jpg?rld);
}
#pvqp .quatre{
    background-image: url(../img/pvqp/4.jpg?rld);
}
#pvqp .cinq{
    background-image: url(../img/pvqp/5.jpg?rld);
}
#pvqp .six{
    background-image: url(../img/pvqp/6.jpg?rld);
}




#cabrioles .une{
    background-image: url(../img/cabrioles/1.jpg?rld);
}
#cabrioles .deux{
    background-image: url(../img/cabrioles/2.jpg?rld);
}
#cabrioles .trois{
    background-image: url(../img/cabrioles/3.png);
}
#cabrioles .quatre{
    background-image: url(../img/cabrioles/4.png);
}
#cabrioles .cinq{
    background-image: url(../img/cabrioles/5.png);
}
#cabrioles .six{
    background-image: url(../img/cabrioles/6.png);
}





#spica .une{
    background-image: url(../img/photo.jpg?rld);
}
#spica .deux{
    background-image: url(../img/photo.jpg?rld);
}
#spica .trois{
    background-image: url(../img/photo.jpg?rld);
}
#spica .quatre{
    background-image: url(../img/photo.jpg?rld);
}


#amadoumariam .une{
    background-image: url(../img/eclipse/1.jpg?rld);
}
#amadoumariam .deux{
    background-image: url(../img/eclipse/2.jpg?rld);
}
#amadoumariam .trois{
    background-image: url(../img/eclipse/3.jpg?rld);
}
#amadoumariam .quatre{
    background-image: url(../img/eclipse/4.jpg?rld);
}
#amadoumariam .cinq{
    background-image: url(../img/eclipse/5.jpg?rld);
}
#amadoumariam .six{
    background-image: url(../img/eclipse/6.jpg?rld);
}

#ezia .une{
    background-image: url(../img/ezia/1.jpg?rld);
}
#ezia .deux{
    background-image: url(../img/ezia/2.jpg?rld);
}
#ezia .trois{
    background-image: url(../img/ezia/3.jpg?rld);
}
#ezia .quatre{
    background-image: url(../img/ezia/4.jpg?rld);
}
#ezia .cinq{
    background-image: url(../img/ezia/5.jpg?rld);
}
#ezia .six{
    background-image: url(../img/ezia/6.jpg?rld);
}
#ezia .sept{
    background-image: url(../img/ezia/7.jpg?rld);
}


#welovegreentv .une{
    background-image: url(../img/welovegreentv/1.jpg?rld);
}
#welovegreentv .deux{
    background-image: url(../img/welovegreentv/2.jpg?rld);
}
#welovegreentv .trois{
    background-image: url(../img/welovegreentv/3.jpg?rld);
}
#welovegreentv .quatre{
    background-image: url(../img/welovegreentv/4.jpg?rld);
}



#remede .une{
    background-image: url(../img/remede/1.jpg?rld);
}
#remede .deux{
    background-image: url(../img/remede/2.jpg?rld);
}
#remede .trois{
    background-image: url(../img/remede/3.jpg?rld);
}
#remede .quatre{
    background-image: url(../img/remede/4.jpg?rld);
}



#antebellum .une{
    background-image: url(../img/antebellum/1.jpg?rld);
}
#antebellum .deux{
    background-image: url(../img/antebellum/2.jpg?rld);
}
#antebellum .trois{
    background-image: url(../img/antebellum/3.jpg?rld);
}
#antebellum .quatre{
    background-image: url(../img/antebellum/4.jpg?rld);
}
#antebellum .cinq{
    background-image: url(../img/antebellum/5.jpg?rld);
}
#antebellum .six{
    background-image: url(../img/antebellum/6.jpg?rld);
}




#superalbum .une{
    background-image: url(../img/superalbum/1.jpg?rld);
}
#superalbum .deux{
    background-image: url(../img/superalbum/2.jpg?rld);
}
#superalbum .trois{
    background-image: url(../img/superalbum/3.jpg?rld);
}
#superalbum .quatre{
    background-image: url(../img/superalbum/4.jpg?rld);
}
#superalbum .cinq{
    background-image: url(../img/superalbum/5.jpg?rld);
}
#superalbum .six{
    background-image: url(../img/superalbum/6.jpg?rld);
}



#sad .une{
    background-image: url(../img/sad/1.jpg?rld);
}
#sad .deux{
    background-image: url(../img/sad/2.jpg?rld);
}
#sad .trois{
    background-image: url(../img/sad/3.jpg?rld);
}
#sad .quatre{
    background-image: url(../img/sad/4.jpg?rld);
}
#sad .cinq{
    background-image: url(../img/sad/5.jpg?rld);
}
#sad .six{
    background-image: url(../img/sad/6.jpg?rld);
}






#electrified .une{
    background-image: url(../img/electrified/1.jpg?rld);
}
#electrified .deux{
    background-image: url(../img/electrified/2.jpg?rld);
}
#electrified .trois{
    background-image: url(../img/electrified/3.jpg?rld);
}
#electrified .quatre{
    background-image: url(../img/electrified/4.jpg?rld);
}
#electrified .cinq{
    background-image: url(../img/electrified/5.jpg?rld);
}
#electrified .six{
    background-image: url(../img/electrified/6.jpg?rld);
}





#becauseadventcalendar .une{
    background-image: url(../img/becauseadventcalendar/1.jpg?rld);
}
#becauseadventcalendar .deux{
    background-image: url(../img/becauseadventcalendar/2.jpg?rld);
}
#becauseadventcalendar .trois{
    background-image: url(../img/becauseadventcalendar/3.jpg?rld);
}
#becauseadventcalendar .quatre{
    background-image: url(../img/becauseadventcalendar/4.jpg?rld);
}
#becauseadventcalendar .cinq{
    background-image: url(../img/becauseadventcalendar/5.jpg?rld);
}
#becauseadventcalendar .six{
    background-image: url(../img/becauseadventcalendar/6.jpg?rld);
}



#spica .une{
    background-image: url(../img/spica/1.jpg?rld);
}
#spica .deux{
    background-image: url(../img/spica/2.jpg?rld);
}
#spica .trois{
    background-image: url(../img/spica/3.jpg?rld);
}
#spica .quatre{
    background-image: url(../img/spica/4.jpg?rld);
}
#spica .cinq{
    background-image: url(../img/spica/5.jpg?rld);
}
#spica .six{
    background-image: url(../img/spica/6.jpg?rld);
}



#brochureCafe .une{
    background-image: url(../img/photo.jpg?rld);
}
#brochureCafe .deux{
    background-image: url(../img/photo.jpg?rld);
}
#brochureCafe .trois{
    background-image: url(../img/photo.jpg?rld);
}
#brochureCafe .quatre{
    background-image: url(../img/photo.jpg?rld);
}
#brochureCafe .cinq{
    background-image: url(../img/photo.jpg?rld);
}




#paysages .une{
    background-image: url(../img/photo.jpg?rld);
}
#paysages .deux{
    background-image: url(../img/photo.jpg?rld);
}
#paysages .trois{
    background-image: url(../img/photo.jpg?rld);
}


  @supports not (aspect-ratio: 16 / 9) {
    .gallery .item::before {
      float: left;
      padding-top: 56.25%;
      content: "";
    }

    .gallery .item::after {
      display: block;
      content: "";
      clear: both;
    }
  }

/** FIN GALLERIE **/

a{
    text-decoration:none;
    color: var(--contrast);
}

.js div#preloader{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: var(--global);
    color: var(--contrast);
    background-size: 80px;
    text-align: center;
    opacity: 0;
    -webkit-animation: preloader 2s ease-in-out normal; /* Safari 4+ */
    -moz-animation:    preloader 2s ease-in-out normal; /* Fx 5+ */
    -o-animation:      preloader 2s ease-in-out normal; /* Opera 12+ */
    animation:         preloader 2s ease-in-out normal; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes preloader {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes preloader {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-ms-keyframes preloader {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-o-keyframes preloader {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes preloader {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}


#preloader .logo{
    background: url('../img/logo.svg') no-repeat center center;
    background-size: 40px;
    height: 50px;
    width: 50px;
    margin-top: calc(45vh - 25px);
    margin-left: calc(50vw - 25px);
    -webkit-animation: rotateAlt 1s ease-in-out infinite; /* Safari 4+ */
    -moz-animation:    rotateAlt 1s ease-in-out infinite; /* Fx 5+ */
    -o-animation:      rotateAlt 1s ease-in-out infinite; /* Opera 12+ */
    animation:         rotateAlt 1s ease-in-out infinite; /* IE 10+, Fx 29+ */
}
#preloader .logo{
    fill: var(--contrast);
}

@-webkit-keyframes rotateAlt {
    0% { -webkit-transform: rotate(-180deg); }
    25% { -webkit-transform: rotate(-90deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes rotateAlt {
    0% { -webkit-transform: rotate(-180deg); }
    25% { -webkit-transform: rotate(-90deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-ms-keyframes rotateAlt {
    0% { -webkit-transform: rotate(-180deg); }
    25% { -webkit-transform: rotate(-90deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-o-keyframes rotateAlt {
    0% { -webkit-transform: rotate(-180deg); }
    25% { -webkit-transform: rotate(-90deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@keyframes rotateAlt {
    0% { -webkit-transform: rotate(-7deg); }
    50% { -webkit-transform: rotate(7deg); }
    100% { -webkit-transform: rotate(-7deg); }
}


#preloader p{
    font-size: 12px;
}

/************** HOME PAGE ***************/

#footer{
    margin: 0 auto 200px auto;
    display: inline-block;
    width: 300px;
    opacity: 0.4;
}

#footer a{
    text-decoration: underline;
}

#footer p{
    margin-top: 10px;
    font-size: 14px;
}

#logoFooter svg{
    vertical-align: middle;
    width: 50px;
    fill: var(--contrast);
    -webkit-animation: rotateAlt 1s ease-in-out infinite; /* Safari 4+ */
    -moz-animation:    rotateAlt 1s ease-in-out infinite; /* Fx 5+ */
    -o-animation:      rotateAlt 1s ease-in-out infinite; /* Opera 12+ */
    animation:         rotateAlt 1s ease-in-out infinite; /* IE 10+, Fx 29+ */
}
#merci{
    height: 75px;
    width: 300px;
    font-size: 18px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}
#merci path {
    fill: transparent;
  }
  
#merci text {
    fill: var(--contrast);
  }

#logo{
    transition:0.3s;
    display: inline-block;
    top: 40px;
    z-index: 15;
    left: 50px;
    position: absolute;
    height: 40px;
}
#logo svg{
    vertical-align: middle;
    width: 40px;
    fill: var(--contrast);
}

#logo h1{
    vertical-align: middle;
    font-size: 10px;
    font-weight: bold;
    line-height: 1em;
    padding-top: 9px;
    text-transform: uppercase;
    display: inline-block;
    text-align: right;
}
/*
#logo:hover{
    transition:0.1s;
    filter: saturate(0%) brightness(500%);
}
*/

#menu{
    text-align: center;
    transition: 0.2s;
    width: 100%;
}
.menuElement{
    display: inline-block;
    text-align: left;
    transition: 0.2s;
    z-index: 80;
    margin: 0 46px;
    padding: 10px ;
    border-radius: 50px;
    font-size: 14px;
    color: #fff;
    width: 24px;
    overflow: hidden;
    border: 1px dashed rgba(255,255,255,1);
}

.menuElement:hover{
    border: 1px solid rgba(255,255,255,0);;
    border-radius: 1px;
    margin: 0;
    opacity: 1;
}


#whatilike:hover,#contactme:hover,#cv:hover{
    transition: 0.1s;
    width: 115px;
}
    #whatilike p,#contactme p,#cv p{
        display: inline-block;
        width: 80px;
        margin-left: 7px;
        vertical-align: middle;
        font-size: 10px;
        letter-spacing: 0.1em;
        font-weight: 700;
        text-transform: uppercase;
        padding-top: 5px;
        text-align: left;
    }


#header h1{
    position: absolute;
    left: 2vw;
    top: 2vw;
    z-index: 5;
    display: inline-block;
    font-size: 18px;
    letter-spacing: -0.1em;
}

#ecrivez{
    position: relative;
    display: inline-block;
    top: -50px;
    left: 65%;

    margin-left: 10px;
    vertical-align: bottom;
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid var(--contrast);
    color: var(--contrast);
    background-color: var(--global);
    border-radius: 50px;
}

#ecrivez:hover{
    border: 1px solid var(--highlight);
    background-color: var(--highlight);
    color: var(--global);
}

#header {
    height: 95vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    border-top: 1px solid var(--lines);
}
    




#intro{
    width: 100%;
    height: 100%;
    background-color: #2e2e2e15;
    
    -webkit-backdrop-filter: blur(50px) contrast(170%) brightness(500%);
    backdrop-filter: blur(50px) contrast(170%) brightness(500%);
    
    text-align: left;
    font-weight: bold;
}










h2 a{
    background-image: url(../img/entoure2.svg?rld);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    color: var(--contrast);
    /*text-shadow: -1px -1px 0 var(--highlight), 1px -1px 0 var(--highlight), -1px 1px 0 var(--highlight), 1px 1px 0 var(--highlight);*/
}

h2 a:first-child{
    background-image: url(../img/entoure.svg?rld);
}
h2 a:last-child{
    background-image: url(../img/souligne.svg?rld);
}


#noise {
    opacity: 0.5;
    height: 100vh;
    width: 100vw;
    margin: 0;
    top: calc(-100vh - 50px);
    left: 0;
    margin-bottom: -100vh;
    /* border-top-right-radius: 150px; */
    overflow: hidden;
    background: url(../img/background/noise.gif?rld) repeat center / 50px;
    mix-blend-mode: overlay;
    position: relative;
    z-index: 0;
}

#filter {
    height: 100vh;
    width: 100vw;
    margin: 0;
    top: calc(-100vh - 50px);
    left: 0;
    margin-bottom: -100vh;
    /* border-top-right-radius: 150px; */
    overflow: hidden;
    background-color: #2e2e27;
    mix-blend-mode: color-burn;
    position: relative;
    z-index: 1;
}



#travaux{
    opacity: 0.7;
    
    height: 100vh;
    width: 100vw;
    margin: 0;
    top: -100vh;
    margin-bottom: calc(-100vh + 50px);
    border-top-right-radius: 150px;

    overflow: hidden;

    background: url(../img/background/4.jpg?rld) no-repeat center / cover,
                url(../img/background/3.jpg?rld) no-repeat center / cover,
                url(../img/background/2.jpg?rld) no-repeat center / cover,
                url(../img/background/1.jpg?rld) no-repeat center / cover;

    position: relative;
    z-index: -1;



    
    -webkit-animation: BACKGROUNDCHANGE 40s ease-in-out infinite; /* Safari 4+ */
    -moz-animation:    BACKGROUNDCHANGE 40s ease-in-out infinite; /* Fx 5+ */
    -o-animation:      BACKGROUNDCHANGE 40s ease-in-out infinite; /* Opera 12+ */
    animation:         BACKGROUNDCHANGE 40s ease-in-out infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes BACKGROUNDCHANGE {
    0% {background-image: url(../img/background/0.jpg?rld);}
    20% {background-image: url(../img/background/1.jpg?rld);}
    40% {background-image: url(../img/background/2.jpg?rld);}
    60% {background-image: url(../img/background/3.jpg?rld);}
    80% {background-image: url(../img/background/4.jpg?rld);}
    100% {background-image: url(../img/background/0.jpg?rld);}
}
@-moz-keyframes BACKGROUNDCHANGE {
    0% {background-image: url(../img/background/0.jpg?rld);}
    20% {background-image: url(../img/background/1.jpg?rld);}
    40% {background-image: url(../img/background/2.jpg?rld);}
    60% {background-image: url(../img/background/3.jpg?rld);}
    80% {background-image: url(../img/background/4.jpg?rld);}
    100% {background-image: url(../img/background/0.jpg?rld);}
}
@-ms-keyframes BACKGROUNDCHANGE {
    0% {background-image: url(../img/background/0.jpg?rld);}
    20% {background-image: url(../img/background/1.jpg?rld);}
    40% {background-image: url(../img/background/2.jpg?rld);}
    60% {background-image: url(../img/background/3.jpg?rld);}
    80% {background-image: url(../img/background/4.jpg?rld);}
    100% {background-image: url(../img/background/0.jpg?rld);}
}
@-o-keyframes BACKGROUNDCHANGE {
    0% {background-image: url(../img/background/0.jpg?rld);}
    20% {background-image: url(../img/background/1.jpg?rld);}
    40% {background-image: url(../img/background/2.jpg?rld);}
    60% {background-image: url(../img/background/3.jpg?rld);}
    80% {background-image: url(../img/background/4.jpg?rld);}
    100% {background-image: url(../img/background/0.jpg?rld);}
}
@keyframes BACKGROUNDCHANGE {
    0% {background-image: url(../img/background/0.jpg?rld);}
    20% {background-image: url(../img/background/1.jpg?rld);}
    40% {background-image: url(../img/background/2.jpg?rld);}
    60% {background-image: url(../img/background/3.jpg?rld);}
    80% {background-image: url(../img/background/4.jpg?rld);}
    100% {background-image: url(../img/background/0.jpg?rld);}
}
.projet{
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#travaux #sad{
    z-index: 10;
    right: -18vw;
    top: 50vh;
    height: 60vh;
    width: 50vw;
    background-image: url(../img/intro/sad.png);

    -webkit-animation: FLOAT4 5s ease-out; /* Safari 4+ */
    -moz-animation:    FLOAT4 5s ease-out; /* Fx 5+ */
    -o-animation:      FLOAT4 5s ease-out; /* Opera 12+ */
    animation:         FLOAT4 5s ease-out; /* IE 10+, Fx 29+ */
}
#travaux #wlg{
    z-index: 8;
    right: 16vw;
    top: 15vh;
    height: 40vh;
    width: 35vw;
    background-image: url(../img/intro/wlg.png);
    
    -webkit-animation: FLOAT3 5s ease-out; /* Safari 4+ */
    -moz-animation:    FLOAT3 5s ease-out; /* Fx 5+ */
    -o-animation:      FLOAT3 5s ease-out; /* Opera 12+ */
    animation:         FLOAT3 5s ease-out; /* IE 10+, Fx 29+ */
}
#travaux #ezia{
    z-index: 9;
    right: 36vw;
    top: 45vh;
    height: 25vh;
    width: 35vw;
    background-image: url(../img/intro/ezia.png);
    
    -webkit-animation: FLOAT2 5s ease-out; /* Safari 4+ */
    -moz-animation:    FLOAT2 5s ease-out; /* Fx 5+ */
    -o-animation:      FLOAT2 5s ease-out; /* Opera 12+ */
    animation:         FLOAT2 5s ease-out; /* IE 10+, Fx 29+ */
}

#travaux #amadoumariam{
    z-index: 7;
    left: 2vw;
    top: 5vh;
    height: 60vh;
    width: 65vw;
    background-image: url(../img/intro/amadoumariam.png);
    
    -webkit-animation: FLOAT1 5s ease-out; /* Safari 4+ */
    -moz-animation:    FLOAT1 5s ease-out; /* Fx 5+ */
    -o-animation:      FLOAT1 5s ease-out; /* Opera 12+ */
    animation:         FLOAT1 5s ease-out; /* IE 10+, Fx 29+ */
}

/*
@keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}

	50% {
		border-radius: 30% 60% 70% 40% / 50% 100% 30% 60%;
	}

	100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
  }
*/




#contact{
    padding: 20vh 0;
}
#contact h2{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 10px;
}

#contact h5{
    display: inline-block;
    color: var(--contrast);
    font-size: 14px;
    margin: 25px auto;
    padding: 10px 20px;
    border: 1px solid var(--lines);
    border-radius: 50px;
}

#contact h5:hover{
    color: var(--highlight);
    border: 1px solid var(--highlight);
}

/************** ANIMATION ***************/

@-webkit-keyframes FLOAT1 {
0% { margin-top: 10px; }
100% { margin-top: 0; }
}
@-moz-keyframes FLOAT1 {
0% { margin-top: 10px; }
100% { margin-top: 0; }
}
@-o-keyframes FLOAT1 {
0% { margin-top: 10px; }
100% { margin-top: 0; }
}
@keyframes FLOAT1 {
0% { margin-top: 20px; }
100% { margin-top: 0; }
}

@-webkit-keyframes FLOAT2 {
    0% { margin-top: 20px; }
    100% { margin-top: 0; }
}
@-moz-keyframes FLOAT2 {
    0% { margin-top: 20px; }
    100% { margin-top: 0; }
}
@-o-keyframes FLOAT2 {
    0% { margin-top: 20px; }
    100% { margin-top: 0; }
}
@keyframes FLOAT2 {
    0% { margin-top: 40px; }
    100% { margin-top: 0; }
}

@-webkit-keyframes FLOAT3 {
    0% { margin-top: 30px; }
    100% { margin-top: 0; }
    }
    @-moz-keyframes FLOAT3 {
    0% { margin-top: 30px; }
    100% { margin-top: 0; }
    }
    @-o-keyframes FLOAT3 {
    0% { margin-top: 30px; }
    100% { margin-top: 0; }
    }
    @keyframes FLOAT3 {
    0% { margin-top: 60px; }
    100% { margin-top: 0; }
}

@-webkit-keyframes FLOAT4 {
    0% { margin-top: 40px; }
    100% { margin-top: 0; }
    }
    @-moz-keyframes FLOAT4 {
    0% { margin-top: 40px; }
    100% { margin-top: 0; }
    }
    @-o-keyframes FLOAT4 {
    0% { margin-top: 40px; }
    100% { margin-top: 0; }
    }
    @keyframes FLOAT4 {
    0% { margin-top: 80px; }
    100% { margin-top: 0; }
}
    
      
.fadein1{
  -webkit-animation: FADEIN 1s normal; /* Safari 4+ */
  -moz-animation:    FADEIN 1s normal; /* Fx 5+ */
  -o-animation:      FADEIN 1s normal; /* Opera 12+ */
  animation:         FADEIN 1s normal; /* IE 10+, Fx 29+ */
}

.fadein2{
  -webkit-animation: FADEIN 2s normal; /* Safari 4+ */
  -moz-animation:    FADEIN 2s normal; /* Fx 5+ */
  -o-animation:      FADEIN 2s normal; /* Opera 12+ */
  animation:         FADEIN 2s normal; /* IE 10+, Fx 29+ */
}

.fadein3{
  -webkit-animation: FADEIN 3s normal; /* Safari 4+ */
  -moz-animation:    FADEIN 3s normal; /* Fx 5+ */
  -o-animation:      FADEIN 3s normal; /* Opera 12+ */
  animation:         FADEIN 3s normal; /* IE 10+, Fx 29+ */
}

.fadein4{
  -webkit-animation: FADEIN 4s normal; /* Safari 4+ */
  -moz-animation:    FADEIN 4s normal; /* Fx 5+ */
  -o-animation:      FADEIN 4s normal; /* Opera 12+ */
  animation:         FADEIN 4s normal; /* IE 10+, Fx 29+ */
}


.landing1{
  -webkit-animation: LANDING1 3s ease; /* Safari 4+ */
  -moz-animation:    LANDING1 3s ease; /* Fx 5+ */
  -o-animation:      LANDING1 3s ease; /* Opera 12+ */
  animation:         LANDING1 3s ease; /* IE 10+, Fx 29+ */
}

.landing2{
  -webkit-animation: LANDING2 3s ease; /* Safari 4+ */
  -moz-animation:    LANDING2 3s ease; /* Fx 5+ */
  -o-animation:      LANDING2 3s ease; /* Opera 12+ */
  animation:         LANDING2 3s ease; /* IE 10+, Fx 29+ */
}

.landing3{
  -webkit-animation: LANDING3 3s ease; /* Safari 4+ */
  -moz-animation:    LANDING3 3s ease; /* Fx 5+ */
  -o-animation:      LANDING3 3s ease; /* Opera 12+ */
  animation:         LANDING3 3s ease; /* IE 10+, Fx 29+ */
}



@-webkit-keyframes FADEIN {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes FADEIN {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes FADEIN {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}
@keyframes FADEIN {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes MOVEUP {
  0%   { top:15%;}
  100%   { top:28%;}
}
@-moz-keyframes MOVEUP {
  0%   { top:15%;}
  100%   { top:28%;}
}
@-o-keyframes MOVEUP {
  0%   { top:15%;}
  100%   { top:28%;}
}
@keyframes MOVEUP {
  0%   { top:15%;}
  100%   { top:28%;}
}

@-webkit-keyframes HEIGHT {
  0%   { top:100vh;}
  100%   { top:85vh;}
}
@-moz-keyframes HEIGHT {
  0%   { top:100vh;}
  100%   { top:85vh;}
}
@-o-keyframes HEIGHT {
  0%   { top:100vh;}
  100%   { top:85vh;}
}
@keyframes HEIGHT {
  0%   { top:100vh;}
  100%   { top:85vh;}
}


@-webkit-keyframes LANDING1 {
  0%   { margin-top:50px; }
  100% { margin-top:0; }
}
@-moz-keyframes LANDING1 {
  0%   { margin-top:50px; }
  100% { margin-top:0; }
}
@-o-keyframes LANDING1 {
  0%   { margin-top:50px; }
  100% { margin-top:0; }
}
@keyframes LANDING1 {
  0%   { margin-top:50px; }
  100% { margin-top:0; }
}

@-webkit-keyframes LANDING2 {
  0%   { margin-top:70px; }
  100% { margin-top:0; }
}
@-moz-keyframes LANDING2 {
  0%   { margin-top:70px; }
  100% { margin-top:0; }
}
@-o-keyframes LANDING2 {
  0%   { margin-top:70px; }
  100% { margin-top:0; }
}
@keyframes LANDING2 {
  0%   { margin-top:70px; }
  100% { margin-top:0; }
}

@-webkit-keyframes LANDING3 {
  0%   { margin-top:90px; }
  100% { margin-top:0; }
}
@-moz-keyframes LANDING3 {
  0%   { margin-top:90px; }
  100% { margin-top:0; }
}
@-o-keyframes LANDING3 {
  0%   { margin-top:90px; }
  100% { margin-top:0; }
}
@keyframes LANDING3 {
  0%   { margin-top:90px; }
  100% { margin-top:0; }
}


/************** MOBILE VERSION ***************/

@media screen and (max-width: 500px) {
    #texteIntro h2, #contact p {
        font-size: 30px;
    }

    #intro #logo{
        top: 25px;
        left: 30px;
    }

    #texteIntro {
        left: 30px;
        top: calc(85vh - 22px - 170px);
    }

    #ecrivez{
        top: -40px;
    }

    #noise{
        background: url(../img/background/noise.gif?rld) repeat center / 25px;
    }
}