/**
 * Alfred Chip Anchor — styles transverses (V0.8 phase 3 Sprint 3).
 *
 * Highlight pulse jaune doré (couleur Alfred) appliqué pendant 2s sur
 * la section ciblée par une chip-ancre. Scroll-margin-top pour offset
 * du header sticky (~80px).
 *
 * @author  Savoor.fr
 * @version V0.8 phase 3 Sprint 3 (2026-04-27)
 */

[id^="alfred-anchor-"] {
    scroll-margin-top: 80px;
}

@media (max-width: 1024px) {
    [id^="alfred-anchor-"] {
        scroll-margin-top: 70px;
    }
}

@media (max-width: 600px) {
    [id^="alfred-anchor-"] {
        scroll-margin-top: 60px;
    }
}

@keyframes alfredAnchorPulse {
    0% {
        background-color: rgba(245, 158, 11, 0.18);
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.20);
    }
    60% {
        background-color: rgba(245, 158, 11, 0.10);
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.10);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.alfred-anchor-highlight {
    animation: alfredAnchorPulse 2s ease-out forwards;
    border-radius: 12px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .alfred-anchor-highlight {
        animation: none;
        background-color: rgba(245, 158, 11, 0.10);
    }
}

body.dark-mode .alfred-anchor-highlight {
    animation-name: alfredAnchorPulseDark;
}

@keyframes alfredAnchorPulseDark {
    0% {
        background-color: rgba(245, 158, 11, 0.24);
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.28);
    }
    60% {
        background-color: rgba(245, 158, 11, 0.14);
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}