/* Scène « avis Google à jour tout seuls », refaite le 24 septembre (« vrai
   UX, et retravaille l'animation générale », puis « un avis à 5 étoiles, et
   rends plus évidente la transition entre le Google et le site »). Le
   rideau de fin et le curseur viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  Google Maps sur le téléphone : fiche de Chez Lucie, onglet Avis.
           Chrome au second plan, à droite : chezlucie.fr/avis, 212 avis.
    8,6 %  le doigt touche la 5e étoile ; elles se remplissent
     10 %  la fenêtre d'avis monte (13 %)
   14,8 %  le doigt touche le champ ; le clavier sort (17,6 %)
   18,5 %  la frappe, lettre par lettre, trois lignes (jusqu'à 33,6 %)
   36,9 %  le doigt touche « Publier » ; clavier et fenêtre redescendent ;
           la fiche montre son avis sous « Votre avis »
   42,4 %  « Votre avis a été publié »
   46,8 %  téléphone à gauche, site à droite (52 %), sous leurs titres
           « Sur Google » et « Sur votre site » (52,5 %)
   47,8 %  l'horloge défile de 12:41 à 15:00 (55 %) : « Vous ne touchez à rien »
   55,6 %  15:00, le relevé : l'avis s'éclaire sur le téléphone, s'en
           détache et vole jusqu'en tête de la liste du site (60,4 %), qui
           s'ouvre pour lui ; 213, mis à jour à 15:00 (61 %)
   55,9 %  « Relevé automatique BassinWebFlow : l'avis passe sur votre site »
   61,8 %  le téléphone sort par la gauche, le site passe en grand (67,5 %)
   68,2 %  un visiteur survole l'avis d'Hélène, puis s'en va (76,5 %)
   76,5 %  plus rien ne bouge ; fondu au blanc à 95 %, retour au début
           sous le blanc, entre 98,4 et 99,9 %

   LA TOILE : 520 x 540. Le téléphone fait 232 x 484 en (14, 8), écran de
   220 x 472 décalé de (6, 6). Côte à côte, il est réduit à 62 % depuis son
   coin : il occupe (10, 80) à (154, 380), et un point (x, y) de l'écran
   tombe en (10 + (6 + x) x 0,62, 80 + (6 + y) x 0,62). Chrome fait
   520 x 500 ; au départ réduit à 62 % en (196, 92), côte à côte à 68 % en
   (162, 80) : un point (x, y) de Chrome tombe en (162 + 0,68 x, 80 + 0,68 y).
   La légende, fixe, de 508 à 534.

   LES CIBLES, CALCULÉES dans la toile (tout ce qui est visé est posé en
   absolu, les valeurs ne dépendent pas de la police) :
     5e étoile      écran (184, 298) → toile (204, 312) → doigt (194, 302)
     champ de texte écran (110, 196) → toile (130, 210) → doigt (120, 200)
     « Publier »    écran (182, 47)  → toile (202, 61)  → doigt (192, 51)
     « Votre avis » sur le téléphone réduit : écran (14, 284) à (206, 339)
                    → toile (22,4 ; 259,8) à (141,4 ; 293,9) ; l'avis qui
                    vole (478 x 68) y part réduit à 0,249 (119 px de large)
     1re case du site : Chrome (21, 265) → toile (176,3 ; 260,2), à 0,68
     carte d'Hélène, site en grand, coin haut droit vide (452, 280)
                    → curseur (448, 278) */
.fn-scene--avis-google {
  --sc-haut: 540px;
  /* Google Maps, relevé dans la page le 24 septembre. */
  --g-ink: #1F1F1F; --g-gris: #5E5E5E; --g-teal: #007B8B; --g-contour: #747775;
  --g-jaune: #FBBC04; --g-piste: #F2F2F2; --g-vide: #DADCE0;
  /* Les filets, tous neutres. */
  --line-maps: #E3E3E3; --line-chrome: #E3E6EA; --line-site: #EDEDED;
  --line-clavier: #B9BDC4; --line-leg: #E5E5E5;
  line-height: 1.35;
}
.fn-scene--avis-google svg { display: block; }
.fn-scene--avis-google i { font-style: normal; }

/* ═══ LES PIÈCES COMMUNES ═════════════════════════════════════════════ */
/* L'avatar à l'initiale, comme Google le pose quand il n'y a pas de photo.
   La même couleur sur le téléphone et sur le site. */
.sc-avis-google-av {
  display: grid; place-items: center;
  border-radius: 50%; color: #FFFFFF; font-weight: 500; line-height: 1;
}
.sc-avis-google-av--h { background: #7E57C2; }
.sc-avis-google-av--m { background: #00897B; }
.sc-avis-google-av--c { background: #E8710A; }
.sc-avis-google-av--p { background: #5C6BC0; }

.sc-avis-google-et-oui { color: var(--g-jaune); }
.sc-avis-google-et-non { color: var(--g-vide); }
.sc-avis-google-m-et,
.sc-avis-google-s-et { display: flex; gap: 1px; }
.sc-avis-google-m-et i,
.sc-avis-google-s-et i { display: block; flex: none; }
.sc-avis-google-m-et i { width: 7.5px; height: 7.5px; }
.sc-avis-google-s-et i { width: 8px; height: 8px; }
.sc-avis-google-m-et svg,
.sc-avis-google-s-et svg { width: 100%; height: 100%; }

/* La note moyenne : une rangée grise, et par-dessus une rangée jaune rognée
   à la largeur calculée dans le PHP (demi-étoile près). */
.sc-avis-google-moyenne { position: relative; display: block; flex: none; }
.sc-avis-google-moyenne-fond,
.sc-avis-google-moyenne-plein { display: flex; }
.sc-avis-google-moyenne-fond { color: var(--g-vide); }
.sc-avis-google-moyenne-plein { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--g-jaune); }
.sc-avis-google-moyenne i { display: block; flex: none; }
.sc-avis-google-moyenne svg { width: 100%; height: 100%; }
.sc-avis-google-m-moyenne .sc-avis-google-moyenne-fond,
.sc-avis-google-m-moyenne .sc-avis-google-moyenne-plein { gap: 1px; }
.sc-avis-google-m-moyenne i { width: 9px; height: 9px; }
.sc-avis-google-m-moyenne-p .sc-avis-google-moyenne-fond,
.sc-avis-google-m-moyenne-p .sc-avis-google-moyenne-plein { gap: 1px; }
.sc-avis-google-m-moyenne-p i { width: 7px; height: 7px; }
.sc-avis-google-s-moyenne .sc-avis-google-moyenne-fond,
.sc-avis-google-s-moyenne .sc-avis-google-moyenne-plein { gap: 2px; }
.sc-avis-google-s-moyenne i { width: 12px; height: 12px; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-avis-google-chrome {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 520px; height: 500px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
  transform-origin: 0 0;
  transform: translate(196px, 92px) scale(.62);
}
.sc-avis-google-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-avis-google-c-onglet {
  position: absolute; top: 5px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 170px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-avis-google-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-avis-google-c-favi { position: relative; width: 12px; height: 12px; flex: none; }
.sc-avis-google-c-favi i { position: absolute; inset: 0; }
.sc-avis-google-c-logo {
  display: grid; place-items: center;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
.sc-avis-google-c-titre {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 0.59375rem;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.sc-avis-google-c-plus { position: absolute; top: 9px; left: 188px; color: #474747; }
.sc-avis-google-c-plus svg { width: 12px; height: 12px; }
.sc-avis-google-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-avis-google-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-avis-google-fen svg { width: 10px; height: 10px; }

.sc-avis-google-c-outils {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: 34px; padding: 0 6px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-avis-google-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-avis-google-c-outils > i svg { width: 14px; height: 14px; }
.sc-avis-google-c-off { color: #C4C7C5; }
.sc-avis-google-c-outils > .sc-avis-google-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-avis-google-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1;
  height: 26px; margin: 0 6px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.65625rem; color: #1F1F1F; white-space: nowrap;
}
.sc-avis-google-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-avis-google-c-chemin { color: #5F6368; }
.sc-avis-google-c-etoile { margin-left: auto; }
.sc-avis-google-c-etoile svg { width: 13px; height: 13px; }

.sc-avis-google-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; }

/* ═══ LE SITE DE CHEZ LUCIE, PAGE DES AVIS ════════════════════════════ */
.sc-avis-google-s-page { color: #0A0A0A; }
.sc-avis-google-s-une { position: relative; height: 118px; overflow: hidden; }
.sc-avis-google-s-une img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.sc-avis-google-s-une::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, .5) 0, rgba(10, 10, 10, .12) 40%, rgba(10, 10, 10, .7) 100%);
}
.sc-avis-google-s-tete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 18px; color: #FFFFFF;
}
.sc-avis-google-s-marque { font-size: 0.6875rem; font-weight: 800; letter-spacing: -.01em; }
.sc-avis-google-s-nav { display: flex; align-items: center; gap: 12px; font-size: 0.5rem; font-weight: 500; color: rgba(255, 255, 255, .9); }
.sc-avis-google-s-actif { font-weight: 700; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.sc-avis-google-s-resa {
  display: grid; place-items: center;
  height: 20px; padding: 0 9px; border-radius: 6px;
  background: #FFFFFF; color: #0A0A0A; font-weight: 700;
}
.sc-avis-google-s-titre {
  position: absolute; left: 20px; bottom: 13px; z-index: 2;
  display: flex; flex-direction: column; gap: 3px; color: #FFFFFF;
}
.sc-avis-google-s-kicker { font-size: 0.40625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.sc-avis-google-s-h1 { font-size: 1.125rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }

.sc-avis-google-s-note {
  display: flex; align-items: center; gap: 12px;
  height: 72px; padding: 0 20px;
  border-bottom: 1px dashed var(--line-site);
}
.sc-avis-google-s-moy { font-size: 1.875rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-avis-google-s-note-d { display: flex; flex-direction: column; gap: 4px; }
.sc-avis-google-s-compte { display: block; height: 13px; font-size: 0.65625rem; line-height: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-avis-google-s-compte b { font-weight: 800; }
/* Le chiffre des unités, sur un rouleau : 2 puis 3. */
.sc-avis-google-s-rouleau { display: inline-block; height: 13px; overflow: hidden; vertical-align: top; }
.sc-avis-google-s-reel { display: flex; flex-direction: column; }
.sc-avis-google-s-reel span { display: block; height: 13px; line-height: 13px; }
/* Les deux heures du relevé, empilées au même endroit. */
.sc-avis-google-s-maj { display: grid; font-size: 0.46875rem; line-height: 10px; color: #737373; white-space: nowrap; }
.sc-avis-google-s-maj-t { grid-area: 1 / 1; }
.sc-avis-google-s-maj-t--ap { opacity: 0; }
.sc-avis-google-s-laisser {
  display: grid; place-items: center; margin-left: auto;
  height: 26px; padding: 0 12px;
  border: 1px solid #0A0A0A; border-radius: 7px;
  font-size: 0.5rem; font-weight: 700; white-space: nowrap;
}

/* LA LISTE. Des marges et pas un `gap` : la case du haut part à zéro, et
   un `gap` laisserait 8 px de vide au-dessus du premier avis. */
.sc-avis-google-s-liste { padding: 10px 20px 0; }
.sc-avis-google-s-avis {
  position: relative; display: block; height: 68px; margin-bottom: 8px;
  border: 1px solid var(--line-site); border-radius: 10px; background: #FFFFFF;
}
.sc-avis-google-s-avis .sc-avis-google-av { position: absolute; top: 10px; left: 12px; width: 24px; height: 24px; font-size: 0.6875rem; }
.sc-avis-google-s-qui { position: absolute; top: 10px; left: 46px; font-size: 0.5625rem; font-weight: 700; line-height: 12px; white-space: nowrap; }
.sc-avis-google-s-ligne { position: absolute; top: 25px; left: 46px; display: flex; align-items: center; gap: 6px; height: 10px; }
.sc-avis-google-s-quand { font-size: 0.46875rem; line-height: 10px; color: #737373; white-space: nowrap; }
.sc-avis-google-s-dit {
  position: absolute; top: 39px; left: 46px; right: 14px;
  height: 24px; overflow: hidden;
  font-size: 0.5rem; line-height: 12px; color: #525252;
}
/* La case de l'avis qui arrive : fermée, elle s'ouvre de 76 px (la carte
   et sa marge) pendant que l'avis vole vers elle. */
.sc-avis-google-s-case { height: 0; overflow: hidden; }
/* L'avis qui vient d'arriver : un fond jaune pâle qui s'efface. Pas de
   pastille, pas de point qui clignote. */
.sc-avis-google-s-avis--neuf { background: #FEF7E0; border-color: #F3D98B; opacity: 0; }
.sc-avis-google-s-avis--neuf .sc-avis-google-s-quand { font-weight: 700; color: #0A0A0A; }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-avis-google-tel {
  position: absolute; top: 8px; left: 14px; z-index: 2;
  width: 232px; height: 484px; padding: 6px;
  border-radius: 36px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
  transform-origin: 0 0;
}
.sc-avis-google-ecran {
  position: relative; height: 472px; overflow: hidden;
  border-radius: 30px; background: #FFFFFF; color: var(--g-ink);
}
.sc-avis-google-ilot {
  position: absolute; top: 7px; left: 77px; z-index: 7;
  width: 66px; height: 19px; border-radius: 10px; background: #0A0A0A;
}
.sc-avis-google-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; margin: 0; padding: 2px 16px 0 26px;
  font-size: 0.625rem; line-height: 1;
}
.sc-avis-google-statut b { font-weight: 600; }
.sc-avis-google-statut-d { display: flex; align-items: center; gap: 4px; }
.sc-avis-google-reseau { display: flex; align-items: flex-end; gap: 1px; height: 8px; }
.sc-avis-google-reseau i { display: block; width: 2.5px; border-radius: 1px; background: var(--g-ink); }
.sc-avis-google-reseau i:nth-child(1) { height: 3px; }
.sc-avis-google-reseau i:nth-child(2) { height: 4.5px; }
.sc-avis-google-reseau i:nth-child(3) { height: 6px; }
.sc-avis-google-reseau i:nth-child(4) { height: 8px; }
.sc-avis-google-wifi { width: 11px; height: 8px; }
.sc-avis-google-pile {
  display: block; width: 18px; height: 9px; padding: 1px;
  border: 1px solid rgba(31, 31, 31, .4); border-radius: 3px;
}
.sc-avis-google-pile i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: var(--g-ink); }
.sc-avis-google-maison {
  position: absolute; bottom: 6px; left: 70px; z-index: 5;
  width: 80px; height: 3.5px; border-radius: 2px; background: #0A0A0A;
}

/* ── La fiche Google Maps ─────────────────────────────────────────── */
.sc-avis-google-maps { position: absolute; inset: 0; z-index: 1; background: #FFFFFF; }
.sc-avis-google-maps > span { position: absolute; left: 14px; }
.sc-avis-google-maps > .sc-avis-google-m-photos { top: 30px; left: 0; width: 220px; height: 84px; }
.sc-avis-google-m-photos img { position: absolute; display: block; object-fit: cover; }
.sc-avis-google-m-p1 { top: 0; left: 0; width: 136px; height: 84px; }
.sc-avis-google-m-p2 { top: 0; left: 138px; width: 82px; height: 41px; }
.sc-avis-google-m-p3 { top: 43px; left: 138px; width: 82px; height: 41px; }
.sc-avis-google-m-rond {
  position: absolute; top: 8px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: #FFFFFF; color: var(--g-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sc-avis-google-m-rond svg { width: 12px; height: 12px; }
.sc-avis-google-m-rond--g { left: 8px; }
.sc-avis-google-m-rond--p { left: 156px; }
.sc-avis-google-m-rond--f { left: 188px; }

.sc-avis-google-m-nom { top: 122px; font-size: 0.875rem; font-weight: 600; line-height: 18px; }
.sc-avis-google-m-note {
  top: 143px; display: flex; align-items: center; gap: 4px; height: 12px;
  font-size: 0.53125rem; line-height: 12px;
}
.sc-avis-google-m-note > span:last-child { color: var(--g-gris); }
.sc-avis-google-m-type { top: 158px; font-size: 0.5rem; line-height: 12px; color: var(--g-gris); white-space: nowrap; }

.sc-avis-google-maps > .sc-avis-google-m-onglets {
  top: 174px; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: 26px; border-bottom: 1px solid var(--line-maps);
  font-size: 0.5625rem; font-weight: 500; color: var(--g-gris);
}
.sc-avis-google-m-onglets > span { position: relative; display: grid; place-items: center; }
.sc-avis-google-m-choisi { color: var(--g-teal); }
/* L'onglet choisi : un trait plein de la couleur de l'onglet, pas une
   bordure (c'est un indicateur, et il a sa propre boîte). */
.sc-avis-google-m-choisi i {
  position: absolute; bottom: -1px; left: 50%;
  width: 22px; height: 2.5px; margin-left: -11px;
  border-radius: 2px 2px 0 0; background: var(--g-teal);
}

.sc-avis-google-maps > .sc-avis-google-m-resume { top: 208px; right: 14px; display: flex; gap: 14px; height: 46px; }
.sc-avis-google-m-barres { display: flex; flex-direction: column; gap: 1.5px; width: 118px; }
.sc-avis-google-m-barre { display: flex; align-items: center; gap: 5px; height: 7.9px; }
.sc-avis-google-m-barre b { width: 5px; font-size: 0.40625rem; font-weight: 400; line-height: 1; color: var(--g-gris); }
.sc-avis-google-m-barre > i { position: relative; flex: 1; height: 4.5px; border-radius: 3px; background: var(--g-piste); }
.sc-avis-google-m-barre > i > i { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 3px; background: var(--g-jaune); }
.sc-avis-google-m-grand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; }
.sc-avis-google-m-grand b { font-size: 1.5rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.sc-avis-google-m-grand > span { font-size: 0.4375rem; line-height: 1; color: var(--g-gris); }

/* Les deux états de la fiche, avant et après publication, empilés : ils se
   relaient pendant que la fenêtre d'avis redescend. */
.sc-avis-google-maps > .sc-avis-google-m-etat { inset: 0; left: 0; }
.sc-avis-google-m-etat > span { position: absolute; left: 14px; right: 14px; }
.sc-avis-google-m-etat--b { opacity: 0; }

.sc-avis-google-m-noter { top: 266px; height: 46px; }
.sc-avis-google-m-noter-t { position: absolute; top: 0; left: 0; font-size: 0.53125rem; font-weight: 500; line-height: 12px; white-space: nowrap; }
.sc-avis-google-m-noter .sc-avis-google-av { position: absolute; top: 20px; left: 0; width: 24px; height: 24px; font-size: 0.6875rem; }
.sc-avis-google-m-cible { position: absolute; top: 22px; width: 20px; height: 20px; color: var(--g-contour); }
.sc-avis-google-m-cible > svg { width: 20px; height: 20px; }
.sc-avis-google-m-cible--1 { left: 40px; }
.sc-avis-google-m-cible--2 { left: 70px; }
.sc-avis-google-m-cible--3 { left: 100px; }
.sc-avis-google-m-cible--4 { left: 130px; }
.sc-avis-google-m-cible--5 { left: 160px; }
.sc-avis-google-m-remplie { position: absolute; inset: 0; color: var(--g-jaune); opacity: 0; }
.sc-avis-google-m-remplie svg { width: 20px; height: 20px; }

/* « Votre avis » : le bloc d'où part l'avis au relevé. Son fond s'éclaire
   un instant avant le départ. */
.sc-avis-google-m-votre { top: 266px; height: 92px; }
.sc-avis-google-m-votre-fond { position: absolute; top: 14px; left: -6px; right: -6px; height: 64px; border-radius: 8px; }
.sc-avis-google-m-votre .sc-avis-google-av { position: absolute; top: 20px; left: 0; width: 24px; height: 24px; font-size: 0.6875rem; }
.sc-avis-google-m-votre-qui { position: absolute; top: 20px; left: 32px; font-size: 0.5625rem; font-weight: 500; line-height: 12px; white-space: nowrap; }
.sc-avis-google-m-votre-ligne { position: absolute; top: 34px; left: 32px; display: flex; align-items: center; gap: 5px; height: 10px; font-size: 0.4375rem; color: var(--g-gris); white-space: nowrap; }
.sc-avis-google-m-votre-dit { position: absolute; top: 50px; left: 0; right: 0; font-size: 0.5rem; line-height: 11.5px; }

.sc-avis-google-m-avis { height: 100px; border-top: 1px solid var(--line-maps); }
.sc-avis-google-m-etat > .sc-avis-google-m-avis--a { top: 324px; }
.sc-avis-google-m-etat > .sc-avis-google-m-avis--b { top: 368px; }
.sc-avis-google-m-avis .sc-avis-google-av { position: absolute; top: 10px; left: 0; width: 22px; height: 22px; font-size: 0.625rem; }
.sc-avis-google-m-qui { position: absolute; top: 10px; left: 30px; font-size: 0.5625rem; font-weight: 500; line-height: 12px; white-space: nowrap; }
.sc-avis-google-m-sous { position: absolute; top: 22px; left: 30px; font-size: 0.4375rem; line-height: 10px; color: var(--g-gris); white-space: nowrap; }
.sc-avis-google-m-ligne { position: absolute; top: 38px; left: 0; display: flex; align-items: center; gap: 5px; height: 10px; font-size: 0.4375rem; color: var(--g-gris); white-space: nowrap; }
.sc-avis-google-m-dit { position: absolute; top: 52px; left: 0; right: 0; font-size: 0.5rem; line-height: 11.5px; }

/* Le bandeau de confirmation de Google, en bas de l'écran. */
.sc-avis-google-maps > .sc-avis-google-snack {
  left: 10px; right: 10px; bottom: 18px; z-index: 2;
  display: flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 6px; background: #303030; color: #FFFFFF;
  font-size: 0.53125rem; line-height: 1;
  opacity: 0; transform: translateY(10px);
}

/* ── La fenêtre d'avis ────────────────────────────────────────────── */
.sc-avis-google-redac {
  position: absolute; inset: 0; z-index: 3; background: #FFFFFF;
  transform: translateY(472px);
}
.sc-avis-google-redac > span { position: absolute; }
.sc-avis-google-r-barre { top: 30px; left: 0; right: 0; height: 34px; }
.sc-avis-google-r-fermer { position: absolute; top: 11px; left: 12px; color: var(--g-ink); }
.sc-avis-google-r-fermer svg { width: 12px; height: 12px; }
.sc-avis-google-r-lieu { position: absolute; top: 0; left: 36px; font-size: 0.65625rem; font-weight: 600; line-height: 34px; }
/* « Publier », arrondi comme chez Google : c'est son bouton, pas le nôtre. */
.sc-avis-google-r-publier {
  position: absolute; top: 6px; right: 12px;
  display: grid; place-items: center; width: 52px; height: 22px;
  border-radius: 11px; background: var(--g-teal); color: #FFFFFF;
  font-size: 0.53125rem; font-weight: 600;
}
.sc-avis-google-r-qui { top: 74px; left: 14px; right: 14px; height: 28px; }
.sc-avis-google-r-qui .sc-avis-google-av { position: absolute; top: 0; left: 0; width: 26px; height: 26px; font-size: 0.75rem; }
.sc-avis-google-r-qui b { position: absolute; top: 1px; left: 34px; font-size: 0.59375rem; font-weight: 600; line-height: 13px; white-space: nowrap; }
.sc-avis-google-r-qui > span {
  position: absolute; top: 15px; left: 34px;
  display: flex; align-items: center; gap: 3px;
  font-size: 0.46875rem; line-height: 11px; color: var(--g-gris); white-space: nowrap;
}
.sc-avis-google-r-qui > span svg { width: 8px; height: 8px; }
.sc-avis-google-r-etoiles { top: 112px; left: 0; right: 0; display: flex; justify-content: center; gap: 9px; height: 28px; }
.sc-avis-google-r-etoiles i { display: block; width: 28px; height: 28px; }
.sc-avis-google-r-etoiles svg { width: 28px; height: 28px; }
.sc-avis-google-r-vide { color: var(--g-contour); }

.sc-avis-google-champ {
  top: 152px; left: 14px; right: 14px; height: 88px; padding: 9px 10px;
  border: 1px solid var(--g-contour); border-radius: 8px;
  outline: 1px solid transparent;
}
.sc-avis-google-invite { position: absolute; top: 9px; left: 10px; right: 10px; font-size: 0.53125rem; line-height: 12px; color: var(--g-gris); }
.sc-avis-google-rangee { display: block; height: 13px; }
/* La frappe : la ligne s'ouvre par `max-width`, en paliers d'une lettre, et
   sa bordure droite fait le curseur de saisie. Il suit donc la dernière
   lettre tapée, puis reste au bout de la ligne. Pas de rembourrage : à
   largeur nulle, il laissait voir un pixel de la première lettre. */
.sc-avis-google-ligne {
  display: inline-block; vertical-align: top;
  max-width: 0; overflow: hidden; white-space: nowrap;
  border-right: 1.2px solid transparent;
  font-size: 0.5625rem; line-height: 13px; color: var(--g-ink);
}
.sc-avis-google-r-photos {
  top: 250px; left: 14px; right: 14px; height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--g-contour); border-radius: 8px;
  font-size: 0.5rem; font-weight: 500; color: var(--g-teal);
}
.sc-avis-google-r-photos svg { width: 11px; height: 11px; }

/* ── Le clavier AZERTY d'iOS ───────────────────────────────────────── */
.sc-avis-google-redac > .sc-avis-google-clavier {
  left: 0; right: 0; bottom: 0; height: 172px;
  background: #D1D4DA;
  transform: translateY(172px);
}
.sc-avis-google-k-sugg { display: grid; grid-template-columns: repeat(3, 1fr); height: 28px; align-items: center; font-size: 0.53125rem; color: var(--g-ink); text-align: center; }
/* Le filet entre deux suggestions : un trait court, centré en hauteur,
   comme sur iOS (dessiné en fond, il ne prend pas toute la hauteur). */
.sc-avis-google-k-sugg span + span { background: linear-gradient(var(--line-clavier), var(--line-clavier)) left center / 1px 14px no-repeat; }
.sc-avis-google-k-rang { position: absolute; left: 3px; right: 3px; display: flex; justify-content: center; gap: 3px; height: 25px; }
.sc-avis-google-k-rang--1 { top: 32px; }
.sc-avis-google-k-rang--2 { top: 63px; }
.sc-avis-google-k-rang--3 { top: 94px; }
.sc-avis-google-k-rang--4 { top: 125px; }
.sc-avis-google-k-rang i {
  display: grid; place-items: center; flex: none;
  width: 18.4px; height: 25px; border-radius: 4px;
  background: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
  font-size: 0.625rem; line-height: 1; color: #000000;
}
.sc-avis-google-k-rang i.sc-avis-google-k-fonce { background: #ABB0BC; }
.sc-avis-google-k-rang i.sc-avis-google-k-maj { width: 26px; }
.sc-avis-google-k-rang i.sc-avis-google-k-123 { width: 40px; font-size: 0.5rem; }
.sc-avis-google-k-rang i.sc-avis-google-k-espace { flex: 1; font-size: 0.5rem; }
.sc-avis-google-k-rang i.sc-avis-google-k-retour { width: 44px; }
.sc-avis-google-k-rang svg { width: 12px; height: 12px; }

/* ═══ LES DEUX TITRES, CÔTE À CÔTE ════════════════════════════════════ */
.sc-avis-google-cap {
  position: absolute; top: 56px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  height: 18px; margin: 0;
  font-size: 0.625rem; font-weight: 800; line-height: 1; color: #0A0A0A; white-space: nowrap;
  opacity: 0;
}
.sc-avis-google-cap svg { width: 13px; height: 13px; color: #525252; }
.sc-avis-google-cap--g { left: 10px; }
.sc-avis-google-cap--s { left: 162px; }

/* ═══ L'AVIS QUI VOLE ═════════════════════════════════════════════════ */
/* À la taille d'une carte du site, réduit depuis son coin. Jaune pâle comme
   la carte qui le relaie à l'arrivée, avec une ombre neutre. */
.sc-avis-google-vol {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 478px; height: 68px;
  transform-origin: 0 0;
  transform: translate(22.4px, 262px) scale(.249);
  opacity: 0; pointer-events: none;
}
.sc-avis-google-vol .sc-avis-google-s-avis {
  margin: 0; background: #FEF7E0; border-color: #F3D98B;
  box-shadow: 0 10px 28px rgba(31, 36, 46, .18);
}

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-avis-google-legende {
  position: absolute; top: 508px; left: 14px; right: 14px; z-index: 2;
  height: 26px; margin: 0;
}
.sc-avis-google-leg { display: flex; align-items: center; gap: 10px; height: 26px; }
.sc-avis-google-horloge {
  display: flex; align-items: center; gap: 4px; flex: none;
  height: 26px; padding: 0 9px 0 7px;
  border: 1px solid var(--line-leg); border-radius: 8px; background: #FFFFFF;
  font-size: 0.65625rem; font-weight: 800; line-height: 14px; color: #0A0A0A;
  font-variant-numeric: tabular-nums;
}
.sc-avis-google-horloge > svg { width: 13px; height: 13px; color: #525252; }
.sc-avis-google-h-fen { display: block; height: 14px; overflow: hidden; }
.sc-avis-google-h-reel,
.sc-avis-google-m-reel { display: flex; flex-direction: column; }
.sc-avis-google-h-reel b,
.sc-avis-google-m-reel b { display: block; height: 14px; font-weight: 800; }
.sc-avis-google-h-deux { display: block; margin: 0 -2px; }
.sc-avis-google-leg-textes { display: grid; flex: 1; min-width: 0; }
.sc-avis-google-leg-t {
  grid-area: 1 / 1;
  display: flex; align-items: center; gap: 6px;
  font-size: 0.59375rem; font-weight: 700; line-height: 1; color: #0A0A0A; white-space: nowrap;
}
.sc-avis-google-leg-t--b,
.sc-avis-google-leg-t--c { opacity: 0; }
.sc-avis-google-leg-t--c img { width: 16px; height: 16px; border-radius: 50%; }

/* Le doigt : le rond gris des captures d'écran d'iPhone. */
.sc-avis-google-doigt {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .24);
  opacity: 0; pointer-events: none;
}

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-cur      { animation-name: sc-cur-avis-google; }
/* Personne ne clique sur le site : l'onde du kit reste éteinte. */
.sc-cur-onde { animation-name: sc-avis-google-onde; }
.sc-fin      { animation-name: sc-conclure; }

.sc-avis-google-doigt          { animation-name: sc-avis-google-doigt; }
.sc-avis-google-m-cible--5     { animation-name: sc-avis-google-appui; }
.sc-avis-google-m-cible--1 .sc-avis-google-m-remplie { animation-name: sc-avis-google-rempli-1; }
.sc-avis-google-m-cible--2 .sc-avis-google-m-remplie { animation-name: sc-avis-google-rempli-2; }
.sc-avis-google-m-cible--3 .sc-avis-google-m-remplie { animation-name: sc-avis-google-rempli-3; }
.sc-avis-google-m-cible--4 .sc-avis-google-m-remplie { animation-name: sc-avis-google-rempli-4; }
.sc-avis-google-m-cible--5 .sc-avis-google-m-remplie { animation-name: sc-avis-google-rempli-5; }
.sc-avis-google-redac          { animation-name: sc-avis-google-redac; }
.sc-avis-google-champ          { animation-name: sc-avis-google-champ; }
.sc-avis-google-invite         { animation-name: sc-avis-google-invite; }
.sc-avis-google-ligne--1       { animation-name: sc-avis-google-l1, sc-avis-google-c1; }
.sc-avis-google-ligne--2       { animation-name: sc-avis-google-l2, sc-avis-google-c2; }
.sc-avis-google-ligne--3       { animation-name: sc-avis-google-l3, sc-avis-google-c3; }
.sc-avis-google-clavier        { animation-name: sc-avis-google-clavier; }
.sc-avis-google-r-publier      { animation-name: sc-avis-google-publier; }
.sc-avis-google-m-etat--a      { animation-name: sc-avis-google-etat-a; }
.sc-avis-google-m-etat--b      { animation-name: sc-avis-google-etat-b; }
.sc-avis-google-snack          { animation-name: sc-avis-google-snack; }

.sc-avis-google-tel            { animation-name: sc-avis-google-tel, sc-avis-google-tel-fondu; }
.sc-avis-google-chrome         { animation-name: sc-avis-google-chrome; }
.sc-avis-google-cap            { animation-name: sc-avis-google-cap; }
.sc-avis-google-h-reel         { animation-name: sc-avis-google-heures; }
.sc-avis-google-m-reel         { animation-name: sc-avis-google-minutes; }
.sc-avis-google-leg-t--a       { animation-name: sc-avis-google-leg-a; }
.sc-avis-google-leg-t--b       { animation-name: sc-avis-google-leg-b; }
.sc-avis-google-leg-t--c       { animation-name: sc-avis-google-leg-c; }

.sc-avis-google-m-votre-fond   { animation-name: sc-avis-google-eclaire; }
.sc-avis-google-vol            { animation-name: sc-avis-google-vol; }
.sc-avis-google-s-case         { animation-name: sc-avis-google-ouvre; }
.sc-avis-google-s-avis--sort   { animation-name: sc-avis-google-sort; }
.sc-avis-google-s-avis--neuf   { animation-name: sc-avis-google-pose, sc-avis-google-neuf; }
.sc-avis-google-s-reel         { animation-name: sc-avis-google-compte; }
.sc-avis-google-s-maj-t--av    { animation-name: sc-avis-google-maj-av; }
.sc-avis-google-s-maj-t--ap    { animation-name: sc-avis-google-maj-ap; }

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

/* 1. SUR GOOGLE ───────────────────────────────────────────────────── */
@keyframes sc-avis-google-doigt {
  0%, 5%       { transform: translate(194px, 302px) scale(.6); opacity: 0; }
  6.5%, 8.2%   { transform: translate(194px, 302px); opacity: 1; }
  8.6%         { transform: translate(194px, 302px) scale(.78); opacity: 1; }
  9.1%         { transform: translate(194px, 302px); opacity: 1; }
  10.2%        { transform: translate(194px, 302px); opacity: 0; }
  12.6%        { transform: translate(120px, 200px) scale(.6); opacity: 0; }
  13.8%, 14.4% { transform: translate(120px, 200px); opacity: 1; }
  14.8%        { transform: translate(120px, 200px) scale(.78); opacity: 1; }
  15.3%        { transform: translate(120px, 200px); opacity: 1; }
  16.4%        { transform: translate(120px, 200px); opacity: 0; }
  33.8%        { transform: translate(192px, 51px) scale(.6); opacity: 0; }
  35.2%, 36.5% { transform: translate(192px, 51px); opacity: 1; }
  36.9%        { transform: translate(192px, 51px) scale(.78); opacity: 1; }
  37.4%        { transform: translate(192px, 51px); opacity: 1; }
  38.6%, 98.4% { transform: translate(192px, 51px); opacity: 0; }
  99.9%, 100%  { transform: translate(194px, 302px) scale(.6); opacity: 0; }
}
/* La cinquième étoile s'enfonce d'un cheveu sous le doigt ; les cinq se
   remplissent de gauche à droite. */
@keyframes sc-avis-google-appui {
  0%, 8.5%     { transform: none; }
  8.8%         { transform: scale(.84); }
  9.6%, 100%   { transform: none; }
}
@keyframes sc-avis-google-rempli-1 { 0%, 8.6% { opacity: 0; } 8.8%, 98.4%  { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-avis-google-rempli-2 { 0%, 8.75% { opacity: 0; } 8.95%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-avis-google-rempli-3 { 0%, 8.9% { opacity: 0; } 9.1%, 98.4%  { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-avis-google-rempli-4 { 0%, 9.05% { opacity: 0; } 9.25%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-avis-google-rempli-5 { 0%, 9.2% { opacity: 0; } 9.4%, 98.4%  { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* La fenêtre d'avis monte, reste le temps d'écrire, redescend après
   « Publier ». Montée amortie, descente qui accélère : les courbes d'iOS. */
@keyframes sc-avis-google-redac {
  0%, 10%      { transform: translateY(472px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  13%, 38.4%   { transform: none; animation-timing-function: cubic-bezier(.55, 0, .8, .3); }
  41%, 100%    { transform: translateY(472px); }
}
@keyframes sc-avis-google-champ {
  0%, 15%      { border-color: var(--g-contour); outline-color: transparent; }
  15.4%, 38.4% { border-color: var(--g-teal); outline-color: var(--g-teal); }
  39%, 100%    { border-color: var(--g-contour); outline-color: transparent; }
}
@keyframes sc-avis-google-invite { 0%, 18.3% { opacity: 1; } 18.5%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }

/* La frappe, une lettre par palier. Les largeurs d'arrivée sont MESURÉES
   au banc, en Inter servie, plus 2 px : le dernier palier tombe sur la
   dernière lettre. */
@keyframes sc-avis-google-l1 {
  0%, 18.5%    { max-width: 0; animation-timing-function: steps(25, end); }
  23.8%, 98.4% { max-width: 102px; }
  99.9%, 100%  { max-width: 0; }
}
@keyframes sc-avis-google-l2 {
  0%, 24%      { max-width: 0; animation-timing-function: steps(29, end); }
  29.3%, 98.4% { max-width: 127px; }
  99.9%, 100%  { max-width: 0; }
}
@keyframes sc-avis-google-l3 {
  0%, 29.5%    { max-width: 0; animation-timing-function: steps(27, end); }
  33.6%, 98.4% { max-width: 111px; }
  99.9%, 100%  { max-width: 0; }
}
/* Le curseur de saisie : sur la ligne qu'on tape, puis il clignote au bout
   de la dernière en attendant « Publier ». */
@keyframes sc-avis-google-c1 {
  0%, 15.3%    { border-right-color: transparent; }
  15.4%, 23.9% { border-right-color: var(--g-teal); }
  24%, 100%    { border-right-color: transparent; }
}
@keyframes sc-avis-google-c2 {
  0%, 23.9%    { border-right-color: transparent; }
  24%, 29.4%   { border-right-color: var(--g-teal); }
  29.5%, 100%  { border-right-color: transparent; }
}
@keyframes sc-avis-google-c3 {
  0%, 29.4%    { border-right-color: transparent; }
  29.5%, 34.4% { border-right-color: var(--g-teal); }
  34.5%, 35.3% { border-right-color: transparent; }
  35.4%, 36.2% { border-right-color: var(--g-teal); }
  36.3%, 100%  { border-right-color: transparent; }
}
@keyframes sc-avis-google-clavier {
  0%, 15.4%    { transform: translateY(172px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  17.6%, 37.8% { transform: none; animation-timing-function: cubic-bezier(.55, 0, .8, .3); }
  39.6%, 100%  { transform: translateY(172px); }
}
@keyframes sc-avis-google-publier {
  0%, 36.8%    { background: var(--g-teal); }
  36.9%, 37.4% { background: #00606C; }
  37.5%, 100%  { background: var(--g-teal); }
}
/* La fiche passe à « Votre avis » sous la fenêtre qui redescend : le bloc
   est à y 266, la fenêtre ne le découvre qu'après 40 %. */
@keyframes sc-avis-google-etat-a { 0%, 39.6% { opacity: 1; } 40%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-avis-google-etat-b { 0%, 39.6% { opacity: 0; } 40%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-avis-google-snack {
  0%, 41.2%    { opacity: 0; transform: translateY(10px); }
  42.4%, 46%   { opacity: 1; transform: none; }
  46.8%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(10px); }
}

/* 2. CÔTE À CÔTE, LE TEMPS PASSE ──────────────────────────────────── */
@keyframes sc-avis-google-tel {
  0%, 46.8%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  52%, 61.8%   { transform: translate(-4px, 72px) scale(.62); animation-timing-function: cubic-bezier(.55, 0, .8, .3); }
  65.5%, 98.4% { transform: translate(-190px, 72px) scale(.62); }
  99.9%, 100%  { transform: none; }
}
/* L'effacement finit avant la sortie : un téléphone noir à demi
   transparent poserait un voile gris sur le site qui passe en grand. */
@keyframes sc-avis-google-tel-fondu { 0%, 62% { opacity: 1; } 64.2%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-avis-google-chrome {
  0%, 46.8%    { transform: translate(196px, 92px) scale(.62); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  52%, 61.8%   { transform: translate(162px, 80px) scale(.68); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67.5%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translate(196px, 92px) scale(.62); }
}
@keyframes sc-avis-google-cap { 0%, 50.5% { opacity: 0; } 52.5%, 61.2% { opacity: 1; } 62.2%, 100% { opacity: 0; } }

/* L'HORLOGE EN ACCÉLÉRÉ, comme un affichage numérique : les minutes
   SAUTENT de dizaine en dizaine (15 cases de 14 px, de 41 à 00, 14 paliers).
   Un défilement continu, figé à un instant, montrait deux chiffres à
   moitié. L'heure saute à chaque « 00 », qui tombe au palier 2, 8 et 14 :
   47,8 + 7,2 x 2/14 = 48,83 %, puis 51,91 % et 55 %. */
@keyframes sc-avis-google-minutes {
  0%, 47.8%    { transform: none; animation-timing-function: steps(14, end); }
  55%, 98.4%   { transform: translateY(-196px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-google-heures {
  0%, 48.8%      { transform: none; }
  48.85%, 51.9%  { transform: translateY(-14px); }
  51.95%, 54.95% { transform: translateY(-28px); }
  55%, 98.4%     { transform: translateY(-42px); }
  99.9%, 100%    { transform: none; }
}
@keyframes sc-avis-google-leg-a { 0%, 47.2% { opacity: 1; } 47.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-avis-google-leg-b { 0%, 47.8% { opacity: 0; } 48.4%, 54.8% { opacity: 1; } 55.3%, 100% { opacity: 0; } }
@keyframes sc-avis-google-leg-c { 0%, 55.3% { opacity: 0; } 55.9%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* 3. LE RELEVÉ DE 15:00 ───────────────────────────────────────────── */
/* L'avis s'éclaire sur le téléphone, puis s'en détache. */
@keyframes sc-avis-google-eclaire {
  0%, 55%      { background: transparent; }
  55.6%, 56.6% { background: #FEF7E0; }
  58.4%, 100%  { background: transparent; }
}
/* LE VOL : du bloc « Votre avis » du téléphone réduit à la première case
   du site, en arc (il monte, puis redescend dans la liste). Il grandit en
   route jusqu'à la taille exacte de la carte du site à 68 %, et la vraie
   carte le relaie sur place (60,3 à 61 %) : on ne voit jamais les deux. */
@keyframes sc-avis-google-vol {
  0%, 55.6%    { transform: translate(22.4px, 262px) scale(.249); opacity: 0; }
  56%          { transform: translate(22.4px, 262px) scale(.249); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  58%          { transform: translate(92px, 196px) scale(.46); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60.4%        { transform: translate(176.3px, 260.2px) scale(.68); opacity: 1; }
  60.6%        { transform: translate(176.3px, 260.2px) scale(.68); opacity: 1; }
  61%, 98.4%   { transform: translate(176.3px, 260.2px) scale(.68); opacity: 0; }
  99.9%, 100%  { transform: translate(22.4px, 262px) scale(.249); opacity: 0; }
}
/* La case du haut s'ouvre sous l'avis qui arrive ; la plus ancienne carte
   s'efface en bas, poussée hors de la page. */
@keyframes sc-avis-google-ouvre {
  0%, 57.8%    { height: 0; }
  60.4%, 98.4% { height: 76px; }
  99.9%, 100%  { height: 0; }
}
@keyframes sc-avis-google-sort { 0%, 57.8% { opacity: 1; } 59.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-avis-google-pose { 0%, 60.3% { opacity: 0; } 60.7%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-avis-google-compte {
  0%, 60.6%    { transform: none; }
  61.8%, 98.4% { transform: translateY(-13px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-google-maj-av { 0%, 60.5% { opacity: 1; } 61%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-avis-google-maj-ap { 0%, 60.5% { opacity: 0; } 61%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
/* Le fond jaune pâle de l'avis neuf s'efface ; le survol du visiteur pose
   une ombre neutre. */
@keyframes sc-avis-google-neuf {
  0%, 70.2%    { background: #FEF7E0; border-color: #F3D98B; box-shadow: none; }
  71%, 73.8%   { background: #FEF9EA; border-color: #EBD9A6; box-shadow: 0 6px 16px rgba(31, 36, 46, .1); }
  76.5%, 98.4% { background: #FFFFFF; border-color: #EDEDED; box-shadow: none; }
  99.9%, 100%  { background: #FEF7E0; border-color: #F3D98B; box-shadow: none; }
}

/* Le curseur d'un visiteur du site, une fois le site en grand : il survole
   l'avis d'Hélène, puis s'en va avant 76,5 %. */
@keyframes sc-cur-avis-google {
  0%, 67.4%    { transform: translate(440px, 470px); opacity: 0; }
  68.2%        { transform: translate(430px, 440px); opacity: 1; }
  70.6%, 73.8% { transform: translate(448px, 278px); opacity: 1; }
  76.5%, 98.4% { transform: translate(478px, 440px); opacity: 0; }
  99.9%, 100%  { transform: translate(440px, 470px); opacity: 0; }
}
@keyframes sc-avis-google-onde { 0%, 100% { transform: scale(.4); opacity: 0; } }

/* Moins de mouvement : l'état d'arrivée. Le site en grand, à jour, et la
   légende de 15:00. */
@media (prefers-reduced-motion: reduce) {
  .sc-avis-google-chrome { transform: none; }
  .sc-avis-google-tel,
  .sc-avis-google-doigt,
  .sc-avis-google-vol { visibility: hidden; }
  .sc-avis-google-s-case { height: 76px; }
  .sc-avis-google-s-avis--neuf { opacity: 1; background: #FFFFFF; border-color: var(--line-site); }
  .sc-avis-google-s-avis--sort { opacity: 0; }
  .sc-avis-google-s-reel { transform: translateY(-13px); }
  .sc-avis-google-s-maj-t--av { opacity: 0; }
  .sc-avis-google-s-maj-t--ap { opacity: 1; }
  .sc-avis-google-leg-t--a { opacity: 0; }
  .sc-avis-google-leg-t--c { opacity: 1; }
  .sc-avis-google-h-reel { transform: translateY(-42px); }
  .sc-avis-google-m-reel { transform: translateY(-196px); }
}