/* --- LE DÉCLENCHEUR SUR L'ÉCRAN --- */
#postit-trigger {
     position: absolute;
    top: 62%;       
    right: 10%;         
    width: 70px;      
    height: 25px;      
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    padding: 5px;
    transform: rotate( 8deg);
}


#postit-trigger2 {
     position: absolute;
    top: 61%;       
    right: 16%;         
    width: 70px;      
    height: 25px;      
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    padding: 5px;
    transform: rotate( 8deg);
}


#postit-trigger3 {
     position: absolute;
    top: 63%;       
    right: 5%;             
    width: 70px;      
    height: 25px;      
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    padding: 5px;
    transform: rotate( 8deg);
}


#postit-trigger4 {
     position: absolute;
    top: 25%;       
    left: 43%;         
    width: 30px;      
    height: 30px;      
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    padding: 5px;
    border-radius: 10rem;
    transform: rotate( 8deg);

}



#overlay-postit-1,
#overlay-postit-2,
#overlay-postit-3,
#overlay-postit-4 {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); 
    z-index: 100; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.postit-modal-content {
    position: relative;
    background: transparent; 
    padding: 20px;
    max-width: 90%;
}

.zoom-img {
    max-width: 500px; 
    width: 100%;
    height: auto;
    border: 5px solid white; 
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    transform: rotate(2deg); 
}