/*webdesign et animations par: Malka Tutt*/
/*frontend et backend par: Alexandre Sticher*/
html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Titre */
.title {
    padding-top: 12vw;
    box-sizing: border-box;

    background-image: url("../images/fondPrincipal.PNG");
    height: 100vh;
    width: 100vw;

    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.firstTitle {
    margin: 0% 0 0 4%;
    padding: 0;
    color: #DA424F;
    font-size: 8vw;
    line-height: 0.5;
}

.secondTitle {
    margin: 0% 0 0 4%;
    padding: 0;
    color: #DA424F;
    font-size: 13.5vw;
}

.title p {
    margin: 0% 0 0 4%;
    padding: 0;
    font-size: 1.5vw;
    line-height: 0;
}

/* Association */
.asso {
    margin-top: 20vh;
    height: 75vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
}

.infoAsso {
    display: flex;
    flex-direction: column;
    width: 45vw;
    margin-left: 5vw;
}

.infoAsso h3 {
    font-size: 1.8vw;
}

.btn {
    width: fit-content;
}

.infoAsso img {
    width: 25vw;
    margin-top: 5vh;
}

.titleAsso {
    justify-content: end;
    align-items: end;
    width: 30vw;
    color: #F2B03E;
    font-size: 8vw;
    margin-right: 5vw;
}

.las {
    font-size: 15.3vw;
}

.soci {
    font-size: 15.4vw;
}


.titleAsso h2 {
    margin: -5vh;
}

.verTel {
    display: none;
}



/*Events*/
#events {
    margin: 10vw 0 0 5vw;
    display: flex;
    flex-direction: row;
}

#events img {
    width: 35vw;
}

.infoEvents {
    width: 50vw;
}

.infoEvents h2 {
    color: #DA424F;
    font-size: 7vw;
    padding: 0;
    margin: 0;
}

.event {
    margin-top: 3vw;
    width: 30vw;
    border-bottom: solid 1.5px black;
}

.eventTitle {
    font-size: 1.5vw;
    margin: 0.5vw 0 0 1vw;
}

.event p {
    margin: 0 0 0.5vw 1vw;
    font-size: 1.1vw;
    margin: 0 0 0 1vw;
}

.event button {
    margin: 1vw 0 1vw 1vw;
    color: white;
    padding: 0.2vw 1vw 0.2vw 1vw;
    font-size: 1vw;
}

.event button:hover {
    color: #309965;
}

#events .btnRed {
    margin: 2vw 0 1vw 1vw;
    color: white;
    padding: 0.2vw 1vw 0.2vw 1vw;
    font-size: 1vw;
}

#events .btnRed:hover {
    color: #DA424F;
}

.no-event p {
    width: 100vw;
    font: 2vw;
    margin-left: 5vw;
}

/* Mots */
.mots {
    margin-top: 20vh;
    position: relative;
    width: 100vw;
    height: 100vh;
}

.mots p {
    position: absolute;
    margin: 0;
    padding: 0;
}

/* État de base de tous les mots dans la div .mots */
.mots p {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transition: all 0.4s ease-out;
}

/* État quand le JS ajoute la classe .visible */
.mots p.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.gRouge {
    color: #DA424F;
    font-size: 7vw;
}

.vert {
    color: #309965;
    font-size: 5vw;
}

.gris {
    color: #a8a7a7;
    font-size: 2vw;
}

.pRouge {
    color: #DA424F;
    font-size: 2.5vw;
}

.jaune {
    color: #F2B03E;
    font-size: 3.5vw;
}

/*Galerie*/
#gallery {
    margin: 10vh 0 5em;
}

#gal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gal {
    display: grid;
    width: 90vw;
    grid-template-columns: 24% 24% 24% 24%;
    grid-template-rows: 35vh 35vh;
    column-gap: 1.3%;
    row-gap: 2%;
    margin: 0 auto 2em;
}

.img3 {
    grid-row: 2;
    grid-column: span 2;
}

.img4 {
    grid-column: span 2;
    grid-row: span 2;
}

.btnGal {
    margin: 0 auto;
    display: block;
}

h1 {
    display: none;
}

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

    /* Titre */
    .title {
        padding-top: 12vw;
        box-sizing: border-box;

        background-image: url("../images/imgEvents.PNG");
        height: 105vh;
        width: 100vw;

        background-size: 100vw;
        background-position: bottom center;
        background-repeat: no-repeat;

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

    .firstTitle {
        margin: 10vh 0 0 0;
        font-size: 13vw;
    }

    .secondTitle {
        margin: 0;
        font-size: 22vw;
    }

    .title p {
        margin: 0;
        font-size: 5vw;
    }

    /*Event*/
    #events {
        margin: 3vh 0 0 5vw;
    }

    #events img {
        display: none;
    }

    .infoEvents h2 {
        font-size: 12vw;
    }

    .event {
        margin-top: 1vh;
        width: 90vw;
        border-bottom: solid 1.5px black;
    }

    .eventTitle {
        font-size: 5vw;
    }

    .event p {
        font-size: 5vw;
    }

    .event button {
        margin: 1vh 0 1vh 0;
        padding: 0.2vh 5vw 0.2vh 5vw;
    }

    .event button a {
        font-size: 5vw;
    }

    #events .btnRed {
        margin: auto;
        color: white;
        padding: 0.2vh 0 0.2vh 0;
        margin: 1.5vh 0 1.5vh 0;
        max-width: 90vw;
        min-width: 70vw;
    }

    #events .btnRed a {
        font-size: 5vw;
    }

    .mots {
        display: none;
    }

    #gal {
        grid-template-columns: 48% 48%;
        grid-template-rows: 35vh 35vh;
        column-gap: 3.5%;
        row-gap: 2%;
        margin: 0 auto 1em;
    }

    .img3 {
        grid-row: 2;
        grid-column: span 2;
    }

    .img4 {
        grid-column: span 2;
        grid-row: span 2;
    }


    .btnGal a {
        font-size: 5vw;
    }

    .las,
    .soci,
    .ation {
        display: none;
    }

    .verTel {
        display: block;
        font-size: 12.5vw;
        color: #F2B03E;
        order: 1;
    }

    .asso {
        margin-left: 5vw;
        margin-top: 2vh;
        height: auto;
        width: 90vw;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .infoAsso {
        order: 2;
        display: flex;
        flex-direction: column;
        width: 90vw;
        font-size: 1.2vw;
        margin-left: 0vw;
    }

    .infoAsso h3 {
        font-size: 4.5vw;
        width: 75vw;
        margin: 0 0 2vh 0;
    }

    .btn a {
        font-size: 5vw;
    }

    .infoAsso img {
        width: 90vw;
    }

    .titleAsso {
        margin-left: 0vw;
        width: 90vw;
        margin-right: 0;
        display: block;
    }

    .titleAsso h2 {
        margin: 1vh 0 1vh 0;
    }

    .asso p {
        font-size: 3vw;
    }

    .secondP {
        margin-top: 3vh;
    }
}