body {
    margin:0;
    padding:0;
}

.container {
    width: 100%;
    height: auto;
    margin: 0;
    background-color: #fdde89;
    overflow: hidden !important;
}

img {
    width: 100%;
}

.ZAC {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 37vw;
        left: 0;
        width:63%;
    }

    @media screen and (min-width: 768px) {
        top: 13vw;
        left: 2vw;
        width:55%;
    }
}

.ZAC-link {
    position:absolute;
    height: 75%;
    bottom: 10%;
    left: 15%;

    @media screen and (max-width: 768px) {
        width:65%;
    }

    @media screen and (min-width: 768px) {
        width:72%;
    }
}

.ZAM {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 37vw;
        left: 37vw;
        width:63%;
    }

    @media screen and (min-width: 768px) {
        top: 15vw;
        left: 40vw;
        width: 55%;
    }
}

.ZAM-link {
    position:absolute;
    right: 10%;
    height:75%;
    bottom:10%;

    @media screen and (max-width: 768px) {
        width:70%;
    }

    @media screen and (min-width: 768px) {
        width:72%;
    }
}

.tagline {
    position:absolute; 

    @media screen and (max-width: 768px) {
        top: 75vw;   
        left: 15vw;
        width:80%;
    }

    @media screen and (min-width: 768px) {
        top:55vw;   
        left: 28vw;
        width:45%;
    }
}

.connaissance {
    position:absolute;
    top: 30%;
    width:100%;
    height: 35%;
}

.tagline-link {
    position:absolute;

    @media screen and (max-width: 768px) {
        left: 8vw;
        width: 84vw;
        height: 40vw;
        top: 320vw;
    }

    @media screen and (min-width: 768px) {
        left: 10vw;
        width: 80vw;
        height: 18vw;
        top: 163vw;
    }
}

.cards {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 255vw;
        left: 8vw;
        width:83%;
    }

    @media screen and (min-width: 768px) {
        top: 115vw;
        left: 45vw;
        width:50%;
    }
}

.cards-link {
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.pictos {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 450vw;
        left: 32vw;
        width:38%;
    }

    @media screen and (min-width: 768px) {
        top: 252vw;
        left: 37vw;
        width:28vw;
    }
}

.pictos-link {
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.philibert {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 613vw;
        left: 15vw;
        width:25%;
    }

    @media screen and (min-width: 768px) {
        top: 350vw;
        left: 20vw;
        width: 25%;
    }
}

.philibert-link {
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.esprit-jeu {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 616vw;
        left: 60vw;
        width:25%;
    }

    @media screen and (min-width: 768px) {
        top: 355vw;
        left: 60vw;
        width:20%;
    }

}

.esprit-jeu-link {
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.blackrock {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 645vw;
        left: 25vw;
        width:22%;
    }

    @media screen and (min-width: 768px) {
        top: 380vw;
        left: 39vw;
        width:10%;
    }
}

.blackrock-link {
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;

}

.scorpionmasque {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 645vw;
        left: 50vw;
        width:22%;
    }

    @media screen and (min-width: 768px) {
        top: 380vw;
        left: 50vw;
        width:10%;
    }
}

.scorpionmasque-link {
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
}   

.email {
    position:absolute;
    text-align: center;
    font-family: "Libre Franklin", sans-serif;
    color:#322b60;

    a {
        color:#322b60;
    }

    @media screen and (max-width: 768px) {
        font-size: small;
        font-weight: 600;
        width: 95%;
        top: 672vw;
        left: 2.5vw;
    }

    @media screen and (min-width: 768px) {
        font-size: x-large;
        font-weight: 800;
        width: 60%;
        top: 395vw;
        left: 20vw;
    }
}

.video {
    position:absolute;
    box-sizing: border-box;

    @media screen and (max-width: 768px) {
        top: 388vw;
        width:96vw;
        left: 2vw;
    }

    @media screen and (min-width: 768px) {
        top: 200vw;
        width:80vw;
        left: 10vw;
    }
}

.video > iframe{
    aspect-ratio: 16/9;
}

.map {
    position:absolute;

    @media screen and (max-width: 768px) {
        top: 493vw;
        left: 2vw;
        width:96vw;
        height:auto;
    }

    @media screen and (min-width: 768px) {
        top: 275vw;
        left: 15vw;
        width:70vw;
        height:auto;
    }
}

.map > iframe{
    aspect-ratio: 1;
    border-radius: 1rem;
    border: #322b60 1px solid;

    @media screen and (max-width: 768px) {
        aspect-ratio: 1;
    }

    @media screen and (min-width: 768px) {
        aspect-ratio: 4/3.5;
    }
}