.cyber-ticker-container {
    background: #050505;
    border: 1px solid #1a1a1a;
    height: 42px;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    border-radius: 4px;
    margin: 10px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.ticker-label {
    background: #D4FF00;
    color: #000;
    font-weight: bold;
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 10px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-transform: uppercase;
}

.ticker-content {
    flex: 1;
    position: relative;
    height: 100%;
}

.ticker-item {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    visibility: hidden;
}

.ticker-item.active { opacity: 1; transform: translateY(0); visibility: visible; }
.ticker-item.exit { opacity: 0; transform: translateY(-15px); }

.ticker-anchor {
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
    padding: 0 20px;
}

.ticker-anchor:hover .ticker-text {
    color: #D4FF00;
}

.ticker-tag {
    font-size: 9px; font-weight: bold; padding: 2px 6px; border-radius: 2px;
    margin-right: 12px; text-transform: uppercase; flex-shrink: 0;
}

.ticker-tag.critical { background: #ff003c; color: #fff; }
.ticker-tag.high { background: #ff8800; color: #fff; }
.ticker-tag.medium { background: #D4FF00; color: #000; }
.ticker-tag.yellow { background: #D4FF00; color: #000; }
.ticker-tag.blue { background: #00f2ff; color: #000; }

.ticker-text {
    color: #bbb; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; letter-spacing: 0.5px;
    transition: color 0.2s;
}

.ticker-text strong { color: #fff; }

/* ================================================== */
/*             RESPONSIVE NEWS TICKER                 */
/* ================================================== */

@media (max-width: 768px) {
    .cyber-ticker-container {
        height: 38px; /* On réduit légèrement la hauteur totale */
    }

    .ticker-label {
        display: none; /* Déjà présent, mais on s'assure du masquage */
    }

    .ticker-anchor {
        padding: 0 10px;
    }

    .ticker-text {
        font-size: 11px; /* Texte plus petit pour en voir plus */
    }

    .ticker-tag {
        font-size: 8px;
        padding: 1px 5px;
        margin-right: 8px;
    }
}

@media (max-width: 480px) {
    .cyber-ticker-container {
        margin: 5px 0;
        border-radius: 0; /* Aspect "Full Width" sur petit mobile */
        border-left: none;
        border-right: none;
    }

    .ticker-item {
        padding: 0 10px;
    }

    .ticker-text {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    /* On simplifie les tags pour gagner de la place */
    .ticker-tag {
        margin-right: 6px;
        padding: 1px 3px;
        letter-spacing: 0;
    }

    /* Optionnel : masquer les IDs CVE trop longs sur mobile pour voir le titre */
    /* .ticker-text strong { display: none; } */
}