@font-face {
    font-family: 'Reglo';
    src: url(font/Reglo-Bold.otf);
}
*{
    padding:0 ;
    margin:0 ;
    font-family:'Reglo' ;
}
html{
    background-color:#fe5944 ;
    scroll-behavior:smooth ;
}
body{
    scroll-behavior:smooth ;
    overflow-x:hidden ;
}
#sun{
    display:none ;
}
#images{
    display:none ;
}

/* - HEADER - */
header{
    display:flex ;
    align-items:center ;
    justify-content:space-between ;
    flex-direction:row ;
    padding:15px 30px ;
}
header nav{
    display:flex ;
    justify-content:center ;
    position:absolute ;
    background-color:#fe5944 ;
    width:100vw ;
    height:100vh ;
    top:0 ;
    left:-100% ;
    flex-direction:column ;
    transition:100ms ease-out ;
    z-index:10 ;
}
header nav a{
    /*color_base --> #f6eb6f*/
    color:#f6eb6f ;
    text-decoration:none ;
    text-transform:uppercase ;
    font-size:4em ;
    padding:10px 30px ;
    transition:150ms ease-out ;
}
header img{
    width:100px ;
    z-index:100 ;
    transition:500ms cubic-bezier(.47,-0.35,.5,1.42) ;
}
header div{
    z-index:100 ;
    cursor:pointer ;
}
header div span{
    display:block ;
    visibility:visible ;	
    width:65px ;
    height:7px ;
    background-color:#fffdf8 ;
    margin:12px 0 ;
    border-radius:12px ;
    transition:100ms ease-out ;
}
header div span:nth-child(1){
    transform-origin:right ;
}
header div span:nth-child(2){
    width:45px ;
    transform:translateX(20px) ;
}
header div span:nth-child(3){
    transform-origin:right ;
}
header.active nav{
    left:0 ;
}
header.active div span:nth-child(1){
    transform:rotate(-45deg) ;
    width:53.5px
}
header.active div span:nth-child(2){
    width:0 ;
}
header.active div span:nth-child(3){
    transform:rotate(45deg) ;
    width:53.5px ;
}
header.active img{
    transform:rotate(360deg) ;
}
header #mouse{
        display:block ;
	  visibility:visible ;
	  width:30px ;
    	 height:107px ;
    	 cursor:default ;
    	 padding-right:25px ;
    }
    header #mouse img{
       position:absolute ;
       width:50px ;
    }
    header #mouse #roulette{
    	 animation:scroll 750ms cubic-bezier(.29,.9,.82,1.04) alternate infinite ;
     }
     header #mouse #fleche_anim{
       animation:scroll_arrow 375ms cubic-bezier(.29,.9,.82,1.04) alternate infinite ;
     }
@keyframes scroll{
    from{
        transform:translateY(0) ;
    }
    to{
        transform:translateY(25px) ;
    }
}
@keyframes scroll_arrow{
    from{
        transform:translateY(0) ;
    }
    to{
        transform:translateY(10px) ;
    }
}

/* - MAIN - */
/* - Section 1 - */

h1{
    display:none ;
}
main #section1{
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    margin-top:100px ;
}
main #section1 h2{
    color:#fffdf8 ;
    font-size:5em ;
    text-align:right ;
    text-transform:uppercase ;
}
main #section1 h2 span img{
    width:120px ;
    max-width:150px ;
    transform:translateY(15px) ;
    z-index:0 ;
}
main #section1 h3{
    color:#f6eb6f ;
    font-size:2.1em ;
    margin-top:10px ;
}
main #section1 a{
    background-color:#e54c41 ;
    padding:10px 40px 17px ;
    color:#fffdf8 ;
    text-decoration:none ;
    text-transform:uppercase ;
    font-size:2em ;
    border-radius:10px ;
    filter: drop-shadow(0px 6px 0px #a33131) ;
    margin-top:25px ;
    transition:150ms ease-out ;
}
main #section1 a:active{
    filter: drop-shadow(0px 0px 0px #a33131) ;
}

/* - Section 2 - */

main #section2{
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    margin-top:180px ;
}
main #section2 p{
    color:#fffdf8 ;
    font-size:1.3em ;
    width:90% ;
    max-width:375px ;
}
main #section2 img{
    width:95% ;
    max-width:400px ;
    filter: drop-shadow(0px 6px 0px #a33131) ;
    margin-top:15px ;
}

/* - Section 3 - */

main #section3{
    margin-top:130px ;
}
main #section3 h2{
    font-size:4em ;
    color:#fffdf8 ;
    text-transform:uppercase ;
    margin-left:10px ;
}
main #section3 h3{
    color:#f6eb6f ;
    font-size:3em ;
    text-transform:uppercase ;
    margin:25px ;
    cursor:default ;
}
main #section3 .arrow{
    transform:rotate(90deg) ;
    width:75px ;
    margin-left:15px ;
}

/* - Section 4 - */

main #section4{
    margin-top:130px ;
    display:flex ;
    flex-direction:column ;
}
main #section4 h2{
    font-size:4em ;
    color:#fffdf8 ;
    text-transform:uppercase ;
    margin-left:10px ;
    margin-bottom:25px ;
}
main #section4 a{
    color:#f6eb6f ;
    font-size:3em ;
    text-transform:uppercase ;
    text-decoration:none ;
    padding:25px ;
    transition:150ms ease-out ;
}

/* - Section 5 - */

main #section5{
    margin-top:130px ;
}
main #section5 h2{
    font-size:4em ;
    color:#fffdf8 ;
    text-transform:uppercase ;
    margin-left:10px ;
    margin-bottom:50px ;
}
main #section5 form{
    margin:0 auto ;
    display:flex ;
    flex-direction:column ;
    align-items:center ;
}
main #section5 div div{
    display:flex ;
    justify-content:space-between ;
    width:340px ;
}
main #section5 input,main #section5 textarea{
    background-color:#e54c41 ;
    color:#fffdf8 ;
    outline:none ;
    border:none ;
    padding:7px 20px ;
    font-size:1em ;
    margin:10px 0 ;
}
main #section5 input::placeholder{
    color:#fffdf8 ;
    opacity:.7 ;
}
main #section5 #nom,main #section5 #prenom{
    width:120px ;
    margin:0 ;
}
main #section5 #mail,main #section5 textarea{
    width:300px ;
}
main #section5 #sub{
    background-color:#e54c41 ;
    padding:10px 40px 17px ;
    color:#fffdf8 ;
    text-decoration:none ;
    text-transform:uppercase ;
    font-size:2em ;
    border-radius:10px ;
    filter: drop-shadow(0px 6px 0px #a33131) ;
    margin-top:25px ;
    transition:150ms ease-out ;
}
main #section5 #sub:active{
    filter: drop-shadow(0px 0px 0px #a33131) ;
}

/* - FOOTER - */

footer{
    background-color:#a33131 ;
    margin-top:50px ;
    padding:15px 0 ;
    display:flex ;
    flex-direction:column ;
    align-items:center ;
}
footer div{
    display:flex ;
    flex-direction:column ;
    align-items:center ;
}
footer a{
    color:#fffdf8 ;
    text-decoration:none ;
    padding:5px 0 ;
    font-size:1.2em ;
}
footer p{
    margin-top:15px ;
    color:#fffdf8 ;
    opacity:.5 ;
}

@media screen and (min-width:1024px){

    #sun{
        display:block ;
        position:fixed ;
        z-index:150 ;
        pointer-events:none ;
        transition:200ms ease-out ;
    }
    #sun img{
        width:50px ;
        position:absolute ;
    }
    #sun img:nth-child(1){
        z-index:1 ;
    }
    #sun img:nth-child(2){
        animation:tourne 4500ms linear infinite ;
    }
    @keyframes tourne{
        from{
            transform:rotate(0deg) ;
        }
        to{
            transform:rotate(360deg) ;
        }
    }
    #images {
        display:block ;
        position:relative;
    }
    #images img {
        position: fixed;
        height: 300px;
        opacity: 0;
        z-index: -1 ;
        transform: scale(.7);
        pointer-events:none ;
        transition:250ms ease-out;
    }
    
    /* - HEADER - */

    header nav a:hover{
        filter: drop-shadow(0px 6px 0px #a33131) ;
    }
    /* - MAIN - */
    /* - Section 1 - */

    main #section1{
        align-items:end ;
        max-width:1024px ;
        margin-top:0 ;
        margin:0 auto ;
        transform:translateY(-150px) ;
    }
    main #section1 h2{
        font-size:9em ;
    }
    main #section1 h3{
        font-size:3.7em ;
    }
    main #section1 h2 span img{
        width:400px ;
        transform:translate(-260px,320px) ;
        z-index:0 ;
        max-width:unset ;
    }
    main #section1 a{
        margin-right:200px ;
    }
    main #section1 a:hover{
        filter: drop-shadow(0px 0px 0px #a33131) ;
    }

    /* - Section 2 - */

    main #section2{
        max-width:1024px ;
        margin-top:0 ;
        margin:150px auto 0 ;
        flex-direction:row ;
        justify-content:space-around ;
    }
    main #section2 p{
        font-size:1.6em ;
        max-width:500px ;
    }

    /* - Section 3 - */

    main #section3{
        max-width:1024px ;
        margin-top:0 ;
        margin:150px auto 0 ;
    }
    main #section3 h2{
        font-size:6em ;
    }
    main #section3 #flex1,main #section3 #flex2{
        display:flex ;
        justify-content:space-between ;
        padding:15px 100px ;
    }
    main #section3 .arrow{
        width:100px ;
    }
    main #section3 #flex1 img,main #section3 #flex2 img{
        transform:rotate(0deg) ;
    }
    main #section3 #flex2{
        flex-direction:row-reverse ;
    }
    main #section3 #flex2 img{
        transform:rotate(180deg) ;
    }
    main #section3 #middle{
        transform:rotate(90deg) translate(10px,-750px) ;   
    }
    main #section3 h3{
        font-size:4em ;
    }
    main #section3 #flex2 .second{
        position:relative ;
    }
    main #section3 #flex2 .second span{
        content:'' ;
        position:absolute ;
        height:4px ;
        border-radius:8px ;
        background-color:#f6eb6f ;
        left:105% ;
        right:-5% ;
        bottom:-15px ;
    }

    /* - Section 4 - */

    main #section4{
        max-width:1024px ;
        margin-top:0 ;
        margin:150px auto 0 ;
    }
    main #section4 h2{
        font-size:6em ;
        z-index: -5 ;
    }
    main #section4 a{
        font-size:4em ;
        z-index:auto ;
    }
    main #section4 a:hover{
        filter: drop-shadow(0px 6px 0px #a33131) ;
    }

    /* - Section 5 - */

    main #section5{
        max-width:1024px ;
        margin-top:0 ;
        margin:150px auto 0 ;
    }
    main #section5 h2{
        font-size:6em ;
    }
    main #section5 form{
        flex-direction:row ;
        justify-content:space-between ;
        align-items:start ;
        position:relative ;
        padding:0 25px ;
        font-size:1.3em ;
    }
    main #section5 #nom,main #section5 #prenom{
        width:160px ;
        margin:0 ;
        padding:15px 20px ;
    }
    main #section5 #mail,main #section5 textarea{
        width:400px ;
        padding:15px 20px ;
    }
    main #section5 div div{
        display:flex ;
        justify-content:space-between ;
        width:440px ;
    }
    main #section5 form #sub{
        position:absolute ;
        left:25px ;
        bottom:0 ;
        font-size:1.5em ;
        cursor:pointer ;
    }
    main #section5 #sub:hover{
        filter: drop-shadow(0px 0px 0px #a33131) ;
    }

    /* - FOOTER - */

    footer div{
        display:flex ;
        flex-direction:row ;
        align-items:center ;
    }
    footer div a{
        margin:0 25px ;
        transition:150ms ease-out ;
    }
    footer div a:hover{
        opacity:.5 ;
    }
    footer p{
        cursor:default ;
    }
}

/* - WORKS.PHP - */



#works #lightbox{
    width:100vw ;
    height:100vh ;
    position:fixed ;
    top:0 ;
    left:0 ;
    background-color:rgba(0, 0, 0, .3) ;
    backdrop-filter:blur(5px) ;
    z-index:500 ;
    display:none ;
    align-items:center ;
    justify-content:center ;
}
#works #lightbox #img_lightbox{
    width:100% ;
    max-width:1024px ;
    margin:auto ;
    border-radius:15px ;
}
#works{
    min-height:100vh ;
}
#works main{
    margin-top:100px ;
}
#works main ul{
    max-width:1050px ;
    margin:0 auto ;
    display:flex ;
    flex-wrap:wrap ;
    gap:2vmin ;
    padding:0 14px ;
}
#works main ul li{
    list-style:none ;
    height:250px ;
    flex-grow:1 ;
}
#works main ul li img{
    width:100% ;
    height:100% ;
    object-fit:cover ;
    border-radius:15px ;
    filter: drop-shadow(0px 6px 0px #a33131) grayscale() ;
    transition:200ms ease-out ;
}
#works main ul li video{
    width:320px ;
    border-radius:15px ;
    filter: drop-shadow(0px 6px 0px #a33131) ;
    transition:200ms ease-out ;
}
#works main ul li img:hover{
    filter: drop-shadow(0px 0px 0px #a33131) ;
}