/* Tous les Liens 2026 — liens spéciaux (special = 1)
   À LA UNE existe déjà dans page.php : seules les animations sont nouvelles.
   Les couleurs sont celles migrées de l'ancien site, adoucies pour le fond nuit.
*/
.featured {
    --tll-special-1: #ffba68;
    --tll-special-2: #f2a47b;
    animation: tll-featured-light 6s ease-in-out infinite;
}
@keyframes tll-featured-light {
    0%,100% {
        border-color: color-mix(in srgb, var(--tll-special-1) 60%, transparent);
        box-shadow: 0 15px 40px rgba(2,7,20,.15),
                    0 0 16px color-mix(in srgb, var(--tll-special-1) 15%, transparent);
    }
    50% {
        border-color: color-mix(in srgb, var(--tll-special-2) 75%, transparent);
        box-shadow: 0 15px 40px rgba(2,7,20,.15),
                    0 0 25px color-mix(in srgb, var(--tll-special-2) 24%, transparent);
    }
}
/* Mouvement plus visible, toutes les 3 secondes environ.
   Seule l'icone bouge ; le cadre reste en place. */
.featured .featured-icon {
    animation: tll-featured-icon 3.1s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes tll-featured-icon {
    0%, 38%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    9% { transform: translateX(3px) rotate(6deg) scale(1.06); }
    18% { transform: translateX(-3px) rotate(-6deg) scale(1.06); }
    28% { transform: translateX(2px) rotate(3deg) scale(1.02); }
}
/* Respect des préférences d'accessibilité et suppression des mouvements. */
@media (prefers-reduced-motion: reduce) {
    .featured, .featured .featured-icon { animation: none !important; }
}