/* Scène « notifications », refaite le 24 septembre au format validé par
   Théo : Chrome chez Marc, qui commande à emporter sur le site de Chez
   Lucie ; glissement vers l'iPhone de Lucie, écran éteint, qui s'allume et
   vibre sur l'alerte ; elle la touche, la commande s'ouvre, elle l'accepte ;
   une réservation suit en bannière. 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 :
    4,3 %  clic sur « + » : deux douzaines, 32,00 €
    7,9 %  clic sur le retrait de 19 h 15
   11,5 %  clic sur « Valider et régler » ; « Reçue à 18 h 30 »
   20,5 %  glissement vers l'iPhone de Lucie, écran noir (jusqu'à 26 %)
   28,2 %  l'écran s'allume, l'alerte monte, le téléphone vibre
   36,2 %  Lucie touche l'alerte ; le cadenas s'ouvre, la commande s'ouvre
   47,2 %  elle touche « Accepter la commande »
   52,6 %  une réservation tombe en bannière (jusqu'à 54,2 %)
   54,4 %  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 Marc (pointe, moins (4, 2)) :
       « + »                vue (286, 168) → toile (287, 233) → (283, 231)
       « 19 h 15 »          vue (460, 221) → toile (461, 286) → (457, 284)
       « Valider »          vue (408, 341) → toile (409, 406) → (405, 404)
     doigt de Lucie (centre, moins 11) :
       l'alerte             écran (110, 360) → toile (260, 438) → (249, 427)
       « Accepter »         écran (110, 376) → toile (260, 457) → (249, 446) */
.fn-scene--notifs {
  overflow: hidden;
  --sc-haut: 612px;
  --line: #E5E5E5; --line-ios: #D1D1D6; --line-chrome: #E3E6EA; --line-b: #EDEDED;
  line-height: 1.35;
}
.fn-scene--notifs svg { display: block; }
.fn-scene--notifs i { font-style: normal; }
.sc-notifs-pile { display: inline-grid; }
.sc-notifs-pile > * { grid-area: 1 / 1; }

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

/* Le site de Chez Lucie, page « À emporter ». */
.sc-notifs-s-tete { top: 0; left: 0; right: 0; height: 46px; border-bottom: 1px solid var(--line-b); }
.sc-notifs-s-tete > * { position: absolute; top: 0; height: 46px; display: flex; align-items: center; }
.sc-notifs-s-marque { left: 20px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-notifs-s-nav { right: 20px; gap: 18px; font-size: 0.625rem; color: #525252; }
.sc-notifs-s-actif { color: #0A0A0A; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.sc-notifs-s-bandeau { top: 47px; left: 0; right: 0; height: 58px; overflow: hidden; }
.sc-notifs-s-bandeau > * { position: absolute; }
.sc-notifs-s-bandeau img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 58%; }
.sc-notifs-s-voile { inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .62), rgba(10, 10, 10, .12) 70%); }
.sc-notifs-s-titre { top: 11px; left: 20px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; line-height: 22px; color: #FFFFFF; }
.sc-notifs-s-sous { top: 35px; left: 20px; font-size: 0.625rem; line-height: 13px; color: rgba(255, 255, 255, .9); }

.sc-notifs-p { left: 20px; width: 280px; height: 76px; white-space: nowrap; }
.sc-notifs-p > * { position: absolute; }
.sc-notifs-p--1 { top: 114px; }
.sc-notifs-p--2 { top: 196px; height: 78px; border-top: 1px dashed var(--line); }
.sc-notifs-p img { top: 6px; left: 0; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.sc-notifs-p b { top: 8px; left: 76px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; }
.sc-notifs-p-dit { top: 25px; left: 76px; font-size: 0.625rem; line-height: 13px; color: #737373; }
.sc-notifs-p-prix { top: 46px; left: 76px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; }
.sc-notifs-pas {
  top: 40px; right: 0; width: 92px; height: 28px;
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: #FFFFFF;
}
.sc-notifs-pas > i { display: grid; place-items: center; flex: none; width: 28px; height: 26px; border-radius: 8px; color: #404040; }
.sc-notifs-pas > i svg { width: 12px; height: 12px; stroke-width: 1.6; }
.sc-notifs-qte { flex: 1; height: 26px; overflow: hidden; text-align: center; font-size: 0.75rem; font-weight: 800; }
.sc-notifs-reel { display: flex; flex-direction: column; }
.sc-notifs-reel span { display: block; height: 26px; line-height: 26px; }
.sc-notifs-ajout { top: 40px; right: 0; height: 28px; padding: 0 14px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; font-size: 0.625rem; font-weight: 600; }

/* Le panier, à droite. */
.sc-notifs-panier { top: 114px; left: 316px; width: 184px; height: 294px; border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; }
.sc-notifs-panier > * { position: absolute; left: 14px; right: 14px; white-space: nowrap; }
.sc-notifs-pa-titre { top: 14px; font-size: 0.75rem; font-weight: 800; line-height: 16px; }
.sc-notifs-panier > .sc-notifs-pa-l { top: 40px; height: 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--line); font-size: 0.625rem; }
.sc-notifs-pa-l b { font-weight: 700; justify-items: end; }
.sc-notifs-x--2 { opacity: 0; }
.sc-notifs-pa-lab { top: 76px; font-size: 0.625rem; font-weight: 600; line-height: 13px; color: #525252; }
.sc-notifs-panier > .sc-notifs-h {
  top: 94px; right: auto; width: 48px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background-color: #FFFFFF; color: #0A0A0A;
  font-size: 0.625rem; font-weight: 600;
}
.sc-notifs-panier > .sc-notifs-h--1 { left: 14px; }
.sc-notifs-panier > .sc-notifs-h--2 { left: 67px; }
.sc-notifs-panier > .sc-notifs-h--3 { left: 120px; }
.sc-notifs-pa-lab--nom { top: 132px; }
.sc-notifs-pa-nom { top: 148px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; }
.sc-notifs-panier > .sc-notifs-pa-total { top: 172px; height: 28px; display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line); border-radius: 6px; font-size: 0.6875rem; font-weight: 700; }
.sc-notifs-pa-total b { font-size: 0.8125rem; font-weight: 800; justify-items: end; }
.sc-notifs-panier > .sc-notifs-valider {
  top: 208px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700;
}
.sc-notifs-vb { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; }
.sc-notifs-vb svg { width: 13px; height: 13px; stroke-width: 2; }
.sc-notifs-panier > .sc-notifs-pa-recu { top: 254px; font-size: 0.625rem; font-weight: 600; line-height: 14px; color: #15803D; white-space: normal; }

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

/* L'écran verrouillé. */
.sc-notifs-verrou { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 30px; color: #FFFFFF; }
.sc-notifs-verrou > * { position: absolute; }
.sc-notifs-verrou > .sc-notifs-fond { top: 0; left: 0; width: 220px; height: 472px; object-fit: cover; object-position: 30% 50%; }
.sc-notifs-v-ombre { inset: 0; background: linear-gradient(rgba(10, 10, 10, .5), rgba(10, 10, 10, .12) 42%, rgba(10, 10, 10, .06) 60%, rgba(10, 10, 10, .45)); }
.sc-notifs-cadenas { top: 36px; left: 103px; display: grid; width: 14px; height: 14px; }
.sc-notifs-cad { grid-area: 1 / 1; }
.sc-notifs-cad svg { width: 14px; height: 14px; stroke-width: 1.6; }
.sc-notifs-cad--o { opacity: 0; }
.sc-notifs-v-date { top: 56px; left: 0; right: 0; text-align: center; font-size: 0.6875rem; font-weight: 600; line-height: 14px; }
.sc-notifs-v-heure { top: 70px; left: 0; right: 0; text-align: center; font-size: 4rem; font-weight: 700; letter-spacing: -.03em; line-height: 68px; }
.sc-notifs-alerte,
.sc-notifs-banniere {
  left: 8px; right: 8px; height: 76px;
  border-radius: 18px; background: rgba(246, 246, 248, .84); color: #0A0A0A;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.sc-notifs-alerte { top: 322px; transform-origin: 50% 50%; }
.sc-notifs-alerte > *,
.sc-notifs-banniere > * { position: absolute; white-space: nowrap; }
.sc-notifs-al-app { top: 12px; left: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #0A0A0A; color: #FFFFFF; font-size: 0.75rem; font-weight: 800; line-height: 1; }
.sc-notifs-al-de { top: 10px; left: 48px; font-size: 0.625rem; font-weight: 700; line-height: 13px; }
.sc-notifs-al-quand { top: 10px; right: 12px; font-size: 0.5625rem; line-height: 13px; color: #6E6E73; }
.sc-notifs-al-titre { top: 24px; left: 48px; font-size: 0.65625rem; font-weight: 600; line-height: 14px; }
.sc-notifs-al-corps { top: 39px; left: 48px; right: 12px; font-size: 0.625rem; line-height: 13px; color: #3A3A3C; white-space: normal; }
.sc-notifs-v-rond { top: 414px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(10, 10, 10, .38); color: #FFFFFF; }
.sc-notifs-v-rond--g { left: 22px; }
.sc-notifs-v-rond--d { right: 22px; }
.sc-notifs-v-rond svg { width: 17px; height: 17px; }

/* L'outil de Lucie, ouvert sur la commande. */
.sc-notifs-app { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 30px; background: #F2F2F0; color: #0A0A0A; opacity: 0; transform-origin: 110px 360px; }
.sc-notifs-app > span,
.sc-notifs-app > b { position: absolute; }
.sc-notifs-a-tete { top: 30px; left: 0; right: 0; height: 40px; }
.sc-notifs-a-tete > * { position: absolute; }
.sc-notifs-a-tete > i:first-child { top: 9px; left: 12px; 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-notifs-a-tete b { top: 12px; left: 42px; font-size: 0.6875rem; font-weight: 800; line-height: 16px; }
.sc-notifs-a-tete .sc-notifs-a-gestion { top: 12px; left: 110px; height: 16px; padding: 0 6px; border-radius: 5px; background: #E3E3E0; color: #525252; font-size: 0.5625rem; font-style: normal; font-weight: 700; line-height: 16px; }
.sc-notifs-a-tete .sc-notifs-a-ava { top: 9px; right: 12px; 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; }
.sc-notifs-a-retour { top: 72px; left: 6px; display: flex; align-items: center; gap: 1px; font-size: 0.625rem; line-height: 16px; color: #2B5DD9; }
.sc-notifs-a-retour svg { width: 12px; height: 12px; stroke-width: 1.8; }
.sc-notifs-a-titre { top: 90px; left: 12px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 20px; }
.sc-notifs-a-etat { top: 90px; right: 10px; justify-items: end; }
.sc-notifs-a-e { display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 7px; font-size: 0.5625rem; font-weight: 700; transform-origin: 100% 50%; }
.sc-notifs-a-e svg { width: 10px; height: 10px; stroke-width: 2; }
.sc-notifs-a-e--1 { background: #EAF1FF; color: #2B5DD9; }
.sc-notifs-a-e--2 { background: #E8F6EE; color: #15803D; opacity: 0; }
.sc-notifs-a-sous { top: 114px; left: 12px; font-size: 0.5625rem; line-height: 12px; color: #737373; }
.sc-notifs-a-infos { top: 134px; left: 10px; right: 10px; height: 92px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.sc-notifs-a-l {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 10px; white-space: nowrap;
  font-size: 0.5625rem; color: #737373;
}
.sc-notifs-a-l + .sc-notifs-a-l { border-top: 1px dashed var(--line); }
.sc-notifs-a-l b { display: flex; align-items: center; gap: 3px; font-size: 0.625rem; font-weight: 700; color: #0A0A0A; }
.sc-notifs-a-l .sc-notifs-a-ok { color: #15803D; }
.sc-notifs-a-ok svg { width: 11px; height: 11px; stroke-width: 2; }
.sc-notifs-a-lab { top: 238px; left: 12px; font-size: 0.5625rem; font-weight: 700; line-height: 12px; color: #525252; }
.sc-notifs-a-art { top: 254px; left: 10px; right: 10px; height: 56px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; white-space: nowrap; }
.sc-notifs-a-art > * { position: absolute; }
.sc-notifs-a-art img { top: 6px; left: 6px; width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.sc-notifs-a-art b { top: 11px; left: 58px; font-size: 0.6875rem; font-weight: 700; line-height: 15px; }
.sc-notifs-a-art span { top: 28px; left: 58px; font-size: 0.5625rem; line-height: 12px; color: #737373; }
.sc-notifs-a-art .sc-notifs-a-art-prix { top: 19px; left: auto; right: 10px; }
.sc-notifs-app > .sc-notifs-a-total { top: 316px; left: 10px; right: 10px; height: 30px; display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line); font-size: 0.6875rem; font-weight: 700; }
.sc-notifs-a-total b { font-size: 0.8125rem; font-weight: 800; }
.sc-notifs-a-bouton {
  top: 356px; left: 10px; right: 10px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700;
}
.sc-notifs-ab { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-notifs-ab svg { width: 13px; height: 13px; stroke-width: 2; }
.sc-notifs-ab--2 { opacity: 0; }

/* La barre d'onglets du logiciel, en bas, comme dans une application. */
.sc-notifs-app > .sc-notifs-onglets {
  left: 0; right: 0; bottom: 0; z-index: 3; height: 52px; padding-top: 7px;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  border-top: 1px solid var(--line-ios); background: #FFFFFF;
}
.sc-notifs-og { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.53125rem; font-weight: 600; line-height: 1; color: #8A8A8A; }
.sc-notifs-og svg { width: 17px; height: 17px; }
.sc-notifs-og--actif { color: #0A0A0A; }
/* Plus haute et plus large que l'alerte de l'écran verrouillé : son angle
   arrondi recouvre le carré « L » de l'en-tête, et son bas la pastille d'état,
   au lieu de les laisser dépasser. */
.sc-notifs-app > .sc-notifs-banniere { top: 32px; left: 6px; right: 6px; height: 80px; z-index: 5; background: #F7F7F9; box-shadow: 0 8px 24px rgba(31, 36, 46, .18); transform: translateY(-120px); }

/* L'écran éteint, noir, avant l'alerte. */
.sc-notifs-nuit { position: absolute; inset: 0; z-index: 8; border-radius: 30px; background: #000000; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-notifs-legende { position: absolute; top: 584px; left: 14px; right: 14px; z-index: 2; display: grid; height: 26px; margin: 0; }
.sc-notifs-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-notifs-leg--a { opacity: 1; }
.sc-notifs-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-notifs-leg i svg { width: 13px; height: 13px; }
.sc-notifs-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-notifs-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-notifs-vb--2,
.sc-notifs-pa-recu,
.sc-notifs-alerte { opacity: 0; }

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

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

.sc-notifs-chrome    { animation-name: sc-notifs-chrome; }
.sc-notifs-tel       { animation-name: sc-notifs-tel, sc-notifs-vibre; }
.sc-notifs-doigt     { animation-name: sc-notifs-doigt; }

.sc-notifs-pas-plus  { animation-name: sc-notifs-appui-plus; }
.sc-notifs-reel      { animation-name: sc-notifs-roule; }
.sc-notifs-x--1      { animation-name: sc-notifs-x1; }
.sc-notifs-x--2      { animation-name: sc-notifs-x2; }
.sc-notifs-panier > .sc-notifs-pa-total { animation-name: sc-notifs-eclaire; }
.sc-notifs-panier > .sc-notifs-h--1 { animation-name: sc-notifs-h1; }
.sc-notifs-panier > .sc-notifs-h--3 { animation-name: sc-notifs-h3; }
.sc-notifs-panier > .sc-notifs-valider { animation-name: sc-notifs-valider; }
.sc-notifs-vb--1     { animation-name: sc-notifs-vb1; }
.sc-notifs-vb--2     { animation-name: sc-notifs-vb2; }
.sc-notifs-panier > .sc-notifs-pa-recu { animation-name: sc-notifs-recu; }

.sc-notifs-nuit      { animation-name: sc-notifs-nuit; }
.sc-notifs-alerte    { animation-name: sc-notifs-alerte, sc-notifs-alerte-appui; }
.sc-notifs-cad--f    { animation-name: sc-notifs-cad-f; }
.sc-notifs-cad--o    { animation-name: sc-notifs-cad-o; }
.sc-notifs-verrou    { animation-name: sc-notifs-verrou; }
.sc-notifs-app       { animation-name: sc-notifs-app; }
.sc-notifs-a-bouton  { animation-name: sc-notifs-a-bouton; }
.sc-notifs-ab--1     { animation-name: sc-notifs-ab1; }
.sc-notifs-ab--2     { animation-name: sc-notifs-ab2; }
.sc-notifs-a-e--1    { animation-name: sc-notifs-ab1; }
.sc-notifs-a-e--2    { animation-name: sc-notifs-e2; }
.sc-notifs-app > .sc-notifs-banniere { animation-name: sc-notifs-banniere; }

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

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

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

/* 1. MARC COMMANDE. « + » s'enfonce, le chiffre roule de 1 à 2, les prix du
   panier suivent ; il choisit 19 h 15, valide, et la réception s'écrit. */
@keyframes sc-notifs-appui-plus { 0%, 4.2% { background-color: rgba(10, 10, 10, 0); } 4.3%, 4.8% { background-color: #EDEDED; } 5.6%, 100% { background-color: rgba(10, 10, 10, 0); } }
@keyframes sc-notifs-roule {
  0%, 4.8%     { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  6%, 98.4%    { transform: translateY(-26px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-notifs-x1 { 0%, 4.9% { opacity: 1; } 5.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-notifs-x2 { 0%, 5.4% { opacity: 0; } 6.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-notifs-eclaire {
  0%, 5.4%     { background-color: rgba(254, 247, 224, 0); }
  6.2%, 8%     { background-color: #FEF7E0; }
  10.4%, 100%  { background-color: rgba(254, 247, 224, 0); }
}
@keyframes sc-notifs-h1 {
  0%, 8.4%     { background-color: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  9%, 98.4%    { background-color: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  99.9%, 100%  { background-color: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
}
@keyframes sc-notifs-h3 {
  0%, 7.8%     { transform: none; background-color: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  7.9%         { transform: scale(.94); background-color: #F5F5F3; border-color: #E5E5E5; color: #0A0A0A; }
  8.4%         { transform: none; background-color: #F5F5F3; border-color: #E5E5E5; color: #0A0A0A; }
  9%, 98.4%    { transform: none; background-color: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { transform: none; background-color: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
}
@keyframes sc-notifs-valider {
  0%, 11.4%    { transform: none; background-color: #0A0A0A; }
  11.6%        { transform: scale(.97); background-color: #26272E; }
  12.1%        { transform: none; background-color: #26272E; }
  12.9%, 98.4% { transform: none; background-color: #15803D; }
  99.9%, 100%  { transform: none; background-color: #0A0A0A; }
}
@keyframes sc-notifs-vb1 { 0%, 12.1% { opacity: 1; } 12.6%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-notifs-vb2 {
  0%, 12.6%    { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  13.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.92); }
}
@keyframes sc-notifs-recu {
  0%, 13.2%    { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  14.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(4px); }
}

/* 2. L'ÉCRAN S'ALLUME. Le noir s'efface, l'alerte monte en bas de l'écran
   verrouillé, et le téléphone vibre (propriété translate, qui s'ajoute au
   glissement sans le remplacer). */
@keyframes sc-notifs-nuit { 0%, 28.2% { opacity: 1; } 29%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-notifs-alerte {
  0%, 28.4%    { opacity: 0; transform: translateY(14px) scale(.96); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  30%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(14px) scale(.96); }
}
@keyframes sc-notifs-vibre {
  0%, 28.6%    { translate: 0 0; }
  28.9%        { translate: -2.5px 0; }
  29.2%        { translate: 2.5px 0; }
  29.5%        { translate: -2px 0; }
  29.8%        { translate: 1.5px 0; }
  30.1%, 100%  { translate: 0 0; }
}

/* 3. ELLE TOUCHE L'ALERTE. Elle s'enfonce, le cadenas s'ouvre, et l'outil
   grandit depuis l'alerte, comme une application qu'iOS ouvre. */
@keyframes sc-notifs-doigt {
  0%, 34.4%    { transform: translate(249px, 427px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  35.4%        { transform: translate(249px, 427px); opacity: 1; }
  36.2%        { transform: translate(249px, 427px) scale(.8); opacity: 1; }
  37%          { transform: translate(249px, 427px); opacity: 1; }
  38.2%        { transform: translate(249px, 427px) scale(1.1); opacity: 0; }
  45.4%        { transform: translate(249px, 446px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  46.4%        { transform: translate(249px, 446px); opacity: 1; }
  47.2%        { transform: translate(249px, 446px) scale(.8); opacity: 1; }
  48%          { transform: translate(249px, 446px); opacity: 1; }
  49.2%, 100%  { transform: translate(249px, 446px) scale(1.1); opacity: 0; }
}
@keyframes sc-notifs-alerte-appui { 0%, 36.1% { scale: 1; } 36.3% { scale: .97; } 37%, 100% { scale: 1; } }
@keyframes sc-notifs-cad-f { 0%, 37% { opacity: 1; } 37.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-notifs-cad-o { 0%, 37.4% { opacity: 0; } 37.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-notifs-app {
  0%, 37.6%    { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  39.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.3); }
}
@keyframes sc-notifs-verrou { 0%, 38% { opacity: 1; } 39%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }

/* Elle accepte : le bouton s'enfonce, passe au vert au relâché, l'état
   passe à « Acceptée ». Puis la réservation tombe en bannière. */
@keyframes sc-notifs-a-bouton {
  0%, 47.1%    { transform: none; background-color: #0A0A0A; }
  47.3%        { transform: scale(.97); background-color: #26272E; }
  48%          { transform: none; background-color: #26272E; }
  48.8%, 98.4% { transform: none; background-color: #15803D; }
  99.9%, 100%  { transform: none; background-color: #0A0A0A; }
}
@keyframes sc-notifs-ab1 { 0%, 48% { opacity: 1; } 48.5%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-notifs-ab2 {
  0%, 48.5%    { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  49.3%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.92); }
}
@keyframes sc-notifs-e2 {
  0%, 48.5%    { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  49.5%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.85); }
}
@keyframes sc-notifs-banniere {
  0%, 52.6%    { transform: translateY(-120px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  54.2%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateY(-120px); }
}

/* La légende : l'ancienne sort, puis la nouvelle entre. */
@keyframes sc-notifs-leg-a { 0%, 26.8% { opacity: 1; } 27.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-notifs-leg-b { 0%, 27.4% { opacity: 0; } 28.2%, 39% { opacity: 1; } 39.6%, 100% { opacity: 0; } }
@keyframes sc-notifs-leg-c { 0%, 39.6% { opacity: 0; } 40.4%, 53% { opacity: 1; } 53.6%, 100% { opacity: 0; } }
@keyframes sc-notifs-leg-d { 0%, 53.6% { opacity: 0; } 54.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR de Marc : « + », le retrait, puis la validation. */
@keyframes sc-cur-notifs {
  0%, 1%       { transform: translate(430px, 560px); opacity: 0; }
  1.8%         { transform: translate(400px, 520px); opacity: 1; }
  3.8%         { transform: translate(283px, 231px); opacity: 1; }
  4.3%         { transform: translate(283px, 231px) scale(.84); opacity: 1; }
  4.8%, 5.4%   { transform: translate(283px, 231px); opacity: 1; }
  7.4%         { transform: translate(457px, 284px); opacity: 1; }
  7.9%         { transform: translate(457px, 284px) scale(.84); opacity: 1; }
  8.4%, 9%     { transform: translate(457px, 284px); opacity: 1; }
  11%          { transform: translate(405px, 404px); opacity: 1; }
  11.5%        { transform: translate(405px, 404px) scale(.84); opacity: 1; }
  12%, 14.4%   { transform: translate(405px, 404px); opacity: 1; }
  16%, 100%    { transform: translate(330px, 560px); opacity: 0; }
}
@keyframes sc-notifs-onde {
  0%, 4.2%     { transform: scale(.4); opacity: 0; }
  4.3%         { transform: scale(.4); opacity: .9; }
  5.9%         { transform: scale(2.2); opacity: 0; }
  6%, 7.8%     { transform: scale(.4); opacity: 0; }
  7.9%         { transform: scale(.4); opacity: .9; }
  9.5%         { transform: scale(2.2); opacity: 0; }
  9.6%, 11.4%  { transform: scale(.4); opacity: 0; }
  11.5%        { transform: scale(.4); opacity: .9; }
  13.1%        { transform: scale(2.2); opacity: 0; }
  13.2%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'arrivée, la commande ouverte et acceptée. */
@media (prefers-reduced-motion: reduce) {
  .sc-notifs-chrome { transform: translateX(-560px); }
  .sc-notifs-tel { transform: translate(123px, 6px) scale(1.18); }
  .sc-notifs-nuit,
  .sc-notifs-verrou,
  .sc-notifs-ab--1,
  .sc-notifs-a-e--1,
  .sc-notifs-leg--a { opacity: 0; }
  .sc-notifs-app,
  .sc-notifs-ab--2,
  .sc-notifs-a-e--2,
  .sc-notifs-leg--d { opacity: 1; transform: none; }
  .sc-notifs-a-bouton { background: #15803D; }
  .sc-notifs-app > .sc-notifs-banniere { transform: none; }
}