html, body {
    padding: 0; margin: 0;
    background-color: #fbfbf2;scroll-snap-type: y mandatory;  scroll-behavior: smooth;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat.ttf');
}

* {
    font-family: 'Montserrat';
    box-sizing: border-box;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
}

::-webkit-scrollbar {
    width: 0;
}


/* Textures */

.liquidGlass {
    background: linear-gradient(314deg,rgba(255, 250, 232, 0.466) 0%, rgba(0, 183, 255, 0.144) 48%, rgba(255, 219, 185, 0.164) 100%); border: 1px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px) brightness(0.8);  box-shadow: 0 0 5dvh #77beca31;

    font-weight: bold;
}

.liquidGlassNav {
    background: linear-gradient(314deg,rgba(16, 166, 235, 0.13) 0%, rgba(0, 183, 255, 0.315) 48%, rgba(0, 162, 255, 0.11) 100%); border: 1px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px) brightness(0.85);  box-shadow: 0 0 5dvh #317e8a56;
    
    font-weight: bold;
}

.liquidGlass2 {
    background: linear-gradient(314deg,#42a2fcd5 0%, #0084ffce 48%, #87b6fcb2 100%); border: 1px solid rgb(131, 199, 255);
    backdrop-filter: blur(8px) brightness(0.8); box-shadow: 0 .7dvh 1dvh #317e8a1a;

    transition: 1s;
}

.liquidGlass2:hover {
    transform: translateY(-5%) scale(1.1, 1.01);
}

.gradientButton {
    background: linear-gradient(360deg,rgba(15, 14, 14, 1) 0%, rgb(56, 52, 56) 95%, rgb(185, 181, 181) 100%);
    border: 1px solid #807f7fc5; box-shadow: 0 0 1dvh #1817188e;
}

#heroSection a:hover {
    transform: translateX(-2.5%) scale(1.05, 1.01);
}

/* Cursor */
#cursor
    {
        position: fixed;
        mix-blend-mode: difference;
        pointer-events: none;
        transition: .1s;
        z-index: 10000;
    }
/* NAV */

nav {
    width: 100%;
    position: fixed; z-index: 99;
    color: #e9e9e8;
    padding: 1%;

    display: flex; justify-content: space-evenly; align-items: center;
}

nav > a:first-of-type {
    width: 5%;
}

nav > a > img {
    width: 100%;
}

nav > div {
    width: 35%;
    display: flex; justify-content: space-evenly; align-items: center;

    color: inherit; font-weight: bold; 
    padding: .3%;
    border-radius: 5dvh;
}

nav > a:last-of-type {
    padding: 1.3%;

    color : #FBFBF2; font-weight: 600;
    border-radius: 5dvh;

    transition: 1s;
}

nav > a:last-of-type:hover {
    scale: 1.1;
    background-color: #0084ffce; border: 1px solid rgb(131, 199, 255);
    letter-spacing: 3px;
}

nav div a {
    width: 100%;
    transition: 1s; text-align: center;
    padding: 2% 5%; border-radius: 5dvh; color: #dfeef3;
}

nav div a:hover {
    letter-spacing: 3px; filter: unset; color: #ffffff;
}

/* HerpSection */

#heroSection {
    width: 100%; height: 110dvh;

    display: flex; flex-direction: column; justify-content: center; align-items: center;

    font-size: 1rem;
    overflow: clip;
}

video {
    width: 100%; 
    position: absolute; top:0; left: 0;
    filter: invert(1) saturate(0);
    transition: 1s;
}

#heroSection > h1 {
    color: #181718; filter: saturate(0);
    margin: 3%;
    font-size: 6rem; line-height: 0.70; letter-spacing: -10px;font-weight: 800;
}

#heroSection > div:first-of-type {
    width: 40%;
    transition: 1s;
    border-radius: 5dvh;
    display: flex; justify-content: space-between; align-items: center;
}

#heroSection > div > p, #heroSection > div > a{
    padding: 3%; margin: 1%;
    border-radius: 5dvh;

    color: #FBFBF2; text-align: center;
    transition: 1s;
}
#heroSection > div > a {
    font-weight: bold;
}


/* Section 2 */
.columnDiv{
    width: 100%; height: 80dvh;
    padding: 5%;

    font-size: 1.1rem;

    display: flex; justify-content: space-evenly;
    background-color: #FBFBF2; color: #413f3f;
}

.columnDiv > div {
    width: 30%;
    display: flex; flex-direction: column; justify-content: center;
}

.columnDiv > div > h2::first-line {
    color: #181718;
}
.columnDiv > div > h2 {
    font-size: 2.5rem;
    color: #413f3f;
    filter: blur(.5px);
}

.columnDiv > img {
    border-radius: 2dvh;
}

.columnDiv b {
    background-color: #181718; color: #FBFBF2; border-radius: 1dvh;
    padding: 1% 2%;
}

.columnDiv a {
    text-align: center;

    color: #FBFBF2; font-weight: bold;
    padding: 4%; margin-top: 8%;
    border-radius: 3dvh;
}

.columnDiv:nth-of-type(3) {
    flex-direction: row-reverse;
    background-color: #f6f5f0;
}

.CTA {
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    background-color: #FBFBF2;
    padding: 10% 0;
}

.CTA > div {
    width: 70%;
    display: flex; justify-content: center; align-items: center;
    background : url('../assets/images/illuCTA.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top;
    border-radius: 3dvh
}

.CTA > div > div {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 8% 5%;
    backdrop-filter: blur(2px) brightness(0.9);
    border-radius: 3dvh;

    color: #FBFBF2; font-size: 1.2rem; text-align: center; text-shadow: 0 0 1dvh #1817189d;
}

.CTA h3 {
    font-size: 2.5rem; margin: 0;
}

.CTA h3::first-line {
    color: #ffffff;
}

.CTA a {
    padding: 2%; color: #FBFBF2; font-weight: bold;
    border-radius: 3.5dvh;

    transition : 1s;
}

.CTA a:hover {
    transform: scale(1.1, 1.01) translateY(-5%);
}

/* Footer */
footer{
    background-color: #FBFBF2;
}
footer > div {
    width: 100%;
    padding: 5% 10%;
    background-color: #181718; color: #a7a2a2;
    border-top: 1px solid #ffffff;

    display: flex; flex-direction: column;
}

footer hr {
    width: 100%;
    border: 1px solid #a7a2a2;
}

footer img {
    width: 6dvh; opacity: 50%;
    margin-right: 5%;
}

footer > div > div {
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
}

footer > div > div > div > div {
    display: flex; align-items: center;
}


footer > div > div > div:nth-of-type(2) {
    display: flex; flex-direction: column; justify-content: space-evenly;
}

footer > div > div > div > a {
    padding: 2% 0;

    transition: 1s;
}

footer > div > div > div > a:hover {
    color: #FBFBF2;
}

/* Réalisations */

#projets {
    width: 100%; height: 100dvh;
    scroll-snap-type: y mandatory;  scroll-behavior: smooth;
}

#projets > div {
    width: 100%; height: 100dvh;

    color: #FBFBF2; font-size: 1.5rem;
    
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    background: url(../assets/images/rouen.jpg); background-size: cover; background-repeat: no-repeat;
    scroll-snap-align: start; 
}

#projets > div > div {
    padding: 5%; width: 100%;

    background: linear-gradient(180deg,rgba(251, 251, 251, 0) 0%, rgba(24, 23, 24, 0.637) 70%);
}

#projets h2 {
    margin: 0;
    font-size: 4rem;
}

#pointNav {
    height: 100dvh;

    display: flex; justify-content: center; align-items: center;
    position: fixed; right: 3%;
    z-index: 9999;
}

#pointNav > div {
    height: 35dvh;
    display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
}

#pointNav > div > a > div {
    height: 2dvh; width: 2dvh;
    border-radius: .5dvh; rotate: 45deg;

    background-color: #181718;
    transition: 1s;
}

#pointNav > div > a > div:hover {
    scale: 1.5; rotate: -45deg; 
    cursor: pointer;
}

#transition {
  position: fixed;
  inset: 0;
  background: #181718; color: #FBFBF2;
  display: flex;

  justify-content: center; align-items: center;
  
  transition: 1s;
  z-index: 99999;
}

#transition img {
    width: 5%;
}

.offres {
    width: 100%;
    padding: 10%;

    color: #181718; text-align: center; font-size: 1.15rem;
}

.offres > p {
    margin-bottom: 5%;
}

.offres > div:first-of-type {
    width: 100%;
    display: flex; justify-content:space-evenly; align-items: flex-start;
}

.offres > div:first-of-type > div {
    width: 100%;
    padding: 2%; margin: 1%; color: #4b4b49;

    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    border-radius: 3dvh;
    background: linear-gradient(60deg,rgb(249, 249, 247) 0%, rgb(238, 235, 238) 25%, rgb(234, 234, 234) 75%, rgb(238, 238, 237) 100%);
    outline: 1px solid rgb(255, 255, 255); box-shadow: 0 .5dvh 2dvh rgba(0, 0, 0, 0.101);

    transition: 1s;
}

.offres > div:first-of-type > div:hover {
    scale :1.05;
    transform: translateY(-3%);
    box-shadow: 0 .5dvh 5dvh rgba(0, 0, 0, 0.161);

}

.offres > div:first-of-type > div > div {  
    width: 100%; 
    display: flex; justify-content: center; align-items: center;
}

.offres > div:first-of-type a {
    padding: 5%; margin: 3%;
    width: 100%;
}
.offres h3 {
    font-size: 3rem; 
}

.offres > div:last-of-type {
    margin: 1%;
    text-align: center;
    border-radius: 5dvh;
    background: url('../assets/images/rouen.jpg'); background-size: cover;
}

.offres > div:last-of-type > div {
    border-radius: 6dvh;
    padding: 2%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;

    backdrop-filter: blur(2px) brightness(0.95); color: #FBFBF2;
}

.offres > div:last-of-type p {
    width: 80%;
    margin: 2% 0;
}

.offres h2 {
    font-size: 2.5rem;
}

.offres a {
    padding: 2%; border-radius: 3dvh;
    color: #fbfbf2; font-weight: bold;
}

.mlPc {
    padding: 10%;
}

#navMobile {
    display: none;
}
#burgerMenuDiv {
    display: none;
}
@media screen and (max-width : 500px) {
    #cursor {
        display: none;
    }
    #heroSection {
        width: 100%;
        overflow: hidden;
    }
    #heroSection video {
        height: 100%;
    }
    #heroSection > div:first-of-type {
        width: 90%;
    }
    .columnDiv {
        height: auto;
        flex-direction: column; align-items: center;
    }
    .columnDiv:nth-of-type(3) {
        flex-direction: column;
    }

    .columnDiv > div {
        width: 90%;
    }

    .columnDiv img {
        width: 95%;
    }
    .CTA h3 {
        font-size: 2rem;
    }
    .CTA > div {
        width: 90%;
        background: linear-gradient(314deg,#42a2fcd5 0%, #0084ffce 48%, #87b6fcb2 100%); border: 1px solid rgb(131, 199, 255);
    }
    .CTA a {
        padding: 5%;
    }
    footer > div {
        padding: 10% 10%;
    }

    footer > div > div > div:nth-of-type(2), footer > div > div > div:nth-of-type(3) {
        display: none;
    }

    nav {
        padding: 3%;
        justify-content: space-between;
    }

    nav > div, nav > a:last-of-type {
        display: none;
    }

    nav > a:first-of-type {
        width: 15%;
    }

    #burgerMenuDiv{
        display: flex; flex-direction: column;
    }
    #burgerMenuDiv hr{
        width: 30%;
        border: 2px solid black; border-radius: 10px;
        transition: 1s;
    }
    #burgerMenuDiv hr:first-of-type{
        transform-origin: top left;
    }
    #burgerMenuDiv hr:last-of-type{
        transform-origin: bottom left;
    }


    #navMobile {
        width: 90%; padding: 5%;
        margin: 5%; border-radius: 5dvh;
        color: #fbfbf2; font-size: 1.25rem;

        position: fixed; top:0; z-index: 99999;
        display: flex; flex-direction: column; justify-content: center; align-items: center;

        transition: 1s;
        transform: translateY(-150%);
    }
    #navMobile a {
        margin: 5%;
    }
    #navMobile > a:last-of-type{
        padding: 3%; border-radius: 3dvw;
        justify-self: flex-end;
    }
    #transition {
        display: none;
    }
    .offres {
        padding: 5%;
    }
    .offres > div:first-of-type {
        flex-direction: column;
    }
    .offres > div:first-of-type > div {
        margin: 5% 0;
        padding: 1%;
    }
    .offres > div:first-of-type > div > div {
        padding: 1%;
    }
    .offres a {
        padding: 5%;
    }
    .offres > div:last-of-type > div {
        padding: 5%;
    }
    #projets > div {
        font-size: 1rem;
    }
    #projets h2{
        font-size: 3.2rem;
    }
    #pointNav{
        display: none;
    }
}