/* Les animations du site, rejouees en CSS + IntersectionObserver. L'original les faisait avec framer-motion ; les valeurs ci-dessous sont celles du bundle d'origine (duree, delai, courbe), pas des approximations. Rien ne se cache tant que .js n'est pas pose sur : sans JavaScript, la page s'affiche entiere plutot que vide. */ :root { --ease-out-site: cubic-bezier(.22, 1, .36, 1); } /* Entree au chargement : le bandeau, le titre, le paragraphe, les boutons */ html.js [data-enter] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out-site), transform .7s var(--ease-out-site); } /* Entree au defilement : tout le reste des blocs de page */ html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out-site), transform .6s var(--ease-out-site); } html.js [data-enter].is-in, html.js [data-reveal].is-in { opacity: 1; transform: none; } /* Les noeuds du schema d'en-tete */ html.js [data-pop] { opacity: 0; transform: scale(.6); transform-origin: 50% 50%; transform-box: fill-box; transition: opacity .5s ease-out, transform .5s ease-out; } /* Les cases du calendrier, dans le schema d'en-tete */ html.js [data-tile] { opacity: 0; transform: translateY(8px); transform-origin: 50% 50%; transform-box: fill-box; transition: opacity .4s ease-out, transform .4s ease-out; } html.js [data-pop].is-in, html.js [data-tile].is-in { opacity: 1; transform: none; } /* Les barres du graphique « delai de premiere reponse » */ html.js [data-bar] { width: 0; transition: width 1s var(--ease-out-site); } /* Les trois billes qui parcourent la courbe, en boucle */ [data-flow] { animation: site-flow 4.5s ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes site-flow { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* Le coeur violet de chaque noeud, qui respire */ [data-pulse] { animation: site-pulse 2.4s ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes site-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* Personne ne se fait secouer s'il a demande le contraire au systeme */ @media (prefers-reduced-motion: reduce) { html.js [data-enter], html.js [data-reveal], html.js [data-pop], html.js [data-tile] { opacity: 1; transform: none; transition: none; } html.js [data-bar] { transition: none; } [data-flow], [data-pulse] { animation: none; } html { scroll-behavior: auto; } }