/* Scène « fichier client », refaite le 24 septembre au format validé par
   Théo : l'iPhone de Camille qui réserve, puis glissement vers le
   back-office de Lucie, où la fiche se remplit toute seule ; la recherche
   « arach » ferme la boucle. 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 :
      9 %  Camille touche « Arachide »
     16 %  elle réserve ; la confirmation monte (jusqu'à 19,6 %)
     28 %  glissement vers le back-office de Lucie (jusqu'à 33,5 %)
   36,4 %  la réservation arrive dans l'historique
     39 %  le compteur passe de 11 à 12
   41,4 %  la prochaine venue s'inscrit
   43,8 %  l'étiquette « Arachide » s'ajoute
   55,8 %  Lucie clique dans la recherche et tape « arach »
   60,4 %  Camille ressort, avec son allergie
   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. 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) ; la page de Safari commence
   à y = 30. Chrome : 520 x 570, sa vue commence en (1, 65). Légende de 584
   à 610.

   LES CIBLES, CALCULÉES :
     doigt de Camille (centre, moins 11) :
       « Arachide »     écran (163, 264) → toile (322, 325) → (311, 314)
       « Réserver »     écran (110, 371) → toile (260, 451) → (249, 440)
     curseur de Lucie (pointe, moins (4, 2)) :
       la recherche     vue (324, 68)    → toile (325, 133) → (321, 131) */
.fn-scene--fichier {
  overflow: hidden;
  --sc-haut: 612px;
  --line: #E5E5E5; --line-ios: #D1D1D6; --line-chrome: #E3E6EA; --line-b: #EDEDED;
  line-height: 1.35;
}
.fn-scene--fichier svg { display: block; }
.fn-scene--fichier i { font-style: normal; }

/* ═══ 1. L'IPHONE DE CAMILLE ══════════════════════════════════════════ */
.sc-fichier-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(123px, 6px) scale(1.18);
}
.sc-fichier-ecran { position: relative; height: 472px; overflow: hidden; border-radius: 30px; background: #FFFFFF; color: #0A0A0A; }
.sc-fichier-ilot { position: absolute; top: 7px; left: 77px; z-index: 9; width: 66px; height: 19px; border-radius: 10px; background: #0A0A0A; }
.sc-fichier-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-fichier-statut b { font-weight: 600; }
.sc-fichier-statut-d { display: flex; align-items: center; gap: 4px; }
.sc-fichier-reseau { display: flex; align-items: flex-end; gap: 1px; height: 8px; }
.sc-fichier-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-fichier-reseau i:nth-child(1) { height: 3px; }
.sc-fichier-reseau i:nth-child(2) { height: 4.5px; }
.sc-fichier-reseau i:nth-child(3) { height: 6px; }
.sc-fichier-reseau i:nth-child(4) { height: 8px; }
.sc-fichier-wifi { width: 11px; height: 8px; }
.sc-fichier-pile { display: block; width: 18px; height: 9px; padding: 1px; border: 1px solid rgba(31, 31, 31, .4); border-radius: 3px; }
.sc-fichier-pile i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: currentColor; }
.sc-fichier-maison { position: absolute; bottom: 6px; left: 70px; z-index: 9; width: 80px; height: 3.5px; border-radius: 2px; background: #0A0A0A; }

/* La page Réserver, dans Safari. */
.sc-fichier-page { position: absolute; top: 30px; left: 0; right: 0; bottom: 32px; overflow: hidden; background: #FFFFFF; }
.sc-fichier-page > span,
.sc-fichier-page > b { position: absolute; }
.sc-fichier-p-tete { top: 0; left: 0; right: 0; height: 34px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; }
.sc-fichier-p-tete b { font-size: 0.625rem; font-weight: 800; letter-spacing: -.01em; }
.sc-fichier-p-tete svg { width: 15px; height: 15px; }
.sc-fichier-p-titre { top: 40px; left: 12px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 20px; }
.sc-fichier-r { left: 10px; right: 10px; height: 36px; border: 1px solid var(--line); border-radius: 10px; }
.sc-fichier-r--1 { top: 70px; }
.sc-fichier-r--2 { top: 112px; }
.sc-fichier-r--3 { top: 154px; }
.sc-fichier-r > * { position: absolute; }
.sc-fichier-r i { top: 10px; left: 12px; color: #525252; }
.sc-fichier-r i svg { width: 14px; height: 14px; }
.sc-fichier-r span { top: 4px; left: 36px; font-size: 0.53125rem; line-height: 11px; color: #737373; }
.sc-fichier-r b { top: 16px; left: 36px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; white-space: nowrap; }
.sc-fichier-lab { top: 202px; left: 12px; font-size: 0.5625rem; font-weight: 600; line-height: 12px; color: #737373; }
.sc-fichier-al {
  width: 94px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; color: #0A0A0A;
  font-size: 0.65625rem; font-weight: 600;
}
.sc-fichier-al--1 { top: 218px; left: 10px; }
.sc-fichier-al--2 { top: 218px; left: 116px; }
.sc-fichier-al--3 { top: 256px; left: 10px; }
.sc-fichier-al--4 { top: 256px; left: 116px; }
.sc-fichier-qui { top: 298px; left: 12px; display: flex; align-items: center; gap: 5px; font-size: 0.59375rem; line-height: 12px; color: #737373; }
.sc-fichier-qui svg { width: 12px; height: 12px; }
.sc-fichier-bouton {
  top: 322px; left: 10px; right: 10px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.71875rem; font-weight: 700;
}
.sc-fichier-page > .sc-fichier-voile { inset: 0; z-index: 4; background: rgba(10, 10, 10, .28); opacity: 0; }
.sc-fichier-feuille {
  left: -1px; right: -1px; bottom: 0; z-index: 5; height: 196px;
  border-radius: 18px 18px 0 0; background: #FFFFFF;
  transform: translateY(100%);
}
.sc-fichier-feuille > * { position: absolute; left: 14px; right: 14px; text-align: center; }
.sc-fichier-f-coche { top: 22px; left: 50%; right: auto; width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; border-radius: 50%; background: #E8F6EE; color: #15803D; }
.sc-fichier-f-coche svg { width: 22px; height: 22px; stroke-width: 2; }
.sc-fichier-f-titre { top: 72px; font-size: 0.875rem; font-weight: 800; line-height: 18px; }
.sc-fichier-f-quoi { top: 98px; font-size: 0.625rem; line-height: 14px; }
.sc-fichier-f-note { top: 138px; font-size: 0.59375rem; font-weight: 600; line-height: 13px; color: #B42318; }
.sc-fichier-s-mini {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px; padding-top: 6px;
  display: flex; justify-content: center;
  background: linear-gradient(var(--line-ios), var(--line-ios)) top / 100% 1px no-repeat, #F7F7F7;
  font-size: 0.53125rem; line-height: 11px; color: #1C1C1E;
}

/* ═══ 2. CHROME : LE BACK-OFFICE DE LUCIE ═════════════════════════════ */
.sc-fichier-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);
  transform: translateX(560px);
}
.sc-fichier-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-fichier-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-fichier-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-fichier-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-fichier-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.59375rem; }
.sc-fichier-c-plus { position: absolute; top: 9px; left: 196px; color: #474747; }
.sc-fichier-c-plus svg { width: 12px; height: 12px; }
.sc-fichier-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-fichier-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-fichier-fen svg { width: 10px; height: 10px; }
.sc-fichier-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-fichier-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-fichier-c-outils > i svg { width: 14px; height: 14px; }
.sc-fichier-c-off { color: #C4C7C5; }
.sc-fichier-c-outils > .sc-fichier-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-fichier-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-fichier-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-fichier-c-chemin { color: #5F6368; }
.sc-fichier-c-etoile { margin-left: auto; }
.sc-fichier-c-etoile svg { width: 13px; height: 13px; }
.sc-fichier-vue { position: relative; flex: 1; overflow: hidden; }
.sc-fichier-vue > * { position: absolute; }

.sc-fichier-b-barre { top: 0; left: 0; right: 0; height: 40px; border-bottom: 1px solid var(--line-b); }
.sc-fichier-b-barre > * { position: absolute; }
.sc-fichier-b-site { top: 0; left: 16px; display: flex; align-items: center; gap: 8px; height: 40px; font-size: 0.6875rem; font-weight: 800; }
.sc-fichier-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-fichier-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-fichier-b-voir svg { width: 9px; height: 9px; }
.sc-fichier-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-fichier-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-fichier-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-fichier-b-m svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.sc-fichier-b-m--actif { background: #0A0A0A; color: #FFFFFF; }

/* La recherche du fichier. */
.sc-fichier-cherche { top: 52px; left: 140px; width: 368px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #FFFFFF; }
.sc-fichier-cherche > * { position: absolute; }
.sc-fichier-cherche > svg { top: 9px; left: 12px; width: 14px; height: 14px; color: #737373; }
.sc-fichier-souffle { top: 9px; left: 34px; font-size: 0.625rem; line-height: 13px; color: #A3A3A3; white-space: nowrap; }
.sc-fichier-frappe { top: 8px; left: 34px; height: 15px; white-space: nowrap; }
.sc-fichier-frappe-txt { display: block; font-size: 0.6875rem; font-weight: 600; line-height: 15px; clip-path: inset(0 100% 0 0); }
.sc-fichier-caret { position: absolute; top: 0; left: 0; width: 1.5px; height: 15px; background: #3F7BFF; opacity: 0; }

/* La fiche de Camille. */
.sc-fichier-f-ava { top: 100px; left: 140px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #EAF1FF; color: #2B5DD9; font-size: 0.8125rem; font-weight: 700; }
.sc-fichier-f-nom { top: 101px; left: 192px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 20px; }
.sc-fichier-f-sous { top: 123px; left: 192px; font-size: 0.625rem; line-height: 13px; color: #737373; }
.sc-fichier-s { top: 152px; width: 118px; height: 58px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.sc-fichier-s--1 { left: 140px; }
.sc-fichier-s--2 { left: 265px; }
.sc-fichier-s--3 { left: 390px; }
.sc-fichier-s > * { position: absolute; left: 12px; }
.sc-fichier-s-lab { top: 9px; font-size: 0.625rem; font-weight: 600; line-height: 12px; color: #737373; }
.sc-fichier-s-val { top: 26px; font-size: 0.875rem; font-weight: 800; line-height: 18px; white-space: nowrap; }
.sc-fichier-rouleau { height: 18px; overflow: hidden; }
.sc-fichier-reel { display: flex; flex-direction: column; }
.sc-fichier-reel span { display: block; height: 18px; }
.sc-fichier-s--3 .sc-fichier-v { top: 28px; font-size: 0.75rem; line-height: 16px; }
.sc-fichier-v--a { color: #A3A3A3; }
.sc-fichier-v--b { opacity: 0; }
.sc-fichier-h { left: 140px; font-size: 0.625rem; font-weight: 700; line-height: 13px; }
.sc-fichier-h--tags { top: 224px; }
.sc-fichier-h--hist { top: 280px; }
.sc-fichier-tag { top: 242px; height: 24px; padding: 0 10px; display: grid; place-items: center; border-radius: 8px; font-size: 0.625rem; font-weight: 600; white-space: nowrap; }
.sc-fichier-tag--1 { left: 140px; background: #F5F5F3; color: #404040; }
.sc-fichier-tag--2 { left: 280px; background: #FEF3F2; color: #B42318; opacity: 0; }
.sc-fichier-hl { left: 140px; width: 368px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; }
.sc-fichier-hl > * { position: absolute; white-space: nowrap; }
.sc-fichier-hl--neuf { top: 298px; opacity: 0; }
.sc-fichier-hl--1 { top: 298px; }
.sc-fichier-hl--2 { top: 340px; }
.sc-fichier-hl i { top: 10px; left: 12px; color: #525252; }
.sc-fichier-hl i svg { width: 14px; height: 14px; }
.sc-fichier-hl b { top: 10px; left: 36px; font-size: 0.65625rem; font-weight: 600; line-height: 14px; }
.sc-fichier-hl span { top: 11px; right: 12px; font-size: 0.59375rem; line-height: 13px; color: #737373; }
.sc-fichier-hl--neuf span { color: #2B5DD9; font-weight: 600; }

/* Le résultat de la recherche, sous le champ. */
.sc-fichier-res {
  top: 90px; left: 140px; z-index: 5; width: 368px; height: 70px;
  border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(31, 36, 46, .14);
  opacity: 0;
}
.sc-fichier-res > * { position: absolute; }
.sc-fichier-res-tete { top: 8px; left: 12px; font-size: 0.5625rem; font-weight: 600; line-height: 12px; color: #737373; }
.sc-fichier-res-ava { top: 28px; left: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EAF1FF; color: #2B5DD9; font-size: 0.6875rem; font-weight: 700; }
.sc-fichier-res-nom { top: 27px; left: 52px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; }
.sc-fichier-res-al { top: 27px; left: 146px; height: 18px; padding: 0 8px; display: grid; place-items: center; border-radius: 6px; background: #FEF3F2; color: #B42318; font-size: 0.5625rem; font-weight: 700; }
.sc-fichier-res-dit { top: 44px; left: 52px; font-size: 0.59375rem; line-height: 13px; color: #737373; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-fichier-legende { position: absolute; top: 584px; left: 14px; right: 14px; z-index: 2; display: grid; height: 26px; margin: 0; }
.sc-fichier-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-fichier-leg--a { opacity: 1; }
.sc-fichier-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-fichier-leg i svg { width: 13px; height: 13px; }
.sc-fichier-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-fichier-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 bouge en grand passe sur son propre calque. */
.sc-fichier-tel,
.sc-fichier-chrome,
.sc-fichier-feuille { will-change: transform, opacity; }

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

.sc-fichier-tel        { animation-name: sc-fichier-tel; }
.sc-fichier-chrome     { animation-name: sc-fichier-chrome; }
.sc-fichier-doigt      { animation-name: sc-fichier-doigt; }
.sc-fichier-al--2      { animation-name: sc-fichier-choix; }
.sc-fichier-bouton     { animation-name: sc-fichier-bouton; }
.sc-fichier-voile      { animation-name: sc-fichier-voile; }
.sc-fichier-feuille    { animation-name: sc-fichier-feuille; }
.sc-fichier-hl--1,
.sc-fichier-hl--2      { animation-name: sc-fichier-descend; }
.sc-fichier-hl--neuf   { animation-name: sc-fichier-neuf; }
.sc-fichier-reel       { animation-name: sc-fichier-roule; }
.sc-fichier-s--1       { animation-name: sc-fichier-eclaire-1; }
.sc-fichier-s--3       { animation-name: sc-fichier-eclaire-3; }
.sc-fichier-v--a       { animation-name: sc-fichier-v-a; }
.sc-fichier-v--b       { animation-name: sc-fichier-v-b; }
.sc-fichier-tag--2     { animation-name: sc-fichier-tag; }
.sc-fichier-cherche    { animation-name: sc-fichier-cherche; }
.sc-fichier-souffle    { animation-name: sc-fichier-souffle; }
.sc-fichier-frappe-txt { animation-name: sc-fichier-frappe; }
.sc-fichier-caret      { animation-name: sc-fichier-caret; }
.sc-fichier-res        { animation-name: sc-fichier-res; }

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

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

/* LE GLISSEMENT : le téléphone part à gauche, Chrome arrive de la droite,
   en 660 ms, comme deux écrans côte à côte. */
@keyframes sc-fichier-tel {
  0%, 28%      { transform: translate(123px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  33.5%, 98.4% { transform: translate(-440px, 6px) scale(1.18); }
  99.9%, 100%  { transform: translate(123px, 6px) scale(1.18); }
}
@keyframes sc-fichier-chrome {
  0%, 28%      { transform: translateX(560px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  33.5%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateX(560px); }
}

/* 1. CAMILLE RÉSERVE : « Arachide », puis « Réserver ». Le doigt arrive en
   grandissant, s'enfonce 100 ms, se relâche 100 ms, s'efface. */
@keyframes sc-fichier-doigt {
  0%, 7.2%     { transform: translate(311px, 314px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  8.2%         { transform: translate(311px, 314px); opacity: 1; }
  9%           { transform: translate(311px, 314px) scale(.8); opacity: 1; }
  9.8%         { transform: translate(311px, 314px); opacity: 1; }
  11%          { transform: translate(311px, 314px) scale(1.1); opacity: 0; }
  14.2%        { transform: translate(249px, 440px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  15.2%        { transform: translate(249px, 440px); opacity: 1; }
  16%          { transform: translate(249px, 440px) scale(.8); opacity: 1; }
  16.8%        { transform: translate(249px, 440px); opacity: 1; }
  18%, 100%    { transform: translate(249px, 440px) scale(1.1); opacity: 0; }
}
@keyframes sc-fichier-choix {
  0%, 9.4%     { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  10.2%, 98.4% { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
}
@keyframes sc-fichier-bouton {
  0%, 15.8%    { background: #0A0A0A; transform: none; }
  16.2%        { background: #26272E; transform: scale(.98); }
  17%, 100%    { background: #0A0A0A; transform: none; }
}
@keyframes sc-fichier-voile { 0%, 16.8% { opacity: 0; } 18.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-fichier-feuille {
  0%, 16.8%    { transform: translateY(100%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  19.6%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateY(100%); }
}

/* 2. LA FICHE SE REMPLIT TOUTE SEULE, ligne après ligne, chaque ajout
   éclairé en jaune pâle, puis rendu au blanc. */
@keyframes sc-fichier-descend {
  0%, 35.8%    { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  37.2%, 98.4% { transform: translateY(42px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-fichier-neuf {
  0%, 36.4%    { opacity: 0; transform: translateY(-6px); background: #FEF7E0; border-color: #F3D98B; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  37.8%, 46%   { opacity: 1; transform: none; background: #FEF7E0; border-color: #F3D98B; }
  52%, 98.4%   { opacity: 1; transform: none; background: #FFFFFF; border-color: #E5E5E5; }
  99.9%, 100%  { opacity: 0; transform: translateY(-6px); background: #FEF7E0; border-color: #F3D98B; }
}
@keyframes sc-fichier-roule {
  0%, 39%      { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  40.2%, 98.4% { transform: translateY(-18px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-fichier-eclaire-1 {
  0%, 39%      { background: #FFFFFF; border-color: #E5E5E5; }
  39.8%, 46%   { background: #FEF7E0; border-color: #F3D98B; }
  52%, 100%    { background: #FFFFFF; border-color: #E5E5E5; }
}
@keyframes sc-fichier-eclaire-3 {
  0%, 41.4%    { background: #FFFFFF; border-color: #E5E5E5; }
  42.2%, 48%   { background: #FEF7E0; border-color: #F3D98B; }
  54%, 100%    { background: #FFFFFF; border-color: #E5E5E5; }
}
@keyframes sc-fichier-v-a { 0%, 41.4% { opacity: 1; } 41.9%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-fichier-v-b { 0%, 41.9% { opacity: 0; } 42.7%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-fichier-tag {
  0%, 43.8%    { opacity: 0; transform: scale(.7); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  45%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.7); }
}

/* 3. LA RECHERCHE : Lucie clique dans le champ, tape « arach » une lettre
   par palier (le pas est posé dans les étapes : la règle commune du kit l'emporterait sur une règle de classe), et Camille ressort. */
@keyframes sc-fichier-cherche {
  0%, 55.8%    { border-color: #E5E5E5; }
  56.2%, 98.4% { border-color: #3F7BFF; }
  99.9%, 100%  { border-color: #E5E5E5; }
}
@keyframes sc-fichier-souffle { 0%, 56.2% { opacity: 1; } 56.6%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-fichier-frappe {
  0%, 56.6%    { clip-path: inset(0 100% 0 0); animation-timing-function: steps(5, end); }
  59.8%, 98.4% { clip-path: inset(0 0 0 0); }
  99.9%, 100%  { clip-path: inset(0 100% 0 0); }
}
@keyframes sc-fichier-caret {
  0%, 56.2%    { left: 0; opacity: 0; }
  56.6%        { left: 0; opacity: 1; animation-timing-function: steps(5, end); }
  59.8%, 98.4% { left: 100%; opacity: 1; }
  99.9%, 100%  { left: 0; opacity: 0; }
}
@keyframes sc-fichier-res {
  0%, 60.4%    { opacity: 0; transform: translateY(-4px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  61.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-fichier-leg-a { 0%, 30.2% { opacity: 1; } 30.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-fichier-leg-b { 0%, 30.8% { opacity: 0; } 31.6%, 45.4% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes sc-fichier-leg-c { 0%, 46% { opacity: 0; } 46.8%, 58.6% { opacity: 1; } 59.2%, 100% { opacity: 0; } }
@keyframes sc-fichier-leg-d { 0%, 59.2% { opacity: 0; } 60%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR : celui de Lucie, dans Chrome, pour la recherche. */
@keyframes sc-cur-fichier {
  0%, 51.6%    { transform: translate(380px, 470px); opacity: 0; }
  52.6%        { transform: translate(380px, 420px); opacity: 1; }
  55%          { transform: translate(321px, 131px); opacity: 1; }
  55.8%        { transform: translate(321px, 131px) scale(.84); opacity: 1; }
  56.2%, 60.4% { transform: translate(321px, 131px); opacity: 1; }
  62.2%        { transform: translate(470px, 300px); opacity: 1; }
  63.4%, 98.4% { transform: translate(480px, 320px); opacity: 0; }
  99.9%, 100%  { transform: translate(380px, 470px); opacity: 0; }
}
@keyframes sc-fichier-onde {
  0%, 55.7%    { transform: scale(.4); opacity: 0; }
  55.8%        { transform: scale(.4); opacity: .9; }
  57.4%        { transform: scale(2.2); opacity: 0; }
  57.6%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, la fiche remplie et le résultat
   de la recherche. */
@media (prefers-reduced-motion: reduce) {
  .sc-fichier-tel { transform: translate(-440px, 6px) scale(1.18); }
  .sc-fichier-chrome { transform: none; }
  .sc-fichier-hl--1,
  .sc-fichier-hl--2 { transform: translateY(42px); }
  .sc-fichier-reel { transform: translateY(-18px); }
  .sc-fichier-v--a,
  .sc-fichier-souffle,
  .sc-fichier-leg--a { opacity: 0; }
  .sc-fichier-hl--neuf,
  .sc-fichier-v--b,
  .sc-fichier-tag--2,
  .sc-fichier-leg--d { opacity: 1; transform: none; }
  .sc-fichier-frappe-txt { clip-path: none; }
}