/**
 * Article Badge Responsive Styles
 * Adapte automatiquement la taille et le contenu des badges selon le contexte
 */

/* Styles de base du badge (déjà dans le inline style mais on peut override) */
.article-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    text-transform: uppercase;
    transition: all 0.2s ease;
}

/* Texte court caché par défaut */
.badge-text-short {
    display: none;
}

/* Sur mobile : adapter globalement les badges */
@media (max-width: 768px) {
    .article-badge {
        padding: 4px 8px !important;
        font-size: 9px !important;
        gap: 3px !important;
        top: 6px !important;
        left: 6px !important;
        letter-spacing: 0.3px !important;
    }
    
    /* Icônes légèrement plus petites sur mobile */
    .article-badge svg {
        width: 8px;
        height: 8px;
    }
}

/* Pour les très petits conteneurs (détection via classe JS) */
.badge-container-tiny .article-badge {
    padding: 3px 6px !important;
    font-size: 8px !important;
    gap: 2px !important;
    border-radius: 3px !important;
}

.badge-container-tiny .article-badge .badge-text-full {
    display: none !important;
}

.badge-container-tiny .article-badge .badge-text-short {
    display: inline !important;
}

.badge-container-tiny .article-badge svg {
    width: 7px;
    height: 7px;
}

/* Pour les conteneurs moyens (120-180px) */
.badge-container-small .article-badge {
    padding: 4px 7px !important;
    font-size: 9px !important;
    gap: 2px !important;
}

.badge-container-small .article-badge .badge-text-full {
    display: none !important;
}

.badge-container-small .article-badge .badge-text-short {
    display: inline !important;
}

/* Pour les grandes images, version complète */
@media (min-width: 769px) {
    .badge-container-large .article-badge {
        padding: 5px 10px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .badge-container-large .article-badge .badge-text-full {
        display: inline !important;
    }
    
    .badge-container-large .article-badge .badge-text-short {
        display: none !important;
    }
}

/* Animation au survol (optionnel, pour interaction) */
.article-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}

/* Variantes de couleurs (déjà gérées en inline mais pour référence) */
.article-badge--photos {
    /* Violet: #7C3AED */
}

.article-badge--videos {
    /* Rouge: #DC2626 */
}

.article-badge--exclusif {
    /* Or/Amber: #F59E0B */
}