gauthier.chombart
9140d2f468
Le jeu utilisait le teal comme couleur dominante (titres, bordures, boutons, cartes) alors que le reste du site n'emploie le teal que ponctuellement (état de succès) et repose sur l'ambre comme couleur principale. Remplace toutes les références teal par l'ambre déjà défini dans header-style.css, et réaffecte le teal à son rôle habituel de couleur de succès (paire trouvée), à la place du vert générique utilisé jusqu'ici. Renomme aussi le titre en "Memory pictogrammes", augmente la marge sous le header pour éviter tout chevauchement, et ajoute un paramètre de version aux feuilles de style du jeu pour éviter les soucis de cache navigateur lors des prochaines mises à jour.
395 lines
8.3 KiB
CSS
395 lines
8.3 KiB
CSS
/* ============================================
|
|
ANIMATIONS AVANCÉES - Memory Pictogrammes
|
|
============================================ */
|
|
|
|
/* ============================================
|
|
FADE ANIMATIONS
|
|
============================================ */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
CARD ANIMATIONS
|
|
============================================ */
|
|
|
|
/* Match Success - Explosion colorée */
|
|
@keyframes matchSuccess {
|
|
0% {
|
|
transform: scale(1);
|
|
filter: drop-shadow(0 0 0px rgba(29, 158, 117, 0.6));
|
|
}
|
|
50% {
|
|
transform: scale(1.15) rotate(5deg);
|
|
filter: drop-shadow(0 0 12px rgba(29, 158, 117, 0.8));
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
filter: drop-shadow(0 0 0px rgba(29, 158, 117, 0));
|
|
}
|
|
}
|
|
|
|
/* Card Shake - Erreur */
|
|
@keyframes cardShake {
|
|
0%, 100% {
|
|
transform: translateX(0) rotateZ(0deg);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
transform: translateX(-8px) rotateZ(-1deg);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
transform: translateX(8px) rotateZ(1deg);
|
|
}
|
|
}
|
|
|
|
/* Pop In - Apparition */
|
|
@keyframes popIn {
|
|
0% {
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Bounce - Rebond */
|
|
@keyframes bounce {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-12px);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
PROGRESS BAR ANIMATIONS
|
|
============================================ */
|
|
|
|
/* Pulse Progress Bar */
|
|
@keyframes progressPulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 8px rgba(186, 117, 23, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 24px rgba(186, 117, 23, 0.8);
|
|
}
|
|
}
|
|
|
|
.game-progress-fill.pulse {
|
|
animation: progressPulse 0.6s ease-out;
|
|
}
|
|
|
|
/* ============================================
|
|
MODAL ANIMATIONS
|
|
============================================ */
|
|
|
|
/* Slide Up */
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Fade In Modal Background */
|
|
@keyframes fadeInBlur {
|
|
from {
|
|
opacity: 0;
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
FLOAT ANIMATION (Confettis)
|
|
============================================ */
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-12px);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SCORE UPDATE ANIMATION
|
|
============================================ */
|
|
@keyframes scoreFlip {
|
|
0% {
|
|
transform: rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ACHIEVEMENT UNLOCK ANIMATION
|
|
============================================ */
|
|
@keyframes achievementUnlock {
|
|
0% {
|
|
transform: scale(0) rotateZ(-180deg);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.15);
|
|
}
|
|
100% {
|
|
transform: scale(1) rotateZ(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
STAT BOX ANIMATIONS
|
|
============================================ */
|
|
@keyframes statUpdate {
|
|
0% {
|
|
transform: scale(0.8);
|
|
background: rgba(186, 117, 23, 0.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
TIMER ANIMATIONS
|
|
============================================ */
|
|
@keyframes timerTick {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Timer warning (< 30 seconds) */
|
|
@keyframes timerWarning {
|
|
0%, 100% {
|
|
color: #FF9800;
|
|
}
|
|
50% {
|
|
color: #D85A30;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
LEADERBOARD ANIMATIONS
|
|
============================================ */
|
|
|
|
/* Rank item slide in */
|
|
@keyframes rankSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.rank-item {
|
|
animation: rankSlideIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.rank-item:nth-child(1) { animation-delay: 0.1s; }
|
|
.rank-item:nth-child(2) { animation-delay: 0.2s; }
|
|
.rank-item:nth-child(3) { animation-delay: 0.3s; }
|
|
.rank-item:nth-child(4) { animation-delay: 0.4s; }
|
|
.rank-item:nth-child(5) { animation-delay: 0.5s; }
|
|
|
|
/* ============================================
|
|
GLOW ANIMATIONS
|
|
============================================ */
|
|
|
|
/* Card glow hover */
|
|
@keyframes glowCard {
|
|
0% {
|
|
box-shadow: 0 0 0px rgba(186, 117, 23, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 16px rgba(186, 117, 23, 0.3);
|
|
}
|
|
}
|
|
|
|
/* Victory confetti animation */
|
|
@keyframes confetti {
|
|
0% {
|
|
transform: translateY(-200px) rotateZ(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(600px) rotateZ(720deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
PULSING ANIMATIONS
|
|
============================================ */
|
|
|
|
/* Pulse button */
|
|
@keyframes buttonPulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0px rgba(186, 117, 23, 0.7);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 16px rgba(186, 117, 23, 0.4);
|
|
}
|
|
}
|
|
|
|
/* Loading spinner */
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
FLIP ANIMATION (3D)
|
|
============================================ */
|
|
|
|
@keyframes flip {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
UTILITY ANIMATION CLASSES
|
|
============================================ */
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.4s ease-out;
|
|
}
|
|
|
|
.animate-pop {
|
|
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.animate-bounce {
|
|
animation: bounce 0.6s ease-in-out;
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: cardShake 0.4s ease-in-out;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 1s ease-in-out infinite;
|
|
}
|
|
|
|
/* ============================================
|
|
STAGGERED ANIMATIONS (pour listes)
|
|
============================================ */
|
|
|
|
.stagger-children > * {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
}
|
|
|
|
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
|
|
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
|
|
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
|
|
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
|
|
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
|
|
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
|
|
|
|
/* ============================================
|
|
TRANSITIONS (mouvements fluides)
|
|
============================================ */
|
|
|
|
button, a, .stat-box, .rank-item {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ============================================
|
|
DARK MODE ANIMATIONS (optionnel)
|
|
============================================ */
|
|
@media (prefers-color-scheme: dark) {
|
|
@keyframes fadeInDark {
|
|
from {
|
|
opacity: 0;
|
|
filter: brightness(0.8);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
filter: brightness(1);
|
|
}
|
|
}
|
|
|
|
main {
|
|
animation: fadeInDark 0.6s ease-out;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
MOTION PREFERENCE RESPECT
|
|
============================================ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|