html.anim .rail > * { animation: fondu-monte .7s var(--entree) both; }
html.anim .rail > :nth-child(1) { animation-delay: .05s; }
html.anim .rail > :nth-child(2) { animation-delay: .18s; }
html.anim .rail > :nth-child(3) { animation-delay: .34s; }
html.anim .nav .rail-grp { animation: fondu-monte .6s var(--entree) both; }
html.anim .nav .rail-grp:nth-child(2) { animation-delay: .22s; }
html.anim .nav .rail-grp:nth-child(3) { animation-delay: .32s; }
html.anim .nav .rail-grp:nth-child(4) { animation-delay: .42s; }
html.anim .nav .rail-grp:nth-child(5) { animation-delay: .52s; }
html.anim .entete-barre { animation: entete-entre .9s var(--entree) both .12s; }
html.anim .nav-curseur { animation: fondu .4s var(--doux) .7s backwards; }
@keyframes fondu-monte { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes entete-entre { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
html.anim .ecran-entre .mots .mot-i { animation: mot-monte .9s var(--entree) both; animation-delay: calc(.06s + var(--n, 0) * 48ms); }
@keyframes mot-monte { from { translate: 0 120%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
html.anim .ecran-entre .grille-4 > .tuile { animation: tuile-entre .6s var(--entree) both; animation-delay: calc(.14s + var(--k, 0) * 75ms); }
html.anim .ecran-entre .grille-4 > .tuile:nth-child(2) { --k: 1; }
html.anim .ecran-entre .grille-4 > .tuile:nth-child(3) { --k: 2; }
html.anim .ecran-entre .grille-4 > .tuile:nth-child(4) { --k: 3; }
@keyframes tuile-entre { from { opacity: 0; translate: 0 14px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
html.anim .ecran-entre tbody tr { animation: ligne-entre .45s var(--doux) both; animation-delay: calc(.2s + var(--k, 12) * 28ms); }
html.anim .ecran-entre tbody tr:nth-child(1) { --k: 0; } html.anim .ecran-entre tbody tr:nth-child(2) { --k: 1; }
html.anim .ecran-entre tbody tr:nth-child(3) { --k: 2; } html.anim .ecran-entre tbody tr:nth-child(4) { --k: 3; }
html.anim .ecran-entre tbody tr:nth-child(5) { --k: 4; } html.anim .ecran-entre tbody tr:nth-child(6) { --k: 5; }
html.anim .ecran-entre tbody tr:nth-child(7) { --k: 6; } html.anim .ecran-entre tbody tr:nth-child(8) { --k: 7; }
html.anim .ecran-entre tbody tr:nth-child(9) { --k: 8; } html.anim .ecran-entre tbody tr:nth-child(10) { --k: 9; }
html.anim .ecran-entre tbody tr:nth-child(11) { --k: 10; } html.anim .ecran-entre tbody tr:nth-child(12) { --k: 11; }
@keyframes ligne-entre { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
html.anim .ecran-entre .pc-grille > .pc-case { animation: jour-pop .5s var(--ressort) both; animation-delay: calc(.25s + var(--k, 0) * 14ms); }
html.anim .ecran-entre .pc-grille > .pc-case:nth-child(n+9) { --k: 7; } html.anim .ecran-entre .pc-grille > .pc-case:nth-child(n+17) { --k: 14; }
html.anim .ecran-entre .pc-grille > .pc-case:nth-child(n+25) { --k: 21; } html.anim .ecran-entre .pc-grille > .pc-case:nth-child(n+33) { --k: 28; }
html.anim .ecran-entre .pc-grille > .pc-case:nth-child(n+41) { --k: 35; } html.anim .ecran-entre .pc-grille > .pc-case:nth-child(n+49) { --k: 42; }
@keyframes jour-pop { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
html.anim .ecran-entre .ligne-ctrl { animation: ligne-entre .5s var(--entree) both; animation-delay: calc(.22s + var(--k, 6) * 45ms); }
html.anim .ecran-entre .ligne-ctrl:nth-child(1) { --k: 0; } html.anim .ecran-entre .ligne-ctrl:nth-child(2) { --k: 1; }
html.anim .ecran-entre .ligne-ctrl:nth-child(3) { --k: 2; } html.anim .ecran-entre .ligne-ctrl:nth-child(4) { --k: 3; }
html.anim .ecran-entre .ligne-ctrl:nth-child(5) { --k: 4; } html.anim .ecran-entre .ligne-ctrl:nth-child(6) { --k: 5; }
html.anim .ecran-entre .vide .rond, html.anim .ecran-entre .etat-ico, html.anim .ecran-entre .reserve .cadenas { animation: ico-pop .7s var(--ressort) both .3s; }
html.anim .ecran-entre .bandeau-etat .ligne-ico { animation: ico-pop .8s var(--ressort) both .5s; }
@keyframes ico-pop { from { scale: .6; rotate: -8deg; } to { scale: 1; rotate: 0deg; } }
html.anim .aurore span { transition: translate 1.4s var(--doux); }
html.anim .aurore .a1 { translate: calc(var(--px, 0) * 34px) calc(var(--py, 0) * 24px); }
html.anim .aurore .a2 { translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -18px); }
html.anim .aurore .a3 { translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * -14px); }
html.anim .aurore .a4 { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * 16px); }
html.anim .btn {
  translate: var(--dx, 0px) var(--dy, 0px);
  transition: translate .4s var(--doux), background var(--tr-vif) var(--doux), border-color var(--tr-vif) var(--doux),
              transform var(--tr-vif) var(--doux), box-shadow var(--tr) var(--doux), filter var(--tr) var(--doux);
}
.btn-primaire::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%);
  translate: -130% 0;
}
html.anim .btn-primaire:hover:not(:disabled)::after { animation: brille .9s var(--doux) both; }
@keyframes brille { to { translate: 130% 0; } }
.carte.lueur-curseur:not(.carte-formule):not(.carte-nuit)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--acc) 0%, color-mix(in srgb, var(--acc) 35%, transparent) 40%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .45s var(--doux);
}
html.anim .carte.lueur-curseur:not(.carte-formule):not(.carte-nuit):hover::after { opacity: 1; }
html.anim .tuile { transition: border-color var(--tr) var(--doux), translate .3s var(--entree), box-shadow .3s var(--doux); }
html.anim .tuile:hover { translate: 0 -2px; box-shadow: var(--om-2); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.carte-formule::after, .orbe-hote::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 292deg, var(--aur-4) 322deg, var(--aur-2) 342deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
}
.carte-formule::after { inset: -1px; }
.orbe-hote::after { border-radius: 50%; inset: -6px; padding: 2px; opacity: .7; }
html.anim .carte-formule::after { animation: tourne 7s linear infinite; }
html.anim .orbe-hote::after { animation: tourne 5s linear infinite; }
@keyframes tourne { to { --ang: 360deg; } }
.sortie-bouton { position: relative; display: inline-flex; border-radius: var(--pill); isolation: isolate; }
html.anim .sortie-bouton::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: -1;
  animation: halo-sortie 2.8s ease-out infinite;
}
@keyframes halo-sortie { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } }
html.anim .courbe-bout { animation: bout 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bout { 0% { opacity: .5; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
html.anim .voyant-go .anneau-hote::before { animation: lueur-go 2.6s ease-in-out infinite; }
@keyframes lueur-go { 0%, 100% { opacity: .6; scale: 1; } 50% { opacity: 1; scale: 1.18; } }
html.anim .bandeau::before { animation: bandeau-derive 16s ease-in-out infinite alternate; }
@keyframes bandeau-derive { from { translate: -3% 0; } to { translate: 3% 2%; } }
.toast { position: relative; overflow: hidden; }
.toast::after {
  content: ""; position: absolute; left: var(--e5); right: var(--e5); bottom: 0; height: 2px; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--acc), var(--aur-2));
  transform-origin: 0 50%;
}
html.anim .toast::after { animation: toast-fil var(--duree, 4s) linear both; }
@keyframes toast-fil { from { scale: 1 1; } to { scale: 0 1; } }
html.anim .choix-carte.choisi { animation: choisi .5s var(--ressort) both; }
@keyframes choisi { from { scale: .97; } to { scale: 1; } }
@media (hover: none) {
  html.anim .btn { translate: 0 0; }
  html.anim .aurore span { translate: 0 0; }
  html.anim .tuile:hover { translate: 0 0; }
}