.badge {
    margin-top: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: bold;
    /*border: 1px solid white;*/
    border-radius: 5px;
    color: white;

}

.badge_index {
    margin-top: 10px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    /*border: 1px solid white;*/
    border-radius: 5px;
    color: white;

}

.vip {
    background: linear-gradient(45deg, gold, orange);
}

.premium {
    background: purple;
}

.top {
    background: #2E7D32;
}

.urgent {
    background: red;
    color: white;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.vip-card{
border: 2px solid gold;
background: #F0DDAA;
border-radius: 5px;
padding: 10px;
}

.premium-card{
border: 2px solid purple;
background: #DDD0F0;
border-radius: 5px;
padding: 10px;
}

.type-standard { background: gray; }
.type-bronze { background: #cd7f32; }
.type-argent { background: silver; }
.type-or { background: gold; color:black; }
.type-diamant { background: #00d4ff; }

.compte-type {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: white;
    margin-left: 5px;
}

.pro-badge {
    background: green;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.badge-compte {
    background: #22222267;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.badge-compte-empty {
    background: #ffffff00;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.image {
    position: relative;
    display: inline-block;
}

.image img {
    width: 100%;
    display: block;
    border-radius: 10px; /* optionnel */
}

.image-text {
    position: absolute;
    bottom: 10px;
    left: 10px;

    color: #fff;
    font-weight: bold;
    font-size: 14px;

    background: rgba(0, 0, 0, 0.5); /* fond lisible */
    padding: 5px 10px;
    border-radius: 5px;
}
.image-text-haut {
    position: absolute;
    top: 10px;
    left: 10px;

    color: #fff;
    font-weight: bold;
    font-size: 14px;

    background: rgba(0, 0, 0, 0); /* fond lisible */
    padding: 5px 10px;
    border-radius: 5px;
}

.image-text-bas_droit {
    position: absolute;
    bottom: 10px;
    right: 10px;

    color: #fff;
    font-weight: bold;
    font-size: 14px;

    background: rgba(0, 0, 0, 0.541); /* fond lisible */
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 999; /* 🔥 ça c’est le vrai premier plan */
}

@media (max-width: 768px) {
.vip-card{
border: 2px solid gold;
background: #F0DDAA;
border-radius: 5%;
padding: 20px;
}

.premium-card{
border: 2px solid purple;
background: #DDD0F0;
border-radius: 5%;
padding: 20px;
}


.type-standard { background: gray; }
.type-bronze { background: #cd7f32; }
.type-argent { background: silver; }
.type-or { background: gold; color:black; }
.type-diamant { background: #00d4ff; }

.compte-type {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: white;
    margin-left: 5px;
}

.pro-badge {
    background: green;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.badge-compte {
    background: #22222267;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.badge-compte-empty {
    background: #ffffff00;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.image {
    position: relative;
    display: inline-block;
}

.image img {
    width: 100%;
    display: block;
    border-radius: 10px; /* optionnel */
}

.image-text {
    position: absolute;
    bottom: 10px;
    left: 10px;

    color: #fff;
    font-weight: bold;
    font-size: 14px;

    background: rgba(0, 0, 0, 0.5); /* fond lisible */
    padding: 5px 10px;
    border-radius: 5px;
}

.image-text-haut {
    position: absolute;
    top: 10px;
    left: 10px;

    color: #fff;
    font-weight: bold;
    font-size: 14px;

    background: rgba(0, 0, 0, 0); /* fond lisible */
    padding: 5px 10px;
    border-radius: 5px;
}

.image-text-bas_droit {
    position: absolute;
    bottom: 10px;
    right: 10px;

    color: #fff;
    font-weight: bold;
    font-size: 14px;

    background: rgba(0, 0, 0, 0.541); /* fond lisible */
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 999; /* 🔥 ça c’est le vrai premier plan */
}

}