.picture-container {
    position: relative;
    max-width: 380px;
}

@media (max-width: 768px) {
    .picture-container {
        max-width: 280px;
    }
}


/* --- WRAPPER ne bouge pas (important pour le scroll !) --- */
.polaroid {
    margin: 40px auto;
    width: 90%;
    max-width: 420px;
    position: relative;
}

/* --- Contenu pivotant --- */
.polaroid-inner {
    background: white;
    padding: 15px 15px 60px 15px;
    border: 1px solid darkgrey;
    box-shadow: 5px 10px 10px darkgrey;
    transform-origin: center;
    transition: transform 0.2s ease-out;
}

/* Image */
.polaroid-inner img {
    width: 100%;
    display: block;
}

/* Légende */
.caption {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-family: 'Indie Flower', cursive;
    width: calc(100% - 20px);
    text-align: center;
}
.picture-container .polaroid:after {
    content: attr(data-polaroid-caption);
    position: absolute;
    bottom: 10px; /* Ajoute une position correcte */
    left: 50%;
    transform: translateX(-50%); /* Centre au milieu de l'écran horizontalement */
    color: #222222;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 22px;
    text-align: center;
    font-family: 'Indie Flower', cursive;
}

/* Inclinaisons */
.polaroid-inner.g10 { transform: rotate(-10deg); }
.polaroid-inner.g20 { transform: rotate(-20deg); }
.polaroid-inner.g30 { transform: rotate(-30deg); }

.polaroid-inner.d10 { transform: rotate(10deg); }
.polaroid-inner.d20 { transform: rotate(20deg); }
.polaroid-inner.d30 { transform: rotate(30deg); }