/* TOUT */

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

*::selection {
    background-color: #181718;
    color :#FBFBF2;
}


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

@font-face {
    font-family: 'Quartens';
    src: url('../../typo/content/Quartens.otf');
}

@keyframes sizeDown{
	0% {
		width: 100%; height: 100dvh;
        border-radius: 0;
	}
	100% {
		width: 40%; height: 40dvh; 
        border-radius: 20dvh;
	}     
}

@keyframes openUp{
	from {
		width: 0; height: 0; border-radius: 0;
	}
	to {
		width: 90%; height: 70dvh; border-radius: 10dvh;
	}     
}

@keyframes underOpenUp{
	50% {
		transform: translateY(50dvh);
	}
	100% {
	}     
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100dvw);
    }
    to {
        transform: translateX(-10dvw);
    }
}

@keyframes fadeOut {
    0% {
        transform: unset;
        opacity: 1;
    }
    33%{
        opacity: 0;
    }
    100% {
        transform: translateY(-30dvh);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        transform: translateY(-15dvh);
        opacity: 0;
    }

    33%{
        opacity: 1;
    }
    100% {
        transform: unset;
        opacity: 1;
    }
}

* {
    box-sizing: border-box;
}

*:hover {
    cursor: none;
}


html, body {
    font-size: 20px;
    margin: 0; padding: 0;
    scroll-behavior: smooth;

    max-width: 100dvw; width: 100dvw;

    font-family: 'Montserrat';
    cursor: none;
    background-color: #FBFBF2;
    transition: 1s;
    overflow-x:clip;
}

/* Loading Screen  */
    #loadingScreen {
        width: 100%; height: 100dvh;
        background-color: #FBFBF2;

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

        transition: 1s;
    }
    #loadingScreen > video:last-of-type{
        display: none;
    }
a {
    text-decoration: none;
    font-family: 'Montserrat';
    padding: 0 2dvh;
    font-size: 1rem;
    color : unset;

    cursor: none;
    transition: .5s;
}

a:hover {
    scale: 1.1;
}

h1 {
    width: 10%;
    font-family: 'Montserrat'; font-size: 8rem; line-height: 0.70; letter-spacing: -10px;font-weight: 800;
} 

#cursor
{
    position: fixed;
    mix-blend-mode: difference;
    pointer-events: none;
    transition: .1s;
    z-index: 10000;
}
/* La NAVBAR */
nav {
    width : 100%; max-width: 100dvw;padding: 1%; 
    display: flex; align-items: center;
    position: fixed; top:0;

    z-index: 5;
    color: #f2f2FB; background-color: transparent;
}

nav a {
    font-size: 1rem;
}

nav > div > div > a:hover {
    letter-spacing: .1dvh;
}

nav > div {
    display: flex; justify-content: flex-end;
    width: 100%; 
}
nav > a > img {
    width: 10dvh; height: 10dvh;
    mix-blend-mode: difference;
}

nav > div > div{
    background-color: #181718; border-radius: 3dvh; 
    padding: 2dvh; margin: 0 1%;
    display: flex; justify-content: space-evenly; align-items: center; flex-wrap: nowrap;

    transition: 1s;
    max-height: 9dvh; min-width: 9dvh;
}

nav > div > div > * {
    padding: 1%;
    transition: .5s;
}

nav > div > div:first-of-type{
    width: 35%;
    transition: 1s;
    overflow: hidden;
}

nav > div > div:last-of-type {
    z-index: 6;
}
nav img {
    width: 5dvh; height: 5dvh;
    transition: 1s;

    mix-blend-mode: difference;
}

nav img:hover {
    scale: 1.1;
}

nav > div > div > button {
    background: none; border: none;
    color : #FBFBF2;
    font-family: 'Montserrat'; font-size: 1rem;
}

nav select {
    background: none; border: none;
    color : #FBFBF2;

    -webkit-appearance: none;
}

nav span {
    transition: 1s;
}

.navContentShrunk {
    display: none;
    opacity: 0;

    transition: .5s;
}

#swapMode {
    transition: 1s;

    mix-blend-mode: difference;
}


/* Page Principal */

section:first-of-type {
    width: 100%; height: 100dvh;
    z-index: 1; position: relative;
    display: flex; justify-content: center; align-items: center;

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

section:first-of-type > div{
    width: 100%; height: 100dvh;
    background-image: url('../../content/images/rouen.jpg');
    background-repeat: no-repeat; background-size: cover;
    margin: auto;

    display: flex; justify-content: flex-start; align-items: center;

	animation: sizeDown 1.2 linear forwards;
	animation-timeline: scroll();
	animation-range: entry 0% exit 100%;
}

.banner{
    width: 100dvw; padding: .05%;
    z-index: 4; position: relative;
    text-wrap: nowrap; 
    overflow: clip;

    background-color: #181718;
    color : #FBFBF2; font-size: 1.2rem; font-family: 'Montserrat'; letter-spacing: 5px; text-transform: uppercase;

    display: flex; justify-content: center; align-items: center;
    transition: 1s;

    box-shadow: 0 0 5dvh #1817181b;
}

.banner:nth-of-type(2) > h2{
    animation: slideInLeft 1 linear forwards;
	animation-timeline: scroll();
	animation-range: entry 0% exit 30%;
    
}

.banner:nth-of-type(3) > h2{
    animation: slideInLeft 1 linear forwards;
	animation-timeline: scroll();
	animation-range: entry 0% exit 50%;

}

.banner:nth-of-type(4) > h2{
    animation: slideInLeft 1 linear forwards;
	animation-timeline: scroll();
	animation-range: entry 0% exit 70%;

}


section:nth-of-type(2) {
    width: 100%; height: 80dvh;
    z-index: 1; position: relative;
    display: flex; justify-content: center; align-items: center;

    background-color: #FBFBF2;
    transition: 1s;

    color: #181718; font-family: 'Montserrat';
}

section:nth-of-type(2) > div:last-of-type {
    width: 90%; height: 70dvh;
    display: flex; justify-content: flex-start; align-items: center;
    
    border-radius: 10dvh;
    background-image: url('../../content/images/rouen.jpg'); background-repeat: no-repeat; background-size: cover; background-position: bottom;

    animation: openUp 1 linear forwards;
	animation-timeline: scroll();
	animation-range: entry 0% exit 35%;
    
}

section:nth-of-type(2) > div:last-of-type > div {
    width: 35%; height: 65dvh;
    background-color: #181718; border-radius: 8dvh;
    color: #FBFBF2;

    padding: 3.5%; margin: 2%;
    text-align: center;
    display: flex; justify-content: space-evenly; align-items: center; flex-direction: column;

    animation: underOpenUp 1 linear forwards;
	animation-timeline: scroll();
	animation-range: entry 0% exit 40%;
}

section:nth-of-type(2) p{
    width: 100%;
    text-align: justify;
    font-size: .8rem;
}

section:nth-of-type(2) a {
    width: 100%; 
    padding: 5%;

    background-color: #FBFBF2; color: #181718; font-family: 'Montserrat'; font-size: .9rem; font-weight: bold;
    border-radius: 2dvh; border: none;
    transition: 1s;
}

section:nth-of-type(2) a:hover {
    scale: 1.1;

    color: #FBFBF2; background-color: #181718;  
    border: 1px solid #FBFBF2;
}

section:nth-of-type(3) {

    background-color: #FBFBF2;
    color : #181718; font-size: 1.2rem; font-family: 'Montserrat'; letter-spacing: 5px;
    /* transform: rotate(1deg); */
}

section:nth-of-type(5) > div > div:hover {
    scale: 1.03;
}

section:nth-of-type(5) > div > div:hover > div {
    transform: translateY(-100%);
}

section:nth-of-type(5) {
    width: 100%; height: fit-content;
    display: flex; justify-content: center; align-items: center;
    padding: 5%;

    transition: 1s;
}

section:nth-of-type(5) > div {
    width: 80%; height: 80dvh;
    overflow: hidden;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    background-color: #36363418;
    padding: .5%; border-radius: 5dvh;
}

section:nth-of-type(5) > div > div {
    margin: 1%;
    transition: 1s;

    overflow: hidden;
}

section:nth-of-type(5) > div > div > a {
    width: 100%; min-height: 100%;
    display: flex;
}


section:nth-of-type(5) > div > div:nth-of-type(1) {
    grid-area: 1 / 1 / 5 / 3; 

    background-image: url('../../content/images/rouen.jpg');
    background-size: cover; background-position: center;
    border-radius: 3dvh;
}
section:nth-of-type(5) > div > div:nth-of-type(2) {
    grid-area: 5 / 1 / 6 / 3; 
    
    background-image: url('../../content/images/rouen.jpg');
    background-size: cover; background-position: center;
    border-radius: 3dvh;

}

section:nth-of-type(5) > div > div:nth-of-type(3) {
    grid-area: 1 / 5 / 6 / 6;
    
    background-image: url('../../content/images/rouen.jpg');
    background-size: cover; background-position: center;
    border-radius: 3dvh;

}

section:nth-of-type(5) > div > div:nth-of-type(4) {
    grid-area: 1 / 3 / 3 / 5; 

    background-image: url('../../content/images/rouen.jpg');
    background-size: cover; background-position: center;
    border-radius: 3dvh;

}

section:nth-of-type(5) > div > div:nth-of-type(5) {
    grid-area: 3 / 3 / 6 / 5; 

    background-image: url('../../content/images/rouen.jpg');
    background-size: cover; background-position: center;
    border-radius: 3dvh;

}

section:nth-of-type(5) > div > div > div {

    width: 100%; min-height: 100%; max-height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 5%;

    overflow: scroll;
    color : #FBFBF2; font-family: 'Montserrat'; font-size: 0.8rem;
    background-color: #181718cc; border-radius: 3dvh; 
    backdrop-filter: blur(10px);

    transition: 1s;
}



footer {
    width: 100%; 
    background-color: #181718;
    z-index: 1; position: relative;
    border-radius: 8dvh 8dvh 0 0;

    color: #FBFBF2;
    z-index: 1;
    transition: 1s;
}

footer > div {
    display: flex; justify-content: space-evenly; align-items: center;
    padding: 5%;
}

footer img {
    width: 10dvh; height: 10dvh;
}

footer > div > div {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    width: 20%;

    overflow: hidden;
}

footer > div > div > hr {
    width: 80%; height: .3dvh;

    right: 0;
    background-color: #FBFBF2; border-radius: 5dvh; border: none;
    transform: translateX(-150%);
    transition: 1s;
}

footer > div > div > a:hover + hr {
    transform: translateX(-30%);
}

footer > div > div > a {
    color : #FBFBF2; font-family: 'Montserrat'; font-size: 1rem;
    text-align: left; padding: 0;
    margin: 0;
}

footer > div > div > p {
    font-family: 'Montserrat'; font-size: .8rem; color : #fbfbf2c3
}
footer > div > div > a:hover {
    scale: unset;
    letter-spacing: 2px; 
}

footer > div:last-of-type{
    width: 75%;
    padding: 2%; margin: auto;

    color : #FBFBF2;font-family: 'Montserrat'; font-size: .7rem; letter-spacing: 3px;
    display: flex; justify-content: space-between; align-items: center;
    
}

footer > div:last-of-type > div {
    display: flex; flex-direction: row; justify-content: center; align-items: center;

    width: auto;
}

footer > div:last-of-type > div > a > img {
    width: 5dvh; height: 5dvh;
}

footer > hr {
    width: 75%; height: .3dvh;
    background-color: #FBFBF2; border-radius: 5dvh;
}

footer button {
    background-color: #181718; border: none;
    color: #FBFBF2; font-family: 'Montserrat';
}

/* POLITIQUE DE CONFIDENTIALITE ET MENTIONS LEGALES */

#ml-pc-container {
    width: 100%;

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

.ml-pc {
    width: 95%; height: auto;
    margin: 1%; padding: 2%;

    border-radius: 4dvh;

    background-color: #181718; color: #FBFBF2; font-family: 'Montserrat';
}

/* COOKIES */

#cookiesPopUp {
    width: 35dvw; height: fit-content;
    position: fixed; bottom: 0; right: 0;
    margin: 2%; padding: 2%;
    border-radius: 3dvh;

    z-index: 100;

    background-color: #FBFBF2;
    color: #181718; font-family: 'Montserrat';
    display: flex; justify-content: space-evenly; align-items: center; flex-direction: column;
    box-shadow: 0 0 5dvh 5dvh rgba(0, 0, 0, 0.075);

    transition: 1s;
}

#cookiesPopUp > p {
    font-size: 1rem;
    color: #837d83;
}

#cookiesPopUp > div > button {
    width: 50%;
    background-color: #181718; color: #FBFBF2; font-family: 'Montserrat'; font-size: .8rem;

    padding: 2%; margin: 2%;
    border: none; border-radius: 5dvh;
    transition: 1s;
}

#cookiesPopUp button:hover {
    cursor: pointer;

    font-weight: bold;
    scale: 1.1;
}

#cookiesPopUp > div {
    width: 100%;
    display: flex;
}

/* Page contact */
#contactDiv {
    width: 100%;
    padding: 5% 10%;

}
#contactDiv > div > span{
    padding: 5%; height: 110%; width: 100%; box-sizing: border-box;
    display: block;
    text-align: center;
    font-size: 1.2em; font-weight: 500;
}
#contactDiv > div > form {
    width: 100%; height: 70dvh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

#contactDiv > div > form > textarea {
    width: 100%; min-height: 70%; margin: 1%;
    resize: vertical;
    font-size: 1.15em;
}

#contactDiv > div > form > input {
    width: 100%; height: 15%;
    margin: 1%;
    font-size: 1.5rem;
}

#contactDiv input[type="submit"]{
    margin-left: 1%;
    color: #fbfbf2b0; font-weight: bold; font-size: 1.3em;
    transition: 1s;
    width: 100%; height: 10%;
}

#contactDiv input[type="submit"]:hover{
    scale: 1.1;
}

#contactDiv input, #contactDiv textarea {
    background-color: #181718; border: none; border-radius: 2dvh; color: #FBFBF2; 
    padding: 1%;
}

@media screen and (max-width : 800px) {
    #cursor{
        display: none;
    }
    *:hover{
        cursor: auto;
    }
    .banner {
        display: none;
    }
    h1 {
        font-size: 3.75rem;
    }
    nav > div{
        position: fixed;
        top : unset; bottom: 0; left: 0;
        max-width: 100dvw;
    }
    nav > a > img  {
        width: 6dvh; height: 6dvh;
    }
    nav > a {
        padding: 0;
    }
    nav > div > div:first-of-type {
        display: none;
    }
    nav > div > div:last-of-type {
        margin: 5%;
    }

    #apropos > div {
        background: unset;
        width: 100%; height: 100dvh;
        box-shadow: unset;
    }

    #apropos > div > div {
        width: 100%;
        box-shadow: unset;
        padding: 10%;
        
        border-radius: 10dvw;
    }

    section:nth-of-type(5) > div {
        width: 100%;
        display: flex; flex-direction: column;
    }
    .projectItem{
        height: 20%;
    }
    footer > div {
        flex-direction : column;
    }

    footer > div > div {
        width: 60%;
    }

    .ml-pc {
        padding: 10%;
    }

    #contactDiv input, #contactDiv textarea {
        padding: 5%;
    }

    #contactDiv input[type="submit"]{
        margin: 1%;
    }
    #loadingScreen {
        width: 100%; height: 100%;
    }
    
    #loadingScreen > video:first-of-type{
        display: none;
    }
    #loadingScreen > video:last-of-type{
        display: flex;
        width: 100%; height: 100%;
    }
    #cookiesPopUp{
        width: 90%;

        padding: 5%; margin: 5%;
        
    }
}