/* Centre le conteneur principal dans la page */
main {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
    box-sizing: border-box;
}

.oeuvre-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Conteneur de l'image pour le centrage */
.oeuvre-image-full {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    /* Prend de la hauteur pour que l'image puisse s'y loger */
    min-height: 50vh;
}

/* Règle pour l'image grand format */
.oeuvre-image-full img {
    /* Limite la taille de l'image */
    max-width: 60vw;    /* Largeur maximale de 90% de la largeur de la fenêtre */
    max-height: 80vh;   /* Hauteur maximale de 80% de la hauteur de la fenêtre */
    
    /* Garde les bonnes proportions */
    object-fit: contain;
    width: auto;
    height: auto;
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.oeuvre-details {
    text-align: center;
}

.oeuvre-details p {
    color: rgba(255, 250, 200, 0.9);
    margin: 0.5rem 0;
}



.back-to-portfolio:active {
    box-shadow: inset 1px 1px 0px #000;
    transform: translate(1.5px, 1.5px);
}

/* ==========================================================
   SURCHARGE POUR PETITS ÉCRANS (< 768px)
   ========================================================== */
@media (max-width: 768px) {
    /* Règle pour l'image grand format */
    .oeuvre-image-full img {
        /* Limite la taille de l'image */
        max-width: 90vw;    /* Largeur maximale de 90% de la largeur de la fenêtre */
        max-height: 80vh;   /* Hauteur maximale de 80% de la hauteur de la fenêtre */
}