/* Scène « vos données en France » : le téléphone de Camille, qui réserve
   sur chezlucie.fr, et la carte de France où l'on suit sa réservation. Deux
   passes : un site monté de services loués, puis le mien. Pas de légende.
   Le rideau de fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      4,5 %  Camille touche « Réserver la table »
      5,6 %  première passe : cinq traits sortent de France, un toutes les
             3,4 %, et le compteur monte (8,4 / 11,8 / 15,2 / 18,6 / 22 %)
       29 %  tout s'efface ; le titre devient « Sur le site que je livre »
       34 %  Camille réserve de nouveau
       35 %  un seul trait bleu, de Gujan-Mestras à Clermont-Ferrand (38,6 %)
     38,4 %  « Votre serveur, o2switch » ; le zéro passe en bleu ; la phrase
             « Elle s'arrête en France » (39,4 %) ; plus rien ne bouge ensuite
       95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 560. Le téléphone de (4, 84) à (216, 540), écran de
   198 x 442 en (11, 91). La carte en coordonnées de toile, de x 226 à 520 :
   la France de (302, 150) à (500, 345), Gujan-Mestras en (353, 279),
   Clermont-Ferrand en (411, 257). */
.fn-scene--donnees {
  --sc-haut: 560px;
  /* Les filets, tous neutres. */
  --line-site: #E5E5E5; --line-champ: #D4D4D4; --line-safari: rgba(0, 0, 0, .08);
  --bleu: #3F7BFF;
  /* Le coin du doigt (rond de 26 px) sur « Réserver la table », mesuré au banc. */
  --sc-dn-bouton: 97px, 383.4px;
  line-height: 1.35;
}
.fn-scene--donnees svg { display: block; }
.fn-scene--donnees p { margin: 0; }
.fn-scene--donnees i { font-style: normal; }

/* ═══ LES TITRES ══════════════════════════════════════════════════════ */
.sc-donnees-qui {
  position: absolute; top: 42px; left: 4px; width: 212px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-donnees-qui b,
.sc-donnees-t b { font-size: 0.9375rem; font-weight: 800; line-height: 19px; letter-spacing: -.01em; color: #0A0A0A; }
.sc-donnees-qui span,
.sc-donnees-t span { font-size: 0.6875rem; line-height: 14px; color: #737373; }
.sc-donnees-titre { position: absolute; top: 6px; left: 226px; width: 294px; height: 36px; z-index: 2; }
.sc-donnees-t {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-donnees-t--2 { opacity: 0; }

/* ═══ LE TÉLÉPHONE DE CAMILLE, DANS SAFARI ════════════════════════════ */
.sc-donnees-tel {
  position: absolute; top: 84px; left: 4px; z-index: 3;
  width: 212px; height: 456px; padding: 7px;
  border-radius: 38px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
}
.sc-donnees-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 31px; background: #FFFFFF; color: #0A0A0A; }
.sc-donnees-ilot {
  position: absolute; top: 8px; left: 50%; z-index: 9;
  width: 60px; height: 18px; margin-left: -30px; border-radius: 9px; background: #000000;
}
.sc-donnees-maison {
  position: absolute; bottom: 5px; left: 50%; z-index: 9;
  width: 72px; height: 4px; margin-left: -36px; border-radius: 2px; background: #0A0A0A;
}
.sc-donnees-statut {
  display: flex; align-items: center; gap: 4px;
  height: 30px; padding: 2px 18px 0 24px; font-size: 0.6875rem;
}
.sc-donnees-statut b { flex: 1; font-weight: 700; }
.sc-donnees-reseau { display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sc-donnees-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-donnees-reseau i:nth-child(1) { height: 3px; }
.sc-donnees-reseau i:nth-child(2) { height: 4.5px; }
.sc-donnees-reseau i:nth-child(3) { height: 6px; }
.sc-donnees-reseau i:nth-child(4) { height: 8px; }
.sc-donnees-pile { display: block; width: 16px; height: 8px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-donnees-pile i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }
.sc-donnees-s-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--line-site);
}
.sc-donnees-s-nav b { font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-donnees-s-nav svg { width: 16px; height: 16px; }
.sc-donnees-s-page { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
/* Plus précis que la remise à zéro des `p` de la scène, sinon la marge saute. */
.fn-scene--donnees .sc-donnees-s-h1 { margin: 14px 0 2px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.sc-donnees-champ {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--line-champ); border-radius: 9px;
  font-size: 0.75rem; white-space: nowrap;
}
.sc-donnees-champ svg { width: 14px; height: 14px; flex: none; color: #737373; }
.sc-donnees-bouton {
  position: relative; display: block; height: 40px; margin-top: 4px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600;
}
.sc-donnees-b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; }
.sc-donnees-b--apres { border: 1px solid var(--line-champ); background: #F5F5F3; color: #0A0A0A; opacity: 0; }
.sc-donnees-b--apres svg { width: 15px; height: 15px; stroke-width: 2; }
/* La barre de Safari, en bas de l'écran. */
.sc-donnees-safari {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 84px; padding: 7px 10px 0;
  border-top: 1px solid var(--line-safari); background: rgba(249, 249, 249, .96);
}
.sc-donnees-sf-adresse {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 10px;
  border-radius: 12px; background: rgba(118, 118, 128, .12);
  font-size: 0.75rem;
}
.sc-donnees-sf-adresse small { font-size: 0.6875rem; font-weight: 600; }
.sc-donnees-sf-adresse svg { width: 13px; height: 13px; }
.sc-donnees-sf-outils { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 4px; padding: 0 6px; color: #0A84FF; }
.sc-donnees-sf-outils svg { width: 17px; height: 17px; }
.sc-donnees-sf-outils svg:nth-child(2) { color: #C7C7CC; }

/* Le doigt de Camille. */
.sc-donnees-doigt {
  position: absolute; top: 0; left: 0; z-index: 4;
  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;
}

/* ═══ LA CARTE ════════════════════════════════════════════════════════
   Un dessin plat, en coordonnées de toile : le contour de la France, les
   traits du trajet, et par-dessus, en HTML, les repères et leurs noms. */
/* Le calque couvre toute la toile, pour que ses enfants gardent leurs
   coordonnées de toile. Il s'approche autour de (462, 247) : à 1,3, la
   France tient de x 254 à 511, Corse comprise, sans sortir de la toile. */
.sc-donnees-monde { position: absolute; inset: 0; z-index: 1; transform-origin: 462px 247px; pointer-events: none; }
.sc-donnees-carte { position: absolute; top: 0; left: 226px; z-index: 0; width: 294px; height: 560px; overflow: visible; }
.sc-donnees-france { fill: #F2F2F0; stroke: #CFCFCF; stroke-width: 1; stroke-linejoin: round; }
.sc-donnees-trait {
  fill: none; stroke: #0A0A0A; stroke-width: 1.6; stroke-linecap: round;
  /* Un trait, puis un vide deux fois plus long : caché (décalage 1), le
     bout arrondi ne laisse aucun point à l'arrivée. */
  stroke-dasharray: 1 2; stroke-dashoffset: 1;
}
.sc-donnees-trait--ici { stroke: var(--bleu); stroke-width: 2.4; }

/* Le départ : Gujan-Mestras, où Camille réserve. */
.sc-donnees-depart { position: absolute; top: 272.3px; left: 346.2px; z-index: 2; display: block; width: 14px; height: 14px; }
.sc-donnees-pin {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid #FFFFFF; background: #0A0A0A;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.sc-donnees-depart span { position: absolute; top: 14px; left: 12px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; color: #0A0A0A; }

/* Les arrêts hors de France : une icône en encre, son nom dessous. */
.sc-donnees-arret {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100px; opacity: 0;
}
.sc-donnees-arret i {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; background: #0A0A0A; color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(31, 36, 46, .2);
}
.sc-donnees-arret svg { width: 16px; height: 16px; }
.sc-donnees-arret span { font-size: 0.6875rem; font-weight: 600; line-height: 14px; white-space: nowrap; color: #0A0A0A; }
/* En haut de la carte, le trait arrive par-dessous : le nom passe au-dessus
   de l'icône, qui reste centrée sur son point. */
.sc-donnees-arret--2,
.sc-donnees-arret--3,
.sc-donnees-arret--4 { flex-direction: column-reverse; margin-top: -18px; }

/* Le serveur, à Clermont-Ferrand : une épingle dont la pointe est SUR la
   ville (410,7 ; 256,5), et son étiquette au-dessus. La boîte fait 124 px de
   large et 98 de haut : étiquette 64, écart 4, épingle 30, dont la pointe
   est à 0,9 px du bas ; d'où top = 256,5 - 97,1. Elle grandit depuis la
   pointe. */
.sc-donnees-serveur {
  position: absolute; top: 159.4px; left: 348.7px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 124px; height: 98px;
  transform-origin: 50% 97.1px; opacity: 0;
}
.sc-donnees-s-carte {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 64px; padding: 7px 12px;
  border: 1px solid var(--line-site); border-radius: 10px; background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(31, 36, 46, .12);
}
.sc-donnees-s-carte b { font-size: 0.6875rem; font-weight: 700; line-height: 14px; color: #0A0A0A; }
.fn-scene--donnees .sc-donnees-s-carte img { display: block; width: auto; max-width: none; height: 16px; }
.sc-donnees-s-carte small { font-size: 0.6875rem; line-height: 14px; color: #525252; white-space: nowrap; }
.sc-donnees-epingle { display: block; flex: none; width: 22.5px; height: 30px; overflow: visible; }
.sc-donnees-epingle path { fill: var(--bleu); stroke: #FFFFFF; stroke-width: 1.5; }
.sc-donnees-epingle circle { fill: #FFFFFF; }

/* Le compteur, sous la carte. */
.sc-donnees-compte {
  position: absolute; top: 452px; left: 226px; width: 294px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sc-donnees-chiffres { position: relative; display: block; width: 22px; height: 38px; }
.sc-donnees-n { position: absolute; inset: 0; font-size: 2.125rem; font-weight: 800; line-height: 38px; text-align: center; color: #0A0A0A; opacity: 0; }
.sc-donnees-n--0 { opacity: 1; }
.sc-donnees-mots { position: relative; display: block; width: 140px; height: 16px; }
.sc-donnees-m { position: absolute; left: 0; top: 0; font-size: 0.75rem; font-weight: 600; line-height: 16px; white-space: nowrap; }
.sc-donnees-m--plus { opacity: 0; }
.fn-scene--donnees .sc-donnees-la {
  position: absolute; top: 496px; left: 226px; width: 294px; z-index: 2;
  font-size: 0.75rem; line-height: 16px; text-align: center; color: #525252;
  opacity: 0;
}

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-fin { animation-name: sc-conclure; }
.sc-donnees-doigt      { animation-name: sc-donnees-doigt; }
.sc-donnees-monde      { animation-name: sc-donnees-monde; }
.sc-donnees-bouton     { animation-name: sc-donnees-bouton; }
.sc-donnees-b--avant   { animation-name: sc-donnees-avant; }
.sc-donnees-b--apres   { animation-name: sc-donnees-apres; }
.sc-donnees-pin        { animation-name: sc-donnees-depart; }
.sc-donnees-t--1       { animation-name: sc-donnees-t1; }
.sc-donnees-t--2       { animation-name: sc-donnees-t2; }
.sc-donnees-trait--1   { animation-name: sc-donnees-trait-1; }
.sc-donnees-trait--2   { animation-name: sc-donnees-trait-2; }
.sc-donnees-trait--3   { animation-name: sc-donnees-trait-3; }
.sc-donnees-trait--4   { animation-name: sc-donnees-trait-4; }
.sc-donnees-trait--5   { animation-name: sc-donnees-trait-5; }
.sc-donnees-trait--ici { animation-name: sc-donnees-trait-ici; }
.sc-donnees-arret--1   { animation-name: sc-donnees-arret-1; }
.sc-donnees-arret--2   { animation-name: sc-donnees-arret-2; }
.sc-donnees-arret--3   { animation-name: sc-donnees-arret-3; }
.sc-donnees-arret--4   { animation-name: sc-donnees-arret-4; }
.sc-donnees-arret--5   { animation-name: sc-donnees-arret-5; }
.sc-donnees-serveur    { animation-name: sc-donnees-serveur; }
.sc-donnees-n--0       { animation-name: sc-donnees-n0; }
.sc-donnees-n--1       { animation-name: sc-donnees-n1; }
.sc-donnees-n--2       { animation-name: sc-donnees-n2; }
.sc-donnees-n--3       { animation-name: sc-donnees-n3; }
.sc-donnees-n--4       { animation-name: sc-donnees-n4; }
.sc-donnees-n--5       { animation-name: sc-donnees-n5; }
.sc-donnees-m--un      { animation-name: sc-donnees-un; }
.sc-donnees-m--plus    { animation-name: sc-donnees-plus; }
.sc-donnees-la         { animation-name: sc-donnees-la; }

/* ═══ CAMILLE RÉSERVE, DEUX FOIS ══════════════════════════════════════ */
@keyframes sc-donnees-doigt {
  0%, 4%       { transform: translate(var(--sc-dn-bouton)) scale(1.3); opacity: 0; }
  4.3%         { transform: translate(var(--sc-dn-bouton)); opacity: 1; animation-timing-function: ease-out; }
  4.6%         { transform: translate(var(--sc-dn-bouton)) scale(.84); opacity: 1; }
  5%           { transform: translate(var(--sc-dn-bouton)); opacity: 0; }
  33.5%        { transform: translate(var(--sc-dn-bouton)) scale(1.3); opacity: 0; }
  33.8%        { transform: translate(var(--sc-dn-bouton)); opacity: 1; animation-timing-function: ease-out; }
  34.1%        { transform: translate(var(--sc-dn-bouton)) scale(.84); opacity: 1; }
  34.5%, 100%  { transform: translate(var(--sc-dn-bouton)); opacity: 0; }
}
@keyframes sc-donnees-bouton {
  0%, 4.3%     { transform: none; }
  4.6%         { transform: scale(.97); }
  5%, 33.8%    { transform: none; }
  34.1%        { transform: scale(.97); }
  34.5%, 100%  { transform: none; }
}
@keyframes sc-donnees-avant {
  0%, 4.7%     { opacity: 1; }
  4.8%, 30.9%  { opacity: 0; }
  31%, 34.2%   { opacity: 1; }
  34.3%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-donnees-apres {
  0%, 4.7%     { opacity: 0; }
  4.8%, 30.9%  { opacity: 1; }
  31%, 34.2%   { opacity: 0; }
  34.3%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* Le repère de Gujan-Mestras bat quand la réservation part. */
@keyframes sc-donnees-depart {
  0%, 5%       { transform: none; }
  5.4%         { transform: scale(1.35); }
  6%, 34.6%    { transform: none; }
  35%          { transform: scale(1.35); }
  35.6%, 100%  { transform: none; }
}
@keyframes sc-donnees-t1 {
  0%, 29.6%    { opacity: 1; }
  30.2%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-donnees-t2 {
  0%, 30.2%    { opacity: 0; }
  30.8%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* ═══ PREMIÈRE PASSE : CINQ TRAITS SORTENT DE FRANCE ══════════════════
   Chaque trait se dessine en 2,8 %, puis tout s'efface entre 29 et 30,5 %. */
@keyframes sc-donnees-trait-1 {
  0%, 5.6%     { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  8.4%, 29%    { stroke-dashoffset: 0; opacity: 1; }
  30.5%        { stroke-dashoffset: 0; opacity: 0; }
  31%, 98.4%   { stroke-dashoffset: 1; opacity: 0; }
  99.9%, 100%  { stroke-dashoffset: 1; opacity: 1; }
}
@keyframes sc-donnees-trait-2 {
  0%, 9%       { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  11.8%, 29%   { stroke-dashoffset: 0; opacity: 1; }
  30.5%        { stroke-dashoffset: 0; opacity: 0; }
  31%, 98.4%   { stroke-dashoffset: 1; opacity: 0; }
  99.9%, 100%  { stroke-dashoffset: 1; opacity: 1; }
}
@keyframes sc-donnees-trait-3 {
  0%, 12.4%    { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  15.2%, 29%   { stroke-dashoffset: 0; opacity: 1; }
  30.5%        { stroke-dashoffset: 0; opacity: 0; }
  31%, 98.4%   { stroke-dashoffset: 1; opacity: 0; }
  99.9%, 100%  { stroke-dashoffset: 1; opacity: 1; }
}
@keyframes sc-donnees-trait-4 {
  0%, 15.8%    { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  18.6%, 29%   { stroke-dashoffset: 0; opacity: 1; }
  30.5%        { stroke-dashoffset: 0; opacity: 0; }
  31%, 98.4%   { stroke-dashoffset: 1; opacity: 0; }
  99.9%, 100%  { stroke-dashoffset: 1; opacity: 1; }
}
@keyframes sc-donnees-trait-5 {
  0%, 19.2%    { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  22%, 29%     { stroke-dashoffset: 0; opacity: 1; }
  30.5%        { stroke-dashoffset: 0; opacity: 0; }
  31%, 98.4%   { stroke-dashoffset: 1; opacity: 0; }
  99.9%, 100%  { stroke-dashoffset: 1; opacity: 1; }
}
/* L'arrêt paraît quand le trait l'atteint. */
@keyframes sc-donnees-arret-1 {
  0%, 8.1%     { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8.8%, 29%    { opacity: 1; transform: none; }
  30.5%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.6); }
}
@keyframes sc-donnees-arret-2 {
  0%, 11.5%    { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  12.2%, 29%   { opacity: 1; transform: none; }
  30.5%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.6); }
}
@keyframes sc-donnees-arret-3 {
  0%, 14.9%    { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  15.6%, 29%   { opacity: 1; transform: none; }
  30.5%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.6); }
}
@keyframes sc-donnees-arret-4 {
  0%, 18.3%    { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  19%, 29%     { opacity: 1; transform: none; }
  30.5%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.6); }
}
@keyframes sc-donnees-arret-5 {
  0%, 21.7%    { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  22.4%, 29%   { opacity: 1; transform: none; }
  30.5%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.6); }
}
/* Le compteur : 0, puis un de plus à chaque arrêt ; retour à 0 avec le titre. */
@keyframes sc-donnees-n0 {
  0%, 8.3%     { opacity: 1; color: #0A0A0A; }
  8.4%, 30.4%  { opacity: 0; color: #0A0A0A; }
  30.5%, 38.8% { opacity: 1; color: #0A0A0A; }
  39.4%, 98.4% { opacity: 1; color: #3F7BFF; }
  99.9%, 100%  { opacity: 1; color: #0A0A0A; }
}
@keyframes sc-donnees-n1 {
  0%, 8.3%     { opacity: 0; }
  8.4%, 11.7%  { opacity: 1; }
  11.8%, 100%  { opacity: 0; }
}
@keyframes sc-donnees-n2 {
  0%, 11.7%    { opacity: 0; }
  11.8%, 15.1% { opacity: 1; }
  15.2%, 100%  { opacity: 0; }
}
@keyframes sc-donnees-n3 {
  0%, 15.1%    { opacity: 0; }
  15.2%, 18.5% { opacity: 1; }
  18.6%, 100%  { opacity: 0; }
}
@keyframes sc-donnees-n4 {
  0%, 18.5%    { opacity: 0; }
  18.6%, 21.9% { opacity: 1; }
  22%, 100%    { opacity: 0; }
}
@keyframes sc-donnees-n5 {
  0%, 21.9%    { opacity: 0; }
  22%, 30.4%   { opacity: 1; }
  30.5%, 100%  { opacity: 0; }
}
@keyframes sc-donnees-un {
  0%, 11.7%    { opacity: 1; }
  11.8%, 30.4% { opacity: 0; }
  30.5%, 100%  { opacity: 1; }
}
@keyframes sc-donnees-plus {
  0%, 11.7%    { opacity: 0; }
  11.8%, 30.4% { opacity: 1; }
  30.5%, 100%  { opacity: 0; }
}

/* ═══ SECONDE PASSE : UN TRAIT, ET IL RESTE EN FRANCE ═════════════════
   La carte s'approche d'abord : les arrêts du dehors sont partis, la France
   remplit le cadre. */
@keyframes sc-donnees-monde {
  0%, 30.4%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  33%, 98.4%   { transform: scale(1.3); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-donnees-trait-ici {
  0%, 35%      { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  38.6%, 98.4% { stroke-dashoffset: 0; }
  99.9%, 100%  { stroke-dashoffset: 1; }
}
@keyframes sc-donnees-serveur {
  0%, 38.3%    { opacity: 0; transform: scale(.7); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  39.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.7); }
}
@keyframes sc-donnees-la {
  0%, 39.4%    { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(4px); }
}

/* Moins de mouvement : l'état d'arrivée. La table réservée, le trait bleu
   jusqu'au serveur, le zéro, la phrase. */
@media (prefers-reduced-motion: reduce) {
  .sc-donnees-t--1, .sc-donnees-b--avant { opacity: 0; }
  .sc-donnees-t--2, .sc-donnees-b--apres, .sc-donnees-serveur, .sc-donnees-la { opacity: 1; }
  .sc-donnees-trait--ici { stroke-dashoffset: 0; }
  .sc-donnees-n--0 { color: #3F7BFF; }
}