﻿/* ===========================================
   BADGES OFFRES D'EMPLOI - ENRICHIS
   =========================================== */

/* Conteneur des badges */
.offer-badges-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Badge urgent (publié il y a moins d'1h) */
.offer-badge-urgent {
    padding: 6px 14px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
    }
}

/* Badge CDI */
.badge-cdi {
    padding: 5px 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Badge CDD */
.badge-cdd {
    padding: 5px 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Badge Stage */
.badge-stage {
    padding: 5px 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Badge Alternance */
.badge-alternance {
    padding: 5px 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Badge Freelance */
.badge-freelance {
    padding: 5px 12px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Badge Télétravail */
.badge-remote {
    padding: 5px 12px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Badge Expérience */
.badge-experience {
    padding: 5px 12px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 768px) {
    .offer-badges-group {
        gap: 6px;
        max-width: 100%;
    }
    
    .offer-badge-new,
    .offer-badge-urgent,
    .badge-cdi,
    .badge-cdd,
    .badge-stage,
    .badge-alternance,
    .badge-freelance,
    .badge-remote,
    .badge-experience {
        padding: 4px 10px;
        font-size: 10px;
        gap: 4px;
    }
    
    .offer-badge-new i,
    .offer-badge-urgent i,
    .badge-cdi i,
    .badge-cdd i,
    .badge-stage i,
    .badge-alternance i,
    .badge-freelance i,
    .badge-remote i,
    .badge-experience i {
        font-size: 9px;
    }
    
    .offer-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .offer-action {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .offer-badges-group {
        gap: 5px;
    }
    
    .offer-badge-new,
    .offer-badge-urgent,
    .badge-cdi,
    .badge-cdd,
    .badge-stage,
    .badge-alternance,
    .badge-freelance,
    .badge-remote,
    .badge-experience {
        padding: 3px 8px;
        font-size: 9px;
        gap: 3px;
    }
}
