@keyframes loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Styles de base pour les placeholders */
.loading-placeholder {
    background: #f0f0f0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

/* Adaptation pour le texte */
.loading-placeholder.loading-text {
    color: transparent;
    pointer-events: none;
}

/* Placeholder pour les images */
.image-placeholder {
    width: 100%;
    height: 250px; /* or the height of your images */
}

/* Placeholder for the buttons */
.button-placeholder {
    width: 60%;
    height: 2.5em; /* roughly the height of your buttons */
    margin: auto;
}

/* Placeholder for the text lines */
.text-placeholder {
    width: 80%;
    height: 1.2em; /* Adjust the height based on your text size */
    margin-top: 0.5em;
}

/* Fixed height for brand image placeholder */
.brand-placeholder {
    width: 50px;
    height: 50px;
}

/* Ensure placeholders match the height of real content */
.thumbnail-container, .product-miniature, .card, .card-body {
    height: 100%;
}