@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bebas Neue', 'Times New Roman', Times, serif;
    -webkit-transform-style: preserve 3d;
}

html {
    scroll-behavior:smooth;
    overflow-y: scroll;
    user-select: none;
    scrollbar-width: none;
    background: black;
}

::-webkit-scrollbar {
    display: none;
}

.separation {
    width: 100%;
    height: 1px;
}


/* //////////////////////////////////////////MODULES DE NAVIGATION /////////////////////////////*/

.nav-menu {
    position: fixed;
    align-items: center;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-areas: "a b c"
                         "d d d"
                         "e f g";
    grid-template-rows: 70px 1fr 150px;
    grid-template-columns: 70px 1fr 70px;
    padding: 4vh 3vw;
}

nav {
    justify-content: center;
    align-items: center;
    list-style: none;
    font-size: 27px;
    height: 45px;
}

.dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav1 {
    width: min-content;
    grid-area: a;
}

.nav2 {
    grid-area: c;
}

.nav3 {
    grid-area: e;
}

.nav4 {
    grid-area: f;
}

.link {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 40px;
    color: white;
}

.insta {
    height: 70px;
    border-radius: 19px;
    background: rgba(0, 0, 0, 0.935);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
}

.insta:hover {
    background: rgb(131,58,180);
    background: linear-gradient(-150deg, rgba(131, 58, 180, 1) 20%,
                                         rgb(255, 71, 71) 50%,
                                         rgb(255, 182, 81) 80%);
    transform: scale(1.15);
}

.nav2 .dropdown:hover > .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -webkit-transform-style: preserve 3d;
    -webkit-transform: translateZ(0);
    visibility: visible;
}

.nav-menu:hover > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
}

.disk {
    background:rgba(51, 51, 51, 0.935);
    width:70px;
    height:70px;
    margin:auto;
    border-radius:1%;
    border-top-right-radius:9px;
    box-shadow:1px 1px 1px RGBA(0,0,0, 0.5),
               -2px -2px 1px rgba(34, 34, 34, 0.935) inset;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
}
  
.gap {
    background:rgba(34, 34, 34, 0.935);
    width:46px;
    height:25px;
    margin:auto;
    border:1px solid #121212f0;
    border-top:0;
    border-right:0;
    border-radius:0 0 3px 3px;
    box-shadow:-1px -1px 3px rgba(17, 17, 17, 0.935) inset;
}
  
.metal {
    background:linear-gradient(to bottom, rgba(170, 170, 170, 0.935), rgba(119, 119, 119, 0.935));
    width:32px;
    margin-left:13px;
    height:25px;
    border-radius:0 0 3px 3px;
    box-shadow:-1px -1px 1px RGBA(50, 50, 50, 0.25) inset;
}

.metal:hover {
    margin-left:0;
    transition:all 0.4s linear;
}
  
.disk:hover {
    transform: scale(1.15);
}
  
.hole {
    background:rgba(34, 34, 34, 0.935);
    width:7px;
    height:18px;
    margin-left:auto;
    margin-right:5px;
    position:relative;
    top:3px;
    border-radius:1px;
    box-shadow:0 0 1px #212121f0;
}
  
.label {
    background:rgba(204, 204, 204, 0.935);
    width:57px;
    height:37px;
    margin:7px auto 0 auto;
    border:1px solid rgba(51, 51, 51, 0.935);
    border-bottom:2px solid rgba(0, 0, 255, 0.935);
    border-radius:3px 3px 0 0;
    box-shadow:-1px -1px 6px rgba(119, 119, 119, 0.935) inset;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    width: 300px;
    height: min-content;
    background-color: white;
    padding: .75rem;
    border-radius: .25rem;
    box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    transform : translateY(-10px);
    -webkit-transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.event {
    font-size: 15px;
    color: black;
    padding-bottom: 12.5px;
    align-items: center;
}

.dates {
    position: absolute;
    height: 40px;
}

.event img {
    position: absolute;
    width: 40px;
}

.dates {
    right: 10px;
    font-size: 27px;
}

.event h1,
.event li {
    margin-left: 50px;
}

.nav3 a {
    position: absolute;
}

.nav3 button {
    cursor: pointer;
    border: 0px;
    background: none;
    transition: transform 0.5s;
}

.nav3 img {
    position: relative;
    width: 70px;
    border-radius: 45%;
    background: white;
    box-shadow: 10px 5px 10px 2px rgba(0, 0, 0, .7);
    animation: check 1.75s 0s infinite ease-out alternate;
}

.nav3 button:hover {
    transform: scale(1.10);
}

.arrow-down {
    position: relative;
    left: 50%;
    margin: 72px 0 0 -17px;
    animation: arrow 0.5s 1s infinite ease-out alternate;
}

.left, .right {
    position: absolute;
    height: 3px;
    width: 20px;
    background: #e9e9ed;
    top: 10px;
    border-radius: 4px;
}

.left{
    transform: rotate(225deg);
}

.right{
    left: 13px;
    transform: rotate(-45deg);
}

section {
    justify-content: center;
    background: white;
}

/* ////////////////////////////////////////////PREMIERE SECTION////////////////////////// */

.one {
    height: 100vh;
    width: 100vw;
    padding: 4vh;
    background: url('img/DSCF7647_DxO-4.jpg');
    background-size: cover;
    background-position: center;
    scroll-snap-align: start;
    display: flex;
}

.one div {
    display: flex;
    width: 225px;
    height: 225px;
    top: 0px;
    justify-content: center;
    /*justify-content: center;
    align-items: center;*/
}

/* ////////////////////////////////////////////DEUXIEME SECTION////////////////////////// */

.two {
    scroll-snap-align: start;
    justify-content: center;
    text-align: center;
    display: flex;
}

.side {
    flex: 1;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.image-gallery {
    flex: 8;
    display: block;
    padding-top: 2%;
}

.goutiere {
    display: block;
    columns: 2;
}

.goutiere div {
    width: 100%;
    margin-bottom: 4%;
    overflow: hidden;
}

.goutiere img {
    object-fit: cover;
    max-width: inherit;
    max-height: inherit;
    height: inherit;
    width: inherit;
}

.txt-gallery {
    font-size: 80px;
    color: black;
}

.image-gallery .separation {
    background: black;
    margin-bottom: 25px;
    height: 6px;
}
/* ////////////////////////////////////////////QUATRIEME SECTION////////////////////////// */

.four {
    height: 100vh;
    width: 100vw;
    display: flex;
    position: relative;
    background: rgb(5, 5, 5);
    color: white;
    justify-content:center;
    align-items:center;
    z-index: 10;
}

.four-right,
.four-left {
    height: 100%;
    width: 50%;
    padding: 4%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
}

.four-right .separation {
    background: white;
    width: 35%;
    margin-top: 3%;
    margin-bottom: 3%;
    visibility: hidden;
}

.insta-links {
    display: flex;
    flex-flow: column;
    height: min-content;
    width: auto;
    align-items: center;
}

.insta-links img,
.insta-links button img {
    display: flex;
    height: 6.5vw;
    width: 6.5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.insta-links img {
    border-radius: 25%;
    margin: 50px;
}

.insta-links button img {
    border-radius: 50%;
    margin: 10px;
}

.insta-links a {
    text-decoration: none;
}

.insta-links button {
    transition: transform 0.5s;
    font-size: 6.5vw;
    border: solid;
    border-width: 6px;
    border-color: white;
}

.insta-links button:hover {
    transform: scale(1.1);
}

.prese {
    font-size: 23px;
    text-align: justify;
}

form {
    background-color: white;
    padding: 15px 30px 30px 30px;
    border-radius: px;
    border: solid 6px white;
    background: rgb(5, 5, 5);
    width: 100%;
    font-size: 18px;
}

form h1 {
    font-size: 40px;
}

.corps-formulaire {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 62%;
}

.groupe {
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-direction: column;

}
.gauche {
    flex: 2;
}

.droite {
    margin-left: 40px;
    flex: 4;
}

.gauche .groupe input {
    margin-top: 5px;
    padding: 10px 5px 10px 30px;
    border: 1px solid #c9c9c9;
    outline-color: red;
    border-radius: 5px;
    font-size: 18px;
}

.gauche .groupe i {
    position: absolute;
    left: 0;
    top: 28px;
    padding: 9px 8px;
    color: white;
}

.droite .groupe {
    height: 100%;
}

.droite .groupe textarea {
    margin-top: 5px;
    padding: 10px;
    background-color: #f8f8f8;
    border: 2px solid white;
    outline: none;
    border-radius: 5px;
    resize: none;
    height: 100%;
    font-size: 18px;
}

.pied-formulaire button {
    margin-top: 50px;
    background-color: #e9e9ed;
    color: black;
    font-size: 16px;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: transform 0.5s;
}

.pied-formulaire button:hover {
    transform: scale(1.05);
}

/* ////////////////////////////////////////// FONCTIONS //////////////////////////////////////// */

@media screen and (max-width: 1123px) {
    .gauche {
        width: 100%;
        flex: none;
    }

    .droite {
        margin-left: 0;
        width: 100%;
        flex: none;
    }

    .pied-formulaire button {
        margin-top: 65px;
    }

    .four {
        height: auto;
        flex-direction: column;
        justify-content: space-between;
        padding: 4%;
    }

    .four .separation {
        width: 50%;
        visibility: visible;
    }
    
    .four-left,
    .four-right {
        width:90vw;
        height: auto;
        padding: 0%;
    }

    .insta-links {
        flex-flow: row wrap;
        justify-content: center;
    }

    .insta-links img,
    .insta-links button img {
        height: 50px;
        width: 50px;
    }
    
    .insta-links img {
        border-radius: 25%;
        margin: 15px;
    }
    
    .insta-links button {
        font-size: 40px;
        border-width: 3px;
    }

    .prese {
        width: 90vw;
    }

    form {
        height: auto;
        padding-bottom: 10px;
    }
}

@media screen and (max-width: 900px) {

    html {
        scroll-snap-type: none;
    }

    .insta {
        background: rgba(0, 0, 0, 0.75);

    }

    .side {
        flex: 0;
    }

    .image-gallery {
        flex: 10;
    }

    .goutiere {
        width: 100%;
        columns: 1;
        column-width: 100%;
    }

    .goutiere div {
        width: 100%;
        overflow: visible;
    }

    .txt-gallery {
        display: none;
    }

    .image-gallery .separation {
        display: none;
    }
}

@media screen and (max-width: 657px) {

    .four .separation {
        margin-top: 5%;
        margin-bottom: 5%;
    }


    .insta-links {
        flex-flow: column;
    }
}

@media screen and (max-width: 404px) {
    .one div {
        width: 125px;
    }
    
    .prese {
        width: auto;
    }

    form {
        width: auto;
    }

    .gauche {
        margin-top: 35%;
        margin-left: 50%;
        transform: translate(-50%,-50%);
    }

    .droite {
        margin-left: 0%;
        transform: translate(0,-50%);
    }

    .corps-formulaire {
        margin-bottom: 0;
    }

    .groupe {
        margin-top: 0;

    }

    .gauche .groupe input {
        margin-bottom: 5px;
    }

    .pied-formulaire button {
        margin-top: 0px;
    }
}

@keyframes arrow{
    0% {
      bottom: -0.5rem;
    }
    100%{
      bottom: 0.5rem;
    }
}

@keyframes check{
    0% {
      rotate: 0deg;
    }
    10%{
      rotate: 45deg;
    }
}