/* Scène « base-partagee » : un prix changé dans l'outil de Lucie apparaît
   sur la boutique ; une commande sur la boutique vide le stock dans l'outil.
   Deux appareils : le téléphone de la cliente devant, à gauche ; l'outil
   dans Chrome, derrière, à droite. Ancienne scène (deux fenêtres
   superposées) rangée dans _avant-refonte-ux/base-partagee-site-et-outil/.
   Le rideau de fin vient du kit.

   LISIBLE SANS ZOOMER : 12 px pour tout ce qui se lit, 11 px minimum.
   L'outil a l'allure de celui de la page Outil de gestion : Inter, encre,
   accent bleu #3F7BFF, séparateurs en pointillés.

   FICHIER ÉCRIT PAR scene-css.py : les @keyframes (curseur, frappe du prix,
   doigt, états des deux côtés) sont calculés là-bas depuis un seul minutage
   et des mesures prises au banc (mesures.json). Modifier scene-fixe.css ou
   le script, jamais scene.css.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      8 %  Lucie clique dans le prix de la bourriche ; elle tape 26,00 €
   16,5 %  elle enregistre ; 18,5 % : la boutique affiche 26,00 €
     30 %  la cliente passe la soupe à 2 bocaux, commande (35 %) : le bouton
           dit « Commande envoyée », la soupe « Épuisé »
     39 %  dans l'outil : stock à zéro, la commande arrive ; plus rien ne
           bouge après 41 %
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 592, fond blanc. La fenêtre Chrome de (196, 36) à
   (520, 566), l'outil en (197, 101), son contenu à partir de x = 241. Le
   téléphone de (2, 118) à (234, 586), devant la fenêtre, écran de 220 x 456
   en (8, 124). */
.fn-scene--base-partagee {
  --sc-haut: 592px;
  --bleu: #3F7BFF; --bleu-f: #1B4FD1; --bleu-p: #E8EEFF;
  --encre: #0A0A0A; --gris: #525252; --gris2: #737373; --ligne: #E5E5E5;
  --line-chrome: #E3E6EA;
  line-height: 1.35;
}
.fn-scene--base-partagee svg { display: block; }
.fn-scene--base-partagee p { margin: 0; }
.fn-scene--base-partagee i { font-style: normal; }
.fn-scene--base-partagee img { max-width: none; }

/* ═══ LES TITRES ══════════════════════════════════════════════════════ */
.sc-bp-qui {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-bp-qui b { font-size: 0.8125rem; font-weight: 800; line-height: 17px; letter-spacing: -.01em; color: var(--encre); }
.sc-bp-qui span { font-size: 0.6875rem; line-height: 14px; color: var(--gris2); }
.sc-bp-qui--pc { top: 0; left: 196px; width: 324px; }
.sc-bp-qui--tel { top: 84px; left: 2px; width: 232px; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-bp-chrome {
  position: absolute; top: 36px; left: 196px; z-index: 1;
  display: flex; flex-direction: column;
  width: 324px; height: 530px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-bp-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-bp-c-onglet {
  position: absolute; top: 6px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 172px; height: 24px; padding: 0 8px 0 9px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-bp-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-bp-c-favi i {
  display: grid; place-items: center; width: 14px; height: 14px;
  border-radius: 3px; background: var(--encre); color: #FFFFFF;
  font-size: 0.5625rem; font-weight: 800; line-height: 1;
}
.sc-bp-c-titre {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.6875rem;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
  mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.sc-bp-c-plus { position: absolute; top: 9px; left: 190px; color: #474747; }
.sc-bp-c-plus svg { width: 12px; height: 12px; }
.sc-bp-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-bp-fen i { display: grid; place-items: center; width: 30px; height: 100%; color: #1F1F1F; }
.sc-bp-fen svg { width: 10px; height: 10px; }
.sc-bp-c-outils {
  display: flex; align-items: center; gap: 1px; flex: none;
  height: 34px; padding: 0 5px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-bp-c-outils > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.sc-bp-c-outils > i svg { width: 14px; height: 14px; }
.sc-bp-c-off { color: #C4C7C5; }
.sc-bp-c-adresse {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: hidden;
  height: 26px; margin: 0 5px; padding: 0 9px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.6875rem; color: #1F1F1F; white-space: nowrap;
}
.sc-bp-c-adresse > svg { width: 13px; height: 13px; flex: none; }

/* ═══ L'OUTIL DE LUCIE ════════════════════════════════════════════════ */
.sc-bp-o { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: var(--encre); }
.sc-bp-rail {
  position: absolute; top: 0; left: 0; bottom: 0; width: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 14px;
  background: #F5F5F3; color: var(--gris2);
}
.sc-bp-rail i { display: grid; place-items: center; width: 32px; height: 28px; border-radius: 8px; }
.sc-bp-rail svg { width: 15px; height: 15px; }
.sc-bp-rail-actif { background: var(--bleu-p); color: var(--bleu-f); }
.sc-bp-main { position: absolute; top: 0; left: 44px; right: 0; bottom: 0; padding: 14px 14px 0; }
.sc-bp-titre { display: flex; flex-direction: column; margin-bottom: 6px !important; }
.sc-bp-titre b { font-size: 0.875rem; font-weight: 800; line-height: 19px; letter-spacing: -.01em; }
.sc-bp-titre small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.sc-bp-prod { display: flex; align-items: center; gap: 10px; height: 72px; border-top: 1px dashed var(--ligne); }
.sc-bp-prod img { display: block; flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.sc-bp-prod-nom { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-bp-prod-nom b { font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-bp-prod-nom small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.sc-bp-stock { position: relative; display: block; height: 15px; }
.sc-bp-stock small { position: absolute; left: 0; top: 0; white-space: nowrap; }
.sc-bp-stock-b { font-weight: 700; color: var(--encre) !important; opacity: 0; }
.sc-bp-champ {
  position: relative; display: flex; align-items: center; flex: none;
  width: 80px; height: 32px; padding: 0 9px;
  border: 1px solid #D4D4D4; border-radius: 8px; background: #FFFFFF;
  font-size: 0.75rem; white-space: nowrap;
}
.sc-bp-champ-a { position: absolute; left: 9px; top: 7px; padding: 0 1px; line-height: 17px; border-radius: 2px; background: rgba(63, 123, 255, 0); }
.sc-bp-tape { display: block; overflow: hidden; width: 0; }
.sc-bp-tape span { display: inline-block; }
.sc-bp-caret { display: block; width: 1px; height: 15px; margin-left: 1px; background: var(--encre); opacity: 0; }
.sc-bp-enr { position: relative; height: 32px; margin-top: 10px !important; }
.sc-bp-enr-a,
.sc-bp-enr-b {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 14px; border-radius: 10px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.sc-bp-enr-a { background: var(--encre); color: #FFFFFF; }
.sc-bp-enr-b { background: #F5F5F3; color: var(--encre); opacity: 0; }
.sc-bp-enr-b svg { width: 13px; height: 13px; color: var(--bleu); }
.fn-scene--base-partagee .sc-bp-cmd-titre { margin: 16px 0 6px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--gris2); }
.sc-bp-cmd { position: relative; height: 54px; }
.sc-bp-cmd-vide { font-size: 0.75rem; line-height: 17px; color: var(--gris2); }
.sc-bp-cmd-ligne {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: #F4F7FF; opacity: 0;
}
.sc-bp-cmd-ligne span { display: flex; flex-direction: column; min-width: 0; }
.sc-bp-cmd-ligne b { font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-bp-cmd-ligne small { font-size: 0.6875rem; line-height: 15px; color: var(--gris); white-space: nowrap; }
.sc-bp-cmd-ligne i { flex: none; font-size: 0.6875rem; font-weight: 700; color: var(--bleu); }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-bp-tel {
  position: absolute; top: 118px; left: 2px; z-index: 2;
  width: 232px; height: 468px; padding: 6px;
  border-radius: 38px; background: #0A0A0A;
  box-shadow: 0 18px 40px rgba(31, 36, 46, .22);
}
.sc-bp-ecran { position: relative; height: 456px; overflow: hidden; border-radius: 32px; background: #FFFFFF; color: var(--encre); }
.sc-bp-ilot { position: absolute; top: 9px; left: 78px; z-index: 20; width: 64px; height: 19px; border-radius: 10px; background: #000000; }
.sc-bp-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 3px 18px 0 28px; background: #FFFFFF; font-size: 0.6875rem;
}
.sc-bp-statut b { font-weight: 700; }
.sc-bp-statut-ico { display: flex; align-items: center; gap: 4px; }
.sc-bp-statut-ico svg { width: 12px; height: 9px; fill: #0A0A0A; }
.sc-bp-pile { display: block; width: 19px; height: 9px; padding: 1px; border: 1px solid rgba(10, 10, 10, .45); border-radius: 3px; }
.sc-bp-pile i { display: block; width: 72%; height: 100%; border-radius: 1px; background: #0A0A0A; }

/* La boutique, entre la barre d'état et Safari : 220 x 364. */
.sc-bp-vue { position: absolute; top: 36px; left: 0; right: 0; z-index: 0; height: 364px; overflow: hidden; background: #FFFFFF; }
.sc-bp-s-tete { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; }
.sc-bp-s-tete > svg { width: 18px; height: 18px; }
.sc-bp-s-marque { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-bp-s-marque i {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 5px; background: var(--encre); color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
}
.sc-bp-s-titre { display: flex; flex-direction: column; padding: 0 14px 8px; }
.sc-bp-s-titre b { font-size: 1rem; font-weight: 800; line-height: 20px; letter-spacing: -.01em; }
.sc-bp-s-titre small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.sc-bp-carte {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 12px 0; padding: 8px; border: 1px solid var(--ligne); border-radius: 12px;
}
.sc-bp-carte img { display: block; flex: none; width: 44px; height: 44px; align-self: flex-start; border-radius: 8px; object-fit: cover; }
.sc-bp-carte-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-bp-carte-txt b { font-size: 0.75rem; font-weight: 700; line-height: 16px; white-space: nowrap; }
.sc-bp-carte-txt small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.sc-bp-carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.sc-bp-prix { position: relative; display: block; width: 58px; height: 18px; font-size: 0.8125rem; font-weight: 800; line-height: 18px; }
.sc-bp-prix-a,
.sc-bp-prix-b { position: absolute; left: 0; top: 0; padding: 0 3px; margin-left: -3px; border-radius: 4px; white-space: nowrap; }
.sc-bp-prix-b { opacity: 0; }
.sc-bp-ajouter { display: grid; place-items: center; flex: none; height: 26px; padding: 0 9px; border: 1px solid #D4D4D4; border-radius: 8px; font-size: 0.75rem; font-weight: 700; }
.sc-bp-pas { position: relative; display: block; flex: none; width: 68px; height: 26px; }
.sc-bp-pas-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.sc-bp-pas-in i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #D4D4D4; border-radius: 7px; }
.sc-bp-pas-in svg { width: 12px; height: 12px; }
.sc-bp-pas-in b { position: relative; width: 16px; height: 17px; font-size: 0.75rem; font-weight: 800; text-align: center; }
.sc-bp-q1,
.sc-bp-q2 { position: absolute; left: 0; right: 0; top: 0; line-height: 17px; }
.sc-bp-q2 { opacity: 0; }
.sc-bp-epuise {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 8px; background: #F0F0EE; color: var(--gris);
  font-size: 0.75rem; font-weight: 700; opacity: 0;
}
.sc-bp-reste { position: relative; height: 17px; margin: 8px 14px 0 !important; font-size: 0.75rem; font-weight: 600; color: #9A4A00; }
.sc-bp-reste span { position: absolute; left: 0; top: 0; line-height: 17px; white-space: nowrap; }
.sc-bp-reste-b,
.sc-bp-reste-c { opacity: 0; }
.sc-bp-reste-c { color: var(--gris); }
.sc-bp-commander {
  position: relative; display: block; height: 42px; margin: 10px 12px 0;
  border-radius: 10px; background: var(--encre); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 700;
}
.sc-bp-commander span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.sc-bp-cmd-2,
.sc-bp-cmd-3 { opacity: 0; }
.sc-bp-cmd-3 svg { width: 15px; height: 15px; stroke-width: 2.2; }
/* ── Safari ───────────────────────────────────────────────────────────── */
.sc-bp-safari {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 56px; padding: 7px 10px 0;
  background: #F7F7F7 linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)) left top / 100% 1px no-repeat;
}
.sc-bp-safari-champ {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 11px; border-radius: 11px; background: #E4E4E9;
  font-size: 0.75rem; color: #0A0A0A;
}
.sc-bp-safari-champ b { font-size: 0.875rem; font-weight: 600; }
.sc-bp-safari-champ small { font-size: 0.6875rem; }
.sc-bp-safari-champ svg { width: 12px; height: 12px; }
.sc-bp-safari-url { display: flex; align-items: center; gap: 4px; }
.sc-bp-safari-url svg { width: 11px; height: 11px; }
.sc-bp-maison { position: absolute; bottom: 6px; left: 68px; z-index: 10; width: 84px; height: 4px; border-radius: 2px; background: #0A0A0A; }

/* ── Le doigt ─────────────────────────────────────────────────────────── */
.sc-bp-doigt {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .26);
  opacity: 0; pointer-events: none;
}

/* ── Les animations ───────────────────────────────────────────────────── */
.sc-bp-champ--prix { animation-name: sc-bp-champ; }
.sc-bp-champ-a { animation-name: sc-bp-champ-a; }
.sc-bp-tape { animation-name: sc-bp-tape; }
.sc-bp-caret { animation-name: sc-bp-caret; }
.sc-bp-enr-a { animation-name: sc-bp-enr-a; }
.sc-bp-enr-b { animation-name: sc-bp-enr-b; }
.sc-bp-prix-a { animation-name: sc-bp-prix-a; }
.sc-bp-prix-b { animation-name: sc-bp-prix-b; }
.sc-bp-q1 { animation-name: sc-bp-q1; }
.sc-bp-q2 { animation-name: sc-bp-q2; }
.sc-bp-reste-a { animation-name: sc-bp-reste-a; }
.sc-bp-cmd-1 { animation-name: sc-bp-cmd-1; }
.sc-bp-reste-b { animation-name: sc-bp-reste-b; }
.sc-bp-cmd-2 { animation-name: sc-bp-cmd-2; }
.sc-bp-reste-c { animation-name: sc-bp-reste-c; }
.sc-bp-cmd-3 { animation-name: sc-bp-cmd-3; }
.sc-bp-pas-in { animation-name: sc-bp-pas-in; }
.sc-bp-epuise { animation-name: sc-bp-epuise; }
.sc-bp-soupe-img { animation-name: sc-bp-soupe-img; }
.sc-bp-stock-a { animation-name: sc-bp-stock-a; }
.sc-bp-stock-b { animation-name: sc-bp-stock-b; }
.sc-bp-cmd-vide { animation-name: sc-bp-cmd-vide; }
.sc-bp-cmd-ligne { animation-name: sc-bp-cmd-ligne; }
.sc-bp-doigt { animation-name: sc-bp-doigt; }
.fn-scene--base-partagee .sc-cur { animation-name: sc-cur-base-partagee; }
.fn-scene--base-partagee .sc-cur-onde { animation-name: sc-bp-onde; }

@keyframes sc-bp-champ {
  0%            { border-color: #D4D4D4; border-width: 1px; padding-left: 9px; animation-timing-function: steps(1, end); }
  8.1%          { border-color: #3F7BFF; border-width: 2px; padding-left: 8px; animation-timing-function: steps(1, end); }
  16.3%, 98.4%  { border-color: #D4D4D4; border-width: 1px; padding-left: 9px; animation-timing-function: steps(1, end); }
  99.9%, 100%   { border-color: #D4D4D4; border-width: 1px; padding-left: 9px; }
}
@keyframes sc-bp-champ-a {
  0%            { opacity: 1; background-color: rgba(63, 123, 255, 0); }
  8.1%          { opacity: 1; background-color: rgba(63, 123, 255, 0); }
  8.3%          { opacity: 1; background-color: rgba(63, 123, 255, .28); }
  8.95%         { opacity: 1; background-color: rgba(63, 123, 255, .28); }
  9%, 98.4%     { opacity: 0; background-color: rgba(63, 123, 255, 0); }
  99.9%, 100%   { opacity: 1; background-color: rgba(63, 123, 255, 0); }
}
@keyframes sc-bp-tape {
  0%            { width: 0; animation-timing-function: steps(1, end); }
  9%            { width: 7.9px; animation-timing-function: steps(1, end); }
  9.5%          { width: 15px; animation-timing-function: steps(1, end); }
  10%           { width: 18.1px; animation-timing-function: steps(1, end); }
  10.5%         { width: 25.7px; animation-timing-function: steps(1, end); }
  11%           { width: 33.3px; animation-timing-function: steps(1, end); }
  11.5%         { width: 36.6px; animation-timing-function: steps(1, end); }
  12%, 98.4%    { width: 44.6px; animation-timing-function: steps(1, end); }
  99.9%, 100%   { width: 0; }
}
@keyframes sc-bp-caret {
  0%            { opacity: 0; }
  8.95%         { opacity: 0; }
  9%            { opacity: 1; }
  16.2%         { opacity: 1; }
  16.3%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-enr-a {
  0%            { opacity: 1; }
  16.3%         { opacity: 1; }
  16.7%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-enr-b {
  0%            { opacity: 0; }
  16.3%         { opacity: 0; }
  16.7%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-prix-a {
  0%            { opacity: 1; }
  18.5%         { opacity: 1; }
  18.8%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-prix-b {
  0%            { opacity: 0; background-color: rgba(63, 123, 255, .2); }
  18.5%         { opacity: 0; background-color: rgba(63, 123, 255, .2); }
  18.8%         { opacity: 1; background-color: rgba(63, 123, 255, .2); }
  21%           { opacity: 1; background-color: rgba(63, 123, 255, .2); }
  23%, 98.4%    { opacity: 1; background-color: rgba(63, 123, 255, 0); }
  99.9%, 100%   { opacity: 0; background-color: rgba(63, 123, 255, .2); }
}
@keyframes sc-bp-q1 {
  0%            { opacity: 1; }
  30.2%         { opacity: 1; }
  30.5%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-q2 {
  0%            { opacity: 0; }
  30.2%         { opacity: 0; }
  30.5%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-reste-a {
  0%            { opacity: 1; }
  30.2%         { opacity: 1; }
  30.5%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-cmd-1 {
  0%            { opacity: 1; }
  30.2%         { opacity: 1; }
  30.5%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-reste-b {
  0%            { opacity: 0; }
  30.2%         { opacity: 0; }
  30.5%         { opacity: 1; }
  35.3%         { opacity: 1; }
  35.6%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-cmd-2 {
  0%            { opacity: 0; }
  30.2%         { opacity: 0; }
  30.5%         { opacity: 1; }
  35.3%         { opacity: 1; }
  35.6%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-reste-c {
  0%            { opacity: 0; }
  35.4%         { opacity: 0; }
  35.7%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-cmd-3 {
  0%            { opacity: 0; }
  35.4%         { opacity: 0; }
  35.7%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-pas-in {
  0%            { opacity: 1; }
  35.6%         { opacity: 1; }
  36%, 98.4%    { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-epuise {
  0%            { opacity: 0; }
  35.6%         { opacity: 0; }
  36%, 98.4%    { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-soupe-img {
  0%            { filter: grayscale(0); opacity: 1; }
  35.6%         { filter: grayscale(0); opacity: 1; }
  36.4%, 98.4%  { filter: grayscale(1); opacity: .55; }
  99.9%, 100%   { filter: grayscale(0); opacity: 1; }
}
@keyframes sc-bp-stock-a {
  0%            { opacity: 1; }
  38%           { opacity: 1; }
  38.3%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-stock-b {
  0%            { opacity: 0; }
  38%           { opacity: 0; }
  38.3%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-bp-cmd-vide {
  0%            { opacity: 1; }
  38%           { opacity: 1; }
  38.3%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-bp-cmd-ligne {
  0%            { opacity: 0; transform: translateY(6px); }
  38.2%         { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  39.4%, 98.4%  { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-bp-doigt {
  0%            { opacity: 0; transform: translate(182px, 386px) scale(1.3); }
  29.65%        { opacity: 0; transform: translate(182px, 386px) scale(1.3); }
  29.9%         { opacity: 1; transform: translate(182px, 386px) scale(1); animation-timing-function: ease-out; }
  30.2%         { opacity: 1; transform: translate(182px, 386px) scale(0.84); }
  30.6%         { opacity: 0; transform: translate(182px, 386px) scale(1); }
  34.65%        { opacity: 0; transform: translate(105px, 464px) scale(1.3); }
  34.9%         { opacity: 1; transform: translate(105px, 464px) scale(1); animation-timing-function: ease-out; }
  35.2%         { opacity: 1; transform: translate(105px, 464px) scale(0.84); }
  35.6%, 98.4%  { opacity: 0; transform: translate(105px, 464px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(182px, 386px) scale(1.3); }
}
@keyframes sc-cur-base-partagee {
  0%            { opacity: 0; transform: translate(465.4px, 537.7px) scale(1); }
  3%            { opacity: 0; transform: translate(465.4px, 537.7px) scale(1); }
  3.8%          { opacity: 1; transform: translate(465.4px, 537.7px) scale(1); }
  4%            { opacity: 1; transform: translate(465.4px, 537.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  7.6%          { opacity: 1; transform: translate(457.4px, 189.7px) scale(1); }
  7.85%         { opacity: 1; transform: translate(457.4px, 189.7px) scale(1); }
  8%            { opacity: 1; transform: translate(457.4px, 189.7px) scale(0.86); }
  8.3%          { opacity: 1; transform: translate(457.4px, 189.7px) scale(1); }
  13%           { opacity: 1; transform: translate(457.4px, 189.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  15.6%         { opacity: 1; transform: translate(453.4px, 322.7px) scale(1); }
  15.85%        { opacity: 1; transform: translate(453.4px, 322.7px) scale(1); }
  16%           { opacity: 1; transform: translate(453.4px, 322.7px) scale(0.86); }
  16.3%         { opacity: 1; transform: translate(453.4px, 322.7px) scale(1); }
  18.5%         { opacity: 1; transform: translate(453.4px, 322.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  21%           { opacity: 1; transform: translate(465.4px, 437.7px) scale(1); }
  21.5%         { opacity: 1; transform: translate(465.4px, 437.7px) scale(1); }
  23%, 98.4%    { opacity: 0; transform: translate(465.4px, 437.7px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(465.4px, 537.7px) scale(1); }
}
@keyframes sc-bp-onde {
  0%            { opacity: 0; transform: scale(.4); }
  7.95%         { opacity: 0; transform: scale(.4); }
  8%            { opacity: .9; transform: scale(.4); animation-timing-function: ease-out; }
  8.8%          { opacity: 0; transform: scale(2.2); }
  15.95%        { opacity: 0; transform: scale(.4); }
  16%           { opacity: .9; transform: scale(.4); animation-timing-function: ease-out; }
  16.8%, 98.4%  { opacity: 0; transform: scale(2.2); }
  99.9%, 100%   { opacity: 0; transform: scale(.4); }
}

/* Moins de mouvement : l'état d'arrivée, immobile. Le prix est à 26 € des
   deux côtés, la soupe est épuisée, la commande est dans l'outil. */
@media (prefers-reduced-motion: reduce) {
  .sc-bp-champ-a, .sc-bp-prix-a, .sc-bp-enr-a, .sc-bp-stock-a, .sc-bp-cmd-vide,
  .sc-bp-pas-in, .sc-bp-reste-a, .sc-bp-cmd-1, .sc-bp-q1 { opacity: 0; }
  .sc-bp-prix-b, .sc-bp-enr-b, .sc-bp-stock-b, .sc-bp-cmd-ligne, .sc-bp-epuise,
  .sc-bp-reste-c, .sc-bp-cmd-3 { opacity: 1; }
  .sc-bp-tape { width: auto; }
}