/* Scène « sauvegardes et supervision » : le site de Chez Lucie dans Chrome,
   vu par un client, et mon téléphone. Le site casse, l'alerte tombe, je
   remets la copie de la nuit, le site revient. Pas de légende. Le rideau de
   fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      9,4 %  le client clique « La carte » ; l'onglet charge
     12,4 %  la page d'erreur de WordPress
     15,6 %  l'alerte tombe sur mon écran verrouillé
       21 %  je la touche : la fiche du site, « En panne », et ses copies
       28 %  je choisis celle de cette nuit, 3 h 12
       32 %  « Remettre cette copie » : la jauge avance (32,6 à 43 %)
     43,4 %  « En ligne, rien à signaler »
     48,8 %  le client actualise ; l'onglet charge
     51,8 %  la carte du jour revient ; plus rien ne bouge après 56 %
       95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 560. La fenêtre Chrome de (2, 44) à (284, 540), sa vue
   de 280 x 430. Mon téléphone de (280, 64) à (516, 556), écran de 222 x 478
   en (287, 71). Tailles de lecture : 12 à 13 px, 20 px pour les titres. */
.fn-scene--sauvegardes {
  --sc-haut: 560px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E5E5E5; --line-app: #E5E5E5;
  --bwt-bleu: #3F7BFF;
  /* Les cibles du curseur (pointe de la flèche) et du doigt (coin du rond),
     mesurées au banc. */
  --sc-sv-lien: 163.1px, 125px; --sc-sv-releve: 68.1px, 89px;
  --sc-sv-notif: 385px, 263.8px; --sc-sv-nuit: 385px, 315.1px; --sc-sv-bouton: 385px, 483px;
  line-height: 1.35;
}
.fn-scene--sauvegardes svg { display: block; }
.fn-scene--sauvegardes p { margin: 0; }
.fn-scene--sauvegardes img { max-width: none; }
.fn-scene--sauvegardes i { font-style: normal; }

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

/* ═══ LE SITE, DANS CHROME ════════════════════════════════════════════ */
.sc-sauvegardes-chrome {
  position: absolute; top: 44px; left: 2px; z-index: 1;
  display: flex; flex-direction: column;
  width: 282px; height: 496px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-sauvegardes-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-sauvegardes-c-onglet {
  position: absolute; top: 6px; left: 12px;
  display: flex; align-items: center; gap: 6px;
  width: 160px; height: 24px; padding: 0 8px 0 9px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-sauvegardes-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-sauvegardes-c-favi { position: relative; display: block; flex: none; width: 13px; height: 13px; }
.sc-sauvegardes-c-favi > i { position: absolute; inset: 0; }
.sc-sauvegardes-c-logo {
  display: grid; place-items: center;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
.sc-sauvegardes-c-globe { color: #5F6368; opacity: 0; }
.sc-sauvegardes-c-globe svg { width: 13px; height: 13px; }
/* La roue de chargement de Chrome : un arc bleu à la place de l'icône. */
.sc-sauvegardes-c-roue {
  border: 1.6px solid transparent; border-top-color: #0B57D0; border-right-color: #0B57D0;
  border-radius: 50%; opacity: 0;
}
/* Chrome ne coupe pas un titre trop long par des points : il l'efface en fondu. */
.sc-sauvegardes-c-titres {
  position: relative; flex: 1; min-width: 0; height: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.sc-sauvegardes-c-titre { position: absolute; left: 0; top: 0; font-size: 0.65625rem; line-height: 14px; white-space: nowrap; }
.sc-sauvegardes-c-titre--erreur,
.sc-sauvegardes-c-titre--carte { opacity: 0; }
.sc-sauvegardes-c-plus { position: absolute; top: 10px; left: 182px; color: #474747; }
.sc-sauvegardes-c-plus svg { width: 12px; height: 12px; }
.sc-sauvegardes-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-sauvegardes-fen i { display: grid; place-items: center; width: 24px; height: 100%; color: #1F1F1F; }
.sc-sauvegardes-fen svg { width: 10px; height: 10px; }
.sc-sauvegardes-c-outils {
  display: flex; align-items: center; gap: 1px; flex: none;
  height: 34px; padding: 0 6px 0 8px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-sauvegardes-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.sc-sauvegardes-c-outils > i svg { width: 13px; height: 13px; }
.sc-sauvegardes-c-off { color: #C4C7C5; }
.sc-sauvegardes-c-adresse {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  height: 26px; margin: 0 4px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.6875rem; color: #1F1F1F; white-space: nowrap;
}
.sc-sauvegardes-c-adresse > svg { width: 12px; height: 12px; flex: none; }
.sc-sauvegardes-c-url { position: relative; flex: 1; min-width: 0; height: 14px; }
.sc-sauvegardes-c-u { position: absolute; left: 0; top: 0; line-height: 14px; }
.sc-sauvegardes-c-u--carte { opacity: 0; }
.sc-sauvegardes-c-etoile svg { width: 12px; height: 12px; }

.sc-sauvegardes-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: #0A0A0A; }
.sc-sauvegardes-page { position: absolute; inset: 0; display: block; background: #FFFFFF; }
.sc-sauvegardes-page--erreur,
.sc-sauvegardes-page--carte { opacity: 0; }
.sc-sauvegardes-s-nav {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--line-site);
  font-size: 0.6875rem; color: #525252;
}
.sc-sauvegardes-s-nav b { flex: 1; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; color: #0A0A0A; }
.sc-sauvegardes-s-lien--ici { font-weight: 700; color: #0A0A0A; text-decoration: underline; text-underline-offset: 4px; }
.sc-sauvegardes-s-resa {
  display: grid; place-items: center; height: 24px; padding: 0 10px; border-radius: 7px;
  background: #0A0A0A; color: #FFFFFF; font-weight: 700;
}
.sc-sauvegardes-hero { position: relative; display: block; height: 250px; overflow: hidden; }
.sc-sauvegardes-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.sc-sauvegardes-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 38%, rgba(10, 10, 10, .72));
}
.sc-sauvegardes-hero-t {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1;
  display: flex; flex-direction: column; gap: 4px; color: #FFFFFF;
}
.sc-sauvegardes-hero-t small { font-size: 0.5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sc-sauvegardes-hero-t b { font-size: 1.25rem; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.sc-sauvegardes-soir { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; font-size: 0.75rem; color: #525252; }
.sc-sauvegardes-soir--carte { margin: 0 14px; padding: 14px 0 0; border-top: 1px dashed var(--line-site); }
.sc-sauvegardes-soir-btn {
  display: grid; place-items: center; height: 34px; padding: 0 16px; border-radius: 10px;
  background: #0A0A0A; color: #FFFFFF; font-weight: 600;
}

/* La vraie page d'erreur de WordPress : fond gris, boîte blanche bordée. */
.sc-sauvegardes-page--erreur { background: #F1F1F1; }
.sc-sauvegardes-wp {
  position: absolute; top: 26px; left: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border: 1px solid #C3C4C7; background: #FFFFFF;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}
.sc-sauvegardes-wp-dit { font-size: 0.8125rem; line-height: 1.5; color: #3C434A; }
.sc-sauvegardes-wp-lien { font-size: 0.75rem; line-height: 1.5; color: #2271B1; text-decoration: underline; }

/* La carte du jour, qui revient. */
.sc-sauvegardes-carte-t { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px 10px; }
.sc-sauvegardes-carte-t b { font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.sc-sauvegardes-carte-t small { font-size: 0.6875rem; color: #737373; }
.sc-sauvegardes-plat {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  height: 66px; margin: 0 14px;
  border-top: 1px dashed var(--line-site);
}
.sc-sauvegardes-plat img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.sc-sauvegardes-plat > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-sauvegardes-plat b { font-size: 0.8125rem; font-weight: 700; line-height: 16px; white-space: nowrap; }
.sc-sauvegardes-plat small { font-size: 0.6875rem; line-height: 14px; color: #737373; white-space: nowrap; }
.sc-sauvegardes-plat em { font-size: 0.8125rem; font-weight: 700; font-style: normal; }

/* ═══ MON TÉLÉPHONE ═══════════════════════════════════════════════════ */
.sc-sauvegardes-tel {
  position: absolute; top: 64px; left: 280px; z-index: 2;
  width: 236px; height: 492px; padding: 7px;
  border-radius: 40px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
}
.sc-sauvegardes-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #0B0F18; }
.sc-sauvegardes-ilot {
  position: absolute; top: 8px; left: 50%; z-index: 9;
  width: 66px; height: 19px; margin-left: -33px; border-radius: 10px; background: #000000;
}
.sc-sauvegardes-maison {
  position: absolute; bottom: 5px; left: 50%; z-index: 9;
  width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: #FFFFFF;
}
.sc-sauvegardes-reseau { display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sc-sauvegardes-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-sauvegardes-reseau i:nth-child(1) { height: 3px; }
.sc-sauvegardes-reseau i:nth-child(2) { height: 4.5px; }
.sc-sauvegardes-reseau i:nth-child(3) { height: 6px; }
.sc-sauvegardes-reseau i:nth-child(4) { height: 8px; }
.sc-sauvegardes-pile { display: block; width: 16px; height: 8px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-sauvegardes-pile i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }

/* L'écran verrouillé : l'heure en grand, puis l'alerte. */
.sc-sauvegardes-verrou {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(172deg, #2B3A55 0%, #172033 55%, #0B0F18 100%);
  color: #FFFFFF;
}
.sc-sauvegardes-v-statut {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  height: 34px; padding: 2px 20px 0;
}
.sc-sauvegardes-v-date { position: absolute; top: 56px; left: 0; right: 0; font-size: 0.8125rem; font-weight: 600; text-align: center; color: rgba(255, 255, 255, .86); }
.sc-sauvegardes-v-heure { position: absolute; top: 74px; left: 0; right: 0; font-size: 3.875rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; text-align: center; }
.sc-sauvegardes-notif {
  position: absolute; top: 170px; left: 5px; right: 5px;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 11px 10px;
  border-radius: 18px; background: rgba(245, 245, 247, .92); color: #0A0A0A;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  font-size: 0.75rem; line-height: 1.35;
  opacity: 0;
}
.sc-sauvegardes-notif img { width: 30px; height: 30px; border-radius: 7px; }
.sc-sauvegardes-n-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-sauvegardes-n-tete { display: flex; align-items: baseline; gap: 6px; }
.sc-sauvegardes-n-tete b { flex: 1; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.sc-sauvegardes-n-tete small { font-size: 0.65625rem; color: #6E6E73; white-space: nowrap; }
.sc-sauvegardes-v-bouton {
  position: absolute; bottom: 30px;
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: rgba(255, 255, 255, .16); color: #FFFFFF;
}
.sc-sauvegardes-v-bouton svg { width: 18px; height: 18px; }
.sc-sauvegardes-v-bouton--g { left: 28px; }
.sc-sauvegardes-v-bouton--d { right: 28px; }

/* L'appli : la fiche du site dans le moniteur, et ses copies. */
.sc-sauvegardes-appli {
  position: absolute; inset: 0; z-index: 2;
  background: #F6F7F9; color: #0A0A0A;
  opacity: 0; transform-origin: 50% 42%;
}
.sc-sauvegardes-a-statut {
  display: flex; align-items: center; gap: 4px;
  height: 34px; padding: 2px 20px 0 26px; font-size: 0.6875rem;
}
.sc-sauvegardes-a-statut b { flex: 1; font-weight: 700; }
.sc-sauvegardes-a-barre {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 14px 0 10px;
}
.sc-sauvegardes-a-barre span { display: flex; align-items: center; gap: 1px; font-size: 0.8125rem; color: var(--bwt-bleu); }
.sc-sauvegardes-a-barre svg { width: 16px; height: 16px; }
.sc-sauvegardes-a-barre img { width: 24px; height: 24px; border-radius: 50%; }
.sc-sauvegardes-fiche {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: 4px 10px 0; padding: 12px 12px 12px 14px;
  border: 1px solid var(--line-app); border-radius: 14px; background: #FFFFFF;
}
.sc-sauvegardes-f-nom { display: flex; flex-direction: column; min-width: 0; }
.sc-sauvegardes-f-nom b { font-size: 0.9375rem; font-weight: 700; line-height: 18px; }
.sc-sauvegardes-f-nom small { font-size: 0.6875rem; color: #737373; }
.sc-sauvegardes-f-etats { position: relative; display: block; width: 66px; height: 24px; }
.sc-sauvegardes-f-etat {
  position: absolute; top: 0; right: 0;
  display: grid; place-items: center; height: 24px; padding: 0 8px;
  border-radius: 7px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.sc-sauvegardes-f-etat--ko { background: #0A0A0A; color: #FFFFFF; }
.sc-sauvegardes-f-etat--ok { border: 1px solid #D4D4D4; background: #FFFFFF; color: #0A0A0A; opacity: 0; }
.sc-sauvegardes-f-dit { position: relative; grid-column: 1 / -1; display: block; height: 16px; }
.sc-sauvegardes-f-d { position: absolute; left: 0; top: 0; font-size: 0.75rem; line-height: 16px; color: #525252; white-space: nowrap; }
.sc-sauvegardes-f-d--ok { opacity: 0; }
/* Plus précis que la remise à zéro des `p` de la scène, sinon la marge saute. */
.fn-scene--sauvegardes .sc-sauvegardes-a-h { display: flex; flex-direction: column; gap: 2px; margin: 18px 14px 8px; }
.sc-sauvegardes-a-h b { font-size: 0.8125rem; font-weight: 700; }
.sc-sauvegardes-a-h span { display: flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: #737373; }
.sc-sauvegardes-a-h svg { width: 13px; height: 13px; }
.sc-sauvegardes-nuits {
  display: block; margin: 0 10px; overflow: hidden;
  border: 1px solid var(--line-app); border-radius: 14px; background: #FFFFFF;
}
.sc-sauvegardes-nuit {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  height: 46px; padding: 0 12px;
}
.sc-sauvegardes-nuit + .sc-sauvegardes-nuit { border-top: 1px dashed var(--line-app); }
.sc-sauvegardes-nuit b { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.sc-sauvegardes-nuit small { font-size: 0.6875rem; color: #737373; }
.sc-sauvegardes-radio { position: relative; display: block; width: 18px; height: 18px; border: 1.5px solid #A3A3A3; border-radius: 50%; }
.sc-sauvegardes-radio-plein { position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bwt-bleu); opacity: 0; }
.fn-scene--sauvegardes .sc-sauvegardes-plus-nuits { margin: 8px 14px 0; font-size: 0.6875rem; color: #737373; }
.sc-sauvegardes-bouton {
  position: absolute; left: 10px; right: 10px; bottom: 30px;
  display: block; height: 46px; overflow: hidden;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600;
}
.sc-sauvegardes-jauge {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .22);
  transform: scaleX(0); transform-origin: 0 50%;
}
.sc-sauvegardes-b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.sc-sauvegardes-b--cours { opacity: 0; }
.sc-sauvegardes-b--fait {
  border: 1px solid #D4D4D4; border-radius: 10px; background: #FFFFFF; color: #0A0A0A;
  opacity: 0;
}
.sc-sauvegardes-b--fait svg { width: 15px; height: 15px; stroke-width: 2; }

/* Le doigt, sur mon téléphone. */
.sc-sauvegardes-doigt {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .26);
  opacity: 0; pointer-events: none;
}

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

.sc-sauvegardes-c-roue            { animation-name: sc-sauvegardes-c-roue; }
.sc-sauvegardes-c-logo            { animation-name: sc-sauvegardes-c-logo; }
.sc-sauvegardes-c-globe           { animation-name: sc-sauvegardes-c-globe; }
.sc-sauvegardes-c-titre--accueil  { animation-name: sc-sauvegardes-accueil; }
.sc-sauvegardes-c-titre--erreur   { animation-name: sc-sauvegardes-erreur; }
.sc-sauvegardes-c-titre--carte    { animation-name: sc-sauvegardes-carte; }
.sc-sauvegardes-c-u--accueil      { animation-name: sc-sauvegardes-u-accueil; }
.sc-sauvegardes-c-u--carte        { animation-name: sc-sauvegardes-u-carte; }
.sc-sauvegardes-page--accueil     { animation-name: sc-sauvegardes-accueil; }
.sc-sauvegardes-page--erreur      { animation-name: sc-sauvegardes-erreur; }
.sc-sauvegardes-page--carte       { animation-name: sc-sauvegardes-carte; }
.sc-sauvegardes-plat--1 img       { animation-name: sc-sauvegardes-photo-1; }
.sc-sauvegardes-plat--2 img       { animation-name: sc-sauvegardes-photo-2; }
.sc-sauvegardes-plat--3 img       { animation-name: sc-sauvegardes-photo-3; }

.sc-sauvegardes-notif             { animation-name: sc-sauvegardes-notif; }
.sc-sauvegardes-verrou            { animation-name: sc-sauvegardes-verrou; }
.sc-sauvegardes-appli             { animation-name: sc-sauvegardes-appli; }
.sc-sauvegardes-maison            { animation-name: sc-sauvegardes-maison; }
.sc-sauvegardes-nuit--1           { animation-name: sc-sauvegardes-nuit; }
.sc-sauvegardes-nuit--1 .sc-sauvegardes-radio       { animation-name: sc-sauvegardes-radio; }
.sc-sauvegardes-nuit--1 .sc-sauvegardes-radio-plein { animation-name: sc-sauvegardes-radio-plein; }
.sc-sauvegardes-bouton            { animation-name: sc-sauvegardes-bouton; }
.sc-sauvegardes-jauge             { animation-name: sc-sauvegardes-jauge; }
.sc-sauvegardes-b--remettre       { animation-name: sc-sauvegardes-remettre; }
.sc-sauvegardes-b--cours          { animation-name: sc-sauvegardes-cours; }
.sc-sauvegardes-b--fait           { animation-name: sc-sauvegardes-fait; }
.sc-sauvegardes-f-etat--ko,
.sc-sauvegardes-f-d--ko           { animation-name: sc-sauvegardes-ko; }
.sc-sauvegardes-f-etat--ok,
.sc-sauvegardes-f-d--ok           { animation-name: sc-sauvegardes-ok; }

/* ═══ LE CLIENT, DANS CHROME ══════════════════════════════════════════
   LE CURSEUR. Deux cibles MESURÉES dans la toile, la pointe de la flèche
   posée dessus (translate = cible - 4,6 / 2,3) : le lien « La carte » et le
   bouton Actualiser. */
@keyframes sc-cur-sauvegardes {
  0%           { transform: translate(214px, 470px); opacity: 0; }
  3%           { transform: translate(214px, 470px); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  8.6%         { transform: translate(var(--sc-sv-lien)); }
  9.4%         { transform: translate(var(--sc-sv-lien)) scale(.86); }
  10%          { transform: translate(var(--sc-sv-lien)); }
  13.4%        { transform: translate(var(--sc-sv-lien)); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  16%          { transform: translate(150px, 260px); }
  44.4%        { transform: translate(150px, 260px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  48%          { transform: translate(var(--sc-sv-releve)); }
  48.8%        { transform: translate(var(--sc-sv-releve)) scale(.86); }
  49.4%        { transform: translate(var(--sc-sv-releve)); }
  52.6%        { transform: translate(var(--sc-sv-releve)); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  56%, 98.4%   { transform: translate(196px, 470px); opacity: 1; }
  99.9%, 100%  { transform: translate(214px, 470px); opacity: 0; }
}
@keyframes sc-onde-sauvegardes {
  0%, 9.2%     { transform: scale(.4); opacity: 0; }
  9.4%         { transform: scale(.4); opacity: .9; }
  11.4%        { transform: scale(2.2); opacity: 0; }
  48.6%        { transform: scale(.4); opacity: 0; }
  48.8%        { transform: scale(.4); opacity: .9; }
  50.8%, 100%  { transform: scale(2.2); opacity: 0; }
}
/* L'onglet charge deux fois : au clic sur « La carte », à l'actualisation. */
@keyframes sc-sauvegardes-c-roue {
  0%, 9.5%     { opacity: 0; transform: rotate(0); }
  9.6%         { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  12.3%        { opacity: 1; transform: rotate(720deg); }
  12.4%        { opacity: 0; transform: rotate(720deg); }
  48.9%        { opacity: 0; transform: rotate(0); }
  49%          { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  51.7%        { opacity: 1; transform: rotate(720deg); }
  51.8%, 98.4% { opacity: 0; transform: rotate(720deg); }
  99.9%, 100%  { opacity: 0; transform: rotate(0); }
}
/* L'icône du site ; la page d'erreur n'en a pas, Chrome met son globe. */
@keyframes sc-sauvegardes-c-logo {
  0%, 9.5%     { opacity: 1; }
  9.6%, 51.7%  { opacity: 0; }
  51.8%, 100%  { opacity: 1; }
}
@keyframes sc-sauvegardes-c-globe {
  0%, 12.3%    { opacity: 0; }
  12.4%, 48.9% { opacity: 1; }
  49%, 100%    { opacity: 0; }
}
/* L'accueil (titre d'onglet et page) jusqu'à la panne ; l'erreur ; puis la
   carte. Des bascules nettes : Chrome ne fond pas une page dans l'autre. */
@keyframes sc-sauvegardes-accueil {
  0%, 12.3%    { opacity: 1; }
  12.4%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-sauvegardes-erreur {
  0%, 12.3%    { opacity: 0; }
  12.4%, 51.7% { opacity: 1; }
  51.8%, 100%  { opacity: 0; }
}
@keyframes sc-sauvegardes-carte {
  0%, 51.7%    { opacity: 0; }
  51.8%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-sauvegardes-u-accueil {
  0%, 9.5%     { opacity: 1; }
  9.6%, 98.4%  { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-sauvegardes-u-carte {
  0%, 9.5%     { opacity: 0; }
  9.6%, 98.4%  { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* Les photos de la carte arrivent l'une après l'autre, comme au chargement. */
@keyframes sc-sauvegardes-photo-1 {
  0%, 51.8%    { opacity: 0; }
  53%, 98.4%   { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-sauvegardes-photo-2 {
  0%, 52.3%    { opacity: 0; }
  53.5%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-sauvegardes-photo-3 {
  0%, 52.8%    { opacity: 0; }
  54%, 98.4%   { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* ═══ MON TÉLÉPHONE ═══════════════════════════════════════════════════
   LE DOIGT. Trois cibles MESURÉES dans la toile (le rond de 26 px s'y
   centre, translate = centre - 13) : l'alerte, la nuit de 3 h 12, le
   bouton. Il n'est visible que pendant qu'il touche. */
@keyframes sc-sauvegardes-doigt {
  0%, 20.6%    { transform: translate(var(--sc-sv-notif)) scale(1.3); opacity: 0; }
  20.9%        { transform: translate(var(--sc-sv-notif)); opacity: 1; animation-timing-function: ease-out; }
  21.2%        { transform: translate(var(--sc-sv-notif)) scale(.84); opacity: 1; }
  21.6%        { transform: translate(var(--sc-sv-notif)); opacity: 0; }
  27.6%        { transform: translate(var(--sc-sv-nuit)) scale(1.3); opacity: 0; }
  27.9%        { transform: translate(var(--sc-sv-nuit)); opacity: 1; animation-timing-function: ease-out; }
  28.2%        { transform: translate(var(--sc-sv-nuit)) scale(.84); opacity: 1; }
  28.6%        { transform: translate(var(--sc-sv-nuit)); opacity: 0; }
  31.6%        { transform: translate(var(--sc-sv-bouton)) scale(1.3); opacity: 0; }
  31.9%        { transform: translate(var(--sc-sv-bouton)); opacity: 1; animation-timing-function: ease-out; }
  32.2%        { transform: translate(var(--sc-sv-bouton)) scale(.84); opacity: 1; }
  32.6%, 98.4% { transform: translate(var(--sc-sv-bouton)); opacity: 0; }
  99.9%, 100%  { transform: translate(var(--sc-sv-notif)) scale(1.3); opacity: 0; }
}
/* L'alerte tombe du haut de l'écran verrouillé. */
@keyframes sc-sauvegardes-notif {
  0%, 15.6%    { opacity: 0; transform: translateY(-28px) scale(.96); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  16.8%, 20.9% { opacity: 1; transform: none; }
  21.2%        { opacity: 1; transform: scale(.97); }
  21.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(-28px) scale(.96); }
}
/* Je la touche : l'appli s'ouvre depuis l'alerte. */
@keyframes sc-sauvegardes-verrou {
  0%, 21.6%    { opacity: 1; }
  22.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-sauvegardes-appli {
  0%, 21.4%    { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  23%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.92); }
}
@keyframes sc-sauvegardes-maison {
  0%, 22%      { background: #FFFFFF; }
  22.6%, 98.4% { background: #0A0A0A; }
  99.9%, 100%  { background: #FFFFFF; }
}
/* La nuit de 3 h 12, choisie. */
@keyframes sc-sauvegardes-nuit {
  0%, 28.1%    { background: rgba(63, 123, 255, 0); }
  28.4%, 98.4% { background: rgba(63, 123, 255, .07); }
  99.9%, 100%  { background: rgba(63, 123, 255, 0); }
}
@keyframes sc-sauvegardes-radio {
  0%, 28.1%    { border-color: #A3A3A3; }
  28.2%, 98.4% { border-color: #3F7BFF; }
  99.9%, 100%  { border-color: #A3A3A3; }
}
@keyframes sc-sauvegardes-radio-plein {
  0%, 28.1%    { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.3); }
}
/* « Remettre cette copie » : l'appui, la jauge, puis « Copie remise ». */
@keyframes sc-sauvegardes-bouton {
  0%, 31.9%    { transform: none; }
  32.2%        { transform: scale(.97); }
  32.6%, 100%  { transform: none; }
}
@keyframes sc-sauvegardes-jauge {
  0%, 32.6%    { transform: scaleX(0); animation-timing-function: cubic-bezier(.4, .1, .4, 1); }
  43%, 98.4%   { transform: scaleX(1); }
  99.9%, 100%  { transform: scaleX(0); }
}
@keyframes sc-sauvegardes-remettre {
  0%, 32.4%    { opacity: 1; }
  32.6%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-sauvegardes-cours {
  0%, 32.4%    { opacity: 0; }
  32.6%, 43.1% { opacity: 1; }
  43.2%, 100%  { opacity: 0; }
}
@keyframes sc-sauvegardes-fait {
  0%, 43.1%    { opacity: 0; }
  43.6%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* La fiche : « En panne », puis « En ligne, rien à signaler ». */
@keyframes sc-sauvegardes-ko {
  0%, 43.3%    { opacity: 1; }
  43.4%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-sauvegardes-ok {
  0%, 43.3%    { opacity: 0; }
  43.4%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée. La carte revenue, la fiche en
   ligne, la copie de la nuit remise. */
@media (prefers-reduced-motion: reduce) {
  .sc-sauvegardes-page--accueil, .sc-sauvegardes-page--erreur,
  .sc-sauvegardes-c-titre--accueil, .sc-sauvegardes-c-u--accueil,
  .sc-sauvegardes-verrou, .sc-sauvegardes-f-etat--ko, .sc-sauvegardes-f-d--ko,
  .sc-sauvegardes-b--remettre { opacity: 0; }
  .sc-sauvegardes-page--carte, .sc-sauvegardes-c-titre--carte, .sc-sauvegardes-c-u--carte,
  .sc-sauvegardes-appli, .sc-sauvegardes-f-etat--ok, .sc-sauvegardes-f-d--ok,
  .sc-sauvegardes-b--fait, .sc-sauvegardes-radio-plein { opacity: 1; }
  .sc-sauvegardes-maison { background: #0A0A0A; }
  .sc-sauvegardes-nuit--1 .sc-sauvegardes-radio { border-color: #3F7BFF; }
}