/* Scène « paiement » : Camille paie ce soir sur son iPhone, et la commande
   arrive chez Lucie déjà payée, avant même le retrait. Deux appareils :
   l'iPhone de Camille (Safari, puis la feuille Apple Pay) devant, à gauche ;
   l'outil de gestion de Lucie (Chrome) derrière, à droite. Ancienne scène
   (panier dans une fenêtre, réglé au curseur) rangée dans
   _avant-refonte-ux/paiement-en-ligne/. Le rideau de fin vient du kit.

   LISIBLE SANS ZOOMER : 12 px pour tout ce qui se lit, 11 px minimum.

   FICHIER ÉCRIT PAR scene-css.py : les @keyframes (doigt, quantités, feuille,
   bouton latéral, Face ID, arrivée de la commande) 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 %  « + » : deux douzaines ; la ligne, le total, le badge suivent
     17 %  « Payer avec Apple Pay » ; la feuille monte (17,8 à 20,4 %)
     29 %  première pression sur le bouton latéral ; 31 % : la seconde
   31,7 %  Face ID ; 36 % : « Terminé »
   39,8 %  la feuille descend sur « C'est payé »
   42,4 %  la commande arrive en tête des retraits de Lucie, le montant
           encaissé passe à 521,00 € ; plus rien ne bouge après 45 %
     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). Le téléphone de (2, 118) à (234, 586), devant la fenêtre,
   écran de 220 x 456 en (8, 124) ; son bouton latéral en (234, 226). Dans
   l'écran : la barre d'état (36), la page (364), la barre de Safari (56). */
.fn-scene--paiement {
  --sc-haut: 592px;
  --encre: #0A0A0A; --gris: #525252; --gris2: #737373; --ligne: #E5E5E5; --bord: #D4D4D4;
  --line-chrome: #E3E6EA; --ios-sep: #E5E5EA; --ios-gris: #6E6E73; --ios-bleu: #007AFF;
  --vert: #1F7A45; --vert-p: #E7F5EC; --bleu-p: #F4F7FF;
  line-height: 1.35;
}
.fn-scene--paiement svg { display: block; }
.fn-scene--paiement p { margin: 0; }
.fn-scene--paiement i { font-style: normal; }

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

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-pay-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-pay-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-pay-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-pay-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-pay-c-favi i {
  display: grid; place-items: center; width: 14px; height: 14px;
  border-radius: 4px; background: var(--encre); color: #FFFFFF;
}
.sc-pay-c-favi svg { width: 10px; height: 10px; stroke-width: 1.8; }
.sc-pay-c-titre { flex: 1; min-width: 0; font-size: 0.6875rem; line-height: 14px; white-space: nowrap; overflow: hidden; }
.sc-pay-c-plus { position: absolute; top: 9px; left: 190px; color: #474747; }
.sc-pay-c-plus svg { width: 12px; height: 12px; }
.sc-pay-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-pay-fen i { display: grid; place-items: center; width: 30px; height: 100%; color: #1F1F1F; }
.sc-pay-fen svg { width: 10px; height: 10px; }
.sc-pay-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-pay-c-outils > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.sc-pay-c-outils > i svg { width: 14px; height: 14px; }
.sc-pay-c-off { color: #C4C7C5; }
.sc-pay-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-pay-c-adresse > svg { width: 13px; height: 13px; flex: none; }

/* ═══ L'OUTIL DE LUCIE ════════════════════════════════════════════════ */
.sc-pay-o { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: var(--encre); }

/* Les modules, à gauche : cachés derrière le téléphone. */
.sc-pay-rail {
  position: absolute; top: 0; left: 0; bottom: 0; width: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 64px; background: #F5F5F3; color: var(--gris);
}
.sc-pay-rail i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.sc-pay-rail svg { width: 16px; height: 16px; }
.sc-pay-rail .sc-pay-rail-actif { background: #E8EEFF; color: #1B4FD1; }

.sc-pay-main { position: absolute; top: 0; left: 44px; right: 0; bottom: 0; padding: 14px 16px 0; }
.sc-pay-tete { display: flex; flex-direction: column; }
.sc-pay-tete b { font-size: 0.9375rem; font-weight: 800; line-height: 20px; letter-spacing: -.01em; white-space: nowrap; }
.sc-pay-tete small { font-size: 0.75rem; line-height: 17px; color: var(--gris2); }

/* Le bilan : déjà encaissé, avant le samedi. */
.sc-pay-bilan {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--ligne); border-radius: 12px;
}
.sc-pay-bilan-g,
.sc-pay-bilan-d { display: flex; flex-direction: column; }
.sc-pay-bilan-d { align-items: flex-end; }
.sc-pay-bilan small { font-size: 0.75rem; line-height: 16px; color: var(--gris2); }
.sc-pay-bilan-d small { color: var(--vert); font-weight: 700; }
.sc-pay-somme { position: relative; display: block; width: 120px; height: 28px; overflow: hidden; }
.sc-pay-somme b { position: absolute; left: 0; top: 0; font-size: 1.375rem; font-weight: 800; line-height: 28px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-pay-somme-b { opacity: 0; transform: translateY(28px); }
.sc-pay-nb { position: relative; display: block; width: 100px; height: 17px; overflow: hidden; }
.sc-pay-nb b { position: absolute; right: 0; top: 0; font-size: 0.75rem; font-weight: 700; line-height: 17px; white-space: nowrap; }
.sc-pay-nb-b { opacity: 0; transform: translateY(17px); }

/* La liste des retraits : la commande de Camille arrive en tête. */
.sc-pay-liste { margin-top: 12px; border-top: 1px dashed var(--ligne); }
.sc-pay-neuve { height: 0; overflow: hidden; margin: 0 -16px; padding: 0 16px; background: var(--bleu-p); }
.sc-pay-ligne { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--ligne); }
.sc-pay-neuve .sc-pay-ligne { border-bottom-color: #DDE5F7; }
.sc-pay-l1,
.sc-pay-l2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-pay-l1 b { font-size: 0.75rem; font-weight: 700; line-height: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-pay-l2 > span { font-size: 0.75rem; line-height: 20px; color: var(--gris2); white-space: nowrap; }
.sc-pay-payee {
  display: grid; place-items: center; height: 20px; padding: 0 7px;
  border-radius: 6px; background: var(--vert-p); color: var(--vert);
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}
.sc-pay-l3 { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; line-height: 17px; color: var(--gris); white-space: nowrap; }
.sc-pay-l3 svg { width: 14px; height: 14px; flex: none; }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-pay-tel {
  position: absolute; top: 118px; left: 2px; z-index: 2;
  width: 232px; height: 468px; padding: 6px;
  border-radius: 38px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .2);
}
/* Le bouton latéral, sur la tranche droite : c'est lui qu'on presse. */
.sc-pay-lateral { position: absolute; top: 108px; right: -3px; width: 4px; height: 46px; border-radius: 0 2px 2px 0; background: #2A2A2A; }
.sc-pay-ecran { position: relative; height: 456px; overflow: hidden; border-radius: 32px; background: #FFFFFF; color: var(--encre); }
.sc-pay-ilot { position: absolute; top: 8px; left: 80px; z-index: 20; width: 60px; height: 18px; border-radius: 9px; background: #000000; }
.sc-pay-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 26px; font-size: 0.6875rem;
}
.sc-pay-statut b { font-weight: 700; }
.sc-pay-statut-ico { display: flex; align-items: center; gap: 4px; }
.sc-pay-statut-ico svg { width: 12px; height: 9px; fill: #0A0A0A; }
.sc-pay-pile { display: block; width: 19px; height: 9px; padding: 1px; border: 1px solid rgba(10, 10, 10, .45); border-radius: 3px; }
.sc-pay-pile i { display: block; width: 64%; height: 100%; border-radius: 1px; background: #0A0A0A; }

/* La page, entre la barre d'état et Safari : 220 x 364. */
.sc-pay-vue { position: absolute; top: 36px; left: 0; right: 0; z-index: 0; height: 364px; overflow: hidden; background: #FFFFFF; }
.sc-pay-page { padding: 0 12px; }
.sc-pay-s-tete { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.sc-pay-marque { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-pay-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-pay-sac { position: relative; display: block; width: 26px; height: 26px; padding: 4px; }
.sc-pay-sac svg { width: 18px; height: 18px; }
.sc-pay-sac i {
  position: absolute; top: 0; right: 0; display: block; width: 15px; height: 15px; overflow: hidden;
  border-radius: 50%; background: var(--encre); color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700; line-height: 15px; text-align: center;
}
.sc-pay-sac i span { position: absolute; left: 0; right: 0; top: 0; }
.sc-pay-sac-3 { opacity: 0; }
.sc-pay-titre { font-size: 1rem; font-weight: 800; line-height: 20px; letter-spacing: -.02em; }

/* Un article : la photo, le nom, le prix unitaire, le compteur, la ligne. */
.sc-pay-art { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--ligne); }
.sc-pay-art img { flex: none; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.sc-pay-art-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-pay-art-l1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sc-pay-art-txt b { font-size: 0.75rem; font-weight: 700; line-height: 16px; white-space: nowrap; }
.sc-pay-art-txt small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); white-space: nowrap; }
.sc-pay-pas { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.sc-pay-pas i { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--bord); border-radius: 8px; background-color: #FFFFFF; }
.sc-pay-pas svg { width: 12px; height: 12px; }
.sc-pay-q { position: relative; display: block; width: 48px; height: 16px; overflow: hidden; }
.sc-pay-q span { position: absolute; left: 0; right: 0; top: 0; font-size: 0.75rem; font-weight: 700; line-height: 16px; text-align: center; white-space: nowrap; }
.sc-pay-q2 { opacity: 0; }
.sc-pay-prix { position: relative; display: block; flex: none; width: 48px; height: 16px; overflow: hidden; }
.sc-pay-prix--fixe { width: auto; font-size: 0.75rem; font-weight: 700; line-height: 16px; white-space: nowrap; }
.sc-pay-prix span { position: absolute; right: 0; top: 0; font-size: 0.75rem; font-weight: 700; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-pay-p2 { opacity: 0; }

.sc-pay-retrait { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0 6px; }
.sc-pay-retrait > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sc-pay-retrait > span { display: flex; flex-direction: column; }
.sc-pay-retrait b { font-size: 0.75rem; font-weight: 700; line-height: 17px; white-space: nowrap; }
.sc-pay-retrait small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.sc-pay-total { display: flex; align-items: center; justify-content: space-between; height: 26px; padding-top: 6px; border-top: 1px dashed var(--ligne); box-sizing: content-box; }
.sc-pay-total > span { font-size: 0.8125rem; font-weight: 700; }
.sc-pay-total > b { position: relative; display: block; width: 80px; height: 22px; overflow: hidden; }
.sc-pay-total > b span { position: absolute; right: 0; top: 0; font-size: 1.0625rem; font-weight: 800; line-height: 22px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-pay-t2 { opacity: 0; }
/* Le bouton Apple Pay : noir, texte blanc, sans logo. */
.sc-pay-bouton {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; margin-top: 7px; border-radius: 10px;
  background: #000000; color: #FFFFFF; font-size: 0.8125rem; white-space: nowrap;
}
.sc-pay-bouton b { font-weight: 700; }
.fn-scene--paiement .sc-pay-ou { padding-top: 5px; font-size: 0.6875rem; line-height: 15px; color: var(--gris); text-align: center; text-decoration: underline; text-underline-offset: 2px; }

/* La confirmation. */
.sc-pay-ok {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px; background: #FFFFFF; text-align: center; opacity: 0;
}
.sc-pay-ok .sc-pay-s-tete { align-self: stretch; }
.sc-pay-ok-coche { display: grid; place-items: center; width: 50px; height: 50px; margin: 40px 0 14px; border-radius: 50%; background: var(--encre); color: #FFFFFF; }
.sc-pay-ok-coche svg { width: 26px; height: 26px; stroke-width: 2.2; }
.sc-pay-ok-titre { font-size: 1.1875rem; font-weight: 800; line-height: 24px; letter-spacing: -.02em; white-space: nowrap; }
.fn-scene--paiement .sc-pay-ok-quand { margin-top: 10px; font-size: 0.8125rem; font-weight: 700; line-height: 18px; }
.sc-pay-ok-ou { font-size: 0.75rem; line-height: 17px; color: var(--gris); }
.fn-scene--paiement .sc-pay-ok-num { margin-top: 10px; font-size: 0.75rem; line-height: 17px; color: var(--gris); }
.fn-scene--paiement .sc-pay-ok-mail {
  display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--ligne); font-size: 0.75rem; line-height: 17px; color: var(--gris);
}
.sc-pay-ok-mail svg { width: 15px; height: 15px; flex: none; }

/* ── Safari ───────────────────────────────────────────────────────────── */
.sc-pay-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-pay-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-pay-safari-champ b { font-size: 0.875rem; font-weight: 600; }
.sc-pay-safari-champ small { font-size: 0.6875rem; }
.sc-pay-safari-champ svg { width: 12px; height: 12px; }
.sc-pay-safari-url { display: flex; align-items: center; gap: 4px; }
.sc-pay-safari-url svg { width: 11px; height: 11px; }
.sc-pay-maison { position: absolute; bottom: 6px; left: 70px; z-index: 10; width: 80px; height: 4px; border-radius: 2px; background: #0A0A0A; }

/* ── La feuille Apple Pay ─────────────────────────────────────────────── */
/* Le fond s'assombrit et se brouille, comme sous une feuille d'iOS : l'invitation
   se lit sans que le panier, derrière, la brouille. */
.sc-pay-voile { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); opacity: 0; }
/* L'invitation, à côté du bouton latéral, comme sur un vrai iPhone. */
.sc-pay-indice {
  position: absolute; top: 102px; right: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px; height: 46px;
  color: #FFFFFF; opacity: 0;
}
.sc-pay-indice span { font-size: 0.75rem; font-weight: 700; line-height: 16px; text-align: right; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.sc-pay-indice i { display: block; width: 4px; height: 46px; border-radius: 2px 0 0 2px; background: #FFFFFF; }
/* Les filets de la feuille sont peints en fond, d'un pixel, gris neutre. */
.sc-pay-feuille {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 9;
  padding: 12px 14px 14px; border-radius: 26px; background: #FFFFFF;
  transform: translateY(260px);
}
.sc-pay-f-tete { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.sc-pay-f-tete b { font-size: 0.9375rem; font-weight: 700; letter-spacing: -.01em; }
.sc-pay-f-tete i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #EEEEF0; color: var(--ios-gris); }
.sc-pay-f-tete svg { width: 11px; height: 11px; stroke-width: 2; }
.fn-scene--paiement .sc-pay-f-carte { display: flex; align-items: center; gap: 10px; height: 50px; margin-top: 8px; background: linear-gradient(var(--ios-sep), var(--ios-sep)) left top / 100% 1px no-repeat; }
.sc-pay-f-carte > svg { width: 13px; height: 13px; color: #C4C4C7; }
/* La carte : un dessin, une puce sur un rectangle d'encre, pas un chiffre. */
.sc-pay-carte { position: relative; display: block; flex: none; width: 42px; height: 28px; border-radius: 4px; background: #1D2A3C; }
.sc-pay-carte i { position: absolute; top: 9px; left: 6px; width: 8px; height: 6px; border-radius: 1.5px; background: #CDB57E; }
.sc-pay-f-carte-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-pay-f-carte-txt b { font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-pay-f-carte-txt small { font-size: 0.6875rem; line-height: 15px; color: var(--ios-gris); }
.sc-pay-f-total { display: flex; flex-direction: column; padding: 10px 0 10px; background: linear-gradient(var(--ios-sep), var(--ios-sep)) left top / 100% 1px no-repeat; }
.sc-pay-f-total small { font-size: 0.6875rem; line-height: 15px; color: var(--ios-gris); }
.sc-pay-f-total b { font-size: 1.375rem; font-weight: 800; line-height: 28px; letter-spacing: -.02em; }
.sc-pay-f-conf { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 13px; background: linear-gradient(var(--ios-sep), var(--ios-sep)) left top / 100% 1px no-repeat; }
.sc-pay-f-ico { position: relative; display: block; width: 32px; height: 32px; }
.sc-pay-f-ico > span { position: absolute; inset: 0; color: var(--ios-bleu); }
.sc-pay-f-ico svg { width: 32px; height: 32px; stroke-width: 1.2; }
.sc-pay-f-ico1 { color: var(--encre) !important; }
.sc-pay-f-ico2,
.sc-pay-f-ico3 { opacity: 0; }
.sc-pay-f-txt { position: relative; display: block; align-self: stretch; height: 16px; }
.sc-pay-f-txt span { position: absolute; left: 0; right: 0; top: 0; font-size: 0.75rem; line-height: 16px; text-align: center; white-space: nowrap; }
.sc-pay-f-t2,
.sc-pay-f-t3 { opacity: 0; }

/* ── Le doigt ─────────────────────────────────────────────────────────── */
.sc-pay-doigt {
  position: absolute; top: 0; left: 0; z-index: 12;
  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-pay-q1 { animation-name: sc-pay-q-a; }
.sc-pay-q2 { animation-name: sc-pay-q-b; }
.sc-pay-p1 { animation-name: sc-pay-p-a; }
.sc-pay-p2 { animation-name: sc-pay-p-b; }
.sc-pay-t1 { animation-name: sc-pay-t-a; }
.sc-pay-t2 { animation-name: sc-pay-t-b; }
.sc-pay-sac-2 { animation-name: sc-pay-sac-a; }
.sc-pay-sac-3 { animation-name: sc-pay-sac-b; }
.sc-pay-plus { animation-name: sc-pay-plus; }
.sc-pay-bouton { animation-name: sc-pay-bouton; }
.sc-pay-voile { animation-name: sc-pay-voile; }
.sc-pay-feuille { animation-name: sc-pay-feuille; }
.sc-pay-indice { animation-name: sc-pay-indice; }
.sc-pay-barre { animation-name: sc-pay-barre; }
.sc-pay-lateral { animation-name: sc-pay-lateral; }
.sc-pay-f-ico1 { animation-name: sc-pay-ico1; }
.sc-pay-f-t1 { animation-name: sc-pay-t1f; }
.sc-pay-f-ico2 { animation-name: sc-pay-ico2; }
.sc-pay-f-t2 { animation-name: sc-pay-t2f; }
.sc-pay-f-ico3 { animation-name: sc-pay-ico3; }
.sc-pay-f-t3 { animation-name: sc-pay-t3f; }
.sc-pay-ok { animation-name: sc-pay-ok; }
.sc-pay-neuve { animation-name: sc-pay-neuve; }
.sc-pay-ligne--camille { animation-name: sc-pay-camille; }
.sc-pay-somme-a { animation-name: sc-pay-somme-a; }
.sc-pay-somme-b { animation-name: sc-pay-somme-b; }
.sc-pay-nb-a { animation-name: sc-pay-nb-a; }
.sc-pay-nb-b { animation-name: sc-pay-nb-b; }
.sc-pay-doigt { animation-name: sc-pay-doigt; }

@keyframes sc-pay-q-a {
  0%            { opacity: 1; transform: translateY(0); }
  8.1%          { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.5%, 98.4%   { opacity: 0; transform: translateY(-8px); }
  99.9%, 100%   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-pay-q-b {
  0%            { opacity: 0; transform: translateY(8px); }
  8.1%          { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.5%, 98.4%   { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(8px); }
}
@keyframes sc-pay-p-a {
  0%            { opacity: 1; transform: translateY(0); }
  8.2%          { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.6%, 98.4%   { opacity: 0; transform: translateY(-8px); }
  99.9%, 100%   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-pay-p-b {
  0%            { opacity: 0; transform: translateY(8px); }
  8.2%          { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.6%, 98.4%   { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(8px); }
}
@keyframes sc-pay-t-a {
  0%            { opacity: 1; transform: translateY(0); }
  8.4%          { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.8%, 98.4%   { opacity: 0; transform: translateY(-10px); }
  99.9%, 100%   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-pay-t-b {
  0%            { opacity: 0; transform: translateY(10px); }
  8.4%          { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.8%, 98.4%   { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(10px); }
}
@keyframes sc-pay-sac-a {
  0%            { opacity: 1; transform: translateY(0); }
  8.4%          { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.8%, 98.4%   { opacity: 0; transform: translateY(-7px); }
  99.9%, 100%   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-pay-sac-b {
  0%            { opacity: 0; transform: translateY(7px); }
  8.4%          { opacity: 0; transform: translateY(7px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.8%, 98.4%   { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(7px); }
}
@keyframes sc-pay-plus {
  0%            { background-color: #FFFFFF; }
  7.9%          { background-color: #FFFFFF; }
  8.1%          { background-color: #E5E5E5; }
  8.7%, 98.4%   { background-color: #FFFFFF; }
  99.9%, 100%   { background-color: #FFFFFF; }
}
@keyframes sc-pay-bouton {
  0%            { transform: scale(1); }
  16.9%         { transform: scale(1); }
  17.15%        { transform: scale(.97); }
  17.5%, 98.4%  { transform: scale(1); }
  99.9%, 100%   { transform: scale(1); }
}
@keyframes sc-pay-voile {
  0%            { opacity: 0; }
  17.8%         { opacity: 0; }
  19%           { opacity: 1; }
  39.8%         { opacity: 1; }
  42.2%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-pay-feuille {
  0%            { transform: translateY(260px); }
  17.8%         { transform: translateY(260px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  20.4%         { transform: translateY(0); }
  39.8%         { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  42.2%, 98.4%  { transform: translateY(260px); }
  99.9%, 100%   { transform: translateY(260px); }
}
@keyframes sc-pay-indice {
  0%            { opacity: 0; }
  20%           { opacity: 0; }
  20.8%         { opacity: 1; }
  31.5%         { opacity: 1; }
  32.1%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-pay-barre {
  0%            { transform: translateX(0); }
  22%           { transform: translateX(0); }
  22.6%         { transform: translateX(-4px); }
  23.4%         { transform: translateX(0); }
  24.6%         { transform: translateX(0); }
  25.2%         { transform: translateX(-4px); }
  26%, 98.4%    { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(0); }
}
@keyframes sc-pay-lateral {
  0%            { transform: translateX(0); }
  28.8%         { transform: translateX(0); }
  29%           { transform: translateX(-2px); }
  29.5%         { transform: translateX(0); }
  30.8%         { transform: translateX(0); }
  31%           { transform: translateX(-2px); }
  31.5%, 98.4%  { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(0); }
}
@keyframes sc-pay-ico1 {
  0%            { opacity: 1; }
  31.7%         { opacity: 1; }
  32%, 98.4%    { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-pay-t1f {
  0%            { opacity: 1; }
  31.7%         { opacity: 1; }
  32%, 98.4%    { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-pay-ico2 {
  0%            { opacity: 0; transform: scale(1); }
  31.7%         { opacity: 0; transform: scale(1); }
  32%           { opacity: 1; transform: scale(1); }
  33.2%         { opacity: 1; transform: scale(1.1); }
  34.5%         { opacity: 1; transform: scale(1); }
  36%           { opacity: 1; transform: scale(1); }
  36.3%, 98.4%  { opacity: 0; transform: scale(1); }
  99.9%, 100%   { opacity: 0; transform: scale(1); }
}
@keyframes sc-pay-t2f {
  0%            { opacity: 0; }
  31.7%         { opacity: 0; }
  32%           { opacity: 1; }
  36%           { opacity: 1; }
  36.3%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-pay-ico3 {
  0%            { opacity: 0; transform: scale(.6); }
  36%           { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  36.4%, 98.4%  { opacity: 1; transform: scale(1); }
  99.9%, 100%   { opacity: 0; transform: scale(.6); }
}
@keyframes sc-pay-t3f {
  0%            { opacity: 0; }
  36%           { opacity: 0; }
  36.3%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-pay-ok {
  0%            { opacity: 0; }
  39.4%         { opacity: 0; }
  40%, 98.4%    { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-pay-neuve {
  0%            { height: 0; }
  42.4%         { height: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44.8%, 98.4%  { height: 77px; }
  99.9%, 100%   { height: 0; }
}
@keyframes sc-pay-camille {
  0%            { opacity: 0; }
  42.9%         { opacity: 0; }
  43.9%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-pay-somme-a {
  0%            { opacity: 1; transform: translateY(0); }
  43%           { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44%, 98.4%    { opacity: 0; transform: translateY(-28px); }
  99.9%, 100%   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-pay-somme-b {
  0%            { opacity: 0; transform: translateY(28px); }
  43%           { opacity: 0; transform: translateY(28px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44%, 98.4%    { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(28px); }
}
@keyframes sc-pay-nb-a {
  0%            { opacity: 1; transform: translateY(0); }
  43%           { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44%, 98.4%    { opacity: 0; transform: translateY(-17px); }
  99.9%, 100%   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-pay-nb-b {
  0%            { opacity: 0; transform: translateY(17px); }
  43%           { opacity: 0; transform: translateY(17px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44%, 98.4%    { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(17px); }
}
@keyframes sc-pay-doigt {
  0%            { opacity: 0; transform: translate(154px, 262px) scale(1.3); }
  7.65%         { opacity: 0; transform: translate(154px, 262px) scale(1.3); }
  7.9%          { opacity: 1; transform: translate(154px, 262px) scale(1); animation-timing-function: ease-out; }
  8.2%          { opacity: 1; transform: translate(154px, 262px) scale(0.84); }
  8.6%          { opacity: 0; transform: translate(154px, 262px) scale(1); }
  16.65%        { opacity: 0; transform: translate(105px, 469px) scale(1.3); }
  16.9%         { opacity: 1; transform: translate(105px, 469px) scale(1); animation-timing-function: ease-out; }
  17.2%         { opacity: 1; transform: translate(105px, 469px) scale(0.84); }
  17.6%         { opacity: 0; transform: translate(105px, 469px) scale(1); }
  28.1%         { opacity: 0; transform: translate(222px, 236px) scale(1.3); }
  28.6%         { opacity: 1; transform: translate(222px, 236px) scale(1); animation-timing-function: ease-out; }
  29%           { opacity: 1; transform: translate(222px, 236px) scale(0.84); }
  29.8%         { opacity: 1; transform: translate(222px, 236px) scale(1); }
  31%           { opacity: 1; transform: translate(222px, 236px) scale(0.84); }
  31.7%         { opacity: 1; transform: translate(222px, 236px) scale(1); }
  32.3%, 98.4%  { opacity: 0; transform: translate(222px, 236px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(154px, 262px) scale(1.3); }
}

/* Moins de mouvement : l'état d'arrivée, immobile. C'est payé chez Camille,
   et la commande est en tête des retraits de Lucie. */
@media (prefers-reduced-motion: reduce) {
  .sc-pay-ok { opacity: 1; }
  .sc-pay-neuve { height: 77px; }
  .sc-pay-somme-a,
  .sc-pay-nb-a { opacity: 0; }
  .sc-pay-somme-b,
  .sc-pay-nb-b { opacity: 1; transform: none; }
}