/* Scène « appli installable » : à gauche l'iPhone de Marc, le second de
   Lucie, qui pose l'outil de l'équipe sur son écran d'accueil (Safari,
   Partager, « Sur l'écran d'accueil », « Ajouter ») puis l'ouvre en plein
   écran ; le réseau tombe, sa commande attend, elle part au retour du
   signal. À droite le comptoir, dans Chrome : la commande y arrive seule.
   Pas de légende, pas de curseur. Le rideau de fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      4,8 %  Marc touche Partager ; la feuille monte, la page se floute
      9,4 %  « Sur l'écran d'accueil »
       14 %  « Ajouter » : retour à l'écran d'accueil, l'icône se pose
       20 %  il touche l'icône : l'outil s'ouvre en plein écran
       26 %  le réseau tombe
       31 %  « 6 douz. », puis « Enregistrer » (36 %) : « En attente »
       58 %  le réseau revient, 11:58 : « Envoyée » ; au comptoir, la
             commande arrive en tête (59 %). Plus rien ne bouge après 67 %
       95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 560. Le téléphone de (4, 64) à (240, 556), écran de
   222 x 478 en (11, 71). La fenêtre Chrome de (232, 44) à (518, 540). */
.fn-scene--mobile {
  --sc-haut: 560px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E8E8E8; --line-safari: rgba(0, 0, 0, .08); --line-wp: #DCDCDE; --line-ios: #E3E3E8;
  --wp-fond: #F0F0F1; --wp-noir: #1D2327; --wp-gris: #646970; --wp-bord: #C3C4C7;
  /* Les cibles, mesurées au banc : le coin du doigt (rond de 26 px), et le
     centre de l'icône Chez Lucie dans l'écran, d'où l'outil s'ouvre. */
  --sc-mo-partager: 109px, 512px; --sc-mo-accueil: 109px, 487px; --sc-mo-ajouter: 182.5px, 124px;
  --sc-mo-icone: 33.25px, 352px; --sc-mo-six: 175.7px, 269px; --sc-mo-enreg: 109px, 315px;
  --sc-mo-origine: 35.25px 294px;
  line-height: 1.35;
}
.fn-scene--mobile svg { display: block; }
.fn-scene--mobile p { margin: 0; }
.fn-scene--mobile i { font-style: normal; }
.sc-mobile-pile { display: grid; }
.sc-mobile-pile > i { grid-area: 1 / 1; }

/* ═══ LES TITRES ══════════════════════════════════════════════════════ */
.sc-mobile-qui {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-mobile-qui b { font-size: 0.9375rem; font-weight: 800; line-height: 19px; letter-spacing: -.01em; color: #0A0A0A; }
.sc-mobile-qui span { font-size: 0.6875rem; line-height: 14px; color: #737373; }
.sc-mobile-qui--bo { top: 2px; left: 232px; width: 286px; }
.sc-mobile-qui--tel { top: 24px; left: 4px; width: 236px; }

/* ═══ LE COMPTOIR : CHROME ════════════════════════════════ */
.sc-mobile-chrome {
  position: absolute; top: 44px; left: 232px; z-index: 1;
  display: flex; flex-direction: column;
  width: 286px; height: 496px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-mobile-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-mobile-c-onglet {
  position: absolute; top: 6px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  width: 176px; height: 24px; padding: 0 8px 0 9px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-mobile-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-mobile-c-logo {
  display: grid; place-items: center; flex: none; width: 13px; height: 13px;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
.sc-mobile-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.6875rem; }
.sc-mobile-c-plus { position: absolute; top: 10px; left: 196px; color: #474747; }
.sc-mobile-c-plus svg { width: 12px; height: 12px; }
.sc-mobile-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-mobile-fen i { display: grid; place-items: center; width: 24px; height: 100%; color: #1F1F1F; }
.sc-mobile-fen svg { width: 10px; height: 10px; }
.sc-mobile-c-outils {
  display: flex; align-items: center; gap: 1px; flex: none;
  height: 34px; padding: 0 4px 0 8px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-mobile-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-mobile-c-outils > i svg { width: 13px; height: 13px; }
.sc-mobile-c-off { color: #C4C7C5; }
.sc-mobile-c-adresse {
  display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
  height: 26px; margin: 0 3px; padding: 0 8px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.6875rem; color: #1F1F1F; white-space: nowrap;
}
.sc-mobile-c-adresse > svg { width: 12px; height: 12px; flex: none; }
.sc-mobile-c-etoile { margin-left: auto; }
.sc-mobile-c-etoile svg { width: 12px; height: 12px; }
.sc-mobile-vue { position: relative; flex: 1; overflow: hidden; background: var(--wp-fond); color: var(--wp-noir); }

/* La barre noire de WordPress, puis la page « Commandes ». */
.sc-mobile-wp-barre {
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 10px;
  background: var(--wp-noir); color: #F0F0F1; font-size: 0.6875rem;
}
.sc-mobile-wp-barre span { display: flex; align-items: center; gap: 5px; }
.sc-mobile-wp-barre svg { width: 13px; height: 13px; color: #A7AAAD; }

.sc-mobile-wp { display: flex; flex-direction: column; padding: 12px 8px; }
.fn-scene--mobile .sc-mobile-wp-h1 { font-size: 1.0625rem; font-weight: 400; line-height: 21px; }
.fn-scene--mobile .sc-mobile-wp-sous { margin: 2px 0 10px; font-size: 0.6875rem; line-height: 14px; color: var(--wp-gris); }
/* La liste des commandes, à la manière des listes de WordPress. Quatre
   lignes visibles : quand celle de Marc arrive en tête, les autres
   descendent d'un cran et la plus ancienne s'efface. */
.sc-mobile-table { display: block; border: 1px solid var(--wp-bord); background: #FFFFFF; font-size: 0.6875rem; }
.sc-mobile-tr {
  display: grid; grid-template-columns: 1fr 104px; align-items: center; column-gap: 8px;
  height: 44px; padding: 0 9px; white-space: nowrap;
}
.sc-mobile-tr > span { display: flex; flex-direction: column; min-width: 0; line-height: 15px; }
.sc-mobile-tr b { font-weight: 600; }
.sc-mobile-tr small { font-size: 0.6875rem; color: var(--wp-gris); }
.sc-mobile-tr--tete { height: 26px; border-bottom: 1px solid var(--line-wp); font-weight: 600; }
.sc-mobile-corps-t { position: relative; display: block; height: 176px; overflow: hidden; }
.sc-mobile-lignes { display: block; }
.sc-mobile-lignes .sc-mobile-tr + .sc-mobile-tr { border-top: 1px solid var(--line-wp); }
.sc-mobile-tr--neuve { position: absolute; top: 0; left: 0; right: 0; z-index: 1; border-bottom: 1px solid var(--line-wp); background: #FFFFFF; opacity: 0; }

/* ═══ L'IPHONE DE MARC ════════════════════════════════════════════════ */
.sc-mobile-tel {
  position: absolute; top: 64px; left: 4px; z-index: 2;
  width: 236px; height: 492px; padding: 7px;
  border-radius: 40px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
}
.sc-mobile-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #FFFFFF; color: #0A0A0A; }
.sc-mobile-ilot {
  position: absolute; top: 8px; left: 50%; z-index: 9;
  width: 66px; height: 19px; margin-left: -33px; border-radius: 10px; background: #000000;
}
.sc-mobile-maison {
  position: absolute; bottom: 5px; left: 50%; z-index: 9;
  width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: #0A0A0A;
}
.sc-mobile-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  height: 34px; padding: 2px 20px 0 26px; font-size: 0.6875rem; background: #FFFFFF;
}
.sc-mobile-statut b { flex: 1; font-weight: 700; }
.sc-mobile-reseau { display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sc-mobile-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-mobile-reseau i:nth-child(1) { height: 3px; }
.sc-mobile-reseau i:nth-child(2) { height: 4.5px; }
.sc-mobile-reseau i:nth-child(3) { height: 6px; }
.sc-mobile-reseau i:nth-child(4) { height: 8px; }
.sc-mobile-batt { display: block; width: 16px; height: 8px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-mobile-batt i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }

.sc-mobile-safari { position: absolute; inset: 0; z-index: 1; background: #FFFFFF; }
.sc-mobile-sf-vue { position: absolute; top: 34px; left: 0; right: 0; bottom: 84px; overflow: hidden; }
.sc-mobile-sf-partager { display: block; }

/* L'outil de l'équipe, le même dans Safari et en plein écran. */
.sc-mobile-outil { display: block; }
.sc-mobile-o-tete {
  display: flex; align-items: center; justify-content: space-between;
  height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line-site);
}
.sc-mobile-o-tete b { font-size: 0.875rem; font-weight: 800; letter-spacing: -.01em; }
.sc-mobile-o-qui { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #525252; }
.sc-mobile-o-qui i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E8E8E8; color: #0A0A0A; font-size: 0.6875rem; font-weight: 700; }
.sc-mobile-o-corps { display: flex; flex-direction: column; padding: 10px 14px 0; }
.fn-scene--mobile .sc-mobile-o-h { margin-bottom: 2px; font-size: 1rem; font-weight: 800; line-height: 20px; letter-spacing: -.01em; }
.fn-scene--mobile .sc-mobile-o-lab { margin: 8px 0 5px; font-size: 0.6875rem; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: #737373; }
.sc-mobile-o-champ { display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid #D4D4D4; border-radius: 8px; font-size: 0.75rem; }
.sc-mobile-o-puces { display: flex; gap: 6px; }
.sc-mobile-o-puce {
  display: grid; place-items: center; flex: 1; height: 30px;
  border: 1px solid #D4D4D4; border-radius: 8px; background: #FFFFFF;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.sc-mobile-o-bt {
  display: grid; place-items: center; height: 42px; margin-top: 10px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600;
}
.sc-mobile-o-liste { position: relative; display: block; height: 92px; }
.sc-mobile-o-ligne {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 42px; padding: 0 10px; border: 1px solid var(--line-site); border-radius: 10px; background: #FFFFFF;
}
.sc-mobile-o-ligne--neuve { opacity: 0; }
.sc-mobile-o-dit { display: flex; flex-direction: column; line-height: 15px; }
.sc-mobile-o-dit b { font-size: 0.75rem; font-weight: 700; }
.sc-mobile-o-dit small { font-size: 0.6875rem; color: #737373; }
.sc-mobile-o-etat { display: grid; justify-items: end; }
.sc-mobile-o-etat > i { grid-area: 1 / 1; }
.sc-mobile-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: 5px; background: #F5F5F3; color: #525252; font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.sc-mobile-tag svg { width: 12px; height: 12px; }
.sc-mobile-tag--ok { background: #EDFAEF; color: #00602A; }
.sc-mobile-tag--envoyee { opacity: 0; }

/* Le voile sous les feuilles d'iOS : assombri ET flouté, pour que le texte
   de la page ne se mélange pas à la feuille. */
.sc-mobile-voile {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0;
}
/* La feuille de partage. */
.sc-mobile-partage {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; padding: 12px 10px 30px;
  border-radius: 16px 16px 0 0; background: #F2F2F7;
  transform: translateY(100%);
}
.sc-mobile-p-tete { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 4px; }
.sc-mobile-mini {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 8px; background: #0A0A0A; color: #FFFFFF; font-size: 0.9375rem; font-weight: 800;
}
.sc-mobile-p-dit { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 16px; }
.sc-mobile-p-dit b { font-size: 0.75rem; font-weight: 700; }
.sc-mobile-p-dit small { font-size: 0.6875rem; color: #6E6E73; }
.sc-mobile-p-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E3E3E8; color: #6E6E73; }
.sc-mobile-p-x svg { width: 10px; height: 10px; }
.sc-mobile-groupe { display: block; margin-top: 10px; border-radius: 11px; background: #FFFFFF; }
.sc-mobile-action {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 12px; border-radius: 11px; font-size: 0.75rem;
}
.sc-mobile-action + .sc-mobile-action { border-top: 1px solid var(--line-ios); }
.sc-mobile-action svg { width: 16px; height: 16px; }
/* « Ajouter à l'écran d'accueil ». */
.sc-mobile-ajout {
  position: absolute; top: 44px; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column;
  border-radius: 14px 14px 0 0; background: #F2F2F7;
  transform: translateY(100%);
}
.sc-mobile-a-nav { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; font-size: 0.8125rem; color: #0A84FF; }
.sc-mobile-a-nav b { font-weight: 700; }
.sc-mobile-a-carte { display: flex; align-items: center; gap: 10px; margin: 6px 12px 0; padding: 10px; border-radius: 11px; background: #FFFFFF; }
.sc-mobile-a-champs { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; }
.sc-mobile-a-nom { display: block; padding-bottom: 5px; border-bottom: 1px solid var(--line-ios); font-size: 0.8125rem; }
.sc-mobile-a-champs small { font-size: 0.6875rem; color: #6E6E73; }
.sc-mobile-a-note { display: block; margin: 8px 18px 0; font-size: 0.6875rem; line-height: 15px; color: #6E6E73; }

/* L'écran d'accueil. */
.sc-mobile-accueil {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(172deg, #46586B 0%, #26313D 55%, #1A222B 100%);
  color: #FFFFFF; opacity: 0;
}
.sc-mobile-statut--clair { background: transparent; color: #FFFFFF; }
.sc-mobile-grille { position: absolute; top: 50px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
.sc-mobile-app { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-mobile-app > span { font-size: 0.6875rem; line-height: 14px; white-space: nowrap; }
.sc-mobile-icone {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; color: #FFFFFF;
}
.sc-mobile-icone svg { width: 24px; height: 24px; }
.sc-mobile-icone--cl { flex: none; background: #0A0A0A; font-size: 1.375rem; font-weight: 800; }
.sc-mobile-app--cl { opacity: 0; }
.sc-mobile-recherche {
  position: absolute; bottom: 100px; left: 50%;
  display: grid; place-items: center; width: 92px; height: 24px; margin-left: -46px;
  border-radius: 10px; background: rgba(255, 255, 255, .2); font-size: 0.6875rem;
}
.sc-mobile-dock {
  position: absolute; left: 8px; right: 8px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-around;
  height: 70px; border-radius: 24px; background: rgba(255, 255, 255, .18);
}
/* L'outil en plein écran : il s'ouvre depuis son icône. */
.sc-mobile-appli { position: absolute; inset: 0; z-index: 6; padding-top: 34px; background: #FFFFFF; opacity: 0; transform-origin: var(--sc-mo-origine); }
.sc-mobile-h2 { opacity: 0; }
.sc-mobile-toast {
  position: absolute; left: 12px; right: 12px; bottom: 22px; z-index: 4;
  display: grid; align-items: center; min-height: 44px; padding: 7px 12px;
  border-radius: 12px; background: #1C1C1E; color: #FFFFFF;
  font-size: 0.75rem; line-height: 16px;
  opacity: 0; transform: translateY(12px);
}
.sc-mobile-toast > span { grid-area: 1 / 1; }
.sc-mobile-t-retour { opacity: 0; }

.sc-mobile-sf-barre {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 84px; padding: 7px 10px 0;
  border-top: 1px solid var(--line-safari); background: rgba(249, 249, 249, .96);
}
.sc-mobile-sf-adresse {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 10px;
  border-radius: 12px; background: rgba(118, 118, 128, .12);
  font-size: 0.75rem;
}
.sc-mobile-sf-adresse small { font-size: 0.6875rem; font-weight: 600; }
.sc-mobile-sf-adresse svg { width: 13px; height: 13px; }
.sc-mobile-sf-outils { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 4px; padding: 0 6px; color: #0A84FF; }
.sc-mobile-sf-outils svg { width: 17px; height: 17px; }
.sc-mobile-sf-outils svg:nth-child(2) { color: #C7C7CC; }

/* Le doigt de Marc. */
.sc-mobile-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 NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-fin { animation-name: sc-conclure; }
.sc-mobile-doigt        { animation-name: sc-mobile-doigt; }
.sc-mobile-safari       { animation-name: sc-mobile-safari; }
.sc-mobile-voile        { animation-name: sc-mobile-voile; }
.sc-mobile-partage      { animation-name: sc-mobile-partage; }
.sc-mobile-action--accueil { animation-name: sc-mobile-ligne-touchee; }
.sc-mobile-ajout        { animation-name: sc-mobile-ajout; }
.sc-mobile-accueil      { animation-name: sc-mobile-accueil; }
.sc-mobile-app--cl      { animation-name: sc-mobile-pose; }
.sc-mobile-appli        { animation-name: sc-mobile-appli; }
.sc-mobile-maison       { animation-name: sc-mobile-maison; }
.sc-mobile-reseau--vit  { animation-name: sc-mobile-barres; }
.sc-mobile-h1           { animation-name: sc-mobile-h1; }
.sc-mobile-h2           { animation-name: sc-mobile-h2; }
.sc-mobile-toast        { animation-name: sc-mobile-toast; }
.sc-mobile-t-hors       { animation-name: sc-mobile-t-hors; }
.sc-mobile-t-retour     { animation-name: sc-mobile-t-retour; }
.sc-mobile-o-puce--choix { animation-name: sc-mobile-choix; }
.sc-mobile-o-bt--anim   { animation-name: sc-mobile-bt; }
.sc-mobile-o-ligne--neuve { animation-name: sc-mobile-neuve; }
.sc-mobile-o-ligne--avant { animation-name: sc-mobile-avant; }
.sc-mobile-tag--attente { animation-name: sc-mobile-attente; }
.sc-mobile-tag--envoyee { animation-name: sc-mobile-envoyee; }
.sc-mobile-tr--neuve    { animation-name: sc-mobile-arrivee; }
.sc-mobile-lignes       { animation-name: sc-mobile-descend; }
.sc-mobile-lignes .sc-mobile-tr:last-child { animation-name: sc-mobile-sort; }

/* ═══ MARC POSE L'OUTIL SUR SON ÉCRAN D'ACCUEIL ════════════════════════
   LE DOIGT. Six cibles MESURÉES dans la toile (le rond de 26 px s'y
   centre, translate = centre - 13) : Partager, « Sur l'écran d'accueil »,
   « Ajouter », l'icône, « 6 douz. », « Enregistrer ». */
@keyframes sc-mobile-doigt {
  0%, 4.2%     { transform: translate(var(--sc-mo-partager)) scale(1.3); opacity: 0; }
  4.5%         { transform: translate(var(--sc-mo-partager)); opacity: 1; animation-timing-function: ease-out; }
  4.8%         { transform: translate(var(--sc-mo-partager)) scale(.84); opacity: 1; }
  5.2%         { transform: translate(var(--sc-mo-partager)); opacity: 0; }
  8.8%         { transform: translate(var(--sc-mo-accueil)) scale(1.3); opacity: 0; }
  9.1%         { transform: translate(var(--sc-mo-accueil)); opacity: 1; animation-timing-function: ease-out; }
  9.4%         { transform: translate(var(--sc-mo-accueil)) scale(.84); opacity: 1; }
  9.8%         { transform: translate(var(--sc-mo-accueil)); opacity: 0; }
  13.4%        { transform: translate(var(--sc-mo-ajouter)) scale(1.3); opacity: 0; }
  13.7%        { transform: translate(var(--sc-mo-ajouter)); opacity: 1; animation-timing-function: ease-out; }
  14%          { transform: translate(var(--sc-mo-ajouter)) scale(.84); opacity: 1; }
  14.4%        { transform: translate(var(--sc-mo-ajouter)); opacity: 0; }
  19.4%        { transform: translate(var(--sc-mo-icone)) scale(1.3); opacity: 0; }
  19.7%        { transform: translate(var(--sc-mo-icone)); opacity: 1; animation-timing-function: ease-out; }
  20%          { transform: translate(var(--sc-mo-icone)) scale(.84); opacity: 1; }
  20.4%        { transform: translate(var(--sc-mo-icone)); opacity: 0; }
  30.4%        { transform: translate(var(--sc-mo-six)) scale(1.3); opacity: 0; }
  30.7%        { transform: translate(var(--sc-mo-six)); opacity: 1; animation-timing-function: ease-out; }
  31%          { transform: translate(var(--sc-mo-six)) scale(.84); opacity: 1; }
  31.4%        { transform: translate(var(--sc-mo-six)); opacity: 0; }
  35.4%        { transform: translate(var(--sc-mo-enreg)) scale(1.3); opacity: 0; }
  35.7%        { transform: translate(var(--sc-mo-enreg)); opacity: 1; animation-timing-function: ease-out; }
  36%          { transform: translate(var(--sc-mo-enreg)) scale(.84); opacity: 1; }
  36.4%, 98.4% { transform: translate(var(--sc-mo-enreg)); opacity: 0; }
  99.9%, 100%  { transform: translate(var(--sc-mo-partager)) scale(1.3); opacity: 0; }
}
/* La feuille de partage monte, la page se floute derrière. */
@keyframes sc-mobile-voile {
  0%, 5%       { opacity: 0; }
  5.9%, 14.2%  { opacity: 1; }
  15%, 100%    { opacity: 0; }
}
@keyframes sc-mobile-partage {
  0%, 5%       { transform: translateY(100%); opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  6.2%, 14.2%  { transform: none; opacity: 1; }
  15%, 98.4%   { transform: none; opacity: 0; }
  99.9%, 100%  { transform: translateY(100%); opacity: 1; }
}
@keyframes sc-mobile-ligne-touchee {
  0%, 9.3%     { background: #FFFFFF; }
  9.4%, 10.2%  { background: #E5E5EA; }
  10.8%, 100%  { background: #FFFFFF; }
}
@keyframes sc-mobile-ajout {
  0%, 9.6%     { transform: translateY(100%); opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  10.8%, 14.2% { transform: none; opacity: 1; }
  15%, 98.4%   { transform: none; opacity: 0; }
  99.9%, 100%  { transform: translateY(100%); opacity: 1; }
}
@keyframes sc-mobile-safari {
  0%, 14.2%    { opacity: 1; }
  15%, 98.4%   { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
/* Retour à l'écran d'accueil, et l'icône Chez Lucie s'y pose. */
@keyframes sc-mobile-accueil {
  0%, 14.2%    { opacity: 0; transform: scale(1.06); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  15.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(1.06); }
}
@keyframes sc-mobile-pose {
  0%, 15.6%    { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  16.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.3); }
}
/* L'outil s'ouvre depuis son icône, en plein écran. */
@keyframes sc-mobile-appli {
  0%, 20.3%    { opacity: 0; transform: scale(.2); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  21.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.2); }
}
@keyframes sc-mobile-maison {
  0%, 14.2%    { background: #0A0A0A; }
  14.6%, 20.6% { background: #FFFFFF; }
  21.2%, 100%  { background: #0A0A0A; }
}

/* ═══ LE RÉSEAU TOMBE, LA COMMANDE ATTEND ═════════════════════════════ */
@keyframes sc-mobile-barres {
  0%, 26%      { opacity: 1; }
  26.4%, 57.8% { opacity: .25; }
  58.2%, 100%  { opacity: 1; }
}
@keyframes sc-mobile-toast {
  0%, 26.4%    { opacity: 0; transform: translateY(12px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  27.4%, 66%   { opacity: 1; transform: none; }
  67%, 100%    { opacity: 0; transform: translateY(12px); }
}
@keyframes sc-mobile-t-hors {
  0%, 58.1%    { opacity: 1; }
  58.2%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-mobile-t-retour {
  0%, 58.1%    { opacity: 0; }
  58.2%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-mobile-choix {
  0%, 30.9%    { border-color: #D4D4D4; background: #FFFFFF; color: #0A0A0A; }
  31%, 98.4%   { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { border-color: #D4D4D4; background: #FFFFFF; color: #0A0A0A; }
}
@keyframes sc-mobile-bt {
  0%, 35.7%    { transform: none; }
  36%          { transform: scale(.97); }
  36.4%, 100%  { transform: none; }
}
@keyframes sc-mobile-neuve {
  0%, 36.4%    { opacity: 0; transform: translateY(-8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(-8px); }
}
@keyframes sc-mobile-avant {
  0%, 36.4%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37.4%, 98.4% { transform: translateY(48px); }
  99.9%, 100%  { transform: none; }
}

/* ═══ LE SIGNAL REVIENT : ELLE PART, ELLE ARRIVE AU COMPTOIR ══════════ */
@keyframes sc-mobile-h1 {
  0%, 57.9%    { opacity: 1; }
  58%, 98.4%   { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-mobile-h2 {
  0%, 57.9%    { opacity: 0; }
  58%, 98.4%   { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-mobile-attente {
  0%, 58.3%    { opacity: 1; }
  58.4%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-mobile-envoyee {
  0%, 58.3%    { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  59%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.8); }
}
@keyframes sc-mobile-arrivee {
  0%, 59%      { opacity: 0; transform: translateY(-10px); background: #F0F6FC; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  60%          { opacity: 1; transform: none; background: #F0F6FC; }
  63.5%, 98.4% { opacity: 1; transform: none; background: #FFFFFF; }
  99.9%, 100%  { opacity: 0; transform: translateY(-10px); background: #F0F6FC; }
}
@keyframes sc-mobile-descend {
  0%, 59%      { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  60%, 98.4%   { transform: translateY(44px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-mobile-sort {
  0%, 59%      { opacity: 1; }
  59.6%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}

/* Moins de mouvement : l'état d'arrivée. L'outil ouvert, la commande
   envoyée, et arrivée au comptoir. */
@media (prefers-reduced-motion: reduce) {
  .sc-mobile-appli, .sc-mobile-accueil, .sc-mobile-app--cl, .sc-mobile-h2, .sc-mobile-o-ligne--neuve,
  .sc-mobile-tag--envoyee, .sc-mobile-tr--neuve, .sc-mobile-o-puce--choix { opacity: 1; }
  .sc-mobile-safari, .sc-mobile-h1, .sc-mobile-tag--attente, .sc-mobile-lignes .sc-mobile-tr:last-child { opacity: 0; }
  .sc-mobile-appli { transform: none; }
  .sc-mobile-o-ligne--avant { transform: translateY(48px); }
  .sc-mobile-lignes { transform: translateY(44px); }
  .sc-mobile-o-puce--choix { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
}