/* Generated by tools/store/site-anims.js: the three « Comment ça marche » vignettes. Do not edit by hand. */
.an { width: 100%; height: 100%; display: block; font-family: var(--font); }
.an-bob { animation: an-bob 2.4s ease-in-out infinite; }
@keyframes an-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.an-fov { animation: an-fov 2.4s ease-in-out infinite; }
@keyframes an-fov { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.an-bracket { transform-origin: 227px 116px; animation: an-bracket 2.4s ease-in-out infinite; }
@keyframes an-bracket { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .7; } }
.an-chip { animation: 6s ease-out infinite; }
.an1 .c1 { animation-name: an-c1; } .an1 .c2 { animation-name: an-c2; } .an1 .c3 { animation-name: an-c3; }
@keyframes an-c1 { 0% { opacity: 0; transform: translateY(5px); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes an-c2 { 0%, 30% { opacity: 0; transform: translateY(5px); } 42%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes an-c3 { 0%, 55% { opacity: 0; transform: translateY(5px); } 67%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.an-rep { animation: an-rep 8s ease-in-out infinite; }
@keyframes an-rep { 0%,10%,20%,30%,40%,50%,60%,70%,80%,100% { transform: translateY(0); } 5%,15%,25%,35%,45%,55%,65%,75% { transform: translateY(30px); } }
@keyframes an-n1 { 0%, 0% { opacity: 0; } 0.1%, 10% { opacity: 1; } 10.1%, 100% { opacity: 0; } }
.an2 .n1 { animation: an-n1 8s steps(1, end) infinite; }
@keyframes an-n2 { 0%, 10% { opacity: 0; } 10.1%, 20% { opacity: 1; } 20.1%, 100% { opacity: 0; } }
.an2 .n2 { animation: an-n2 8s steps(1, end) infinite; }
@keyframes an-n3 { 0%, 20% { opacity: 0; } 20.1%, 30% { opacity: 1; } 30.1%, 100% { opacity: 0; } }
.an2 .n3 { animation: an-n3 8s steps(1, end) infinite; }
@keyframes an-n4 { 0%, 30% { opacity: 0; } 30.1%, 40% { opacity: 1; } 40.1%, 100% { opacity: 0; } }
.an2 .n4 { animation: an-n4 8s steps(1, end) infinite; }
@keyframes an-n5 { 0%, 40% { opacity: 0; } 40.1%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }
.an2 .n5 { animation: an-n5 8s steps(1, end) infinite; }
@keyframes an-n6 { 0%, 50% { opacity: 0; } 50.1%, 60% { opacity: 1; } 60.1%, 100% { opacity: 0; } }
.an2 .n6 { animation: an-n6 8s steps(1, end) infinite; }
@keyframes an-n7 { 0%, 60% { opacity: 0; } 60.1%, 70% { opacity: 1; } 70.1%, 100% { opacity: 0; } }
.an2 .n7 { animation: an-n7 8s steps(1, end) infinite; }
@keyframes an-n8 { 0%, 70% { opacity: 0; } 70.1%, 80% { opacity: 1; } 80.1%, 100% { opacity: 0; } }
.an2 .n8 { animation: an-n8 8s steps(1, end) infinite; }
.an-valid { transform-origin: 242px 138px; animation: an-valid 8s ease-out infinite; }
@keyframes an-valid { 0%, 81% { opacity: 0; transform: scale(.8); } 86%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.an-milon { animation: an-milon 8s ease-out infinite; }
@keyframes an-milon { 0%, 87% { opacity: 0; transform: translateY(-4px); } 92%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.an-glow { animation: an-glow 2.4s ease-in-out infinite; }
@keyframes an-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.an-xp { animation: an-xp 4.8s ease-out infinite; }
@keyframes an-xp { 0%, 40% { opacity: 0; transform: translateY(14px); } 50%, 80% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(-16px); } }
.an-fill { transform-origin: 24px 0; animation: an-fill 4.8s ease-in-out infinite; }
@keyframes an-fill { 0%, 40% { transform: scaleX(.42); } 70%, 100% { transform: scaleX(.74); } }