/* Scène « devis et factures », refaite le 24 septembre au format validé par
   Théo : le back-office de Lucie compose et envoie le devis, glissement vers
   l'iPhone d'Hélène qui l'accepte dans Mail, retour chez Lucie où le devis
   accepté devient la facture 118 sans qu'une ligne bouge. Textes lisibles
   une fois la scène réduite (10 px minimum sur la toile), gestes à la
   courbe d'iOS, aucun changement en coupure. Le rideau de fin et le curseur
   viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
    5,9 %  Lucie clique « Location de la salle » dans son catalogue
    6,6 %  la ligne arrive (jusqu'à 8 %), les totaux descendent
    9,2 %  la TVA à 20 % s'ajoute ; le total TTC passe à 801,20 €
   14,5 %  elle clique « Envoyer le devis » ; le devis passe « Envoyé »
     20 %  glissement vers l'iPhone d'Hélène (jusqu'à 25,5 %)
   36,4 %  Hélène touche « Accepter le devis » ; le bouton passe au vert
     44 %  glissement retour vers Chrome (jusqu'à 49,5 %)
     50 %  le devis passe « Accepté »
     54 %  « Transformer en facture » : le titre, l'adresse, l'onglet, l'état
           et le menu passent à la facture ; le catalogue laisse place au
           verrou ; les lignes restent, éclairées en jaune pâle
   62,6 %  plus rien ne bouge ; fondu au blanc à 95 %, retour au début sous
           le blanc, entre 98,4 et 99,9 %

   LA TOILE : 520 x 612, ROGNÉE à ses bords. Chrome : 520 x 570, sa vue
   commence en (1, 65). L'iPhone : 232 x 484 posé en (123, 6) à l'échelle
   1,18 ; un point (x, y) de son écran tombe en (123 + (6 + x) x 1,18,
   6 + (6 + y) x 1,18). Légende de 584 à 610.

   LES CIBLES, CALCULÉES :
     curseur de Lucie (pointe, moins (4, 2)) :
       « Location de la salle »  vue (319, 132) → toile (320, 197) → (316, 195)
       le bouton principal       vue (238, 434) → toile (239, 499) → (235, 497)
     doigt d'Hélène (centre, moins 11) :
       « Accepter le devis »     écran (110, 307) → toile (260, 375) → (249, 364) */
.fn-scene--factures {
  overflow: hidden;
  --sc-haut: 612px;
  --line: #E5E5E5; --line-ios: #D1D1D6; --line-chrome: #E3E6EA; --line-b: #EDEDED;
  line-height: 1.35;
}
.fn-scene--factures svg { display: block; }
.fn-scene--factures i { font-style: normal; }

/* ═══ 1. CHROME : LE BACK-OFFICE DE LUCIE ═════════════════════════════ */
.sc-factures-chrome {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 520px; height: 570px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px;
  background: #FFFFFF; color: #0A0A0A;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-factures-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-factures-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-factures-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-factures-c-logo { display: grid; place-items: center; flex: none; width: 12px; height: 12px; border-radius: 3px; background: #0A0A0A; color: #FFFFFF; font-size: 8px; font-weight: 800; line-height: 1; }
.sc-factures-c-titres { display: grid; flex: 1; min-width: 0; }
.sc-factures-c-titre { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; font-size: 0.59375rem; }
.sc-factures-c-plus { position: absolute; top: 9px; left: 196px; color: #474747; }
.sc-factures-c-plus svg { width: 12px; height: 12px; }
.sc-factures-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-factures-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-factures-fen svg { width: 10px; height: 10px; }
.sc-factures-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-factures-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-factures-c-outils > i svg { width: 14px; height: 14px; }
.sc-factures-c-off { color: #C4C7C5; }
.sc-factures-c-outils > .sc-factures-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-factures-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  height: 26px; margin: 0 6px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.65625rem; color: #1F1F1F; white-space: nowrap;
}
.sc-factures-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-factures-c-url { display: grid; min-width: 0; }
.sc-factures-c-u { grid-area: 1 / 1; }
.sc-factures-c-chemin { color: #5F6368; }
.sc-factures-c-etoile { margin-left: auto; }
.sc-factures-c-etoile svg { width: 13px; height: 13px; }
.sc-factures-vue { position: relative; flex: 1; overflow: hidden; }
.sc-factures-vue > * { position: absolute; }

.sc-factures-b-barre { top: 0; left: 0; right: 0; height: 40px; border-bottom: 1px solid var(--line-b); }
.sc-factures-b-barre > * { position: absolute; }
.sc-factures-b-site { top: 0; left: 16px; display: flex; align-items: center; gap: 8px; height: 40px; font-size: 0.6875rem; font-weight: 800; }
.sc-factures-b-site i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font-size: 0.6875rem; font-weight: 800; line-height: 1; }
.sc-factures-b-voir { top: 8px; left: 386px; display: flex; align-items: center; justify-content: center; gap: 4px; width: 84px; height: 24px; border: 1px solid #0A0A0A; border-radius: 7px; font-size: 0.5625rem; font-weight: 600; }
.sc-factures-b-voir svg { width: 9px; height: 9px; }
.sc-factures-b-avatar { top: 9px; left: 482px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #3F7BFF, #5BC4E8); color: #FFFFFF; font-size: 0.625rem; font-weight: 700; line-height: 1; }
.sc-factures-b-menu {
  top: 40px; left: 0; bottom: 0; width: 124px; padding: 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(#EDEDED, #EDEDED) right top / 1px 100% no-repeat, #FAFAFA;
}
.sc-factures-b-m { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 0.625rem; font-weight: 500; color: #404040; white-space: nowrap; }
.sc-factures-b-m svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.sc-factures-b-m--devis { background: #0A0A0A; color: #FFFFFF; }

/* Le titre, l'état et le client. Les textes qui se relaient sont posés
   dans la même case de grille : rien ne se décale quand ils changent. */
.sc-factures-titre { top: 52px; left: 140px; display: grid; }
.sc-factures-t { grid-area: 1 / 1; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 20px; white-space: nowrap; }
.sc-factures-etat { top: 51px; right: 10px; display: grid; justify-items: end; }
.sc-factures-e {
  grid-area: 1 / 1;
  display: flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: 8px;
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
  transform-origin: 100% 50%;
}
.sc-factures-e svg { width: 11px; height: 11px; stroke-width: 1.8; }
.sc-factures-e--1 { background: #F5F5F3; color: #525252; }
.sc-factures-e--2 { background: #EAF1FF; color: #2B5DD9; }
.sc-factures-e--3 { background: #E8F6EE; color: #15803D; }
.sc-factures-e--4 { background: #0A0A0A; color: #FFFFFF; }
.sc-factures-sous { top: 76px; left: 140px; font-size: 0.625rem; line-height: 13px; color: #737373; white-space: nowrap; }

/* Le catalogue de Lucie, puis le verrou de la facture émise. */
.sc-factures-cat-dit { top: 100px; left: 140px; font-size: 0.625rem; font-weight: 600; line-height: 13px; color: #737373; }
.sc-factures-p {
  top: 118px; height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF;
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
}
.sc-factures-p svg { width: 10px; height: 10px; flex: none; stroke-width: 1.6; color: #525252; }
.sc-factures-p--1 { left: 140px; width: 100px; }
.sc-factures-p--2 { left: 246px; width: 146px; }
.sc-factures-p--3 { left: 398px; width: 110px; }
.sc-factures-verrou {
  top: 100px; left: 140px; width: 368px; height: 46px;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #FAFAFA;
  font-size: 0.625rem; line-height: 15px; color: #404040;
}
.sc-factures-verrou svg { width: 16px; height: 16px; flex: none; color: #0A0A0A; }

/* Le document : les mêmes lignes, du devis à la facture. */
.sc-factures-doc {
  top: 158px; left: 140px; width: 368px; height: 244px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background-color: #FFFFFF;
}
.sc-factures-doc > span { position: absolute; left: 0; right: 0; }
.sc-factures-th,
.sc-factures-l { white-space: nowrap; }
.sc-factures-th > *,
.sc-factures-l > * { position: absolute; }
.sc-factures-th { top: 0; height: 28px; background: rgba(10, 10, 10, .025); font-size: 0.59375rem; font-weight: 600; line-height: 28px; color: #737373; }
.sc-factures-l { height: 32px; border-top: 1px dashed var(--line); font-size: 0.625rem; line-height: 31px; }
.sc-factures-l--1 { top: 28px; }
.sc-factures-l--2 { top: 60px; }
.sc-factures-l--3 { top: 92px; }
.sc-factures-th > :nth-child(1),
.sc-factures-l b { left: 12px; }
.sc-factures-l b { font-size: 0.65625rem; font-weight: 600; }
.sc-factures-th > :nth-child(2),
.sc-factures-q { left: 150px; }
.sc-factures-th > :nth-child(3),
.sc-factures-tx { left: 240px; }
.sc-factures-th > :nth-child(4),
.sc-factures-m { right: 12px; }
.sc-factures-q,
.sc-factures-tx { color: #525252; }
.sc-factures-m { font-weight: 600; font-variant-numeric: tabular-nums; }

.sc-factures-doc > .sc-factures-totaux { top: 100px; height: 110px; border-top: 1px dashed var(--line); }
.sc-factures-tot {
  position: absolute; left: 164px; right: 4px; height: 22px; padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 6px;
  font-size: 0.625rem; color: #525252; white-space: nowrap;
}
.sc-factures-tot b { font-weight: 600; color: #0A0A0A; font-variant-numeric: tabular-nums; }
.sc-factures-tot--ht  { top: 8px; }
.sc-factures-tot--10  { top: 30px; }
.sc-factures-tot--20  { top: 52px; }
.sc-factures-tot--ttc { top: 52px; height: 28px; color: #0A0A0A; font-size: 0.75rem; font-weight: 800; }
.sc-factures-tot--ttc b { font-weight: 800; }
.sc-factures-valeurs { display: grid; justify-items: end; }
.sc-factures-v { grid-area: 1 / 1; }

/* Le bouton principal, l'aperçu et la confirmation. */
.sc-factures-bouton {
  top: 416px; left: 140px; width: 196px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700;
}
.sc-factures-bt { grid-area: 1 / 1; white-space: nowrap; }
.sc-factures-pdf {
  top: 416px; left: 346px; width: 118px; height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF;
  font-size: 0.625rem; font-weight: 600;
}
.sc-factures-pdf svg { width: 13px; height: 13px; color: #525252; }
.sc-factures-toast {
  top: 464px; left: 140px; height: 30px; padding: 0 12px;
  display: flex; align-items: center; gap: 7px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(31, 36, 46, .16);
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
}
.sc-factures-toast svg { width: 12px; height: 12px; color: #86EFAC; stroke-width: 1.8; }

/* ═══ 2. L'IPHONE D'HÉLÈNE, DANS MAIL ═════════════════════════════════ */
.sc-factures-tel {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 232px; height: 484px; padding: 6px;
  border-radius: 36px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
  transform-origin: 0 0;
  transform: translate(686px, 6px) scale(1.18);
}
.sc-factures-ecran { position: relative; height: 472px; overflow: hidden; border-radius: 30px; background: #FFFFFF; color: #000000; }
.sc-factures-ilot { position: absolute; top: 7px; left: 77px; z-index: 9; width: 66px; height: 19px; border-radius: 10px; background: #0A0A0A; }
.sc-factures-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; margin: 0; padding: 2px 16px 0 26px;
  font-size: 0.625rem; line-height: 1; color: #000000;
}
.sc-factures-statut b { font-weight: 600; }
.sc-factures-statut-d { display: flex; align-items: center; gap: 4px; }
.sc-factures-reseau { display: flex; align-items: flex-end; gap: 1px; height: 8px; }
.sc-factures-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-factures-reseau i:nth-child(1) { height: 3px; }
.sc-factures-reseau i:nth-child(2) { height: 4.5px; }
.sc-factures-reseau i:nth-child(3) { height: 6px; }
.sc-factures-reseau i:nth-child(4) { height: 8px; }
.sc-factures-wifi { width: 11px; height: 8px; }
.sc-factures-pile { display: block; width: 18px; height: 9px; padding: 1px; border: 1px solid rgba(31, 31, 31, .4); border-radius: 3px; }
.sc-factures-pile i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: currentColor; }
.sc-factures-maison { position: absolute; bottom: 6px; left: 70px; z-index: 9; width: 80px; height: 3.5px; border-radius: 2px; background: #0A0A0A; }

/* Le mail de Chez Lucie, ouvert. */
.sc-factures-mail {
  position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: hidden;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(var(--line-ios), var(--line-ios)) 14px 84px / calc(100% - 28px) 1px no-repeat, #FFFFFF;
}
.sc-factures-mail > * { position: absolute; }
.sc-factures-ml-nav { top: 6px; left: 6px; display: flex; align-items: center; gap: 1px; height: 22px; font-size: 0.6875rem; color: #007AFF; }
.sc-factures-ml-nav svg { width: 14px; height: 14px; stroke-width: 1.8; }
.sc-factures-ml-ava { top: 38px; left: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0A0A0A; color: #FFFFFF; font-size: 0.8125rem; font-weight: 800; }
.sc-factures-ml-de { top: 39px; left: 56px; font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-factures-ml-a { top: 57px; left: 56px; font-size: 0.5625rem; line-height: 12px; color: #8E8E93; }
.sc-factures-ml-h { top: 41px; right: 14px; font-size: 0.5625rem; line-height: 12px; color: #8E8E93; }
.sc-factures-ml-objet { top: 94px; left: 14px; right: 14px; font-size: 0.8125rem; font-weight: 800; line-height: 17px; letter-spacing: -.01em; }
.sc-factures-ml-texte { top: 138px; left: 14px; right: 14px; font-size: 0.625rem; line-height: 14px; color: #3A3A3C; }
.sc-factures-ml-pj { top: 192px; left: 14px; right: 14px; height: 50px; border-radius: 12px; background: #F2F2F7; }
.sc-factures-ml-pj > * { position: absolute; white-space: nowrap; }
.sc-factures-ml-pdf { top: 8px; left: 10px; display: grid; place-items: end center; width: 26px; height: 34px; padding-bottom: 5px; border-radius: 5px; background: #D93A3A; color: #FFFFFF; font-size: 0.53125rem; font-weight: 800; line-height: 1; }
.sc-factures-ml-pj b { top: 9px; left: 46px; font-size: 0.625rem; font-weight: 700; line-height: 14px; }
.sc-factures-ml-pj span { top: 26px; left: 46px; font-size: 0.5625rem; line-height: 13px; color: #6E6E73; }
.sc-factures-ml-bouton {
  top: 256px; left: 14px; right: 14px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.75rem; font-weight: 700;
}
.sc-factures-mb { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-factures-mb svg { width: 14px; height: 14px; stroke-width: 2; }
.sc-factures-ml-note { top: 308px; left: 14px; right: 14px; font-size: 0.5625rem; line-height: 13px; color: #6E6E73; text-align: center; }
.sc-factures-ml-outils { top: 400px; left: 22px; right: 22px; display: flex; justify-content: space-between; color: #007AFF; }
.sc-factures-ml-outils svg { width: 17px; height: 17px; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-factures-legende { position: absolute; top: 584px; left: 14px; right: 14px; z-index: 2; display: grid; height: 26px; margin: 0; }
.sc-factures-leg {
  grid-area: 1 / 1;
  display: flex; align-items: center; gap: 9px;
  font-size: 0.625rem; font-weight: 700; line-height: 1; color: #0A0A0A; white-space: nowrap;
  opacity: 0;
}
.sc-factures-leg--a { opacity: 1; }
.sc-factures-leg i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; color: #525252; }
.sc-factures-leg i svg { width: 13px; height: 13px; }
.sc-factures-leg img { flex: none; width: 22px; height: 22px; margin: 0 2px; border-radius: 50%; }

/* Le doigt : le rond gris des captures d'écran d'iPhone. */
.sc-factures-doigt {
  position: absolute; top: 0; left: 0; z-index: 4;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .24);
  opacity: 0; pointer-events: none;
}

/* Ce qui n'est pas là au début de la boucle. */
.sc-factures-c-titre--f,
.sc-factures-c-u--f,
.sc-factures-t--f,
.sc-factures-e--2,
.sc-factures-e--3,
.sc-factures-e--4,
.sc-factures-verrou,
.sc-factures-l--3,
.sc-factures-tot--20,
.sc-factures-v--ap,
.sc-factures-bt--2,
.sc-factures-bt--3,
.sc-factures-toast,
.sc-factures-mb--b,
.sc-factures-ml-note { opacity: 0; }

/* Ce qui bouge en grand passe sur son propre calque. */
.sc-factures-tel,
.sc-factures-chrome { will-change: transform, opacity; }

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-cur      { animation-name: sc-cur-factures; }
.sc-cur-onde { animation-name: sc-factures-onde; }
.sc-fin      { animation-name: sc-conclure; }

.sc-factures-chrome     { animation-name: sc-factures-chrome; }
.sc-factures-tel        { animation-name: sc-factures-tel; }
.sc-factures-doigt      { animation-name: sc-factures-doigt; }

.sc-factures-c-titre--d,
.sc-factures-c-u--d,
.sc-factures-t--d       { animation-name: sc-factures-sort; }
.sc-factures-c-titre--f,
.sc-factures-c-u--f,
.sc-factures-t--f       { animation-name: sc-factures-entre; }
.sc-factures-b-m--devis { animation-name: sc-factures-m-devis; }
.sc-factures-b-m--fact  { animation-name: sc-factures-m-fact; }
.sc-factures-e--1       { animation-name: sc-factures-e1; }
.sc-factures-e--2       { animation-name: sc-factures-e2; }
.sc-factures-e--3       { animation-name: sc-factures-e3; }
.sc-factures-e--4       { animation-name: sc-factures-e4; }
.sc-factures-cat-dit,
.sc-factures-p--1,
.sc-factures-p--3       { animation-name: sc-factures-cat; }
.sc-factures-p--2       { animation-name: sc-factures-p2; }
.sc-factures-verrou     { animation-name: sc-factures-verrou; }
.sc-factures-doc        { animation-name: sc-factures-doc; }
.sc-factures-l--3       { animation-name: sc-factures-l3; }
.sc-factures-doc > .sc-factures-totaux { animation-name: sc-factures-totaux; }
.sc-factures-tot--20    { animation-name: sc-factures-t20; }
.sc-factures-tot--ttc   { animation-name: sc-factures-tttc; }
.sc-factures-tot--ht .sc-factures-v--av  { animation-name: sc-factures-ht-av; }
.sc-factures-tot--ht .sc-factures-v--ap  { animation-name: sc-factures-ht-ap; }
.sc-factures-tot--ttc .sc-factures-v--av { animation-name: sc-factures-ttc-av; }
.sc-factures-tot--ttc .sc-factures-v--ap { animation-name: sc-factures-ttc-ap; }
.sc-factures-bouton     { animation-name: sc-factures-bouton; }
.sc-factures-bt--1      { animation-name: sc-factures-bt1; }
.sc-factures-bt--2      { animation-name: sc-factures-bt2; }
.sc-factures-bt--3      { animation-name: sc-factures-entre; }
.sc-factures-toast      { animation-name: sc-factures-toast; }

.sc-factures-ml-bouton  { animation-name: sc-factures-ml-bouton; }
.sc-factures-mb--a      { animation-name: sc-factures-mb-a; }
.sc-factures-mb--b      { animation-name: sc-factures-mb-b; }
.sc-factures-ml-note    { animation-name: sc-factures-ml-note; }

.sc-factures-leg--a     { animation-name: sc-factures-leg-a; }
.sc-factures-leg--b     { animation-name: sc-factures-leg-b; }
.sc-factures-leg--c     { animation-name: sc-factures-leg-c; }
.sc-factures-leg--d     { animation-name: sc-factures-leg-d; }

/* ═══ LES MOUVEMENTS ══════════════════════════════════════════════════ */

/* LES GLISSEMENTS : Chrome et le téléphone sont deux écrans côte à côte.
   Aller vers le téléphone à 20 %, retour vers Chrome à 44 %, en 660 ms. */
@keyframes sc-factures-chrome {
  0%, 20%      { transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  25.5%, 44%   { transform: translateX(-560px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  49.5%, 100%  { transform: none; }
}
@keyframes sc-factures-tel {
  0%, 20%      { transform: translate(686px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  25.5%, 44%   { transform: translate(123px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  49.5%, 100%  { transform: translate(686px, 6px) scale(1.18); }
}

/* 1. LE DEVIS SE COMPOSE : « Location de la salle » s'enfonce sous le clic,
   la ligne arrive éclairée en jaune pâle, le cadre s'allonge et les totaux
   descendent ; la TVA à 20 % s'ajoute, puis le total TTC change. */
@keyframes sc-factures-p2 {
  0%, 5.8%     { opacity: 1; transform: none; background: #FFFFFF; }
  5.9%         { opacity: 1; transform: scale(.96); background: #F0F0EE; }
  6.4%         { opacity: 1; transform: none; background: #F0F0EE; }
  7.4%, 54.8%  { opacity: 1; transform: none; background: #FFFFFF; }
  55.6%, 98.4% { opacity: 0; transform: none; background: #FFFFFF; }
  99.9%, 100%  { opacity: 1; transform: none; background: #FFFFFF; }
}
@keyframes sc-factures-l3 {
  0%, 6.6%     { opacity: 0; transform: translateY(-6px); background-color: #FEF7E0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  8%, 12%      { opacity: 1; transform: none; background-color: #FEF7E0; }
  16%, 98.4%   { opacity: 1; transform: none; background-color: rgba(254, 247, 224, 0); }
  99.9%, 100%  { opacity: 0; transform: translateY(-6px); background-color: #FEF7E0; }
}
@keyframes sc-factures-doc {
  0%, 6.6%     { height: 190px; background-color: #FFFFFF; border-color: #E5E5E5; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  8%, 9.2%     { height: 222px; background-color: #FFFFFF; border-color: #E5E5E5; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  10.6%, 54.8% { height: 244px; background-color: #FFFFFF; border-color: #E5E5E5; }
  55.6%, 59.4% { height: 244px; background-color: #FEF7E0; border-color: #F3D98B; }
  62.6%, 98.4% { height: 244px; background-color: #FFFFFF; border-color: #E5E5E5; }
  99.9%, 100%  { height: 190px; background-color: #FFFFFF; border-color: #E5E5E5; }
}
@keyframes sc-factures-totaux {
  0%, 6.6%     { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  8%, 98.4%    { transform: translateY(32px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-factures-t20 {
  0%, 9.2%     { opacity: 0; transform: translateY(-4px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  10.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(-4px); }
}
@keyframes sc-factures-tttc {
  0%, 9.2%     { transform: none; background-color: rgba(254, 247, 224, 0); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  10.6%        { transform: translateY(22px); background-color: rgba(254, 247, 224, 0); }
  11.4%, 14%   { transform: translateY(22px); background-color: #FEF7E0; }
  17%, 98.4%   { transform: translateY(22px); background-color: rgba(254, 247, 224, 0); }
  99.9%, 100%  { transform: none; background-color: rgba(254, 247, 224, 0); }
}
/* Les montants : l'ancien sort, puis le nouveau entre. */
@keyframes sc-factures-ht-av  { 0%, 8.4% { opacity: 1; } 9%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-ht-ap  { 0%, 9% { opacity: 0; } 9.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-factures-ttc-av { 0%, 10.8% { opacity: 1; } 11.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-ttc-ap { 0%, 11.4% { opacity: 0; } 12.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* L'envoi : le bouton s'enfonce, la confirmation monte, l'état passe à
   « Envoyé ». Le bouton change de mot pendant que Chrome est hors champ. */
@keyframes sc-factures-bouton {
  0%, 14.4%    { transform: none; background: #0A0A0A; }
  14.6%        { transform: scale(.97); background: #26272E; }
  15.2%, 53.9% { transform: none; background: #0A0A0A; }
  54.1%        { transform: scale(.97); background: #26272E; }
  54.7%, 100%  { transform: none; background: #0A0A0A; }
}
@keyframes sc-factures-bt1 { 0%, 30% { opacity: 1; } 30.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-bt2 { 0%, 31% { opacity: 0; } 31.8%, 54.8% { opacity: 1; } 55.4%, 100% { opacity: 0; } }
@keyframes sc-factures-toast {
  0%, 15.2%    { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  16.4%, 27%   { opacity: 1; transform: none; }
  27.8%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-factures-e1 { 0%, 15.4% { opacity: 1; } 16%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-e2 {
  0%, 16%      { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  16.8%, 50%   { opacity: 1; transform: none; }
  50.6%, 100%  { opacity: 0; transform: none; }
}

/* 2. HÉLÈNE ACCEPTE : le doigt arrive en grandissant, s'enfonce 100 ms, se
   relâche ; le bouton passe au vert au relâché, puis l'heure s'inscrit. */
@keyframes sc-factures-doigt {
  0%, 34.6%    { transform: translate(249px, 364px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  35.6%        { transform: translate(249px, 364px); opacity: 1; }
  36.4%        { transform: translate(249px, 364px) scale(.8); opacity: 1; }
  37.2%        { transform: translate(249px, 364px); opacity: 1; }
  38.4%, 100%  { transform: translate(249px, 364px) scale(1.1); opacity: 0; }
}
@keyframes sc-factures-ml-bouton {
  0%, 36.3%    { transform: none; background: #0A0A0A; }
  36.5%        { transform: scale(.97); background: #26272E; }
  37.2%        { transform: none; background: #26272E; }
  38.2%, 98.4% { transform: none; background: #15803D; }
  99.9%, 100%  { transform: none; background: #0A0A0A; }
}
@keyframes sc-factures-mb-a { 0%, 37.2% { opacity: 1; } 37.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-mb-b {
  0%, 37.8%    { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  38.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.9); }
}
@keyframes sc-factures-ml-note {
  0%, 39.2%    { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  40.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(4px); }
}

/* 3. LE DEVIS DEVIENT LA FACTURE. L'état passe à « Accepté » quand Chrome
   revient, puis tout bascule au même instant, 54,8 % : ce qui sort part en
   600 ms, ce qui entre arrive juste derrière. */
@keyframes sc-factures-e3 {
  0%, 50.6%    { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  51.6%, 54.8% { opacity: 1; transform: none; }
  55.4%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-factures-e4 {
  0%, 55.4%    { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  56.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.85); }
}
@keyframes sc-factures-sort {
  0%, 54.8%    { opacity: 1; transform: none; }
  55.4%, 98.4% { opacity: 0; transform: translateY(-4px); }
  99.9%, 100%  { opacity: 1; transform: none; }
}
@keyframes sc-factures-entre {
  0%, 55.4%    { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  56.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(4px); }
}
@keyframes sc-factures-m-devis {
  0%, 54.8%    { background-color: #0A0A0A; color: #FFFFFF; }
  55.6%, 98.4% { background-color: rgba(10, 10, 10, 0); color: #404040; }
  99.9%, 100%  { background-color: #0A0A0A; color: #FFFFFF; }
}
@keyframes sc-factures-m-fact {
  0%, 54.8%    { background-color: rgba(10, 10, 10, 0); color: #404040; }
  55.6%, 98.4% { background-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { background-color: rgba(10, 10, 10, 0); color: #404040; }
}
@keyframes sc-factures-cat { 0%, 54.8% { opacity: 1; } 55.6%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-verrou {
  0%, 55.8%    { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  56.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(4px); }
}

/* La légende : l'ancienne sort, puis la nouvelle entre. */
@keyframes sc-factures-leg-a { 0%, 22.4% { opacity: 1; } 23%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-factures-leg-b { 0%, 23% { opacity: 0; } 23.8%, 54.8% { opacity: 1; } 55.4%, 100% { opacity: 0; } }
@keyframes sc-factures-leg-c { 0%, 55.4% { opacity: 0; } 56.2%, 60.2% { opacity: 1; } 60.8%, 100% { opacity: 0; } }
@keyframes sc-factures-leg-d { 0%, 60.8% { opacity: 0; } 61.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR de Lucie : le catalogue, l'envoi, puis la facture. */
@keyframes sc-cur-factures {
  0%, 1.6%     { transform: translate(430px, 560px); opacity: 0; }
  2.6%         { transform: translate(420px, 520px); opacity: 1; }
  5.4%         { transform: translate(316px, 195px); opacity: 1; }
  5.9%         { transform: translate(316px, 195px) scale(.84); opacity: 1; }
  6.4%, 11.8%  { transform: translate(316px, 195px); opacity: 1; }
  14%          { transform: translate(235px, 497px); opacity: 1; }
  14.5%        { transform: translate(235px, 497px) scale(.84); opacity: 1; }
  15%, 17%     { transform: translate(235px, 497px); opacity: 1; }
  18.4%        { transform: translate(300px, 560px); opacity: 0; }
  18.5%, 50.4% { transform: translate(430px, 560px); opacity: 0; }
  51.2%        { transform: translate(420px, 540px); opacity: 1; }
  53.4%        { transform: translate(235px, 497px); opacity: 1; }
  54%          { transform: translate(235px, 497px) scale(.84); opacity: 1; }
  54.5%, 56.4% { transform: translate(235px, 497px); opacity: 1; }
  58.4%, 100%  { transform: translate(330px, 560px); opacity: 0; }
}
@keyframes sc-factures-onde {
  0%, 5.8%     { transform: scale(.4); opacity: 0; }
  5.9%         { transform: scale(.4); opacity: .9; }
  7.5%         { transform: scale(2.2); opacity: 0; }
  7.6%, 14.4%  { transform: scale(.4); opacity: 0; }
  14.5%        { transform: scale(.4); opacity: .9; }
  16.1%        { transform: scale(2.2); opacity: 0; }
  16.2%, 53.9% { transform: scale(.4); opacity: 0; }
  54%          { transform: scale(.4); opacity: .9; }
  55.6%        { transform: scale(2.2); opacity: 0; }
  55.7%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, la facture émise. */
@media (prefers-reduced-motion: reduce) {
  .sc-factures-l--3,
  .sc-factures-tot--20,
  .sc-factures-c-titre--f,
  .sc-factures-c-u--f,
  .sc-factures-t--f,
  .sc-factures-e--4,
  .sc-factures-bt--3,
  .sc-factures-verrou,
  .sc-factures-v--ap,
  .sc-factures-leg--d { opacity: 1; transform: none; }
  .sc-factures-c-titre--d,
  .sc-factures-c-u--d,
  .sc-factures-t--d,
  .sc-factures-e--1,
  .sc-factures-bt--1,
  .sc-factures-cat-dit,
  .sc-factures-p,
  .sc-factures-v--av,
  .sc-factures-leg--a { opacity: 0; }
  .sc-factures-doc > .sc-factures-totaux { transform: translateY(32px); }
  .sc-factures-tot--ttc { transform: translateY(22px); }
  .sc-factures-b-m--devis { background: none; color: #404040; }
  .sc-factures-b-m--fact { background: #0A0A0A; color: #FFFFFF; }
}