*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f5f0d6;
    
}


.page{
    position:relative;
    width:100%;
}


.batiment{
    display:block;
    width:100%;
    height:auto;
}

/* zones cliquables */

.etage{
    position:absolute;
    left:8%;
    width:84%;
    height:4%;
}

/* pour vérifier l'emplacement */

/*
.etage{
    background:red;
    opacity:0.3;
}
*/

.etage:hover{
    background:rgba(255,255,0,0.2);
}


.e0{
    top: 87%;
}

.e1{
    top:73%;
}

.e2{
    top:68%;
}

.e3{
    top:63%;
}

.e4{
    top:57%;
}

.e5{
    top:51%;
}

.e6{
    top:44%;

}

.e7{
    top:38%;
}

.e8{
    top:31.9%;
}

.e9{
    top:26.5%;

}

/* page expo */



.page-dessin{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessin{
    width:100%;
    height:100%;
    object-fit:cover;
}

.texte{
    position:absolute;
    left:15%;
    top:75%;

    max-width:1500px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
}

.dessin{
    width:100%;
    height:100%;
    object-fit:cover;

    animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

/* page architecture */


.page-dessin architecture{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessina{
    width:100%;
    height:100%;
    object-fit:cover;

    animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.textea{
    position:absolute;
    left:45%;
    top:5%;

    max-width:800px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page cafet */

.page-dessin cafeteria{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinc{
    width:100%;
    height:100%;
    object-fit:cover;
        animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.textec{
    position:absolute;
    left:55%;
    top:30%;

    max-width:600px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page photo */

.page-dessin photo{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinp{
    width:100%;
    height:100%;
    object-fit:cover;
            animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.textep{
    position:absolute;
    left:15%;
    top:25%;

    max-width:600px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page auditoire */

.page-dessin auditoire{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinad{
    width:100%;
    height:100%;
    object-fit:cover;
            animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.textead{
    position:absolute;
    left:15%;
    top:23%;

    max-width:600px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page peinture */

.page-dessin peinture{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinpe{
    width:100%;
    height:100%;
    object-fit:cover;
            animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}


.textepe{
    position:absolute;
    left:15%;
    top:2%;

    max-width:1000px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page stylisme */

.page-dessin sty{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinsty{
    width:100%;
    height:100%;
    object-fit:cover;
            animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.textesty{
    position:absolute;
    left:65%;
    top:2%;

    max-width:1000px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page designe textile */

.page-dessin desy{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessindesy{
    width:100%;
    height:100%;
    object-fit:cover;
                animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.textedesy{
    position:absolute;
    left:2%;
    top:35%;

    max-width:1000px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page designe urb */

.page-dessin urb{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinurb{
    width:100%;
    height:100%;
    object-fit:cover;
            animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.texteurb{
    position:absolute;
    left:2%;
    top:5%;

    max-width:400px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}

/* page designe conservation */

.page-dessin conserve{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.dessinco{
    width:100%;
    height:100%;
    object-fit:cover;

            animation: apparition 4s ease forwards;
}

@keyframes apparition{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.texteco{
    position:absolute;
    left:2%;
    top:5%;

    max-width:800px;

    font-family: serif;
    font-size:2rem;
    line-height:1.4;
    text-justify: auto;
}