/**
 * Autosave field feedback
 *
 * Classes ajoutées temporairement par JS sur un champ après une sauvegarde
 * AJAX silencieuse, pour confirmer visuellement le succès (vert) ou l'échec
 * (rouge) de la persistance.
 *
 * Animation : fade-in 100ms → maintien ~1.4s → fade-out 400ms (~1.9s total).
 * Le JS retire la classe à 1900ms pour pouvoir re-déclencher le flash.
 *
 * Couleurs via design tokens uniquement (compatibles thèmes clair / sombre).
 * Le rendu combine `outline` (anneau net, fallback fiable même si une règle
 * `:focus` !important écrase le box-shadow) et un double `box-shadow`
 * (anneau + halo flou). L'animation pilote les deux pour gagner sur la
 * cascade — voir aussi l'override `:focus` en bas du fichier.
 */

.is-autosaved,
.is-autosave-error {
    animation-duration: 1.9s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.is-autosaved {
    animation-name: autosave-flash-success;
}

.is-autosave-error {
    animation-name: autosave-flash-error;
}

@keyframes autosave-flash-success {
    0%   { outline: 0 solid transparent; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    5%   { outline: 2px solid var(--c-green); box-shadow: 0 0 0 2px var(--c-green), 0 0 12px 2px var(--c-green-lo); }
    79%  { outline: 2px solid var(--c-green); box-shadow: 0 0 0 2px var(--c-green), 0 0 12px 2px var(--c-green-lo); }
    100% { outline: 0 solid transparent; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}

@keyframes autosave-flash-error {
    0%   { outline: 0 solid transparent; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    5%   { outline: 2px solid var(--c-red); box-shadow: 0 0 0 2px var(--c-red), 0 0 12px 2px var(--c-red-lo); }
    79%  { outline: 2px solid var(--c-red); box-shadow: 0 0 0 2px var(--c-red), 0 0 12px 2px var(--c-red-lo); }
    100% { outline: 0 solid transparent; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}

/* Neutralise le focus ring Bootstrap pendant l'animation pour que le flash
   reste visible quand l'élément conserve le focus (cas typique des <select>
   après un `change`). L'animation re-pilote le box-shadow seule. */
.is-autosaved:focus,
.is-autosaved:focus-visible,
.is-autosave-error:focus,
.is-autosave-error:focus-visible {
    box-shadow: none !important;
}

/* Checkbox natif : retrait du clipping par défaut pour que le halo soit
   visible autour de la case (sinon le box-shadow est coupé au bord interne). */
input[type="checkbox"].is-autosaved,
input[type="checkbox"].is-autosave-error {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .is-autosaved,
    .is-autosave-error {
        animation-duration: 0.4s;
    }
}