/*
 * Mini "Font Awesome Animation" - equivalent local des classes faa-*/animated
 * (bibliotheque de l-lin, non vendorisee dans ce projet - voir docs/refonte/05-ROADMAP.md).
 * Ne couvre que les animations reellement utilisees dans le sidebar (icones de
 * categorie, cf. header-top.blade.php) : shake, spin, flash, tada, swing, bounce,
 * pulse. Meme convention de classes que la bibliotheque d'origine (<i class="fas
 * fa-x faa-shake animated">) pour rester compatible avec du code copie depuis sa
 * documentation. Amplitudes/vitesses volontairement plus marquees que la version
 * initiale (retour utilisateur : "elles ne sont pas tres animees").
 */

.animated {
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes faa-shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-16deg); }
    20%, 40%, 60%, 80% { transform: rotate(16deg); }
}
.faa-shake.animated { animation-name: faa-shake; animation-duration: .9s; }

@keyframes faa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.faa-spin.animated { animation-name: faa-spin; animation-timing-function: linear; animation-duration: 1.7s; }

@keyframes faa-flash {
    0%, 40%, 60%, 100% { opacity: 1; }
    50% { opacity: .15; }
}
.faa-flash.animated { animation-name: faa-flash; animation-duration: 1.4s; }

@keyframes faa-tada {
    0%, 100% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(.88) rotate(-6deg); }
    30%, 50%, 70%, 90% { transform: scale(1.2) rotate(6deg); }
    40%, 60%, 80% { transform: scale(1.2) rotate(-6deg); }
}
.faa-tada.animated { animation-name: faa-tada; animation-duration: 1.6s; }

@keyframes faa-swing {
    20% { transform: rotate(20deg); }
    40% { transform: rotate(-16deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-6deg); }
    100% { transform: rotate(0deg); }
}
.faa-swing.animated { animation-name: faa-swing; transform-origin: top center; animation-duration: 1.5s; }

@keyframes faa-bounce {
    0%, 100%, 20%, 53%, 80% { transform: translateY(0); }
    40%, 43% { transform: translateY(-12px); }
    70% { transform: translateY(-6px); }
}
.faa-bounce.animated { animation-name: faa-bounce; animation-duration: 1.4s; }

@keyframes faa-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
.faa-pulse.animated { animation-name: faa-pulse; animation-duration: 1.1s; }

/* Toutes ces animations tournent dans un <i> a l'interieur d'un span deja
   transforme au survol (.pc-micon:hover, voir app-shell.css) - eviter que les
   deux transitions/transforms se disputent la meme propriete sur le meme
   element : l'animation continue vit sur le <i>, le hover-lift reste sur son
   span parent .pc-micon-lg (translation), pas de conflit de calque. */

/* Refonte « Apparence » (30/09/2026, docs/refonte/10-DESIGN-APPARENCE.md) :
   interface épurée - dans le menu latéral, les icônes ne s'animent plus en
   continu (distraction permanente dans le champ visuel) mais jouent leur
   animation UNE fois au survol de l'entrée, comme un retour tactile. Les
   classes faa-* restent utilisables telles quelles ailleurs. */
.pc-sidebar .animated { animation-name: none; }
.pc-sidebar .pc-item:hover > .pc-link .faa-shake.animated { animation-name: faa-shake; }
.pc-sidebar .pc-item:hover > .pc-link .faa-spin.animated { animation-name: faa-spin; }
.pc-sidebar .pc-item:hover > .pc-link .faa-flash.animated { animation-name: faa-flash; }
.pc-sidebar .pc-item:hover > .pc-link .faa-tada.animated { animation-name: faa-tada; }
.pc-sidebar .pc-item:hover > .pc-link .faa-swing.animated { animation-name: faa-swing; }
.pc-sidebar .pc-item:hover > .pc-link .faa-pulse.animated { animation-name: faa-pulse; }
.pc-sidebar .pc-item:hover > .pc-link .animated { animation-iteration-count: 1; }
@keyframes faa-bounce-doux { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
.pc-sidebar .pc-item:hover > .pc-link .faa-bounce.animated { animation-name: faa-bounce-doux; animation-duration: .6s; }
@media (prefers-reduced-motion: reduce) {
    .animated { animation: none !important; } /* préférence système prioritaire */
}