/* Scène « animations » : le panier qui se remplit, clic après clic, sur la
   page « À emporter » de Chez Lucie, dans Chrome (demandes de Théo du
   24 septembre). Le rideau de fin et le curseur viennent du kit.

   FICHIER ÉCRIT PAR scene-css.py : les keyframes des quatre clics (vols,
   rebonds, lignes, total, curseur, légende) sont calculées là-bas, depuis un
   seul minutage. Modifier scene-fixe.css ou le script, jamais scene.css.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes (1 % = 120 ms) :
      6,5 %  le curseur se pose sur la page
       10 %  clic sur « + » (les huîtres) : la vignette part à 10,4 %, tombe dans le
            panier à 15,4 % ; le panier s'écrase, la ligne et le total suivent
       22 %  clic sur « + » (le bar) : la vignette part à 22,4 %, tombe dans le
            panier à 27,4 % ; le panier s'écrase, la ligne et le total suivent
       34 %  clic sur « + » (le canelé) : la vignette part à 34,4 %, tombe dans le
            panier à 39,4 % ; le panier s'écrase, la ligne et le total suivent
       46 %  clic sur « + » (les huîtres) : la vignette part à 46,4 %, tombe dans le
            panier à 51,4 % ; le panier s'écrase, la ligne et le total suivent
     58 %  clic sur « Commander » : « Prête à 12 h 15 », le panier saute
       65 %  plus rien ne bouge ; fondu au blanc à 95 %, retour au début
            entre 98,4 et 99,9 %

   LA TOILE : 520 x 540. La fenêtre de 0 à 500 ; sa vue de 434 de haut
   commence à y 65. En bas, de 508 à 534, la légende, qui ne bouge jamais. */
.fn-scene--animations {
  --sc-haut: 540px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-leg: #E5E5E5; --line-site: #EDEDED; --line-pointille: #D4D4D4;
  line-height: 1.35;
}
.fn-scene--animations svg { display: block; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-animations-chrome {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 520px; height: 500px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-animations-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-animations-c-onglet {
  position: absolute; top: 5px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 170px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-animations-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-animations-c-favi i {
  display: grid; place-items: center; width: 12px; height: 12px;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; font-style: normal; line-height: 1;
}
/* Chrome n'écrit pas « … » au bout d'un titre trop long : il l'efface en
   fondu. */
.sc-animations-c-titre {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 0.59375rem;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.sc-animations-c-plus { position: absolute; top: 9px; left: 188px; color: #474747; }
.sc-animations-c-plus svg { width: 12px; height: 12px; }
.sc-animations-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-animations-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-animations-fen svg { width: 10px; height: 10px; }
.sc-animations-c-outils {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: 34px; padding: 0 6px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-animations-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-animations-c-outils > i svg { width: 14px; height: 14px; }
.sc-animations-c-off { color: #C4C7C5; }
.sc-animations-c-outils > .sc-animations-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-animations-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1;
  height: 26px; margin: 0 6px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.65625rem; color: #1F1F1F; white-space: nowrap;
}
.sc-animations-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-animations-url-chemin { color: #5F6368; }
.sc-animations-c-etoile { margin-left: auto; }
.sc-animations-c-etoile svg { width: 13px; height: 13px; }

.sc-animations-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: #0A0A0A; }

/* ═══ LE SITE ═════════════════════════════════════════════════════════ */
.sc-animations-tete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 20px;
  border-bottom: 1px solid var(--line-site); background: #FFFFFF;
}
.sc-animations-marque { font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-animations-nav { display: flex; align-items: center; gap: 14px; font-size: 0.5625rem; font-weight: 500; color: #525252; }
.sc-animations-nav b { font-weight: 700; color: #0A0A0A; }
.sc-animations-resa {
  display: grid; place-items: center;
  height: 26px; padding: 0 12px; border-radius: 7px;
  background: #0A0A0A; color: #FFFFFF; font-weight: 700;
}
.sc-animations-page {
  position: absolute; top: 44px; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 292px 172px; gap: 16px; align-items: start;
  padding: 16px 20px 0;
}

/* À gauche : la carte à emporter. */
.sc-animations-carte { display: flex; flex-direction: column; }
.sc-animations-kicker { font-size: 0.46875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #737373; }
.sc-animations-h1 { margin-top: 5px; font-size: 1.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.sc-animations-dit { margin: 4px 0 12px; font-size: 0.59375rem; color: #525252; }
.sc-animations-plat {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; gap: 12px; align-items: center;
  margin-bottom: 8px; padding: 9px 11px 9px 9px;
  border: 1px solid var(--line-site); border-radius: 12px;
}
/* La tuile du plat : un aplat clair, le plat dessiné au milieu. */
.sc-animations-photo { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 9px; }
.sc-animations-photo--1 { background: #E8EEF4; }
.sc-animations-photo--2 { background: #E6F0EE; }
.sc-animations-photo--3 { background: #F5EADC; }
.sc-animations-tuile svg,
.sc-animations-jeton svg { display: block; width: 100%; height: 100%; }
.sc-animations-tuile--huitre { width: 52px; height: 43.3px; }
.sc-animations-tuile--bar    { width: 56px; height: 24.9px; }
.sc-animations-tuile--canele { width: 38px; height: 38px; }
/* Combien on en a pris : un repère rectangulaire arrondi (pas une pastille),
   bordé de blanc pour se détacher de la tuile. */
.sc-animations-qte {
  position: absolute; top: -6px; right: -6px;
  display: block; width: 20px; height: 20px; overflow: hidden;
  border: 2px solid #FFFFFF; border-radius: 7px;
  background: #0A0A0A; color: #FFFFFF;
  font-size: 0.5625rem; font-weight: 800; line-height: 16px; text-align: center;
  opacity: 0; transform: scale(.4);
}
.sc-animations-qte-bande { display: flex; flex-direction: column; }
.sc-animations-qte-bande i { display: block; height: 16px; font-style: normal; }
.sc-animations-plat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-animations-plat-txt b { font-size: 0.71875rem; font-weight: 700; line-height: 1.2; }
.sc-animations-plat-txt span { font-size: 0.5625rem; color: #737373; }
.sc-animations-plat-txt em { margin-top: 3px; font-size: 0.6875rem; font-weight: 700; font-style: normal; }
.sc-animations-ajout {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
}
.sc-animations-ajout svg { width: 15px; height: 15px; stroke-width: 1.8; }

/* À droite : le panier. */
.sc-animations-cote {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: 16px; background: #F5F5F3;
}
.sc-animations-cote-titre { font-size: 0.75rem; font-weight: 800; letter-spacing: -.01em; }
/* Le panier dessiné, 144 x 104. Au-dessus de la carte de gauche (z 2) : les
   vignettes en vol passent par-dessus la page, sous l'en-tête (z 3). */
.sc-animations-panier { position: relative; z-index: 2; display: block; width: 144px; height: 104px; }
.sc-animations-panier-corps { position: absolute; inset: 0; transform-origin: 50% 98%; }
.sc-animations-panier-dos,
.sc-animations-panier-devant { position: absolute; top: 0; left: 0; width: 144px; height: 104px; }
/* Un plat qui vole : le MÊME dessin que sur la tuile, posé à sa place
   dans le panier (position, taille, inclinaison ci-dessous) ; le vol le fait
   partir de la tuile de la carte, à la taille qu'il y a. Trois éléments pour
   trois mouvements indépendants : l'horizontale (régulière), la verticale
   (l'arc), le dessin (taille, rotation, écrasement à l'arrivée). Une ombre
   portée neutre, légère, le détache de ce qu'il survole. */
.sc-animations-vol-x { position: absolute; display: block; }
.sc-animations-vol-y,
.sc-animations-jeton { display: block; width: 100%; height: 100%; }
.sc-animations-jeton { opacity: 0; filter: drop-shadow(0 2px 2px rgba(31, 36, 46, .28)); }
.sc-animations-vol-x--1 { left: 16px; top: 23.65px; width: 44px; height: 36.7px; }
.sc-animations-jeton--1 { transform: scale(1, 1) rotate(-14deg); }
.sc-animations-vol-x--2 { left: 54px; top: 18.8px; width: 64px; height: 28.4px; }
.sc-animations-jeton--2 { transform: scale(1, 1) rotate(-22deg); }
.sc-animations-vol-x--3 { left: 99px; top: 25px; width: 30px; height: 30px; }
.sc-animations-jeton--3 { transform: scale(1, 1) rotate(4deg); }
.sc-animations-vol-x--4 { left: 38px; top: 13.65px; width: 44px; height: 36.7px; }
.sc-animations-jeton--4 { transform: scale(1, 1) rotate(12deg); }

/* Les lignes du panier : trois places réservées, pour que rien ne saute. */
.sc-animations-lignes { position: relative; display: block; height: 60px; }
.sc-animations-vide { position: absolute; top: 2px; left: 0; font-size: 0.5625rem; color: #8A8A8A; }
.sc-animations-ligne {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 6px; height: 16px;
  font-size: 0.5625rem; color: #525252;
  opacity: 0;
}
.sc-animations-ligne--1 { top: 0; }
.sc-animations-ligne--2 { top: 21px; }
.sc-animations-ligne--3 { top: 42px; }
.sc-animations-ligne-nom { flex: 1; min-width: 0; font-weight: 700; color: #0A0A0A; white-space: nowrap; }
.sc-animations-ligne-prix,
.sc-animations-fen1--prix { width: 28px; font-weight: 700; color: #0A0A0A; text-align: right; }
.sc-animations-fen1 { display: block; height: 14px; overflow: hidden; line-height: 14px; }
.sc-animations-fen1-bande { display: flex; flex-direction: column; }
.sc-animations-fen1-bande i { display: block; height: 14px; font-style: normal; }

.sc-animations-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; border-top: 1px dashed var(--line-pointille);
  font-size: 0.65625rem; font-weight: 600; color: #525252;
}
.sc-animations-total-fen { display: block; height: 20px; overflow: hidden; line-height: 20px; }
.sc-animations-total-bande { display: flex; flex-direction: column; align-items: flex-end; }
.sc-animations-total-bande i {
  display: block; height: 20px; font-style: normal;
  font-size: 0.9375rem; font-weight: 800; letter-spacing: -.01em; color: #0A0A0A;
  font-variant-numeric: tabular-nums;
}

/* Le bouton « Commander » : gris et éteint, il s'allume à la première
   arrivée ; au clic, son texte laisse la place à l'heure de retrait. */
.sc-animations-commander {
  position: relative; display: block; height: 36px; overflow: hidden;
  border-radius: 10px; background: #E7E7E4;
  font-size: 0.6875rem; font-weight: 700;
}
.sc-animations-cmd-fond { position: absolute; inset: 0; background: #0A0A0A; opacity: 0; }
.sc-animations-cmd-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sc-animations-cmd-txt svg { width: 13px; height: 13px; stroke-width: 1.8; }
.sc-animations-cmd-txt--avant { color: #A3A3A3; }
.sc-animations-cmd-txt--apres { color: #FFFFFF; opacity: 0; transform: translateY(10px); }

/* ═══ LA LÉGENDE ══════════════════════════════════════════════════════
   En bas de la toile, hors de la fenêtre, elle ne bouge jamais : seules ses
   couleurs changent, celle du mouvement en cours passe en noir. */
.sc-animations-legende {
  position: absolute; left: 0; right: 0; top: 508px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
  height: 26px; margin: 0;
}
.sc-animations-etape {
  display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px 0 5px;
  border: 1px solid var(--line-leg); border-radius: 8px;
  background: #FFFFFF; color: #737373;
  font-size: 0.59375rem; font-weight: 700; white-space: nowrap;
}
.sc-animations-etape b {
  display: grid; place-items: center; width: 16px; height: 16px;
  border: 1px solid currentColor; border-radius: 5px;
  font-size: 0.5rem; font-weight: 800;
}

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-cur       { animation-name: sc-cur-animations; }
.sc-cur-onde  { animation-name: sc-animations-onde; }
.sc-fin       { animation-name: sc-conclure; }
.sc-animations-ajout--1 { animation-name: sc-animations-ajout-1; }
.sc-animations-qte--1 { animation-name: sc-animations-qte-1; }
.sc-animations-qte-bande--1 { animation-name: sc-animations-qte-bande-1; }
.sc-animations-ajout--2 { animation-name: sc-animations-ajout-2; }
.sc-animations-qte--2 { animation-name: sc-animations-qte-2; }
.sc-animations-ajout--3 { animation-name: sc-animations-ajout-3; }
.sc-animations-qte--3 { animation-name: sc-animations-qte-3; }
.sc-animations-vol-x--1 { animation-name: sc-animations-vol-x-1; }
.sc-animations-vol-y--1 { animation-name: sc-animations-vol-y-1; }
.sc-animations-jeton--1 { animation-name: sc-animations-jeton-1; }
.sc-animations-vol-x--2 { animation-name: sc-animations-vol-x-2; }
.sc-animations-vol-y--2 { animation-name: sc-animations-vol-y-2; }
.sc-animations-jeton--2 { animation-name: sc-animations-jeton-2; }
.sc-animations-vol-x--3 { animation-name: sc-animations-vol-x-3; }
.sc-animations-vol-y--3 { animation-name: sc-animations-vol-y-3; }
.sc-animations-jeton--3 { animation-name: sc-animations-jeton-3; }
.sc-animations-vol-x--4 { animation-name: sc-animations-vol-x-4; }
.sc-animations-vol-y--4 { animation-name: sc-animations-vol-y-4; }
.sc-animations-jeton--4 { animation-name: sc-animations-jeton-4; }
.sc-animations-panier-corps { animation-name: sc-animations-panier; }
.sc-animations-ligne--1 { animation-name: sc-animations-ligne-1; }
.sc-animations-ligne--2 { animation-name: sc-animations-ligne-2; }
.sc-animations-ligne--3 { animation-name: sc-animations-ligne-3; }
.sc-animations-vide { animation-name: sc-animations-vide; }
.sc-animations-fen1-bande { animation-name: sc-animations-fen1; }
.sc-animations-total-bande { animation-name: sc-animations-total; }
.sc-animations-cmd-fond { animation-name: sc-animations-cmd-fond; }
.sc-animations-cmd-txt--avant { animation-name: sc-animations-cmd-avant; }
.sc-animations-cmd-txt--apres { animation-name: sc-animations-cmd-apres; }
.sc-animations-commander { animation-name: sc-animations-commander; }
.sc-animations-etape--1 { animation-name: sc-animations-etape-1; }
.sc-animations-etape--2 { animation-name: sc-animations-etape-2; }
.sc-animations-etape--3 { animation-name: sc-animations-etape-3; }

/* ═══ LES MOUVEMENTS (calculés) ═══════════════════════════════════════ */
@keyframes sc-cur-animations {
  0%, 4%        { transform: translate(236px, 300px) scale(1); opacity: 0; }
  6.5%          { transform: translate(236px, 300px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  9.2%          { transform: translate(280px, 231px) scale(1); }
  10%           { transform: translate(280px, 231px) scale(0.84); animation-timing-function: ease-out; }
  10.6%         { transform: translate(280px, 231px) scale(1); }
  17.2%         { transform: translate(280px, 231px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  21.2%         { transform: translate(280px, 323px) scale(1); }
  22%           { transform: translate(280px, 323px) scale(0.84); animation-timing-function: ease-out; }
  22.6%         { transform: translate(280px, 323px) scale(1); }
  29.2%         { transform: translate(280px, 323px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  33.2%         { transform: translate(280px, 415px) scale(1); }
  34%           { transform: translate(280px, 415px) scale(0.84); animation-timing-function: ease-out; }
  34.6%         { transform: translate(280px, 415px) scale(1); }
  41.2%         { transform: translate(280px, 415px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  45.2%         { transform: translate(280px, 231px) scale(1); }
  46%           { transform: translate(280px, 231px) scale(0.84); animation-timing-function: ease-out; }
  46.6%         { transform: translate(280px, 231px) scale(1); }
  53.2%         { transform: translate(280px, 231px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  57.2%         { transform: translate(411px, 396px) scale(1); }
  58%           { transform: translate(411px, 396px) scale(0.84); animation-timing-function: ease-out; }
  58.6%         { transform: translate(411px, 396px) scale(1); }
  61%           { transform: translate(411px, 396px) scale(1); opacity: 1; animation-timing-function: ease-in; }
  65%, 98.4%    { transform: translate(435px, 426px) scale(1); opacity: 0; }
  99.9%, 100%   { transform: translate(236px, 300px) scale(1); opacity: 0; }
}
@keyframes sc-animations-onde {
  0%            { transform: scale(.4); opacity: 0; }
  9.8%          { transform: scale(.4); opacity: 0; }
  10.1%         { transform: scale(.4); opacity: .9; animation-timing-function: ease-out; }
  13%           { transform: scale(2.2); opacity: 0; }
  13.4%         { transform: scale(.4); opacity: 0; }
  21.8%         { transform: scale(.4); opacity: 0; }
  22.1%         { transform: scale(.4); opacity: .9; animation-timing-function: ease-out; }
  25%           { transform: scale(2.2); opacity: 0; }
  25.4%         { transform: scale(.4); opacity: 0; }
  33.8%         { transform: scale(.4); opacity: 0; }
  34.1%         { transform: scale(.4); opacity: .9; animation-timing-function: ease-out; }
  37%           { transform: scale(2.2); opacity: 0; }
  37.4%         { transform: scale(.4); opacity: 0; }
  45.8%         { transform: scale(.4); opacity: 0; }
  46.1%         { transform: scale(.4); opacity: .9; animation-timing-function: ease-out; }
  49%           { transform: scale(2.2); opacity: 0; }
  49.4%         { transform: scale(.4); opacity: 0; }
  57.8%         { transform: scale(.4); opacity: 0; }
  58.1%         { transform: scale(.4); opacity: .9; animation-timing-function: ease-out; }
  61%           { transform: scale(2.2); opacity: 0; }
  61.4%, 98.4%  { transform: scale(.4); opacity: 0; }
  99.9%, 100%   { transform: scale(.4); opacity: 0; }
}
@keyframes sc-animations-ajout-1 {
  0%            { transform: scale(1); }
  9.9%          { transform: scale(1); animation-timing-function: ease-out; }
  10.3%         { transform: scale(.86); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  11.5%         { transform: scale(1); }
  45.9%         { transform: scale(1); animation-timing-function: ease-out; }
  46.3%         { transform: scale(.86); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  47.5%, 98.4%  { transform: scale(1); }
  99.9%, 100%   { transform: scale(1); }
}
@keyframes sc-animations-qte-1 {
  0%, 10.2%     { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  11.2%         { opacity: 1; transform: scale(1); }
  46.2%         { opacity: 1; transform: scale(1); animation-timing-function: ease-out; }
  46.7%         { opacity: 1; transform: scale(1.25); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  47.6%, 98.4%  { opacity: 1; transform: scale(1); }
  99.9%, 100%   { opacity: 0; transform: scale(.4); }
}
@keyframes sc-animations-qte-bande-1 {
  0%, 46.2%     { transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  47%, 98.4%    { transform: translateY(-16px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-animations-ajout-2 {
  0%            { transform: scale(1); }
  21.9%         { transform: scale(1); animation-timing-function: ease-out; }
  22.3%         { transform: scale(.86); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  23.5%, 98.4%  { transform: scale(1); }
  99.9%, 100%   { transform: scale(1); }
}
@keyframes sc-animations-qte-2 {
  0%, 22.2%     { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  23.2%, 98.4%  { opacity: 1; transform: scale(1); }
  99.9%, 100%   { opacity: 0; transform: scale(.4); }
}
@keyframes sc-animations-ajout-3 {
  0%            { transform: scale(1); }
  33.9%         { transform: scale(1); animation-timing-function: ease-out; }
  34.3%         { transform: scale(.86); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  35.5%, 98.4%  { transform: scale(1); }
  99.9%, 100%   { transform: scale(1); }
}
@keyframes sc-animations-qte-3 {
  0%, 34.2%     { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  35.2%, 98.4%  { opacity: 1; transform: scale(1); }
  99.9%, 100%   { opacity: 0; transform: scale(.4); }
}
@keyframes sc-animations-vol-x-1 {
  0%, 10.4%     { transform: translateX(-318px); animation-timing-function: linear; }
  15.4%, 98.4%  { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(-318px); }
}
@keyframes sc-animations-vol-y-1 {
  0%, 10.4%     { transform: translateY(28px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  13.15%        { transform: translateY(-58px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  15.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  15.9%         { transform: translateY(-5px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  16.4%, 98.4%  { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(28px); }
}
@keyframes sc-animations-jeton-1 {
  0%, 10.2%     { opacity: 0; transform: scale(1.18, 1.18) rotate(0deg); }
  10.4%         { opacity: 1; transform: scale(1.18, 1.18) rotate(0deg); animation-timing-function: ease-out; }
  11.2%         { opacity: 1; transform: scale(1.28, 1.28) rotate(-10deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  15.4%         { transform: scale(1.1, 0.88) rotate(-14deg); animation-timing-function: ease-out; }
  16%           { transform: scale(0.96, 1.05) rotate(-14deg); animation-timing-function: ease-in-out; }
  16.6%, 98.4%  { opacity: 1; transform: scale(1, 1) rotate(-14deg); }
  99.9%, 100%   { opacity: 0; transform: scale(1.18, 1.18) rotate(0deg); }
}
@keyframes sc-animations-vol-x-2 {
  0%, 22.4%     { transform: translateX(-366px); animation-timing-function: linear; }
  27.4%, 98.4%  { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(-366px); }
}
@keyframes sc-animations-vol-y-2 {
  0%, 22.4%     { transform: translateY(129px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  25.68%        { transform: translateY(-49px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  27.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  27.9%         { transform: translateY(-5px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  28.4%, 98.4%  { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(129px); }
}
@keyframes sc-animations-jeton-2 {
  0%, 22.2%     { opacity: 0; transform: scale(0.88, 0.88) rotate(0deg); }
  22.4%         { opacity: 1; transform: scale(0.88, 0.88) rotate(0deg); animation-timing-function: ease-out; }
  23.2%         { opacity: 1; transform: scale(0.95, 0.95) rotate(-10deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  27.4%         { transform: scale(1.1, 0.88) rotate(-22deg); animation-timing-function: ease-out; }
  28%           { transform: scale(0.96, 1.05) rotate(-22deg); animation-timing-function: ease-in-out; }
  28.6%, 98.4%  { opacity: 1; transform: scale(1, 1) rotate(-22deg); }
  99.9%, 100%   { opacity: 0; transform: scale(0.88, 0.88) rotate(0deg); }
}
@keyframes sc-animations-vol-x-3 {
  0%, 34.4%     { transform: translateX(-394px); animation-timing-function: linear; }
  39.4%, 98.4%  { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(-394px); }
}
@keyframes sc-animations-vol-y-3 {
  0%, 34.4%     { transform: translateY(214px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  37.84%        { transform: translateY(-56px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  39.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  39.9%         { transform: translateY(-5px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  40.4%, 98.4%  { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(214px); }
}
@keyframes sc-animations-jeton-3 {
  0%, 34.2%     { opacity: 0; transform: scale(1.27, 1.27) rotate(0deg); }
  34.4%         { opacity: 1; transform: scale(1.27, 1.27) rotate(0deg); animation-timing-function: ease-out; }
  35.2%         { opacity: 1; transform: scale(1.37, 1.37) rotate(-10deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  39.4%         { transform: scale(1.1, 0.88) rotate(4deg); animation-timing-function: ease-out; }
  40%           { transform: scale(0.96, 1.05) rotate(4deg); animation-timing-function: ease-in-out; }
  40.6%, 98.4%  { opacity: 1; transform: scale(1, 1) rotate(4deg); }
  99.9%, 100%   { opacity: 0; transform: scale(1.27, 1.27) rotate(0deg); }
}
@keyframes sc-animations-vol-x-4 {
  0%, 46.4%     { transform: translateX(-340px); animation-timing-function: linear; }
  51.4%, 98.4%  { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(-340px); }
}
@keyframes sc-animations-vol-y-4 {
  0%, 46.4%     { transform: translateY(38px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  49.26%        { transform: translateY(-48px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  51.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  51.9%         { transform: translateY(-5px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  52.4%, 98.4%  { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(38px); }
}
@keyframes sc-animations-jeton-4 {
  0%, 46.2%     { opacity: 0; transform: scale(1.18, 1.18) rotate(0deg); }
  46.4%         { opacity: 1; transform: scale(1.18, 1.18) rotate(0deg); animation-timing-function: ease-out; }
  47.2%         { opacity: 1; transform: scale(1.28, 1.28) rotate(-10deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  51.4%         { transform: scale(1.1, 0.88) rotate(12deg); animation-timing-function: ease-out; }
  52%           { transform: scale(0.96, 1.05) rotate(12deg); animation-timing-function: ease-in-out; }
  52.6%, 98.4%  { opacity: 1; transform: scale(1, 1) rotate(12deg); }
  99.9%, 100%   { opacity: 0; transform: scale(1.18, 1.18) rotate(0deg); }
}
@keyframes sc-animations-panier {
  0%            { transform: translateY(0px) scale(1, 1); }
  15.4%         { transform: translateY(0px) scale(1, 1); animation-timing-function: ease-out; }
  15.9%         { transform: translateY(0px) scale(1.06, 0.9); animation-timing-function: ease-in-out; }
  16.7%         { transform: translateY(0px) scale(0.97, 1.04); animation-timing-function: ease-in-out; }
  17.5%         { transform: translateY(0px) scale(1, 1); }
  27.4%         { transform: translateY(0px) scale(1, 1); animation-timing-function: ease-out; }
  27.9%         { transform: translateY(0px) scale(1.06, 0.9); animation-timing-function: ease-in-out; }
  28.7%         { transform: translateY(0px) scale(0.97, 1.04); animation-timing-function: ease-in-out; }
  29.5%         { transform: translateY(0px) scale(1, 1); }
  39.4%         { transform: translateY(0px) scale(1, 1); animation-timing-function: ease-out; }
  39.9%         { transform: translateY(0px) scale(1.06, 0.9); animation-timing-function: ease-in-out; }
  40.7%         { transform: translateY(0px) scale(0.97, 1.04); animation-timing-function: ease-in-out; }
  41.5%         { transform: translateY(0px) scale(1, 1); }
  51.4%         { transform: translateY(0px) scale(1, 1); animation-timing-function: ease-out; }
  51.9%         { transform: translateY(0px) scale(1.06, 0.9); animation-timing-function: ease-in-out; }
  52.7%         { transform: translateY(0px) scale(0.97, 1.04); animation-timing-function: ease-in-out; }
  53.5%         { transform: translateY(0px) scale(1, 1); }
  58.6%         { transform: translateY(0px) scale(1, 1); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  59.4%         { transform: translateY(-7px) scale(1, 1); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  60.2%         { transform: translateY(0px) scale(1.05, 0.94); animation-timing-function: ease-out; }
  61%, 98.4%    { transform: translateY(0px) scale(1, 1); }
  99.9%, 100%   { transform: translateY(0px) scale(1, 1); }
}
@keyframes sc-animations-ligne-1 {
  0%, 15.4%     { opacity: 0; transform: translateX(-8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  16.6%, 98.4%  { opacity: 1; transform: translateX(0); }
  99.9%, 100%   { opacity: 0; transform: translateX(-8px); }
}
@keyframes sc-animations-ligne-2 {
  0%, 27.4%     { opacity: 0; transform: translateX(-8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.6%, 98.4%  { opacity: 1; transform: translateX(0); }
  99.9%, 100%   { opacity: 0; transform: translateX(-8px); }
}
@keyframes sc-animations-ligne-3 {
  0%, 39.4%     { opacity: 0; transform: translateX(-8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40.6%, 98.4%  { opacity: 1; transform: translateX(0); }
  99.9%, 100%   { opacity: 0; transform: translateX(-8px); }
}
@keyframes sc-animations-vide {
  0%, 15.2%     { opacity: 1; }
  15.8%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-animations-fen1 {
  0%, 51.2%     { transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  52.1%, 98.4%  { transform: translateY(-14px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-animations-total {
  0%            { transform: translateY(0); }
  15.3%         { transform: translateY(-0px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  16.2%         { transform: translateY(-20px); }
  27.3%         { transform: translateY(-20px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.2%         { transform: translateY(-40px); }
  39.3%         { transform: translateY(-40px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40.2%         { transform: translateY(-60px); }
  51.3%         { transform: translateY(-60px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  52.2%, 98.4%  { transform: translateY(-80px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-animations-cmd-fond {
  0%, 15.4%     { opacity: 0; animation-timing-function: ease-out; }
  16.2%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-animations-cmd-avant {
  0%, 15.4%     { color: #A3A3A3; opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
  16.2%         { color: #FFFFFF; opacity: 1; transform: translateY(0); }
  58.4%         { color: #FFFFFF; opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
  59.2%, 98.4%  { color: #FFFFFF; opacity: 0; transform: translateY(-10px); }
  99.9%, 100%   { color: #A3A3A3; opacity: 1; transform: translateY(0); }
}
@keyframes sc-animations-cmd-apres {
  0%, 58.8%     { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  60%, 98.4%    { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(10px); }
}
@keyframes sc-animations-commander {
  0%, 57.9%     { transform: scale(1); animation-timing-function: ease-out; }
  58.3%         { transform: scale(.96); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  59.4%, 98.4%  { transform: scale(1); }
  99.9%, 100%   { transform: scale(1); }
}
@keyframes sc-animations-etape-1 {
  0%            { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  9.6%          { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  9.9%          { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  11.2%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  11.5%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  21.6%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  21.9%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  23.2%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  23.5%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  33.6%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  33.9%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  35.2%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  35.5%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  45.6%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  45.9%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  47.2%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  47.5%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  57.6%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  57.9%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  59.2%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  59.5%, 98.4%  { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  99.9%, 100%   { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
}
@keyframes sc-animations-etape-2 {
  0%            { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  10.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  10.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  15.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  15.7%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  22.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  22.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  27.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  27.7%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  34.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  34.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  39.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  39.7%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  46.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  46.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  51.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  51.7%, 98.4%  { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  99.9%, 100%   { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
}
@keyframes sc-animations-etape-3 {
  0%            { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  15.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  15.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  17.6%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  17.9%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  27.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  27.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  29.6%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  29.9%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  39.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  39.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  41.6%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  41.9%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  51.1%         { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  51.4%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  53.6%         { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
  53.9%, 98.4%  { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
  99.9%, 100%   { background: #FFFFFF; color: #737373; border-color: #E5E5E5; }
}

/* Moins de mouvement : l'état d'arrivée, sans rien faire bouger. Le panier
   plein, les quatre vignettes dedans, les trois lignes, le total à 57 €,
   la commande prise. */
@media (prefers-reduced-motion: reduce) {
  .sc-animations-jeton { opacity: 1; }
  .sc-animations-qte { opacity: 1; transform: none; }
  .sc-animations-qte-bande--1 { transform: translateY(-16px); }
  .sc-animations-vide { opacity: 0; }
  .sc-animations-ligne { opacity: 1; }
  .sc-animations-fen1-bande { transform: translateY(-14px); }
  .sc-animations-total-bande { transform: translateY(-80px); }
  .sc-animations-cmd-fond { opacity: 1; }
  .sc-animations-cmd-txt--avant { opacity: 0; }
  .sc-animations-cmd-txt--apres { opacity: 1; transform: none; }
}