/* Scène « rôles et droits », refaite le 24 septembre au format validé par
   Théo : Chrome avec le back-office de Lucie, puis glissement vers l'iPhone
   de Benjamin, en grand. 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 :
      8 %  Lucie ouvre le plan de salle à Benjamin
     13 %  puis les allergènes ; la recette et la paie restent fermées
   18,4 %  elle choisit « Tout le week-end » : se referme dimanche à 2 h
     24 %  elle enregistre ; « Droits de Benjamin enregistrés »
     30 %  glissement vers l'iPhone de Benjamin (jusqu'à 35,5 %)
     35 %  ses quatre tuiles arrivent : deux ouvertes, deux fermées
   45,8 %  il tente la recette : la tuile tremble, l'écran lui est fermé
   59,8 %  il ouvre les allergènes : la fiche du soir monte
   63,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 (le téléphone attend hors champ
   à droite). Chrome : 520 x 570 en (0, 0), 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)) :
       interrupteur 1     vue (477, 149) → toile (478, 214) → (474, 212)
       interrupteur 2     vue (477, 193) → toile (478, 258) → (474, 256)
       « Tout le week-end » vue (293, 354) → toile (294, 419) → (290, 417)
       « Enregistrer »    vue (324, 423) → toile (325, 488) → (321, 486)
     doigt de Benjamin (centre, moins 11) :
       la recette         écran (57, 310)  → toile (197, 379) → (186, 368)
       les allergènes     écran (163, 194) → toile (322, 242) → (311, 231) */
.fn-scene--roles {
  overflow: hidden;
  --sc-haut: 612px;
  --line: #E5E5E5; --line-chrome: #E3E6EA; --line-b: #EDEDED;
  line-height: 1.35;
}
.fn-scene--roles svg { display: block; }
.fn-scene--roles i { font-style: normal; }

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

/* Le back-office de Chez Lucie : même dessin que dans la scène du
   back-office, écrit assez gros pour la scène réduite. */
.sc-roles-b-barre { top: 0; left: 0; right: 0; height: 40px; border-bottom: 1px solid var(--line-b); }
.sc-roles-b-barre > * { position: absolute; }
.sc-roles-b-site { top: 0; left: 16px; display: flex; align-items: center; gap: 8px; height: 40px; font-size: 0.6875rem; font-weight: 800; }
.sc-roles-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-roles-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-roles-b-voir svg { width: 9px; height: 9px; }
.sc-roles-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-roles-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-roles-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-roles-b-m svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.sc-roles-b-m--actif { background: #0A0A0A; color: #FFFFFF; }

/* La fiche de Benjamin. */
.sc-roles-y-ava { top: 52px; left: 140px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #EDEDED; color: #525252; font-size: 1rem; font-weight: 700; }
.sc-roles-y-nom { top: 54px; left: 192px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 20px; }
.sc-roles-y-role { top: 76px; left: 192px; font-size: 0.625rem; line-height: 13px; color: #737373; }
.sc-roles-h { left: 140px; font-size: 0.6875rem; font-weight: 700; line-height: 14px; }
.sc-roles-h--droits { top: 108px; }
.sc-roles-h--duree { top: 318px; }

/* Les quatre écrans de l'outil, un interrupteur chacun. */
.sc-roles-liste { top: 126px; left: 140px; width: 368px; height: 178px; border: 1px solid var(--line); border-radius: 12px; }
.sc-roles-d { position: absolute; left: 0; right: 0; height: 44px; }
.sc-roles-d--1 { top: 0; }
.sc-roles-d--2 { top: 44px; }
.sc-roles-d--3 { top: 88px; }
.sc-roles-d--4 { top: 132px; }
.sc-roles-d--2::before,
.sc-roles-d--3::before,
.sc-roles-d--4::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; border-top: 1px dashed var(--line); }
.sc-roles-d > * { position: absolute; }
.sc-roles-d-ico { top: 14px; left: 14px; color: #525252; }
.sc-roles-d-ico svg { width: 16px; height: 16px; }
.sc-roles-d b { top: 7px; left: 42px; font-size: 0.6875rem; font-weight: 600; line-height: 15px; white-space: nowrap; }
.sc-roles-d > span { top: 24px; left: 42px; font-size: 0.59375rem; line-height: 13px; color: #737373; white-space: nowrap; }
.sc-roles-inter { top: 12px; right: 14px; width: 34px; height: 20px; border-radius: 10px; background: #D4D4D4; }
.sc-roles-pouce { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }

/* La durée de l'accès. */
.sc-roles-p {
  top: 338px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}
.sc-roles-p--1 { left: 140px; width: 80px; }
.sc-roles-p--2 { left: 228px; width: 130px; }
.sc-roles-p--3 { left: 366px; width: 100px; }
.sc-roles-note { top: 380px; left: 140px; display: flex; align-items: center; gap: 5px; font-size: 0.625rem; line-height: 13px; white-space: nowrap; }
.sc-roles-note svg { width: 13px; height: 13px; }
.sc-roles-note--a { color: #737373; }
.sc-roles-note--b { color: #2B5DD9; font-weight: 600; opacity: 0; }
.sc-roles-bouton {
  top: 404px; left: 140px; width: 368px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px; background: #D4D4D4; color: #FFFFFF;
  font-size: 0.71875rem; font-weight: 700;
}
.sc-roles-toast {
  top: 452px; right: 10px; height: 32px; padding: 0 14px;
  display: flex; align-items: center; gap: 7px;
  border-radius: 9px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
  opacity: 0;
}
.sc-roles-toast svg { width: 13px; height: 13px; }

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

/* L'outil de Chez Lucie, installé en appli. */
.sc-roles-app { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.sc-roles-app > span,
.sc-roles-app > b { position: absolute; }
.sc-roles-a-tete { top: 0; left: 0; right: 0; height: 40px; }
.sc-roles-a-tete > * { position: absolute; }
.sc-roles-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-roles-a-tete b { top: 12px; left: 42px; font-size: 0.6875rem; font-weight: 800; line-height: 16px; }
.sc-roles-a-tete .sc-roles-a-ava { top: 9px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E5E5E5; color: #525252; font-size: 0.625rem; font-weight: 700; }
.sc-roles-a-bonsoir { top: 48px; left: 12px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 20px; }
.sc-roles-a-acces {
  top: 74px; left: 12px; height: 24px; padding: 0 10px;
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF;
  font-size: 0.59375rem; font-weight: 600; white-space: nowrap;
}
.sc-roles-a-acces svg { width: 12px; height: 12px; color: #3F7BFF; }

/* Les quatre tuiles : deux ouvertes, deux fermées. */
.sc-roles-t { width: 98px; height: 108px; border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; opacity: 0; }
.sc-roles-t--1 { top: 110px; left: 8px; }
.sc-roles-t--2 { top: 110px; left: 114px; }
.sc-roles-t--3 { top: 226px; left: 8px; }
.sc-roles-t--4 { top: 226px; left: 114px; }
.sc-roles-t > * { position: absolute; left: 10px; }
.sc-roles-t-titre { top: 10px; right: 6px; display: flex; align-items: center; gap: 4px; font-size: 0.625rem; font-weight: 700; line-height: 13px; white-space: nowrap; }
.sc-roles-t-titre svg { width: 12px; height: 12px; flex: none; }
.sc-roles-t-val { top: 36px; font-size: 0.9375rem; font-weight: 800; letter-spacing: -.01em; line-height: 18px; white-space: nowrap; }
.sc-roles-t-dit { top: 62px; right: 8px; font-size: 0.5625rem; line-height: 12px; color: #737373; }
.sc-roles-t-dit--neuf { color: #2B5DD9; font-weight: 600; }
.sc-roles-t--ferme { border-color: #EDEDED; background: #F5F5F5; }
.sc-roles-t--ferme .sc-roles-t-titre { color: #A3A3A3; }
.sc-roles-t-cadenas { top: 34px; color: #A3A3A3; }
.sc-roles-t-cadenas svg { width: 22px; height: 22px; }
.sc-roles-a-toast {
  top: 344px; left: 12px; right: 12px; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
  opacity: 0;
}
.sc-roles-a-toast svg { width: 13px; height: 13px; }

/* La fiche des allergènes : un voile neutre, et la feuille qui monte. */
.sc-roles-app > .sc-roles-voile { inset: 0; z-index: 4; background: rgba(10, 10, 10, .28); opacity: 0; }
.sc-roles-feuille {
  left: -1px; right: -1px; bottom: 0; z-index: 5; height: 216px;
  border-radius: 18px 18px 0 0; background: #FFFFFF;
  transform: translateY(100%);
}
.sc-roles-feuille > * { position: absolute; }
.sc-roles-f-poignee { top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #D4D4D4; }
.sc-roles-f-titre { top: 24px; left: 16px; font-size: 0.875rem; font-weight: 800; line-height: 18px; }
.sc-roles-f-l { left: 14px; right: 14px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #FAFAFA; }
.sc-roles-f-l--1 { top: 56px; }
.sc-roles-f-l--2 { top: 104px; }
.sc-roles-f-l > * { position: absolute; white-space: nowrap; }
.sc-roles-f-l b { top: 6px; left: 12px; font-size: 0.6875rem; font-weight: 800; line-height: 15px; }
.sc-roles-f-l span { top: 22px; left: 12px; font-size: 0.5625rem; line-height: 12px; color: #737373; }
.sc-roles-f-l i { top: 11px; right: 10px; height: 20px; padding: 0 8px; display: grid; place-items: center; border-radius: 7px; background: #FEF3F2; color: #B42318; font-size: 0.5625rem; font-weight: 700; }
.sc-roles-f-note { top: 158px; left: 16px; right: 16px; font-size: 0.59375rem; line-height: 13px; color: #737373; }

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

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

.sc-roles-chrome     { animation-name: sc-roles-chrome; }
.sc-roles-tel        { animation-name: sc-roles-tel; }
.sc-roles-inter--1   { animation-name: sc-roles-inter-1; }
.sc-roles-pouce--1   { animation-name: sc-roles-pouce-1; }
.sc-roles-inter--2   { animation-name: sc-roles-inter-2; }
.sc-roles-pouce--2   { animation-name: sc-roles-pouce-2; }
.sc-roles-p--2       { animation-name: sc-roles-choix-p; }
.sc-roles-note--a    { animation-name: sc-roles-note-a; }
.sc-roles-note--b    { animation-name: sc-roles-note-b; }
.sc-roles-bouton     { animation-name: sc-roles-bouton; }
.sc-roles-toast      { animation-name: sc-roles-toast; }
.sc-roles-t--1       { animation-name: sc-roles-t-1; }
.sc-roles-t--2       { animation-name: sc-roles-t-2, sc-roles-appui; }
.sc-roles-t--3       { animation-name: sc-roles-t-3, sc-roles-tremble; }
.sc-roles-t--4       { animation-name: sc-roles-t-4; }
.sc-roles-a-toast    { animation-name: sc-roles-a-toast; }
.sc-roles-doigt      { animation-name: sc-roles-doigt; }
.sc-roles-voile      { animation-name: sc-roles-voile; }
.sc-roles-feuille    { animation-name: sc-roles-feuille; }

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

/* ═══ 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-roles-chrome {
  0%, 30%      { transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  35.5%, 98.4% { transform: translateX(-560px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-roles-tel {
  0%, 30%      { transform: translate(686px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  35.5%, 98.4% { transform: translate(123px, 6px) scale(1.18); }
  99.9%, 100%  { transform: translate(686px, 6px) scale(1.18); }
}

/* 1. LUCIE OUVRE DEUX ÉCRANS : l'interrupteur passe au noir, son pouce
   glisse à la courbe d'iOS, au relâché du clic. */
@keyframes sc-roles-inter-1 { 0%, 8.2% { background: #D4D4D4; } 9%, 98.4% { background: #0A0A0A; } 99.9%, 100% { background: #D4D4D4; } }
@keyframes sc-roles-pouce-1 {
  0%, 8.2%     { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  9.4%, 98.4%  { transform: translateX(14px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-roles-inter-2 { 0%, 13.2% { background: #D4D4D4; } 14%, 98.4% { background: #0A0A0A; } 99.9%, 100% { background: #D4D4D4; } }
@keyframes sc-roles-pouce-2 {
  0%, 13.2%    { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  14.4%, 98.4% { transform: translateX(14px); }
  99.9%, 100%  { transform: none; }
}
/* La durée : « Tout le week-end » passe au noir, et la phrase dessous se
   précise (l'ancienne sort, puis la nouvelle entre). */
@keyframes sc-roles-choix-p {
  0%, 18.6%    { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  19.4%, 98.4% { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
}
@keyframes sc-roles-note-a { 0%, 18.8% { opacity: 1; } 19.3%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-roles-note-b { 0%, 19.3% { opacity: 0; } 20.1%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
/* Le bouton : gris tant que rien n'a changé, noir dès le premier droit, et
   il s'enfonce sous le clic ; puis le bandeau de confirmation. */
@keyframes sc-roles-bouton {
  0%, 8.6%     { background: #D4D4D4; transform: none; }
  9.4%, 23.8%  { background: #0A0A0A; transform: none; }
  24.2%        { background: #26272E; transform: scale(.98); }
  25%, 98.4%   { background: #0A0A0A; transform: none; }
  99.9%, 100%  { background: #D4D4D4; transform: none; }
}
@keyframes sc-roles-toast {
  0%, 24.6%    { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  25.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); }
}

/* 2. LES TUILES DE YANIS arrivent l'une après l'autre, à l'atterrissage
   du téléphone. */
@keyframes sc-roles-t-1 { 0%, 35%   { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 36.4%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes sc-roles-t-2 { 0%, 35.4% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 36.8%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes sc-roles-t-3 { 0%, 35.8% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 37.2%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes sc-roles-t-4 { 0%, 36.2% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 37.6%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(8px); } }

/* 3. LE DOIGT DE YANIS : la recette (fermée), puis les allergènes. */
@keyframes sc-roles-doigt {
  0%, 44%      { transform: translate(186px, 368px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  45%          { transform: translate(186px, 368px); opacity: 1; }
  45.8%        { transform: translate(186px, 368px) scale(.8); opacity: 1; }
  46.6%        { transform: translate(186px, 368px); opacity: 1; }
  47.8%        { transform: translate(186px, 368px) scale(1.1); opacity: 0; }
  58%          { transform: translate(311px, 231px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  59%          { transform: translate(311px, 231px); opacity: 1; }
  59.8%        { transform: translate(311px, 231px) scale(.8); opacity: 1; }
  60.6%        { transform: translate(311px, 231px); opacity: 1; }
  61.8%, 100%  { transform: translate(311px, 231px) scale(1.1); opacity: 0; }
}
/* La recette tremble au relâché (propriété translate, distincte de la
   transform qui la fait entrer) ; le bandeau dit pourquoi. */
@keyframes sc-roles-tremble {
  0%, 46.6%    { translate: 0 0; }
  47%          { translate: -4px 0; }
  47.4%        { translate: 4px 0; }
  47.8%        { translate: -3px 0; }
  48.2%        { translate: 2px 0; }
  48.6%, 100%  { translate: 0 0; }
}
@keyframes sc-roles-a-toast {
  0%, 47%      { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  48.2%, 54.6% { opacity: 1; transform: none; }
  55.6%, 100%  { opacity: 0; transform: none; }
}
/* Les allergènes s'enfoncent sous le doigt (propriété scale), puis la
   fiche monte. */
@keyframes sc-roles-appui { 0%, 59.8% { scale: 1; } 60.2% { scale: .97; } 60.8%, 100% { scale: 1; } }
@keyframes sc-roles-voile { 0%, 60.6% { opacity: 0; } 62%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-roles-feuille {
  0%, 60.6%    { transform: translateY(100%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  63.4%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateY(100%); }
}

/* La légende : l'ancienne sort, puis la nouvelle entre. */
@keyframes sc-roles-leg-a { 0%, 18.6% { opacity: 1; } 19.2%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-roles-leg-b { 0%, 19.2% { opacity: 0; } 20%, 31.6% { opacity: 1; } 32.2%, 100% { opacity: 0; } }
@keyframes sc-roles-leg-c { 0%, 32.2% { opacity: 0; } 33%, 46.2% { opacity: 1; } 46.8%, 100% { opacity: 0; } }
@keyframes sc-roles-leg-d { 0%, 46.8% { opacity: 0; } 47.6%, 60.4% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes sc-roles-leg-e { 0%, 61% { opacity: 0; } 61.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR : celui de Lucie, dans Chrome. Quatre clics, puis il s'en va
   avant le glissement. */
@keyframes sc-cur-roles {
  0%, 4.4%     { transform: translate(330px, 560px); opacity: 0; }
  5.2%         { transform: translate(380px, 470px); opacity: 1; }
  7.2%         { transform: translate(474px, 212px); opacity: 1; }
  8%           { transform: translate(474px, 212px) scale(.84); opacity: 1; }
  8.4%, 10%    { transform: translate(474px, 212px); opacity: 1; }
  12.2%        { transform: translate(474px, 256px); opacity: 1; }
  13%          { transform: translate(474px, 256px) scale(.84); opacity: 1; }
  13.4%, 15%   { transform: translate(474px, 256px); opacity: 1; }
  17.6%        { transform: translate(290px, 417px); opacity: 1; }
  18.4%        { transform: translate(290px, 417px) scale(.84); opacity: 1; }
  18.8%, 20.6% { transform: translate(290px, 417px); opacity: 1; }
  23.2%        { transform: translate(321px, 486px); opacity: 1; }
  24%          { transform: translate(321px, 486px) scale(.84); opacity: 1; }
  24.4%, 25.2% { transform: translate(321px, 486px); opacity: 1; }
  26.8%, 98.4% { transform: translate(420px, 560px); opacity: 0; }
  99.9%, 100%  { transform: translate(330px, 560px); opacity: 0; }
}
@keyframes sc-roles-onde {
  0%, 7.9%     { transform: scale(.4); opacity: 0; }
  8%           { transform: scale(.4); opacity: .9; }
  9.6%         { transform: scale(2.2); opacity: 0; }
  12.9%        { transform: scale(.4); opacity: 0; }
  13%          { transform: scale(.4); opacity: .9; }
  14.6%        { transform: scale(2.2); opacity: 0; }
  18.3%        { transform: scale(.4); opacity: 0; }
  18.4%        { transform: scale(.4); opacity: .9; }
  20%          { transform: scale(2.2); opacity: 0; }
  23.9%        { transform: scale(.4); opacity: 0; }
  24%          { transform: scale(.4); opacity: .9; }
  25.6%        { transform: scale(2.2); opacity: 0; }
  25.8%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, l'iPhone de Benjamin avec la fiche
   des allergènes ouverte. */
@media (prefers-reduced-motion: reduce) {
  .sc-roles-chrome { transform: translateX(-560px); }
  .sc-roles-tel { transform: translate(123px, 6px) scale(1.18); }
  .sc-roles-t,
  .sc-roles-voile,
  .sc-roles-leg--e { opacity: 1; transform: none; }
  .sc-roles-feuille { transform: none; }
  .sc-roles-leg--a { opacity: 0; }
}