/* Scène « villes » : une recherche, une commune, une page. Deux cycles :
   « plombier le teich », puis « plombier mios » ; à chaque fois la page de
   résultats, le doigt sur le résultat de Marc, et sa page pour la commune.
   Versions refusées dans _avant-refonte-ux/ (pages-ville-carte/ : « trop
   d'info » ; pages-ville-direct/ : « il me faut un résultat Google, et
   travaille plus le site »). Le rideau de fin vient du kit.

   FICHIER ÉCRIT PAR scene-css.py : tout ce qui se répète d'un cycle à
   l'autre (frappes, bulles, doigt, clavier, résultats, pages, défilement,
   barre de Safari) est calculé là-bas, depuis un seul minutage et des
   mesures prises au banc (mesures.json). Modifier scene-fixe.css ou le
   script, jamais scene.css.

   LE MINUTAGE, deux cycles de 41 % (4,9 s), à 3 et 44 % :
     +0,4  (2e cycle) le doigt touche la croix : le champ se vide
     +1,2  il tape la recherche, une lettre toutes les 50 ms
     +9,0  il touche « rechercher » ; le clavier descend, Safari charge
    +11,2  la page de résultats
    +18,0  il touche le résultat de Marc ; Safari charge
    +20,2  la page de la commune ; elle descend jusqu'aux chantiers et aux
           quartiers (+25 à +31)
   Le second cycle s'arrête sur la page de Mios à 75 % ; fondu au blanc à
   95 %, retour au début entre 98,4 et 99,9 %.

   LA TOILE : 520 x 560, fond blanc. Le téléphone au milieu (256 x 516,
   écran 246 x 506), une ligne de signature dessous. Rien à côté. */
.fn-scene--villes {
  --sc-haut: 560px;
  --line-champ: #DFE1E5; --line-safari: rgba(0, 0, 0, .12); --line-site: #EDEDED; --line-res: #EBEBEB;
  line-height: 1.35;
}
.fn-scene--villes svg { display: block; }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-villes-tel {
  position: absolute; top: 4px; left: 132px; z-index: 2;
  width: 256px; height: 516px; padding: 5px;
  border-radius: 40px; background: #0A0A0A;
  box-shadow: 0 18px 40px rgba(31, 36, 46, .2);
}
.sc-villes-ecran {
  position: relative; height: 506px; overflow: hidden;
  border-radius: 35px; background: #FFFFFF; color: #1F1F1F;
}
.sc-villes-ilot {
  position: absolute; top: 7px; left: 89px; z-index: 9;
  width: 68px; height: 19px; border-radius: 10px; background: #0A0A0A;
}
.sc-villes-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; margin: 0; padding: 2px 18px 0 26px;
  background: #FFFFFF; font-size: 0.5625rem;
}
.sc-villes-statut b { font-weight: 700; }
.sc-villes-statut-ico { display: flex; align-items: center; gap: 3px; }
.sc-villes-statut-ico svg { width: 10px; height: 8px; fill: #0A0A0A; }
.sc-villes-pile {
  display: block; width: 15px; height: 8px; padding: 1px;
  border: 1px solid rgba(10, 10, 10, .45); border-radius: 3px;
}
.sc-villes-pile i { display: block; width: 72%; height: 100%; border-radius: 1px; background: #0A0A0A; }

/* La zone de page, sous la barre d'état : 246 x 430 (y 32 à 462). */
.sc-villes-contenu { position: absolute; top: 32px; left: 0; width: 246px; height: 430px; overflow: hidden; }
.sc-villes-contenu > div { position: absolute; inset: 0; background: #FFFFFF; }
.sc-villes-contenu svg:not([class]) { width: 14px; height: 14px; flex: none; }

/* ── La recherche ─────────────────────────────────────────────────────── */
.sc-villes-champ {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 13px;
  border: 1px solid var(--line-champ); border-radius: 20px;
  background: #FFFFFF; color: #5F6368;
  box-shadow: 0 2px 8px rgba(31, 36, 46, .14);
}
.sc-villes-saisies { position: relative; flex: 1; min-width: 0; height: 18px; font-size: 0.75rem; color: #202124; }
.sc-villes-vide,
.sc-villes-saisie { position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 18px; }
.sc-villes-vide { color: #9AA0A6; }
.sc-villes-saisie { opacity: 0; }
.sc-villes-tape { display: block; overflow: hidden; white-space: nowrap; width: 0; }
.sc-villes-tape-txt { display: inline-block; }
.sc-villes-caret { display: block; width: 1.5px; height: 16px; margin-left: 1px; border-radius: 1px; background: #1A73E8; }
.sc-villes-champ-x { display: grid; place-items: center; opacity: 0; }
.sc-villes-sep { display: block; width: 1px; height: 18px; background: var(--line-champ); }

/* ── Les résultats, sans logo : deux résultats ─────────────────────────── */
.sc-villes-contenu > .sc-villes-res { z-index: 2; display: flex; flex-direction: column; opacity: 0; }
.sc-villes-res-champ {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 34px; margin: 6px 10px 0; padding: 0 12px;
  border: 1px solid var(--line-champ); border-radius: 17px;
  color: #5F6368; font-size: 0.65625rem;
}
.sc-villes-res-champ span { flex: 1; color: #202124; }
/* L'onglet actif : un fond de 2 px sous le mot, pas un bord d'un seul
   côté (interdit par la charte). */
.sc-villes-onglets {
  display: flex; gap: 15px; flex: none; height: 30px; margin-top: 4px; padding: 0 15px;
  border-bottom: 1px solid var(--line-res);
  font-size: 0.5625rem; color: #5F6368; line-height: 30px;
}
.sc-villes-onglets b { font-weight: 700; color: #1F1F1F; background: linear-gradient(#1A73E8, #1A73E8) left bottom / 100% 2px no-repeat; }
/* La réponse d'IA, en tête. */
.sc-villes-ia {
  position: relative; display: flex; flex-direction: column; gap: 6px; flex: none;
  margin: 10px 10px 2px; padding: 9px 11px 10px;
  border-radius: 12px; background: #EEF3FC;
}
.sc-villes-ia-tete { display: flex; align-items: center; gap: 5px; font-size: 0.5625rem; font-weight: 700; color: #1F1F1F; }
.sc-villes-contenu .sc-villes-ia-tete svg { width: 12px; height: 12px; color: #1A73E8; fill: #1A73E8; }
.sc-villes-ia-txt { font-size: 0.5625rem; line-height: 1.5; color: #1F1F1F; opacity: 0; }
.sc-villes-ia-txt b { font-weight: 700; }
.sc-villes-ia-charge { position: absolute; top: 30px; left: 11px; right: 11px; display: flex; flex-direction: column; gap: 7px; }
.sc-villes-ia-charge i { display: block; height: 7px; border-radius: 4px; background: #D6DEEA; }
.sc-villes-ia-charge i:nth-child(2) { width: 88%; }
.sc-villes-ia-charge i:nth-child(3) { width: 56%; }
.sc-villes-ia-source {
  display: flex; align-items: center; gap: 5px; align-self: flex-start;
  height: 20px; padding: 0 8px 0 3px;
  border: 1px solid #DCE3EE; border-radius: 10px; background: #FFFFFF;
  font-size: 0.5rem; color: #3C4043; opacity: 0;
}
.sc-villes-ia-source .sc-villes-favi { width: 14px; height: 14px; }
.sc-villes-contenu .sc-villes-ia-source .sc-villes-favi svg { width: 9px; height: 9px; }
.sc-villes-r {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 14px; border-bottom: 1px solid var(--line-res);
  font-size: 0.5625rem; line-height: 1.45; color: #4D5156;
}
.sc-villes-r b { font-size: 0.75rem; font-weight: 400; line-height: 1.3; color: #1A0DAB; }
.sc-villes-r-site { display: flex; align-items: center; gap: 7px; }
.sc-villes-r-site > span { display: flex; flex-direction: column; font-size: 0.53125rem; font-weight: 600; line-height: 1.25; color: #1F1F1F; }
.sc-villes-r-site small { font-size: 0.5rem; font-weight: 400; color: #4D5156; }
.sc-villes-favi {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px;
  border-radius: 50%; background: #1B4FD1; color: #FFFFFF;
  font-size: 8px; font-weight: 800; font-style: normal; line-height: 1;
}
.sc-villes-contenu .sc-villes-favi svg { width: 11px; height: 11px; fill: #FFFFFF; stroke: none; }
.sc-villes-favi--gris { background: #DADCE0; color: #5F6368; }
.sc-villes-r--marc { flex-direction: row; align-items: flex-start; gap: 10px; }
.sc-villes-r-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-villes-r--marc img { display: block; width: 62px; height: 62px; max-width: none; margin-top: 22px; border-radius: 8px; object-fit: cover; flex: none; }

/* ── La page de la commune, sur le site de Marc ───────────────────────── */
.sc-villes-contenu > .sc-villes-site { z-index: 3; opacity: 0; }
.sc-villes-site-page { display: flex; flex-direction: column; padding-bottom: 24px; color: #0A0A0A; }
.sc-villes-site-tete {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  height: 44px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line-site);
}
.sc-villes-marque { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; letter-spacing: -.01em; }
.sc-villes-marque i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #1B4FD1; }
.sc-villes-contenu .sc-villes-marque svg { width: 13px; height: 13px; fill: #FFFFFF; stroke: none; }
.sc-villes-marque b { font-weight: 800; }
.sc-villes-marque small { font-size: 0.75rem; font-weight: 500; color: #525252; }
.sc-villes-tete-ico { display: flex; align-items: center; gap: 10px; }
.sc-villes-tete-ico i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #EEF2FC; color: #1B4FD1; }
.sc-villes-contenu .sc-villes-tete-ico svg { width: 15px; height: 15px; }
.sc-villes-site-hero { position: relative; display: block; flex: none; }
.sc-villes-site-hero img { display: block; width: 246px; height: 132px; max-width: none; object-fit: cover; }
/* L'étiquette de la commune, posée sur la photo. */
.sc-villes-site-lieu {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px 0 6px; border-radius: 7px;
  background: #FFFFFF; color: #0A0A0A;
  box-shadow: 0 2px 6px rgba(31, 36, 46, .2);
  font-size: 0.5rem; font-weight: 700; white-space: nowrap;
}
.sc-villes-contenu .sc-villes-site-lieu svg { width: 12px; height: 12px; color: #1B4FD1; }
/* Le titre : le métier en encre, LA COMMUNE EN BLEU. C'est la réponse à ce
   qu'on vient de taper. */
.sc-villes-site-h1 { margin: 12px 14px 0; font-size: 1.4375rem; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.sc-villes-site-h1 em { font-style: normal; color: #1B4FD1; }
.sc-villes-site-dit { margin: 8px 14px 0; font-size: 0.625rem; line-height: 1.5; color: #525252; }
.sc-villes-site-cta { display: flex; gap: 8px; margin: 14px 14px 0; }
.sc-villes-btn-noir,
.sc-villes-btn-clair {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border-radius: 10px; font-size: 0.625rem; font-weight: 700;
}
.sc-villes-btn-noir { flex: 1; background: #0A0A0A; color: #FFFFFF; }
.sc-villes-btn-clair { width: 86px; border: 1px solid #D4D4D4; color: #0A0A0A; }
.sc-villes-contenu .sc-villes-site-cta svg { width: 13px; height: 13px; }
.sc-villes-garanties { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 12px 14px 0; font-size: 0.5rem; font-weight: 600; color: #3C3C3C; }
.sc-villes-garanties span { display: flex; align-items: center; gap: 3px; }
.sc-villes-contenu .sc-villes-garanties svg { width: 11px; height: 11px; color: #1B4FD1; stroke-width: 2; }
.sc-villes-site-h2 { margin: 15px 14px 8px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-villes-chantiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 14px; }
.sc-villes-chantier { display: flex; flex-direction: column; gap: 1px; font-size: 0.46875rem; color: #737373; }
.sc-villes-chantier img { display: block; width: 100%; height: 66px; max-width: none; margin-bottom: 5px; border-radius: 8px; object-fit: cover; }
.sc-villes-chantier b { font-size: 0.5625rem; font-weight: 700; color: #0A0A0A; }
.sc-villes-quartiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px; }
.sc-villes-quartiers span {
  display: flex; align-items: center; gap: 3px;
  height: 24px; padding: 0 8px 0 6px; border: 1px solid #E5E5E5; border-radius: 7px;
  font-size: 0.5rem; font-weight: 600; color: #3C3C3C;
}
.sc-villes-contenu .sc-villes-quartiers svg { width: 11px; height: 11px; color: #1B4FD1; }

/* ── Le clavier d'iPhone, AZERTY ──────────────────────────────────────── */
.sc-villes-clavier {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: 9px;
  height: 196px; padding: 8px 3px 0;
  background: #D1D4DA;
}
.sc-villes-rang { display: flex; justify-content: center; gap: 4px; }
.sc-villes-rang i {
  display: grid; place-items: center;
  width: 20.2px; height: 30px; border-radius: 5px;
  background: #FFFFFF; color: #0A0A0A;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  font-size: 0.6875rem; font-style: normal; line-height: 1;
}
.sc-villes-rang--3 { gap: 5px; }
.sc-villes-rang--3 .sc-villes-touche-speciale { width: 31px; }
.sc-villes-rang i.sc-villes-touche-speciale { background: #ABB0BA; }
.sc-villes-rang i svg { width: 13px; height: 13px; }
.sc-villes-rang--4 i { font-size: 0.53125rem; }
.sc-villes-rang--4 .sc-villes-touche-speciale { width: 46px; }
.sc-villes-rang i.sc-villes-espace { flex: 1; width: auto; }
.sc-villes-rang i.sc-villes-go { width: 70px; background: #0A84FF; color: #FFFFFF; }
/* La bulle d'iPhone, une par touche tapée (sa place : scene-css.py). */
.sc-villes-bulle {
  position: absolute; z-index: 2;
  display: flex; justify-content: center;
  width: 33px; height: 47px; padding-top: 5px;
  border-radius: 9px 9px 6px 6px; background: #FFFFFF; color: #0A0A0A;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  font-size: 1.1875rem; line-height: 1;
  opacity: 0;
}

/* ── La barre de Safari, en bas ───────────────────────────────────────── */
.sc-villes-safari {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 56px; padding: 6px 9px 0;
  border-top: 1px solid var(--line-safari);
  background: rgba(247, 247, 247, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sc-villes-safari-champ {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 10px; overflow: hidden;
  border-radius: 11px; background: #E4E4E9;
  font-size: 0.5625rem; color: #0A0A0A;
}
.sc-villes-safari-champ b { font-weight: 600; }
.sc-villes-safari-champ small { font-size: 0.8em; }
.sc-villes-safari-champ svg { width: 10px; height: 10px; }
.sc-villes-safari-url { position: relative; display: block; width: 110px; height: 30px; }
.sc-villes-url-g,
.sc-villes-url-d { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.sc-villes-url-d { opacity: 0; }
.sc-villes-safari-charge {
  position: absolute; left: 9px; right: 9px; top: 34px;
  height: 2px; border-radius: 1px; background: #0A84FF;
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.sc-villes-maison {
  position: absolute; bottom: 6px; left: 81px; z-index: 10;
  width: 84px; height: 4px; border-radius: 2px; background: #0A0A0A;
}

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

/* ═══ LA SIGNATURE, SOUS LE TÉLÉPHONE ═════════════════════════════════ */
.sc-villes-signe {
  position: absolute; left: 0; right: 0; top: 530px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; font-size: 0.59375rem; color: #525252;
}
.sc-villes-signe img { display: block; width: 18px; height: 18px; max-width: none; }
.sc-villes-signe b { font-weight: 800; color: #0A0A0A; }

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-fin { animation-name: sc-conclure; }
.sc-villes-vide { animation-name: sc-villes-vide; }
.sc-villes-saisie--1 { animation-name: sc-villes-saisie-1; }
.sc-villes-tape--1 { animation-name: sc-villes-tape-1; }
.sc-villes-saisie--2 { animation-name: sc-villes-saisie-2; }
.sc-villes-tape--2 { animation-name: sc-villes-tape-2; }
.sc-villes-champ-x { animation-name: sc-villes-champ-x; }
.sc-villes-clavier { animation-name: sc-villes-clavier; }
.sc-villes-safari-charge { animation-name: sc-villes-charge; }
.sc-villes-url-g { animation-name: sc-villes-url-g; }
.sc-villes-url-d { animation-name: sc-villes-url-d; }
.sc-villes-contenu > .sc-villes-res--1 { animation-name: sc-villes-res-1; }
.sc-villes-ia-charge--1 { animation-name: sc-villes-ia-charge-1; }
.sc-villes-ia-txt--1 { animation-name: sc-villes-ia-txt-1; }
.sc-villes-ia-source--1 { animation-name: sc-villes-ia-source-1; }
.sc-villes-r--marc-1 { animation-name: sc-villes-marc-1; }
.sc-villes-contenu > .sc-villes-site--1 { animation-name: sc-villes-site-1; }
.sc-villes-site-page--1 { animation-name: sc-villes-defile-1; }
.sc-villes-contenu > .sc-villes-res--2 { animation-name: sc-villes-res-2; }
.sc-villes-ia-charge--2 { animation-name: sc-villes-ia-charge-2; }
.sc-villes-ia-txt--2 { animation-name: sc-villes-ia-txt-2; }
.sc-villes-ia-source--2 { animation-name: sc-villes-ia-source-2; }
.sc-villes-r--marc-2 { animation-name: sc-villes-marc-2; }
.sc-villes-contenu > .sc-villes-site--2 { animation-name: sc-villes-site-2; }
.sc-villes-site-page--2 { animation-name: sc-villes-defile-2; }
.sc-villes-doigt { animation-name: sc-villes-doigt; }
.sc-villes-bulle--b { animation-name: sc-villes-bulle-b; }
.sc-villes-bulle--c { animation-name: sc-villes-bulle-c; }
.sc-villes-bulle--e { animation-name: sc-villes-bulle-e; }
.sc-villes-bulle--h { animation-name: sc-villes-bulle-h; }
.sc-villes-bulle--i { animation-name: sc-villes-bulle-i; }
.sc-villes-bulle--l { animation-name: sc-villes-bulle-l; }
.sc-villes-bulle--m { animation-name: sc-villes-bulle-m; }
.sc-villes-bulle--o { animation-name: sc-villes-bulle-o; }
.sc-villes-bulle--p { animation-name: sc-villes-bulle-p; }
.sc-villes-bulle--r { animation-name: sc-villes-bulle-r; }
.sc-villes-bulle--s { animation-name: sc-villes-bulle-s; }
.sc-villes-bulle--t { animation-name: sc-villes-bulle-t; }

/* ═══ LES MOUVEMENTS (calculés) ═══════════════════════════════════════ */
.sc-villes-bulle--b { left: 144.3px; top: 69px; }
.sc-villes-bulle--c { left: 93.9px; top: 69px; }
.sc-villes-bulle--e { left: 46px; top: -9px; }
.sc-villes-bulle--h { left: 118.6px; top: 30px; }
.sc-villes-bulle--i { left: 167px; top: -9px; }
.sc-villes-bulle--l { left: 191.2px; top: 30px; }
.sc-villes-bulle--m { left: 215.3px; top: 30px; }
.sc-villes-bulle--o { left: 191.2px; top: -9px; }
.sc-villes-bulle--p { left: 215.3px; top: -9px; }
.sc-villes-bulle--r { left: 70.2px; top: -9px; }
.sc-villes-bulle--s { left: 21.8px; top: 30px; }
.sc-villes-bulle--t { left: 94.4px; top: -9px; }
@keyframes sc-villes-vide {
  0%            { opacity: 1; }
  4.15%         { opacity: 1; }
  4.2%          { opacity: 0; }
  45.55%        { opacity: 0; }
  45.6%         { opacity: 1; }
  46.15%        { opacity: 1; }
  46.2%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-villes-saisie-1 {
  0%            { opacity: 0; }
  4.15%         { opacity: 0; }
  4.2%          { opacity: 1; }
  45.55%        { opacity: 1; }
  45.6%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-tape-1 {
  0%            { width: 0; animation-timing-function: steps(1, end); }
  4.2%          { width: 8px; animation-timing-function: steps(1, end); }
  4.62%         { width: 10.9px; animation-timing-function: steps(1, end); }
  5.04%         { width: 18.1px; animation-timing-function: steps(1, end); }
  5.46%         { width: 28.6px; animation-timing-function: steps(1, end); }
  5.88%         { width: 36px; animation-timing-function: steps(1, end); }
  6.3%          { width: 38.9px; animation-timing-function: steps(1, end); }
  6.72%         { width: 45.9px; animation-timing-function: steps(1, end); }
  7.14%         { width: 50.4px; animation-timing-function: steps(1, end); }
  7.56%         { width: 53.8px; animation-timing-function: steps(1, end); }
  7.98%         { width: 56.7px; animation-timing-function: steps(1, end); }
  8.4%          { width: 63.7px; animation-timing-function: steps(1, end); }
  8.82%         { width: 67px; animation-timing-function: steps(1, end); }
  9.24%         { width: 70.9px; animation-timing-function: steps(1, end); }
  9.66%         { width: 77.8px; animation-timing-function: steps(1, end); }
  10.08%        { width: 80.7px; animation-timing-function: steps(1, end); }
  10.5%         { width: 87.6px; animation-timing-function: steps(1, end); }
  10.92%, 98.4% { width: 94.7px; animation-timing-function: steps(1, end); }
  99.9%, 100%   { width: 0; }
}
@keyframes sc-villes-saisie-2 {
  0%            { opacity: 0; }
  46.15%        { opacity: 0; }
  46.2%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-tape-2 {
  0%            { width: 0; animation-timing-function: steps(1, end); }
  46.2%         { width: 8px; animation-timing-function: steps(1, end); }
  46.62%        { width: 10.9px; animation-timing-function: steps(1, end); }
  47.04%        { width: 18.1px; animation-timing-function: steps(1, end); }
  47.46%        { width: 28.6px; animation-timing-function: steps(1, end); }
  47.88%        { width: 36px; animation-timing-function: steps(1, end); }
  48.3%         { width: 38.9px; animation-timing-function: steps(1, end); }
  48.72%        { width: 45.9px; animation-timing-function: steps(1, end); }
  49.14%        { width: 50.4px; animation-timing-function: steps(1, end); }
  49.56%        { width: 53.8px; animation-timing-function: steps(1, end); }
  49.98%        { width: 64.3px; animation-timing-function: steps(1, end); }
  50.4%         { width: 67.2px; animation-timing-function: steps(1, end); }
  50.82%        { width: 74.4px; animation-timing-function: steps(1, end); }
  51.24%, 98.4% { width: 80.7px; animation-timing-function: steps(1, end); }
  99.9%, 100%   { width: 0; }
}
@keyframes sc-villes-champ-x {
  0%            { opacity: 0; }
  4.15%         { opacity: 0; }
  4.2%, 98.4%   { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-clavier {
  0%            { transform: translateY(0); }
  12.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  14%           { transform: translateY(200px); }
  44%           { transform: translateY(200px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  45.4%         { transform: translateY(0); }
  54.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  56%, 98.4%    { transform: translateY(200px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-villes-charge {
  0%            { opacity: 0; transform: scaleX(0); }
  12.5%         { opacity: 0; transform: scaleX(0); }
  12.7%         { opacity: 1; transform: scaleX(.08); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  14.6%         { opacity: 1; transform: scaleX(1); }
  15.1%         { opacity: 0; transform: scaleX(1); }
  24.4%         { opacity: 0; transform: scaleX(0); }
  24.6%         { opacity: 1; transform: scaleX(.08); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  26.4%         { opacity: 1; transform: scaleX(1); }
  26.9%         { opacity: 0; transform: scaleX(1); }
  54.5%         { opacity: 0; transform: scaleX(0); }
  54.7%         { opacity: 1; transform: scaleX(.08); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  56.6%         { opacity: 1; transform: scaleX(1); }
  57.1%         { opacity: 0; transform: scaleX(1); }
  66.4%         { opacity: 0; transform: scaleX(0); }
  66.6%         { opacity: 1; transform: scaleX(.08); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  68.4%         { opacity: 1; transform: scaleX(1); }
  68.9%, 98.4%  { opacity: 0; transform: scaleX(1); }
  99.9%, 100%   { opacity: 0; transform: scaleX(0); }
}
@keyframes sc-villes-url-g {
  0%            { opacity: 1; }
  26.5%         { opacity: 1; }
  26.7%         { opacity: 0; }
  44.1%         { opacity: 0; }
  44.3%         { opacity: 1; }
  68.5%         { opacity: 1; }
  68.7%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-villes-url-d {
  0%            { opacity: 0; }
  26.5%         { opacity: 0; }
  26.7%         { opacity: 1; }
  44.1%         { opacity: 1; }
  44.3%         { opacity: 0; }
  68.5%         { opacity: 0; }
  68.7%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-res-1 {
  0%            { opacity: 0; }
  14.2%         { opacity: 0; animation-timing-function: ease-out; }
  14.9%         { opacity: 1; }
  43.8%         { opacity: 1; }
  43.9%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-ia-charge-1 {
  0%            { opacity: 1; }
  14.2%         { opacity: 1; animation-timing-function: ease-in-out; }
  15%           { opacity: .45; animation-timing-function: ease-in-out; }
  15.8%         { opacity: 1; animation-timing-function: ease-in-out; }
  16.6%         { opacity: .45; animation-timing-function: ease-in-out; }
  17.2%         { opacity: .45; }
  17.6%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-villes-ia-txt-1 {
  0%            { opacity: 0; }
  17.2%         { opacity: 0; animation-timing-function: ease-out; }
  18%, 98.4%    { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-ia-source-1 {
  0%            { opacity: 0; }
  17.8%         { opacity: 0; animation-timing-function: ease-out; }
  18.6%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-marc-1 {
  0%            { background: rgba(241, 243, 244, 0); }
  23.8%         { background: rgba(241, 243, 244, 0); }
  24%           { background: rgba(241, 243, 244, 1); }
  25.4%         { background: rgba(241, 243, 244, 1); }
  25.8%, 98.4%  { background: rgba(241, 243, 244, 0); }
  99.9%, 100%   { background: rgba(241, 243, 244, 0); }
}
@keyframes sc-villes-site-1 {
  0%            { opacity: 0; transform: translateY(12px); }
  26.2%         { opacity: 0; transform: translateY(12px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  27%           { opacity: 1; transform: translateY(0); }
  43.8%         { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
  44.6%, 98.4%  { opacity: 0; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(12px); }
}
@keyframes sc-villes-defile-1 {
  0%            { transform: translateY(0); }
  30.5%         { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  36%, 98.4%    { transform: translateY(-180px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-villes-res-2 {
  0%            { opacity: 0; }
  56.2%         { opacity: 0; animation-timing-function: ease-out; }
  56.9%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-ia-charge-2 {
  0%            { opacity: 1; }
  56.2%         { opacity: 1; animation-timing-function: ease-in-out; }
  57%           { opacity: .45; animation-timing-function: ease-in-out; }
  57.8%         { opacity: 1; animation-timing-function: ease-in-out; }
  58.6%         { opacity: .45; animation-timing-function: ease-in-out; }
  59.2%         { opacity: .45; }
  59.6%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-villes-ia-txt-2 {
  0%            { opacity: 0; }
  59.2%         { opacity: 0; animation-timing-function: ease-out; }
  60%, 98.4%    { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-ia-source-2 {
  0%            { opacity: 0; }
  59.8%         { opacity: 0; animation-timing-function: ease-out; }
  60.6%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-marc-2 {
  0%            { background: rgba(241, 243, 244, 0); }
  65.8%         { background: rgba(241, 243, 244, 0); }
  66%           { background: rgba(241, 243, 244, 1); }
  67.4%         { background: rgba(241, 243, 244, 1); }
  67.8%, 98.4%  { background: rgba(241, 243, 244, 0); }
  99.9%, 100%   { background: rgba(241, 243, 244, 0); }
}
@keyframes sc-villes-site-2 {
  0%            { opacity: 0; transform: translateY(12px); }
  68.2%         { opacity: 0; transform: translateY(12px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  69%, 98.4%    { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(12px); }
}
@keyframes sc-villes-defile-2 {
  0%            { transform: translateY(0); }
  72.5%         { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  78%, 98.4%    { transform: translateY(-180px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-villes-doigt {
  0%            { opacity: 0; transform: translate(356.8px, 330px) scale(1); }
  4.12%         { opacity: 0; transform: translate(356.8px, 330px) scale(1); }
  4.18%         { opacity: 1; transform: translate(356.8px, 330px) scale(0.9); }
  4.4%          { opacity: 1; transform: translate(356.8px, 330px) scale(0.9); }
  4.5%          { opacity: 0; transform: translate(356.8px, 330px) scale(1); }
  4.54%         { opacity: 0; transform: translate(332.7px, 369px) scale(1); }
  4.6%          { opacity: 1; transform: translate(332.7px, 369px) scale(0.9); }
  4.82%         { opacity: 1; transform: translate(332.7px, 369px) scale(0.9); }
  4.92%         { opacity: 0; transform: translate(332.7px, 369px) scale(1); }
  4.96%         { opacity: 0; transform: translate(332.7px, 330px) scale(1); }
  5.02%         { opacity: 1; transform: translate(332.7px, 330px) scale(0.9); }
  5.24%         { opacity: 1; transform: translate(332.7px, 330px) scale(0.9); }
  5.34%         { opacity: 0; transform: translate(332.7px, 330px) scale(1); }
  5.38%         { opacity: 0; transform: translate(356.8px, 369px) scale(1); }
  5.44%         { opacity: 1; transform: translate(356.8px, 369px) scale(0.9); }
  5.66%         { opacity: 1; transform: translate(356.8px, 369px) scale(0.9); }
  5.76%         { opacity: 0; transform: translate(356.8px, 369px) scale(1); }
  5.8%          { opacity: 0; transform: translate(285.8px, 408px) scale(1); }
  5.86%         { opacity: 1; transform: translate(285.8px, 408px) scale(0.9); }
  6.08%         { opacity: 1; transform: translate(285.8px, 408px) scale(0.9); }
  6.18%         { opacity: 0; transform: translate(285.8px, 408px) scale(1); }
  6.22%         { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  6.28%         { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  6.5%          { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  6.6%          { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  6.64%         { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  6.7%          { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  6.92%         { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  7.02%         { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  7.06%         { opacity: 0; transform: translate(211.7px, 330px) scale(1); }
  7.12%         { opacity: 1; transform: translate(211.7px, 330px) scale(0.9); }
  7.34%         { opacity: 1; transform: translate(211.7px, 330px) scale(0.9); }
  7.44%         { opacity: 0; transform: translate(211.7px, 330px) scale(1); }
  7.48%         { opacity: 0; transform: translate(236px, 447px) scale(1); }
  7.54%         { opacity: 1; transform: translate(236px, 447px) scale(0.9); }
  7.76%         { opacity: 1; transform: translate(236px, 447px) scale(0.9); }
  7.86%         { opacity: 0; transform: translate(236px, 447px) scale(1); }
  7.9%          { opacity: 0; transform: translate(332.7px, 369px) scale(1); }
  7.96%         { opacity: 1; transform: translate(332.7px, 369px) scale(0.9); }
  8.18%         { opacity: 1; transform: translate(332.7px, 369px) scale(0.9); }
  8.28%         { opacity: 0; transform: translate(332.7px, 369px) scale(1); }
  8.32%         { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  8.38%         { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  8.6%          { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  8.7%          { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  8.74%         { opacity: 0; transform: translate(236px, 447px) scale(1); }
  8.8%          { opacity: 1; transform: translate(236px, 447px) scale(0.9); }
  9.02%         { opacity: 1; transform: translate(236px, 447px) scale(0.9); }
  9.12%         { opacity: 0; transform: translate(236px, 447px) scale(1); }
  9.16%         { opacity: 0; transform: translate(235.9px, 330px) scale(1); }
  9.22%         { opacity: 1; transform: translate(235.9px, 330px) scale(0.9); }
  9.44%         { opacity: 1; transform: translate(235.9px, 330px) scale(0.9); }
  9.54%         { opacity: 0; transform: translate(235.9px, 330px) scale(1); }
  9.58%         { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  9.64%         { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  9.86%         { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  9.96%         { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  10%           { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  10.06%        { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  10.28%        { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  10.38%        { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  10.42%        { opacity: 0; transform: translate(235.4px, 408px) scale(1); }
  10.48%        { opacity: 1; transform: translate(235.4px, 408px) scale(0.9); }
  10.7%         { opacity: 1; transform: translate(235.4px, 408px) scale(0.9); }
  10.8%         { opacity: 0; transform: translate(235.4px, 408px) scale(1); }
  10.84%        { opacity: 0; transform: translate(260.1px, 369px) scale(1); }
  10.9%         { opacity: 1; transform: translate(260.1px, 369px) scale(0.9); }
  11.12%        { opacity: 1; transform: translate(260.1px, 369px) scale(0.9); }
  11.22%        { opacity: 0; transform: translate(260.1px, 369px) scale(1); }
  11.65%        { opacity: 0; transform: translate(333px, 447px) scale(1.3); }
  11.9%         { opacity: 1; transform: translate(333px, 447px) scale(1); animation-timing-function: ease-out; }
  12.2%         { opacity: 1; transform: translate(333px, 447px) scale(0.84); }
  12.6%         { opacity: 0; transform: translate(333px, 447px) scale(1); }
  23.65%        { opacity: 0; transform: translate(202px, 376px) scale(1.3); }
  23.9%         { opacity: 1; transform: translate(202px, 376px) scale(1); animation-timing-function: ease-out; }
  24.2%         { opacity: 1; transform: translate(202px, 376px) scale(0.84); }
  24.6%         { opacity: 0; transform: translate(202px, 376px) scale(1); }
  45.05%        { opacity: 0; transform: translate(309px, 59px) scale(1.3); }
  45.3%         { opacity: 1; transform: translate(309px, 59px) scale(1); animation-timing-function: ease-out; }
  45.6%         { opacity: 1; transform: translate(309px, 59px) scale(0.84); }
  46%           { opacity: 0; transform: translate(309px, 59px) scale(1); }
  46.12%        { opacity: 0; transform: translate(356.8px, 330px) scale(1); }
  46.18%        { opacity: 1; transform: translate(356.8px, 330px) scale(0.9); }
  46.4%         { opacity: 1; transform: translate(356.8px, 330px) scale(0.9); }
  46.5%         { opacity: 0; transform: translate(356.8px, 330px) scale(1); }
  46.54%        { opacity: 0; transform: translate(332.7px, 369px) scale(1); }
  46.6%         { opacity: 1; transform: translate(332.7px, 369px) scale(0.9); }
  46.82%        { opacity: 1; transform: translate(332.7px, 369px) scale(0.9); }
  46.92%        { opacity: 0; transform: translate(332.7px, 369px) scale(1); }
  46.96%        { opacity: 0; transform: translate(332.7px, 330px) scale(1); }
  47.02%        { opacity: 1; transform: translate(332.7px, 330px) scale(0.9); }
  47.24%        { opacity: 1; transform: translate(332.7px, 330px) scale(0.9); }
  47.34%        { opacity: 0; transform: translate(332.7px, 330px) scale(1); }
  47.38%        { opacity: 0; transform: translate(356.8px, 369px) scale(1); }
  47.44%        { opacity: 1; transform: translate(356.8px, 369px) scale(0.9); }
  47.66%        { opacity: 1; transform: translate(356.8px, 369px) scale(0.9); }
  47.76%        { opacity: 0; transform: translate(356.8px, 369px) scale(1); }
  47.8%         { opacity: 0; transform: translate(285.8px, 408px) scale(1); }
  47.86%        { opacity: 1; transform: translate(285.8px, 408px) scale(0.9); }
  48.08%        { opacity: 1; transform: translate(285.8px, 408px) scale(0.9); }
  48.18%        { opacity: 0; transform: translate(285.8px, 408px) scale(1); }
  48.22%        { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  48.28%        { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  48.5%         { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  48.6%         { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  48.64%        { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  48.7%         { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  48.92%        { opacity: 1; transform: translate(187.5px, 330px) scale(0.9); }
  49.02%        { opacity: 0; transform: translate(187.5px, 330px) scale(1); }
  49.06%        { opacity: 0; transform: translate(211.7px, 330px) scale(1); }
  49.12%        { opacity: 1; transform: translate(211.7px, 330px) scale(0.9); }
  49.34%        { opacity: 1; transform: translate(211.7px, 330px) scale(0.9); }
  49.44%        { opacity: 0; transform: translate(211.7px, 330px) scale(1); }
  49.48%        { opacity: 0; transform: translate(236px, 447px) scale(1); }
  49.54%        { opacity: 1; transform: translate(236px, 447px) scale(0.9); }
  49.76%        { opacity: 1; transform: translate(236px, 447px) scale(0.9); }
  49.86%        { opacity: 0; transform: translate(236px, 447px) scale(1); }
  49.9%         { opacity: 0; transform: translate(356.8px, 369px) scale(1); }
  49.96%        { opacity: 1; transform: translate(356.8px, 369px) scale(0.9); }
  50.18%        { opacity: 1; transform: translate(356.8px, 369px) scale(0.9); }
  50.28%        { opacity: 0; transform: translate(356.8px, 369px) scale(1); }
  50.32%        { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  50.38%        { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  50.6%         { opacity: 1; transform: translate(308.5px, 330px) scale(0.9); }
  50.7%         { opacity: 0; transform: translate(308.5px, 330px) scale(1); }
  50.74%        { opacity: 0; transform: translate(332.7px, 330px) scale(1); }
  50.8%         { opacity: 1; transform: translate(332.7px, 330px) scale(0.9); }
  51.02%        { opacity: 1; transform: translate(332.7px, 330px) scale(0.9); }
  51.12%        { opacity: 0; transform: translate(332.7px, 330px) scale(1); }
  51.16%        { opacity: 0; transform: translate(163.3px, 369px) scale(1); }
  51.22%        { opacity: 1; transform: translate(163.3px, 369px) scale(0.9); }
  51.44%        { opacity: 1; transform: translate(163.3px, 369px) scale(0.9); }
  51.54%        { opacity: 0; transform: translate(163.3px, 369px) scale(1); }
  53.65%        { opacity: 0; transform: translate(333px, 447px) scale(1.3); }
  53.9%         { opacity: 1; transform: translate(333px, 447px) scale(1); animation-timing-function: ease-out; }
  54.2%         { opacity: 1; transform: translate(333px, 447px) scale(0.84); }
  54.6%         { opacity: 0; transform: translate(333px, 447px) scale(1); }
  65.65%        { opacity: 0; transform: translate(202px, 376px) scale(1.3); }
  65.9%         { opacity: 1; transform: translate(202px, 376px) scale(1); animation-timing-function: ease-out; }
  66.2%         { opacity: 1; transform: translate(202px, 376px) scale(0.84); }
  66.6%, 98.4%  { opacity: 0; transform: translate(202px, 376px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(356.8px, 330px) scale(1); }
}
@keyframes sc-villes-bulle-b {
  0%            { opacity: 0; }
  5.84%         { opacity: 0; }
  5.88%         { opacity: 1; }
  6.12%         { opacity: 1; }
  6.2%          { opacity: 0; }
  47.84%        { opacity: 0; }
  47.88%        { opacity: 1; }
  48.12%        { opacity: 1; }
  48.2%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-c {
  0%            { opacity: 0; }
  10.46%        { opacity: 0; }
  10.5%         { opacity: 1; }
  10.74%        { opacity: 1; }
  10.82%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-e {
  0%            { opacity: 0; }
  6.68%         { opacity: 0; }
  6.72%         { opacity: 1; }
  6.96%         { opacity: 1; }
  7.04%         { opacity: 0; }
  8.36%         { opacity: 0; }
  8.4%          { opacity: 1; }
  8.64%         { opacity: 1; }
  8.72%         { opacity: 0; }
  9.62%         { opacity: 0; }
  9.66%         { opacity: 1; }
  9.9%          { opacity: 1; }
  9.98%         { opacity: 0; }
  48.68%        { opacity: 0; }
  48.72%        { opacity: 1; }
  48.96%        { opacity: 1; }
  49.04%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-h {
  0%            { opacity: 0; }
  10.88%        { opacity: 0; }
  10.92%        { opacity: 1; }
  11.16%        { opacity: 1; }
  11.24%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-i {
  0%            { opacity: 0; }
  6.26%         { opacity: 0; }
  6.3%          { opacity: 1; }
  6.54%         { opacity: 1; }
  6.62%         { opacity: 0; }
  10.04%        { opacity: 0; }
  10.08%        { opacity: 1; }
  10.32%        { opacity: 1; }
  10.4%         { opacity: 0; }
  48.26%        { opacity: 0; }
  48.3%         { opacity: 1; }
  48.54%        { opacity: 1; }
  48.62%        { opacity: 0; }
  50.36%        { opacity: 0; }
  50.4%         { opacity: 1; }
  50.64%        { opacity: 1; }
  50.72%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-l {
  0%            { opacity: 0; }
  4.58%         { opacity: 0; }
  4.62%         { opacity: 1; }
  4.86%         { opacity: 1; }
  4.94%         { opacity: 0; }
  7.94%         { opacity: 0; }
  7.98%         { opacity: 1; }
  8.22%         { opacity: 1; }
  8.3%          { opacity: 0; }
  46.58%        { opacity: 0; }
  46.62%        { opacity: 1; }
  46.86%        { opacity: 1; }
  46.94%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-m {
  0%            { opacity: 0; }
  5.42%         { opacity: 0; }
  5.46%         { opacity: 1; }
  5.7%          { opacity: 1; }
  5.78%         { opacity: 0; }
  47.42%        { opacity: 0; }
  47.46%        { opacity: 1; }
  47.7%         { opacity: 1; }
  47.78%        { opacity: 0; }
  49.94%        { opacity: 0; }
  49.98%        { opacity: 1; }
  50.22%        { opacity: 1; }
  50.3%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-o {
  0%            { opacity: 0; }
  5%            { opacity: 0; }
  5.04%         { opacity: 1; }
  5.28%         { opacity: 1; }
  5.36%         { opacity: 0; }
  47%           { opacity: 0; }
  47.04%        { opacity: 1; }
  47.28%        { opacity: 1; }
  47.36%        { opacity: 0; }
  50.78%        { opacity: 0; }
  50.82%        { opacity: 1; }
  51.06%        { opacity: 1; }
  51.14%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-p {
  0%            { opacity: 0; }
  4.16%         { opacity: 0; }
  4.2%          { opacity: 1; }
  4.44%         { opacity: 1; }
  4.52%         { opacity: 0; }
  46.16%        { opacity: 0; }
  46.2%         { opacity: 1; }
  46.44%        { opacity: 1; }
  46.52%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-r {
  0%            { opacity: 0; }
  7.1%          { opacity: 0; }
  7.14%         { opacity: 1; }
  7.38%         { opacity: 1; }
  7.46%         { opacity: 0; }
  49.1%         { opacity: 0; }
  49.14%        { opacity: 1; }
  49.38%        { opacity: 1; }
  49.46%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-s {
  0%            { opacity: 0; }
  51.2%         { opacity: 0; }
  51.24%        { opacity: 1; }
  51.48%        { opacity: 1; }
  51.56%, 98.4% { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-villes-bulle-t {
  0%            { opacity: 0; }
  9.2%          { opacity: 0; }
  9.24%         { opacity: 1; }
  9.48%         { opacity: 1; }
  9.56%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}

/* Moins de mouvement : la page du Teich ouverte, en haut. */
@media (prefers-reduced-motion: reduce) {
  .sc-villes-clavier { display: none; }
  .sc-villes-contenu > .sc-villes-site--1, .sc-villes-url-d { opacity: 1; transform: none; }
  .sc-villes-url-g { opacity: 0; }
}