#projetsConteneur {
    position: relative;
    left: 2.8vw;
    width: 87.5vw;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
    margin-top: 5vw;
    pointer-events: none;
}

.projet {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20vh;
    flex-direction: row-reverse;
    pointer-events: none;
}

.projet:nth-child(even) {
    flex-direction: row;
}

/* IMG */
/* ------------------------------------------------------------------------------- */
.projetImg {
    width: 30vw;
    pointer-events: auto;
}

.imgProjet {
    width: 100%;
}

/* REMPLACE IMG = MAQUETTE */
/* ------------------------------------------------------------------------------- */
.projetMaquette {
    width: 30vw;
    height: 36vw;
}

/* TXT */
/* ------------------------------------------------------------------------------- */
.projetTxtConteneur {
    left: 0px;
    width: 55vw;
    pointer-events: none;
}

.projetTxt {
    pointer-events: auto;
}

.title {
    pointer-events: auto;
    margin-top: -1vw;
}

/* .link {

} */

/* HAUTEUR DE VOIX */
/* ------------------------------------------------------------------------------- */
.imgBottom {
    align-items: flex-end;
}

.nowidth {
    width: none !important;
    height: 60vw;
}

#p1 {
    position: absolute;
    width: 55vw;
}

#p2 {
    position: absolute;
    width: 55vw;
    /* top: -12vw; */
    left: 0vw;
    pointer-events: none;
}

.HDVButtonON {
    cursor: auto;
    border: 0.2vw solid #4d4d4d;
    color: #202020;
    background-color: #4d4d4d;
}

.HDVButtonOFF {
    cursor: pointer;
    border: 0.2vw solid #202020;
    color: #4d4d4d;
    background-color: #202020;
}

.HDVButtonOFF:hover {
    border: 0.2vw solid #4d4d4d;
}

/* SECOUSSES */
/* ------------------------------------------------------------------------------- */
#maquetteSecousses {
    cursor: grab;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #9c6d00;
}

#sentence {
    margin-top: 40%;
    margin-bottom: 40%;
    max-width: 100%;
}

.projetMaquette * {
    pointer-events: none;
}

/* SECOUSSES */
/* ------------------------------------------------------------------------------- */
#maquetteProtect {
    position: relative;
    overflow: hidden;
}

#water {
    position: absolute;
    left: -35vw;
    width: 100vw;
    height: 100vw;
    background-color: #ffff00;
    transition: ease-in-out 0.24s;
}

/* BREYE */
/* ------------------------------------------------------------------------------- */
#maquetteBreye {
    position: relative;
    left: 6vw;
    width: 15vw;
    height: 24vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    flex-direction: row;
    pointer-events: none;
}

.matrice {
    position: relative;
    height: 6vw;
    width: 6vw;
    background-color: #4d4d4d;
    pointer-events: auto;
    transition: ease-in-out 0.2s;
}

.noVibre {
    opacity: 0.5;
}

.fragmentBreye{
    cursor: pointer;
}

@media print {
    /* #projetsConteneur */
    #projetsConteneur {
        position: static !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        pointer-events: auto !important;
    }

    /* .projet */
    .projet {
        display: block !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding-bottom: 0 !important;
        flex-direction: column !important;
        pointer-events: auto !important;
    }

    .projet:nth-child(even) {
        flex-direction: column !important;
    }

    /* .projetImg et .imgProjet */
    .projetImg, .imgProjet {
        width: auto !important;
        pointer-events: auto !important;
    }

    /* .projetMaquette */
    .projetMaquette {
        width: auto !important;
        height: auto !important;
    }

    /* .projetTxtConteneur */
    .projetTxtConteneur {
        left: auto !important;
        width: auto !important;
        pointer-events: auto !important;
    }

    .projetTxt {
        pointer-events: auto !important;
        margin-top: 0 !important;
    }
    .title {
        break-before: always;
        pointer-events: auto !important;
        margin-top: 0 !important;
    }

    /* .imgBottom et .nowidth */
    .imgBottom {
        align-items: flex-start !important;
    }

    .nowidth {
        width: auto !important;
        height: auto !important;
    }

    /* #p1 et #p2 */
    #p1 {
        position: static !important;
        width: auto !important;
        top: auto !important;
        left: auto !important;
        pointer-events: auto !important;
        margin-bottom: 15px !important;
    }
    #p2 {
        position: static !important;
        width: auto !important;
        top: auto !important;
        left: auto !important;
        pointer-events: auto !important;
    }

    /* .HDVButtonON et .HDVButtonOFF */
    .HDVButtonON, .HDVButtonOFF {
        cursor: auto !important;
        border: none !important;
        color: inherit !important;
        background-color: transparent !important;
    }

    .HDVButtonOFF:hover {
        border: none !important;
    }

    /* #maquetteSecousses */
    #maquetteSecousses {
        cursor: auto !important;
        display: block !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        background-color: transparent !important;
    }

    #sentence {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-width: none !important;
    }

    /* .projetMaquette * */
    .projetMaquette * {
        pointer-events: auto !important;
    }

    /* #maquetteProtect et #water */
    #maquetteProtect {
        position: static !important;
        overflow: visible !important;
    }

    #water {
        position: static !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        transition: none !important;
    }

    /* #maquetteBreye et .matrice */
    #maquetteBreye {
        position: static !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-content: flex-start !important;
        flex-direction: column !important;
        pointer-events: auto !important;
    }

    .matrice {
        position: static !important;
        height: auto !important;
        width: auto !important;
        background-color: transparent !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* .noVibre et .fragmentBreye */
    .noVibre {
        opacity: 1 !important;
    }

    .fragmentBreye {
        cursor: auto !important;
    }
}