/* Scène « surveillance 24 h sur 24 », deuxième version du 24 septembre
   (Théo : « plus gros le tel, ça doit direct être le tel, ensuite le site
   mort, après sur le tel ça répare, ensuite site réparé »). Quatre temps en
   plein cadre, qui glissent comme deux écrans côte à côte : le téléphone,
   le site mort, le téléphone qui répare, le site réparé. Le rideau de fin
   et le curseur viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  19:15, mon iPhone verrouillé, en grand
      4 %  la notification du moniteur glisse et se pose
   10,2 %  le doigt la touche ; au relâché (11,6 %), le moniteur s'ouvre
   22,5 %  glissement vers Chrome (jusqu'à 28 %) ; 19:16
     32 %  un client clique « Réserver » ; la roue ; l'erreur 500 (34,8 %)
   44,5 %  glissement vers le téléphone (jusqu'à 50 %) ; 19:20
   51,2 %  19 h 18, mon intervention s'inscrit
   55,6 %  le doigt touche « Vérifier maintenant » : la roue, puis tout
           passe au vert (58,6 %)
   65,5 %  glissement vers Chrome (jusqu'à 71 %) ; 19:21
   74,8 %  le client clique « Actualiser » ; la page Réserver monte (77 %)
     80 %  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. 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, soit
   274 x 571 ; un point (x, y) de son écran tombe en
   (123 + (6 + x) x 1,18, 6 + (6 + y) x 1,18). La légende, fixe, de 584 à 610.

   LES CIBLES, CALCULÉES :
     curseur (pointe, moins (4, 2)) :
       « Réserver »            vue (465, 20)  → toile (466, 85)  → (462, 83)
       « Actualiser »          vue (407, 251) → toile (408, 316) → (404, 314)
     doigt (centre, moins 10) :
       la notification         écran (110, 276) → toile (260, 339) → (250, 329)
       « Vérifier maintenant » écran (110, 434) → toile (260, 525) → (250, 515) */
/* LA TOILE ROGNE CE QUI LA DÉPASSE. Chrome attend hors champ à droite
   pendant que le téléphone joue, et le téléphone à gauche pendant que Chrome
   joue. Sur une page fonctionnalité, la boîte du kit est plus large que la
   toile : sans ce rognage, un bout de Chrome se voyait à droite (Théo,
   24 septembre : « on voit l'écran à droite, un peu, faut pas »). */
.fn-scene--surveillance {
  overflow: hidden;
  --sc-haut: 612px;
  --line-s: #EDEDED; --line-chrome: #E3E6EA; --line-app: #E5E5E5; --line-leg: #E5E5E5;
  line-height: 1.35;
}
.fn-scene--surveillance svg { display: block; }
.fn-scene--surveillance i { font-style: normal; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-surveillance-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;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
  transform: translateX(560px);
}
.sc-surveillance-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-surveillance-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-surveillance-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-surveillance-c-favi { position: relative; width: 12px; height: 12px; flex: none; }
.sc-surveillance-c-favi i { position: absolute; inset: 0; }
.sc-surveillance-c-logo {
  display: grid; place-items: center;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
/* La roue de chargement de Chrome : un arc bleu à la place de l'icône. */
.sc-surveillance-c-roue {
  border: 1.6px solid transparent; border-top-color: #0B57D0; border-right-color: #0B57D0;
  border-radius: 50%; opacity: 0;
}
.sc-surveillance-c-titres {
  display: grid; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.sc-surveillance-c-titre { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; font-size: 0.59375rem; }
.sc-surveillance-c-titre--2,
.sc-surveillance-c-titre--3 { opacity: 0; }
.sc-surveillance-c-plus { position: absolute; top: 9px; left: 196px; color: #474747; }
.sc-surveillance-c-plus svg { width: 12px; height: 12px; }
.sc-surveillance-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-surveillance-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-surveillance-fen svg { width: 10px; height: 10px; }
.sc-surveillance-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-surveillance-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-surveillance-c-outils > i svg { width: 14px; height: 14px; }
.sc-surveillance-c-off { color: #C4C7C5; }
.sc-surveillance-c-outils > .sc-surveillance-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-surveillance-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-surveillance-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-surveillance-c-url { display: grid; flex: 1; min-width: 0; overflow: hidden; }
.sc-surveillance-c-url-t { grid-area: 1 / 1; overflow: hidden; }
.sc-surveillance-c-url-t--2 { opacity: 0; }
.sc-surveillance-c-chemin { color: #5F6368; }
.sc-surveillance-c-etoile { margin-left: auto; }
.sc-surveillance-c-etoile svg { width: 13px; height: 13px; }
.sc-surveillance-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; }

/* ── Le site de Chez Lucie : l'accueil, l'erreur, la page Réserver ──── */
.sc-surveillance-accueil,
.sc-surveillance-erreur,
.sc-surveillance-reserver { position: absolute; inset: 0; background: #FFFFFF; color: #0A0A0A; }
.sc-surveillance-erreur,
.sc-surveillance-reserver { opacity: 0; }
.sc-surveillance-accueil > span,
.sc-surveillance-erreur > *,
.sc-surveillance-reserver > span { position: absolute; }
.sc-surveillance-s-tete { top: 0; left: 0; right: 0; height: 40px; border-bottom: 1px solid var(--line-s); }
.sc-surveillance-s-tete > * { position: absolute; }
.sc-surveillance-s-tete b { top: 12px; left: 20px; font-size: 0.6875rem; font-weight: 800; letter-spacing: -.01em; line-height: 16px; }
.sc-surveillance-s-nav { top: 14px; left: 272px; display: flex; gap: 14px; font-size: 0.46875rem; font-weight: 500; line-height: 12px; color: #404040; }
.sc-surveillance-s-tete .sc-surveillance-s-resa {
  top: 10px; left: 431px; width: 68px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font-size: 0.46875rem; font-weight: 700;
}
.sc-surveillance-s-bandeau { top: 40px; left: 0; right: 0; height: 190px; overflow: hidden; }
.sc-surveillance-s-bandeau-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.sc-surveillance-s-bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 10, 10, .1) 0, rgba(10, 10, 10, .65) 100%); }
.sc-surveillance-s-bandeau-t { position: absolute; left: 20px; bottom: 18px; z-index: 1; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #FFFFFF; }
.sc-surveillance-s-ardoise { top: 250px; left: 40px; width: 438px; height: 150px; border: 1px solid var(--line-s); border-radius: 14px; }
.sc-surveillance-s-ardoise > span { position: absolute; }
.sc-surveillance-s-ardoise-photo { top: 12px; left: 12px; width: 170px; height: 126px; overflow: hidden; border-radius: 10px; }
.sc-surveillance-s-ardoise-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-surveillance-s-ardoise-dit { top: 30px; left: 198px; font-size: 0.40625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 10px; color: #737373; }
.sc-surveillance-s-ardoise-plat { top: 46px; left: 198px; font-size: 0.875rem; font-weight: 800; letter-spacing: -.01em; line-height: 18px; }
.sc-surveillance-s-ardoise-prix { top: 70px; left: 198px; font-size: 1rem; font-weight: 800; line-height: 20px; }

/* La vraie page d'erreur de Chrome : l'icône du document triste, le titre,
   la phrase, le code, et le bouton bleu « Actualiser ». */
.sc-surveillance-e-ico { top: 70px; left: 70px; width: 48px; height: 48px; }
.sc-surveillance-e-titre { top: 136px; left: 70px; font-size: 1.0625rem; font-weight: 500; line-height: 22px; color: #202124; }
.sc-surveillance-e-texte { top: 168px; left: 70px; width: 380px; font-size: 0.625rem; line-height: 15px; color: #474747; }
.sc-surveillance-e-texte b { font-weight: 700; }
.sc-surveillance-e-code { top: 194px; left: 70px; font-size: 0.53125rem; line-height: 12px; color: #5F6368; }
.sc-surveillance-e-bouton {
  top: 236px; left: 364px; width: 86px; height: 30px;
  display: grid; place-items: center;
  border-radius: 15px; background: #0B57D0; color: #FFFFFF;
  font-size: 0.59375rem; font-weight: 500;
}

/* La page Réserver, qui répond de nouveau. */
.sc-surveillance-r-titre { top: 62px; left: 24px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 24px; }
.sc-surveillance-r-sous { top: 90px; left: 24px; font-size: 0.5625rem; line-height: 12px; color: #737373; }
.sc-surveillance-r-champ { left: 24px; width: 250px; height: 36px; border: 1px solid var(--line-app); border-radius: 10px; }
.sc-surveillance-r-champ--1 { top: 116px; }
.sc-surveillance-r-champ--2 { top: 160px; }
.sc-surveillance-r-champ--3 { top: 204px; }
.sc-surveillance-r-champ > * { position: absolute; }
.sc-surveillance-r-champ i { top: 10px; left: 10px; color: #525252; }
.sc-surveillance-r-champ i svg { width: 14px; height: 14px; }
.sc-surveillance-r-champ span { top: 5px; left: 34px; font-size: 0.40625rem; font-weight: 600; line-height: 10px; color: #737373; }
.sc-surveillance-r-champ b { top: 16px; left: 34px; font-size: 0.59375rem; font-weight: 700; line-height: 14px; white-space: nowrap; }
.sc-surveillance-r-bouton {
  top: 254px; left: 24px; width: 250px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF; font-size: 0.59375rem; font-weight: 700;
}
.sc-surveillance-r-photo { top: 62px; left: 294px; width: 200px; height: 228px; overflow: hidden; border-radius: 14px; }
.sc-surveillance-r-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ═══ MON IPHONE, EN GRAND ════════════════════════════════════════════ */
.sc-surveillance-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);
}
/* Chaque calque plein écran porte son propre arrondi : un calque animé
   échappe au découpage arrondi de l'écran dans Chrome, et un coin carré
   dépassait du téléphone. */
.sc-surveillance-ecran { position: relative; height: 472px; overflow: hidden; border-radius: 30px; background: #FFFFFF; }
.sc-surveillance-ilot { position: absolute; top: 7px; left: 77px; z-index: 9; width: 66px; height: 19px; border-radius: 10px; background: #0A0A0A; }
.sc-surveillance-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: #FFFFFF;
}
.sc-surveillance-statut b { font-weight: 600; }
.sc-surveillance-st { display: grid; }
.sc-surveillance-st-t { grid-area: 1 / 1; }
.sc-surveillance-st-t--2 { opacity: 0; }
.sc-surveillance-statut-d { display: flex; align-items: center; gap: 4px; }
.sc-surveillance-reseau { display: flex; align-items: flex-end; gap: 1px; height: 8px; }
.sc-surveillance-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-surveillance-reseau i:nth-child(1) { height: 3px; }
.sc-surveillance-reseau i:nth-child(2) { height: 4.5px; }
.sc-surveillance-reseau i:nth-child(3) { height: 6px; }
.sc-surveillance-reseau i:nth-child(4) { height: 8px; }
.sc-surveillance-wifi { width: 11px; height: 8px; }
.sc-surveillance-pile { display: block; width: 18px; height: 9px; padding: 1px; border: 1px solid currentColor; border-radius: 3px; opacity: .9; }
.sc-surveillance-pile i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: currentColor; }
.sc-surveillance-maison { position: absolute; bottom: 6px; left: 70px; z-index: 9; width: 80px; height: 3.5px; border-radius: 2px; background: #FFFFFF; }

/* ── L'écran verrouillé ───────────────────────────────────────────── */
.sc-surveillance-verrou { position: absolute; inset: 0; z-index: 1; border-radius: 30px; background: linear-gradient(170deg, #2B4C8C 0%, #16254A 55%, #0B1226 100%); color: #FFFFFF; }
.sc-surveillance-verrou > * { position: absolute; }
.sc-surveillance-v-date { top: 62px; left: 0; right: 0; font-size: 0.6875rem; font-weight: 600; line-height: 14px; text-align: center; opacity: .9; }
.sc-surveillance-v-heure { top: 76px; left: 0; right: 0; font-size: 3.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 60px; text-align: center; }
.sc-surveillance-notif {
  top: 238px; left: 10px; right: 10px; height: 76px;
  border-radius: 18px; background: rgba(246, 246, 248, .94); color: #000000;
  opacity: 0; transform: translateY(20px) scale(.95);
}
.sc-surveillance-notif > * { position: absolute; }
.sc-surveillance-notif img { top: 14px; left: 12px; width: 30px; height: 30px; border-radius: 8px; }
.sc-surveillance-n-app { top: 12px; left: 50px; font-size: 0.4375rem; font-weight: 600; line-height: 10px; color: #3C3C43; }
.sc-surveillance-n-quand { top: 12px; right: 12px; font-size: 0.40625rem; line-height: 10px; color: #6D6D72; }
.sc-surveillance-n-titre { top: 25px; left: 50px; right: 12px; font-size: 0.53125rem; font-weight: 700; line-height: 12px; }
.sc-surveillance-n-corps { top: 39px; left: 50px; right: 12px; font-size: 0.46875rem; line-height: 11px; color: #1C1C1E; }
.sc-surveillance-v-rond {
  bottom: 30px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(0, 0, 0, .35); color: #FFFFFF;
}
.sc-surveillance-v-rond svg { width: 15px; height: 15px; }
.sc-surveillance-v-rond--g { left: 30px; }
.sc-surveillance-v-rond--d { right: 30px; }

/* ── Le moniteur, dans l'appli installée ──────────────────────────── */
.sc-surveillance-app {
  position: absolute; inset: 0; z-index: 2; border-radius: 30px; background: #F6F7F9; color: #0A0A0C;
  opacity: 0; transform: scale(.3); transform-origin: 110px 276px;
}
.sc-surveillance-app > span,
.sc-surveillance-app > b { position: absolute; }
.sc-surveillance-a-retour { top: 36px; left: 8px; display: flex; align-items: center; gap: 1px; font-size: 0.5rem; font-weight: 500; line-height: 12px; color: #3F7BFF; }
.sc-surveillance-a-retour svg { width: 13px; height: 13px; }
.sc-surveillance-a-nom { top: 54px; left: 14px; font-size: 0.875rem; font-weight: 800; letter-spacing: -.01em; line-height: 18px; }
.sc-surveillance-a-url { top: 74px; left: 14px; font-size: 0.4375rem; line-height: 10px; color: #737373; }
.sc-surveillance-a-etat {
  top: 56px; right: 12px; height: 18px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 8px; font-size: 0.4375rem; font-weight: 700; white-space: nowrap;
}
.sc-surveillance-a-etat--ko { background: #FEF2F2; color: #DC2626; }
.sc-surveillance-a-etat--ok { background: #E8F6EE; color: #15803D; opacity: 0; }
.sc-surveillance-a-quand { top: 90px; left: 14px; display: grid; font-size: 0.4375rem; font-weight: 600; line-height: 10px; color: #737373; }
.sc-surveillance-a-q { grid-area: 1 / 1; }
.sc-surveillance-a-q--2 { opacity: 0; }

.sc-surveillance-ligne { left: 10px; right: 10px; height: 50px; border: 1px solid var(--line-app); border-radius: 10px; background: #FFFFFF; }
.sc-surveillance-ligne--1 { top: 106px; }
.sc-surveillance-ligne--2 { top: 162px; }
.sc-surveillance-ligne--3 { top: 218px; }
.sc-surveillance-ligne--4 { top: 274px; }
.sc-surveillance-ligne--5 { top: 330px; }
.sc-surveillance-ligne--vise { border-color: #FECACA; background: #FEF2F2; }
.sc-surveillance-ligne > * { position: absolute; }
.sc-surveillance-l-nom { top: 7px; left: 10px; font-size: 0.53125rem; font-weight: 700; line-height: 12px; white-space: nowrap; }
.sc-surveillance-l-url { top: 19px; left: 10px; font-size: 0.40625rem; line-height: 9px; color: #737373; }
.sc-surveillance-barres { top: 30px; left: 10px; display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sc-surveillance-barre { width: 7px; border-radius: 1.5px; background: #15A34A; }
.sc-surveillance-barre--echec { background: #DC2626; }
.sc-surveillance-barre--derniere { transform: scaleY(0); transform-origin: 50% 100%; }
.sc-surveillance-l-etat { top: 9px; right: 10px; font-size: 0.46875rem; font-weight: 700; line-height: 10px; color: #15803D; white-space: nowrap; }
.sc-surveillance-l-tps { top: 21px; right: 10px; font-size: 0.40625rem; line-height: 9px; color: #737373; white-space: nowrap; }
.sc-surveillance-l-etat--ko { color: #DC2626; }
.sc-surveillance-l-tps--ko { color: #B91C1C; }
.sc-surveillance-l-etat--ok,
.sc-surveillance-l-tps--ok { opacity: 0; }
.sc-surveillance-a-note {
  top: 388px; left: 10px; right: 10px; height: 24px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-app); border-radius: 8px; background: #FFFFFF; color: #0A0A0C;
  font-size: 0.4375rem; font-weight: 600; white-space: nowrap;
  opacity: 0;
}
.sc-surveillance-a-note svg { width: 11px; height: 11px; color: #3F7BFF; }
/* « Vérifier maintenant » : noir, comme les boutons du moniteur ; une roue
   blanche tourne à gauche du mot pendant la vérification. */
.sc-surveillance-a-verifier {
  top: 420px; left: 10px; right: 10px; height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 8px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.5rem; font-weight: 700; white-space: nowrap;
}
.sc-surveillance-a-roue { width: 10px; height: 10px; border: 1.6px solid rgba(255, 255, 255, .3); border-top-color: #FFFFFF; border-radius: 50%; opacity: 0; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-surveillance-legende { position: absolute; top: 584px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; height: 26px; margin: 0; }
.sc-surveillance-horloge {
  display: flex; align-items: center; gap: 5px; flex: none;
  height: 26px; padding: 0 9px 0 7px;
  border: 1px solid var(--line-leg); border-radius: 8px; background: #FFFFFF;
  font-size: 0.65625rem; line-height: 14px; color: #0A0A0A;
  font-variant-numeric: tabular-nums;
}
.sc-surveillance-horloge > svg { width: 13px; height: 13px; color: #525252; }
.sc-surveillance-h { display: grid; }
.sc-surveillance-h-t { grid-area: 1 / 1; font-weight: 800; }
.sc-surveillance-h-t--2,
.sc-surveillance-h-t--3,
.sc-surveillance-h-t--4 { opacity: 0; }
.sc-surveillance-legs { display: grid; flex: 1; min-width: 0; }
.sc-surveillance-leg {
  grid-area: 1 / 1;
  display: flex; align-items: center; gap: 7px;
  font-size: 0.59375rem; font-weight: 700; line-height: 1; color: #0A0A0A; white-space: nowrap;
  opacity: 0;
}
.sc-surveillance-leg--a { opacity: 1; }
.sc-surveillance-leg img { flex: none; width: 20px; height: 20px; border-radius: 50%; }

/* Le doigt : le rond gris des captures d'écran d'iPhone. */
.sc-surveillance-doigt {
  position: absolute; top: 0; left: 0; z-index: 4;
  width: 20px; height: 20px; 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 : le navigateur le
   déplace sans le repeindre, et le glissement ne saccade pas. */
.sc-surveillance-tel,
.sc-surveillance-chrome,
.sc-surveillance-app,
.sc-surveillance-notif { will-change: transform, opacity; }

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

.sc-surveillance-tel             { animation-name: sc-surveillance-tel; }
.sc-surveillance-chrome          { animation-name: sc-surveillance-chrome; }

.sc-surveillance-statut          { animation-name: sc-surveillance-statut; }
.sc-surveillance-maison          { animation-name: sc-surveillance-maison; }
.sc-surveillance-verrou          { animation-name: sc-surveillance-verrou; }
.sc-surveillance-notif           { animation-name: sc-surveillance-notif; }
.sc-surveillance-doigt           { animation-name: sc-surveillance-doigt; }
.sc-surveillance-app             { animation-name: sc-surveillance-app; }
.sc-surveillance-a-note          { animation-name: sc-surveillance-note; }
.sc-surveillance-a-verifier      { animation-name: sc-surveillance-verifier; }
.sc-surveillance-a-roue          { animation-name: sc-surveillance-a-roue; }
.sc-surveillance-a-etat--ko,
.sc-surveillance-a-q--1,
.sc-surveillance-l-etat--ko,
.sc-surveillance-l-tps--ko       { animation-name: sc-surveillance-avant; }
.sc-surveillance-a-etat--ok,
.sc-surveillance-a-q--2,
.sc-surveillance-l-etat--ok,
.sc-surveillance-l-tps--ok       { animation-name: sc-surveillance-apres; }
.sc-surveillance-barre--derniere { animation-name: sc-surveillance-pousse; }
.sc-surveillance-ligne--vise     { animation-name: sc-surveillance-vise; }
.sc-surveillance-st-t--1         { animation-name: sc-surveillance-st-1; }
.sc-surveillance-st-t--2         { animation-name: sc-surveillance-st-2; }

.sc-surveillance-c-roue          { animation-name: sc-surveillance-roue; }
.sc-surveillance-c-logo          { animation-name: sc-surveillance-logo; }
.sc-surveillance-c-titre--1      { animation-name: sc-surveillance-titre-1; }
.sc-surveillance-c-titre--2      { animation-name: sc-surveillance-titre-2; }
.sc-surveillance-c-titre--3      { animation-name: sc-surveillance-titre-3; }
.sc-surveillance-c-url-t--1      { animation-name: sc-surveillance-url-1; }
.sc-surveillance-c-url-t--2      { animation-name: sc-surveillance-url-2; }
.sc-surveillance-accueil .sc-surveillance-s-resa { animation-name: sc-surveillance-resa; }
.sc-surveillance-accueil         { animation-name: sc-surveillance-accueil; }
.sc-surveillance-erreur          { animation-name: sc-surveillance-erreur; }
.sc-surveillance-e-bouton        { animation-name: sc-surveillance-actualiser; }
.sc-surveillance-reserver        { animation-name: sc-surveillance-reserver; }

.sc-surveillance-h-t--1          { animation-name: sc-surveillance-h-1; }
.sc-surveillance-h-t--2          { animation-name: sc-surveillance-h-2; }
.sc-surveillance-h-t--3          { animation-name: sc-surveillance-h-3; }
.sc-surveillance-h-t--4          { animation-name: sc-surveillance-h-4; }
.sc-surveillance-leg--a          { animation-name: sc-surveillance-leg-a; }
.sc-surveillance-leg--b          { animation-name: sc-surveillance-leg-b; }
.sc-surveillance-leg--c          { animation-name: sc-surveillance-leg-c; }
.sc-surveillance-leg--d          { animation-name: sc-surveillance-leg-d; }

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

/* LA FLUIDITÉ (Théo : « plus fluide les animations, surtout sur
   l'iPhone »). Trois règles, tenues partout ci-dessous :
   1. Les gestes d'iOS suivent sa courbe, cubic-bezier(.32, .72, 0, 1) :
      départ franc, arrivée longuement amortie. Jamais moins de 300 ms pour
      une ouverture ou un glissement.
   2. Aucun changement d'état en coupure : chaque bascule est un fondu d'au
      moins 100 ms (0,8 %), et la barre du nouveau contrôle pousse depuis
      le bas au lieu d'apparaître.
   3. Un appui de doigt dure 150 ms à l'enfoncement et autant au relâché. */

/* LES GLISSEMENTS : le téléphone et Chrome sont deux écrans côte à côte ;
   on passe de l'un à l'autre trois fois, en 660 ms chacune. */
@keyframes sc-surveillance-tel {
  0%, 22.5%    { transform: translate(123px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  28%, 44.5%   { transform: translate(-440px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50%, 65.5%   { transform: translate(123px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  71%, 98.4%   { transform: translate(-440px, 6px) scale(1.18); }
  99.9%, 100%  { transform: translate(123px, 6px) scale(1.18); }
}
@keyframes sc-surveillance-chrome {
  0%, 22.5%    { transform: translateX(560px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  28%, 44.5%   { transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50%, 65.5%   { transform: translateX(560px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  71%, 98.4%   { transform: none; }
  99.9%, 100%  { transform: translateX(560px); }
}

/* 1. 19:15, LE TÉLÉPHONE : la notification glisse et se pose, le doigt la
   touche, le moniteur s'ouvre depuis elle en 430 ms. */
@keyframes sc-surveillance-notif {
  0%, 4%       { opacity: 0; transform: translateY(24px) scale(.94); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  6.8%, 11.6%  { opacity: 1; transform: none; animation-timing-function: ease-out; }
  12.8%, 98.4% { opacity: 0; transform: scale(1.04); }
  99.9%, 100%  { opacity: 0; transform: translateY(24px) scale(.94); }
}
@keyframes sc-surveillance-app {
  0%, 11.6%    { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  12.8%        { opacity: 1; transform: scale(.82); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  15%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.3); }
}
@keyframes sc-surveillance-verrou { 0%, 11.8% { opacity: 1; } 13.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-statut { 0%, 12.2% { color: #FFFFFF; } 13.4%, 98.4% { color: #000000; } 99.9%, 100% { color: #FFFFFF; } }
@keyframes sc-surveillance-maison { 0%, 12.2% { background: #FFFFFF; } 13.4%, 98.4% { background: #0A0A0A; } 99.9%, 100% { background: #FFFFFF; } }

/* Le doigt : la notification (10,2 %), puis « Vérifier maintenant »
   (55,6 %). Il arrive en grandissant, s'enfonce, se relâche, s'efface. */
@keyframes sc-surveillance-doigt {
  0%, 8.6%     { transform: translate(250px, 329px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  9.6%         { transform: translate(250px, 329px); opacity: 1; }
  10.2%        { transform: translate(250px, 329px); opacity: 1; }
  11%          { transform: translate(250px, 329px) scale(.8); opacity: 1; }
  11.8%        { transform: translate(250px, 329px); opacity: 1; }
  13%          { transform: translate(250px, 329px) scale(1.1); opacity: 0; }
  54%          { transform: translate(250px, 515px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  55%          { transform: translate(250px, 515px); opacity: 1; }
  55.6%        { transform: translate(250px, 515px); opacity: 1; }
  56.4%        { transform: translate(250px, 515px) scale(.8); opacity: 1; }
  57.2%        { transform: translate(250px, 515px); opacity: 1; }
  58.4%, 100%  { transform: translate(250px, 515px) scale(1.1); opacity: 0; }
}

/* 2. 19:16, LE SITE MORT : le client clique « Réserver », la roue, puis
   l'erreur, en fondu. */
@keyframes sc-surveillance-resa { 0%, 31.6% { background: #0A0A0A; } 32%, 32.8% { background: #3A3A3A; } 33.4%, 100% { background: #0A0A0A; } }
@keyframes sc-surveillance-roue {
  0%, 32.3%    { opacity: 0; transform: rotate(0); }
  32.4%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  34.8%        { opacity: 1; transform: rotate(440deg); }
  34.9%, 75%   { opacity: 0; transform: rotate(0); }
  75.1%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  77%          { opacity: 1; transform: rotate(350deg); }
  77.1%, 100%  { opacity: 0; transform: rotate(0); }
}
@keyframes sc-surveillance-logo { 0%, 32.3% { opacity: 1; } 32.4%, 34.8% { opacity: 0; } 34.9%, 75% { opacity: 1; } 75.1%, 77% { opacity: 0; } 77.1%, 100% { opacity: 1; } }
@keyframes sc-surveillance-titre-1 { 0%, 32.3% { opacity: 1; } 32.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-titre-2 { 0%, 32.3% { opacity: 0; } 32.4%, 77% { opacity: 1; } 77.1%, 100% { opacity: 0; } }
@keyframes sc-surveillance-titre-3 { 0%, 77% { opacity: 0; } 77.1%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-surveillance-url-1 { 0%, 32.3% { opacity: 1; } 32.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-url-2 { 0%, 32.3% { opacity: 0; } 32.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-surveillance-accueil { 0%, 34.8% { opacity: 1; } 35.6%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-erreur { 0%, 34.8% { opacity: 0; } 35.6%, 77% { opacity: 1; } 77.6%, 100% { opacity: 0; } }

/* 3. 19:20, LE TÉLÉPHONE RÉPARE : mon intervention glisse en place, le
   doigt relance le contrôle, la roue tourne, et tout passe au vert en
   fondu ; la barre du contrôle de 19 h 20 pousse depuis le bas. */
@keyframes sc-surveillance-note {
  0%, 51.2%    { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  53%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(10px); }
}
@keyframes sc-surveillance-verifier {
  0%, 55.6%    { background: #0A0A0A; transform: none; }
  56.4%        { background: #26272E; transform: scale(.97); }
  57.2%, 58.4% { background: #26272E; transform: none; }
  59.4%, 100%  { background: #0A0A0A; transform: none; }
}
@keyframes sc-surveillance-a-roue {
  0%, 56.2%    { opacity: 0; transform: rotate(0); }
  56.6%        { opacity: 1; transform: rotate(60deg); animation-timing-function: linear; }
  58.6%        { opacity: 1; transform: rotate(520deg); }
  59.2%, 100%  { opacity: 0; transform: rotate(600deg); }
}
/* L'ancien texte sort, PUIS le nouveau entre : deux textes superposés à
   moitié transparents se liraient mal. */
@keyframes sc-surveillance-avant { 0%, 58.4% { opacity: 1; } 59%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-apres { 0%, 59% { opacity: 0; } 59.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
/* L'heure du téléphone change pendant qu'il est hors champ. */
@keyframes sc-surveillance-st-1 { 0%, 46% { opacity: 1; } 46.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-st-2 { 0%, 46% { opacity: 0; } 46.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-surveillance-pousse {
  0%, 58.8%    { transform: scaleY(0); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  60.2%, 98.4% { transform: none; }
  99.9%, 100%  { transform: scaleY(0); }
}
@keyframes sc-surveillance-vise {
  0%, 58.6%    { background: #FEF2F2; border-color: #FECACA; }
  60%, 98.4%   { background: #FFFFFF; border-color: #E5E5E5; }
  99.9%, 100%  { background: #FEF2F2; border-color: #FECACA; }
}

/* 4. 19:21, LE SITE RÉPARÉ : le client clique « Actualiser », la roue, et
   la page Réserver monte en place. */
@keyframes sc-surveillance-actualiser { 0%, 74.4% { background: #0B57D0; } 74.8%, 75.6% { background: #0842A0; } 76.2%, 100% { background: #0B57D0; } }
@keyframes sc-surveillance-reserver {
  0%, 77%      { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  79.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(10px); }
}

/* L'horloge de la légende, et ce qui se passe : les bascules tombent au
   milieu des glissements, en fondu. */
@keyframes sc-surveillance-h-1 { 0%, 24.8% { opacity: 1; } 25.6%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-h-2 { 0%, 24.8% { opacity: 0; } 25.6%, 46.8% { opacity: 1; } 47.6%, 100% { opacity: 0; } }
@keyframes sc-surveillance-h-3 { 0%, 46.8% { opacity: 0; } 47.6%, 67.8% { opacity: 1; } 68.6%, 100% { opacity: 0; } }
@keyframes sc-surveillance-h-4 { 0%, 67.8% { opacity: 0; } 68.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-surveillance-leg-a { 0%, 24.4% { opacity: 1; } 25.2%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-surveillance-leg-b { 0%, 25.2% { opacity: 0; } 26%, 46.4% { opacity: 1; } 47.2%, 100% { opacity: 0; } }
@keyframes sc-surveillance-leg-c { 0%, 47.2% { opacity: 0; } 48%, 67.4% { opacity: 1; } 68.2%, 100% { opacity: 0; } }
@keyframes sc-surveillance-leg-d { 0%, 68.2% { opacity: 0; } 69%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR : celui du client, dans Chrome. Il clique « Réserver » à
   19:16, puis revient actualiser à 19:21. */
@keyframes sc-cur-surveillance {
  0%, 28.4%    { transform: translate(330px, 420px); opacity: 0; }
  29.2%        { transform: translate(330px, 380px); opacity: 1; }
  31.4%        { transform: translate(462px, 83px); opacity: 1; }
  32%          { transform: translate(462px, 83px) scale(.84); opacity: 1; }
  32.8%, 33.4% { transform: translate(462px, 83px); opacity: 1; }
  35.8%        { transform: translate(400px, 440px); opacity: 1; }
  37.4%, 71.4% { transform: translate(410px, 460px); opacity: 0; }
  72.2%        { transform: translate(330px, 440px); opacity: 1; }
  74.2%        { transform: translate(404px, 314px); opacity: 1; }
  74.8%        { transform: translate(404px, 314px) scale(.84); opacity: 1; }
  75.6%, 76.2% { transform: translate(404px, 314px); opacity: 1; }
  78.4%        { transform: translate(470px, 460px); opacity: 1; }
  80%, 98.4%   { transform: translate(480px, 470px); opacity: 0; }
  99.9%, 100%  { transform: translate(330px, 420px); opacity: 0; }
}
@keyframes sc-surveillance-onde {
  0%, 31.9%    { transform: scale(.4); opacity: 0; }
  32%          { transform: scale(.4); opacity: .9; }
  33.8%        { transform: scale(2.2); opacity: 0; }
  74.7%        { transform: scale(.4); opacity: 0; }
  74.8%        { transform: scale(.4); opacity: .9; }
  76.6%        { transform: scale(2.2); opacity: 0; }
  76.8%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, la page Réserver qui répond dans
   Chrome, et la légende de fin. */
@media (prefers-reduced-motion: reduce) {
  .sc-surveillance-tel { transform: translate(-440px, 6px) scale(1.18); }
  .sc-surveillance-chrome { transform: none; }
  .sc-surveillance-accueil,
  .sc-surveillance-c-titre--1,
  .sc-surveillance-c-url-t--1,
  .sc-surveillance-h-t--1,
  .sc-surveillance-leg--a { opacity: 0; }
  .sc-surveillance-reserver,
  .sc-surveillance-c-titre--3,
  .sc-surveillance-c-url-t--2,
  .sc-surveillance-h-t--4,
  .sc-surveillance-leg--d { opacity: 1; transform: none; }
}