/* Scène « fiche Google reliée au site » : LE SENS EST GOOGLE VERS LE SITE.
   Google sur le téléphone de Lucie, dans Google Maps ; le site sur un
   ordinateur, dans Chrome (4e passe, « toujours pas assez évident, modifie
   l'UX du site et du Google »). Pas de légende, pas de curseur : on touche
   au doigt. Le rideau de fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  Google Maps : la fiche de Chez Lucie dit « Ouvert » ; le site,
           relevé de l'heure pleine
    7,6 %  « Modifier les horaires » ; l'édition de Google monte (10,8 %)
     14 %  Lucie coupe le lundi : « Fermé »
     20 %  « Ajouter une date » ; le calendrier de Google (22,2 %)
     26 %  le samedi ; « OK » à 30 % ; la ligne s'ajoute (32 à 34 %)
     38 %  « Enregistrer » ; l'édition redescend, la fiche dit « Fermé »
           (41,2 %), « Modifications enregistrées »
   48,2 %  le relevé : la carte des changements vole de la fiche au site
   51,6 %  le site change : relevé, lundi « Fermé » ; le bandeau noir de la
           fermeture exceptionnelle s'ouvre en haut (52,8 à 55 %) ; plus rien
           ne bouge ensuite
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 540. La fenêtre Chrome de (172, 32) à (510, 522), sa vue
   de 336 x 432 en (173, 89). Le téléphone de (8, 112) à (188, 532), devant
   la fenêtre, écran de 168 x 408 en (14, 118). Le calendrier est en (6, 70)
   dans l'écran, sa grille à (8, 72) dans le calendrier, la rangée L M M J V
   S D puis des cases de 20 x 18 : ces nombres sont AUSSI dans le PHP, qui en
   tire la position du doigt sur le samedi. */
.fn-scene--fiche-google {
  --sc-haut: 540px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E8E8E8; --line-g: #E8EBF0; --line-cal: #DDE3EA; --line-gm: #DADCE0;
  /* Les couleurs de Google (Maps et Material 3). */
  --g-bleu: #0B57D0; --g-texte: #1F1F1F; --g-gris: #444746; --g-gris2: #70757A;
  --g-surface: #F0F4F9; --g-tonal: #D3E3FD; --g-tonal-t: #041E49; --g-snack: #313033;
  --g-vert: #188038; --g-rouge: #D93025; --g-jaune: #FBBC04;
  line-height: 1.35;
}
.fn-scene--fiche-google svg { display: block; }
.fn-scene--fiche-google p { margin: 0; }
.fn-scene--fiche-google img { max-width: none; }

/* ═══ LES TITRES ══════════════════════════════════════════════════════ */
.sc-fiche-google-qui {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-fiche-google-qui b { font-size: 0.8125rem; font-weight: 800; line-height: 16px; letter-spacing: -.01em; color: #0A0A0A; }
.sc-fiche-google-qui span { font-size: 0.5rem; line-height: 11px; color: #737373; }
.sc-fiche-google-qui--site { top: 2px; left: 172px; width: 338px; }
.sc-fiche-google-qui--google { top: 80px; left: 8px; width: 160px; }
.sc-fiche-google-qui--google b { color: var(--g-bleu); }

/* ═══ LE SITE, DANS CHROME ════════════════════════════════════════════ */
.sc-fiche-google-chrome {
  position: absolute; top: 32px; left: 172px; z-index: 1;
  display: flex; flex-direction: column;
  width: 338px; height: 490px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-fiche-google-c-onglets { position: relative; flex: none; height: 26px; background: #DEE3EA; }
.sc-fiche-google-c-onglet {
  position: absolute; top: 5px; left: 8px;
  display: flex; align-items: center; gap: 5px;
  width: 150px; height: 21px; padding: 0 7px 0 8px;
  border-radius: 7px 7px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-fiche-google-c-onglet > svg { width: 9px; height: 9px; flex: none; color: #474747; }
.sc-fiche-google-c-favi i {
  display: grid; place-items: center; width: 11px; height: 11px;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 7px; font-weight: 800; font-style: normal; line-height: 1;
}
/* Chrome n'écrit pas « … » au bout d'un titre trop long : il l'efface. */
.sc-fiche-google-c-titre {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.53125rem;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.sc-fiche-google-c-plus { position: absolute; top: 8px; left: 166px; color: #474747; }
.sc-fiche-google-c-plus svg { width: 11px; height: 11px; }
.sc-fiche-google-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-fiche-google-fen i { display: grid; place-items: center; width: 28px; height: 100%; color: #1F1F1F; }
.sc-fiche-google-fen svg { width: 9px; height: 9px; }
.sc-fiche-google-c-outils {
  display: flex; align-items: center; gap: 1px; flex: none;
  height: 30px; padding: 0 5px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-fiche-google-c-outils > i { display: grid; place-items: center; width: 21px; height: 21px; }
.sc-fiche-google-c-outils > i svg { width: 12px; height: 12px; }
.sc-fiche-google-c-off { color: #C4C7C5; }
.sc-fiche-google-c-outils > .sc-fiche-google-c-profil svg { width: 14px; height: 14px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-fiche-google-c-adresse {
  display: flex; align-items: center; gap: 7px; flex: 1;
  height: 22px; margin: 0 5px; padding: 0 9px;
  border-radius: 11px; background: #EDF1F7;
  font-size: 0.59375rem; color: #1F1F1F; white-space: nowrap;
}
.sc-fiche-google-c-adresse > svg { width: 11px; height: 11px; flex: none; }
.sc-fiche-google-c-etoile { margin-left: auto; }
.sc-fiche-google-c-etoile svg { width: 11px; height: 11px; }

.sc-fiche-google-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: #0A0A0A; }
/* Le bandeau d'annonce du site : fermé au départ, il s'ouvre au relevé et
   pousse toute la page vers le bas. */
.sc-fiche-google-s-bandeau {
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.4375rem; font-weight: 700; white-space: nowrap;
}
.sc-fiche-google-s-nav {
  display: flex; align-items: center; gap: 12px;
  height: 30px; padding: 0 14px;
  border-bottom: 1px solid var(--line-site);
  font-size: 0.40625rem; color: #525252;
}
.sc-fiche-google-s-nav b { flex: 1; font-size: 0.5625rem; font-weight: 800; letter-spacing: -.01em; color: #0A0A0A; }
.sc-fiche-google-s-actif { font-weight: 700; color: #0A0A0A; }
.sc-fiche-google-s-resa {
  display: grid; place-items: center; height: 20px; padding: 0 10px; border-radius: 6px;
  background: #0A0A0A; color: #FFFFFF; font-weight: 700;
}
.sc-fiche-google-s-une { position: relative; display: block; height: 120px; overflow: hidden; }
.sc-fiche-google-s-une img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-fiche-google-s-une::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .68));
}
.sc-fiche-google-s-texte {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  display: flex; flex-direction: column; gap: 3px; width: 230px; color: #FFFFFF;
}
.sc-fiche-google-s-texte small { font-size: 0.34375rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .88; }
.sc-fiche-google-s-texte b { font-size: 0.8125rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.sc-fiche-google-s-sect {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px;
  padding: 12px 14px;
}
.sc-fiche-google-s-h2 { display: block; font-size: 0.5625rem; font-weight: 800; line-height: 12px; letter-spacing: -.01em; }
.sc-fiche-google-s-releve { display: flex; align-items: center; gap: 3px; height: 10px; margin: 3px 0 4px; color: #737373; }
.sc-fiche-google-s-roue { display: block; flex: none; width: 8px; height: 8px; }
.sc-fiche-google-s-roue svg { width: 8px; height: 8px; }
.sc-fiche-google-s-r { position: relative; display: block; flex: 1; height: 10px; }
.sc-fiche-google-s-rt { position: absolute; left: 0; top: 0; font-size: 0.34375rem; line-height: 10px; white-space: nowrap; }
.sc-fiche-google-s-rt--ap { opacity: 0; }
.sc-fiche-google-s-jour {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center;
  height: 15px; border-bottom: 1px dashed var(--line-site);
  font-size: 0.40625rem;
}
.sc-fiche-google-s-jour b { font-size: 0.4375rem; font-weight: 800; }
.sc-fiche-google-s-h { position: relative; display: block; height: 10px; }
.sc-fiche-google-s-hv { position: absolute; right: 0; top: 0; line-height: 10px; white-space: nowrap; color: #3A3A3A; }
.sc-fiche-google-s-hv--ap { font-weight: 800; color: #0A0A0A; opacity: 0; }
.sc-fiche-google-s-acces { display: flex; flex-direction: column; gap: 4px; }
.sc-fiche-google-s-ligne { display: flex; align-items: center; gap: 4px; font-size: 0.375rem; color: #525252; white-space: nowrap; }
.sc-fiche-google-s-ligne svg { flex: none; width: 8px; height: 8px; }
.sc-fiche-google-s-bt {
  display: grid; place-items: center; height: 22px; margin-top: 4px; border-radius: 6px;
  background: #0A0A0A; color: #FFFFFF; font-size: 0.40625rem; font-weight: 700;
}
.sc-fiche-google-s-carte { padding: 0 14px 12px; }
.sc-fiche-google-s-plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.sc-fiche-google-s-plats img { display: block; width: 100%; height: 62px; border-radius: 6px; object-fit: cover; }

/* ═══ LE TÉLÉPHONE DE LUCIE : GOOGLE MAPS ═════════════════════════════ */
.sc-fiche-google-tel {
  position: absolute; top: 112px; left: 8px; z-index: 2;
  width: 180px; height: 420px; padding: 6px;
  border-radius: 30px; background: #0A0A0A;
  box-shadow: 0 14px 30px rgba(31, 36, 46, .22);
}
.sc-fiche-google-ecran {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 25px; background: #F1EFE9; color: var(--g-texte);
}
.sc-fiche-google-ilot {
  position: absolute; top: 6px; left: 50%; z-index: 9;
  width: 46px; height: 13px; margin-left: -23px; border-radius: 7px; background: #000000;
}
.sc-fiche-google-maison {
  position: absolute; bottom: 3px; left: 50%; z-index: 9;
  width: 60px; height: 3px; margin-left: -30px; border-radius: 2px; background: #0A0A0A;
}
.sc-fiche-google-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; gap: 3px;
  height: 22px; padding: 1px 14px 0 20px; font-size: 0.4375rem;
}
.sc-fiche-google-statut b { flex: 1; font-weight: 700; }
.sc-fiche-google-reseau { display: flex; align-items: flex-end; gap: 1px; height: 6px; }
.sc-fiche-google-reseau i { display: block; width: 2px; border-radius: 1px; background: currentColor; }
.sc-fiche-google-reseau i:nth-child(1) { height: 2.5px; }
.sc-fiche-google-reseau i:nth-child(2) { height: 3.5px; }
.sc-fiche-google-reseau i:nth-child(3) { height: 4.5px; }
.sc-fiche-google-reseau i:nth-child(4) { height: 6px; }
.sc-fiche-google-pile { display: block; width: 12px; height: 6px; padding: 1px; border: 1px solid currentColor; border-radius: 2px; opacity: .9; }
.sc-fiche-google-pile i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }

/* La carte, et ce qui flotte dessus. */
.sc-fiche-google-plan { position: absolute; top: 0; left: 0; width: 168px; height: 210px; }
.sc-fiche-google-recherche {
  position: absolute; top: 26px; left: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 9px; border-radius: 12px;
  background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  font-size: 0.46875rem;
}
.sc-fiche-google-recherche span { flex: 1; }
.sc-fiche-google-recherche svg { width: 10px; height: 10px; color: var(--g-gris); }
.sc-fiche-google-epingle { position: absolute; top: 84px; left: 72px; z-index: 1; display: flex; align-items: flex-start; gap: 3px; }
.sc-fiche-google-epingle svg { width: 16px; height: 23px; }
.sc-fiche-google-epingle b {
  margin-top: 4px; font-size: 0.40625rem; font-weight: 700; color: #C5221F;
  text-shadow: 0 0 2px #FFFFFF, 0 0 2px #FFFFFF;
}

/* La fiche, qui monte du bas sur la carte. */
.sc-fiche-google-fiche {
  position: absolute; left: 0; right: 0; top: 190px; bottom: 0; z-index: 3;
  display: flex; flex-direction: column;
  padding: 7px 12px 0; border-radius: 14px 14px 0 0;
  background: #FFFFFF; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
}
.sc-fiche-google-poignee { display: block; width: 28px; height: 3px; margin: 0 auto 6px; border-radius: 2px; background: var(--line-gm); }
.sc-fiche-google-f-nom { font-size: 0.6875rem; font-weight: 600; line-height: 15px; }
.sc-fiche-google-f-note { display: flex; align-items: center; gap: 3px; height: 11px; font-size: 0.40625rem; color: var(--g-gris2); }
.sc-fiche-google-f-note { color: var(--g-texte); }
.sc-fiche-google-f-note > span:last-child { color: var(--g-gris2); }
.sc-fiche-google-f-et { display: flex; gap: 1px; color: var(--g-jaune); }
.sc-fiche-google-f-et svg { width: 7px; height: 7px; }
.sc-fiche-google-f-type { height: 10px; font-size: 0.40625rem; line-height: 10px; color: var(--g-gris2); }
.sc-fiche-google-f-etat { position: relative; display: block; height: 11px; margin-top: 1px; font-size: 0.40625rem; line-height: 11px; color: var(--g-gris2); }
.sc-fiche-google-fe { position: absolute; left: 0; top: 0; white-space: nowrap; }
.sc-fiche-google-fe b { font-weight: 600; }
.sc-fiche-google-fe--ap { opacity: 0; }
.sc-fiche-google-vert { color: var(--g-vert); }
.sc-fiche-google-rouge { color: var(--g-rouge); }
/* Les boutons de la fiche, arrondis comme chez Google : c'est son
   interface, dans son téléphone. */
.sc-fiche-google-f-boutons { display: flex; gap: 5px; margin-top: 8px; }
.sc-fiche-google-f-bt {
  display: flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 9px; border: 1px solid var(--line-gm); border-radius: 11px;
  font-size: 0.40625rem; font-weight: 600; color: var(--g-bleu); white-space: nowrap;
}
.sc-fiche-google-f-bt svg { width: 9px; height: 9px; }
.sc-fiche-google-f-bt--plein { border-color: var(--g-bleu); background: var(--g-bleu); color: #FFFFFF; }
.sc-fiche-google-f-gere {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  margin-top: 10px; padding: 7px 8px; border-radius: 10px; background: #EAF1FB;
  font-size: 0.375rem; color: var(--g-gris);
}
.sc-fiche-google-f-modif {
  display: flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 10px; border-radius: 11px;
  background: var(--g-tonal); color: var(--g-tonal-t);
  font-size: 0.4375rem; font-weight: 600; white-space: nowrap;
}
.sc-fiche-google-f-modif svg { width: 9px; height: 9px; }

/* L'édition des horaires de Google : elle monte sur tout l'écran. */
.sc-fiche-google-gg {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; padding-top: 22px;
  background: var(--g-surface);
  transform: translateY(410px);
}
.sc-fiche-google-gg-barre { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; }
.sc-fiche-google-gg-barre svg { flex: none; width: 11px; height: 11px; color: var(--g-gris); }
.sc-fiche-google-gg-barre b { flex: 1; font-size: 0.46875rem; font-weight: 500; white-space: nowrap; }
.sc-fiche-google-gg-enr { padding: 4px 7px; margin-right: -4px; border-radius: 11px; font-size: 0.4375rem; font-weight: 600; color: var(--g-bleu); }
.sc-fiche-google-gg-carte {
  display: flex; flex-direction: column;
  margin: 4px 8px 0; padding: 2px 0; border-radius: 10px; background: #FFFFFF;
}
.sc-fiche-google-gg-jour {
  display: grid; grid-template-columns: 42px 22px minmax(0, 1fr); gap: 7px; align-items: center;
  height: 25px; padding: 0 8px; border-bottom: 1px solid var(--line-g);
}
.sc-fiche-google-gg-jour:last-child { border-bottom-color: transparent; }
.sc-fiche-google-gg-jour > b { font-size: 0.4375rem; font-weight: 500; }
.sc-fiche-google-gg-etat { position: relative; display: block; height: 20px; }
.sc-fiche-google-gg-e {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 0.375rem; line-height: 1.3; white-space: nowrap;
}
.sc-fiche-google-gg-e b { font-weight: 500; }
.sc-fiche-google-gg-e small { font-size: 0.3125rem; color: var(--g-gris); }
.sc-fiche-google-gg-e--ap { opacity: 0; }
/* L'interrupteur Material : piste bleue et pouce blanc coché quand c'est
   ouvert ; piste claire cerclée de gris et petit pouce gris quand c'est
   fermé. La bordure est toujours là, seule sa couleur change. */
.sc-fiche-google-inter {
  position: relative; display: block; width: 22px; height: 13px;
  border: 1.5px solid var(--g-bleu); border-radius: 7px; background: var(--g-bleu);
}
.sc-fiche-google-pouce {
  position: absolute; top: 50%; left: 8.5px;
  display: grid; place-items: center; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: #FFFFFF; color: var(--g-bleu);
}
.sc-fiche-google-pouce svg { width: 7px; height: 7px; stroke-width: 2; }
.sc-fiche-google-gg-carte--exc { margin-top: 6px; padding: 6px 0 3px; }
.sc-fiche-google-gg-titre { padding: 0 8px; font-size: 0.46875rem; font-weight: 500; line-height: 10px; }
.sc-fiche-google-gg-case { display: block; height: 0; overflow: hidden; }
.sc-fiche-google-gg-exc {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 7px; align-items: center;
  height: 24px; padding: 0 8px; border-bottom: 1px solid var(--line-g);
  font-size: 0.40625rem;
}
.sc-fiche-google-gg-exc svg { width: 10px; height: 10px; color: var(--g-gris); }
.sc-fiche-google-gg-exc b { font-weight: 500; }
.sc-fiche-google-gg-exc span { color: var(--g-gris); }
.sc-fiche-google-gg-ajout {
  display: flex; align-items: center; gap: 5px; align-self: flex-start;
  height: 22px; margin: 2px 0 0 3px; padding: 0 7px; border-radius: 11px;
  font-size: 0.4375rem; font-weight: 600; color: var(--g-bleu);
}
.sc-fiche-google-gg-ajout svg { width: 10px; height: 10px; }

/* Le calendrier de Google, en fenêtre posée sur un voile. */
.sc-fiche-google-voile { position: absolute; inset: 0; z-index: 6; background: rgba(0, 0, 0, .32); opacity: 0; }
.sc-fiche-google-cal {
  position: absolute; top: 70px; left: 6px; z-index: 7;
  width: 156px; height: 226px; padding: 8px 8px 0;
  border-radius: 14px; background: var(--g-surface);
  opacity: 0; transform: scale(.94);
}
.sc-fiche-google-cal-lib { display: block; height: 8px; font-size: 0.34375rem; font-weight: 500; line-height: 8px; color: var(--g-gris); }
.sc-fiche-google-cal-date { position: relative; display: block; height: 22px; margin-top: 2px; border-bottom: 1px solid var(--line-cal); }
.sc-fiche-google-cd { position: absolute; left: 0; top: 0; font-size: 0.75rem; line-height: 18px; white-space: nowrap; }
.sc-fiche-google-cd--ap { opacity: 0; }
.sc-fiche-google-cal-mois { display: flex; align-items: center; gap: 10px; height: 14px; margin-top: 4px; font-size: 0.375rem; color: var(--g-gris); }
.sc-fiche-google-cal-mois b { flex: 1; font-weight: 600; }
.sc-fiche-google-cal-mois svg { width: 9px; height: 9px; }
/* La grille : la rangée L M M J V S D puis six rangées de jours, toujours
   six, pour que la fenêtre garde la même hauteur quel que soit le mois. */
.sc-fiche-google-cal-grille {
  position: absolute; top: 72px; left: 8px;
  display: grid; grid-template-columns: repeat(7, 20px); grid-auto-rows: 18px;
}
.sc-fiche-google-cal-grille i {
  display: grid; place-items: center; width: 18px; height: 16px; margin: 1px;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 0.375rem; font-style: normal; color: var(--g-texte);
}
.sc-fiche-google-cal-grille .sc-fiche-google-cal-sem { font-weight: 500; color: var(--g-gris); }
.sc-fiche-google-cal-grille .sc-fiche-google-cal-j--auj { border-color: var(--g-bleu); color: var(--g-bleu); }
.sc-fiche-google-cal-bts {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  display: flex; justify-content: flex-end; gap: 10px;
  font-size: 0.4375rem; font-weight: 600; color: var(--g-bleu);
}
.sc-fiche-google-cal-bts span { padding: 4px 4px; border-radius: 10px; }

.sc-fiche-google-snack {
  position: absolute; left: 8px; right: 8px; bottom: 12px; z-index: 7;
  display: flex; align-items: center;
  height: 24px; padding: 0 10px; border-radius: 4px;
  background: var(--g-snack); color: #F2F2F2;
  font-size: 0.40625rem; white-space: nowrap;
  opacity: 0; transform: translateY(12px);
}

/* ═══ LA CARTE QUI VOLE DE GOOGLE AU SITE ═════════════════════════════
   Deux éléments imbriqués : l'extérieur fait la course en largeur, régulière ;
   l'intérieur monte puis redescend. L'arc en naît sans angle. */
.sc-fiche-google-vol { position: absolute; top: 0; left: 0; z-index: 3; opacity: 0; transform: translateX(20px); }
.sc-fiche-google-vol-y { display: block; transform: translateY(340px); }
.sc-fiche-google-vol-carte {
  display: flex; flex-direction: column; gap: 3px;
  width: 146px; padding: 7px 10px 8px;
  border: 1px solid var(--line-g); border-radius: 10px; background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(31, 36, 46, .22);
  font-size: 0.4375rem; color: #0A0A0A;
}
.sc-fiche-google-vol-carte small {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-bleu);
}
.sc-fiche-google-vol-carte small svg { width: 8px; height: 8px; }
.sc-fiche-google-vol-carte > span { display: flex; justify-content: space-between; white-space: nowrap; }
.sc-fiche-google-vol-carte > span b { font-weight: 700; }

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

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

.sc-fiche-google-doigt           { animation-name: sc-fiche-google-doigt; }
.sc-fiche-google-f-modif         { animation-name: sc-fiche-google-modif; }
.sc-fiche-google-gg              { animation-name: sc-fiche-google-gg; }
.sc-fiche-google-inter--lundi    { animation-name: sc-fiche-google-inter; }
.sc-fiche-google-pouce--lundi    { animation-name: sc-fiche-google-pouce; }
.sc-fiche-google-gg-e--av        { animation-name: sc-fiche-google-av; }
.sc-fiche-google-gg-e--ap        { animation-name: sc-fiche-google-ap; }
.sc-fiche-google-gg-ajout        { animation-name: sc-fiche-google-ajout; }
.sc-fiche-google-voile           { animation-name: sc-fiche-google-voile; }
.sc-fiche-google-cal             { animation-name: sc-fiche-google-cal; }
.sc-fiche-google-cal-j--choisi   { animation-name: sc-fiche-google-choisi; }
.sc-fiche-google-cd--av          { animation-name: sc-fiche-google-cd-av; }
.sc-fiche-google-cd--ap          { animation-name: sc-fiche-google-cd-ap; }
.sc-fiche-google-cal-ok          { animation-name: sc-fiche-google-ok; }
.sc-fiche-google-gg-case         { animation-name: sc-fiche-google-gg-case; }
.sc-fiche-google-gg-exc          { animation-name: sc-fiche-google-gg-exc; }
.sc-fiche-google-gg-enr          { animation-name: sc-fiche-google-enr; }
.sc-fiche-google-fe--av          { animation-name: sc-fiche-google-fe-av; }
.sc-fiche-google-fe--ap          { animation-name: sc-fiche-google-fe-ap; }
.sc-fiche-google-snack           { animation-name: sc-fiche-google-snack; }
.sc-fiche-google-vol             { animation-name: sc-fiche-google-vol-x; }
.sc-fiche-google-vol-y           { animation-name: sc-fiche-google-vol-y; }
.sc-fiche-google-s-roue          { animation-name: sc-fiche-google-roue; }
.sc-fiche-google-s-rt--av        { animation-name: sc-fiche-google-rt-av; }
.sc-fiche-google-s-rt--ap        { animation-name: sc-fiche-google-rt-ap; }
.sc-fiche-google-s-hv--av        { animation-name: sc-fiche-google-hv-av; }
.sc-fiche-google-s-hv--ap        { animation-name: sc-fiche-google-hv-ap; }
.sc-fiche-google-s-bandeau       { animation-name: sc-fiche-google-bandeau; }

/* ═══ 1. SUR GOOGLE ═══════════════════════════════════════════════════ */

/* LE DOIGT. Six cibles MESURÉES dans la toile (le rond de 22 px s'y
   centre, translate = centre - 11) : « Modifier les horaires »,
   l'interrupteur du lundi, « Ajouter une date », le samedi du calendrier
   (position calculée dans le PHP, qui dépend du mois : --sc-fg-x,
   --sc-fg-y), « OK », puis « Enregistrer ». Il n'est visible que pendant
   qu'il touche. */
@keyframes sc-fiche-google-doigt {
  0%, 7.2%     { transform: translate(74px, 432px) scale(.6); opacity: 0; }
  7.6%         { transform: translate(74px, 432px); opacity: 1; }
  8%           { transform: translate(74px, 432px) scale(.8); opacity: 1; }
  8.4%         { transform: translate(74px, 432px); opacity: 1; }
  8.9%         { transform: translate(74px, 432px); opacity: 0; }
  13.6%        { transform: translate(79px, 177px) scale(.6); opacity: 0; }
  14%          { transform: translate(79px, 177px); opacity: 1; }
  14.4%        { transform: translate(79px, 177px) scale(.8); opacity: 1; }
  14.8%        { transform: translate(79px, 177px); opacity: 1; }
  15.3%        { transform: translate(79px, 177px); opacity: 0; }
  19.6%        { transform: translate(57px, 377px) scale(.6); opacity: 0; }
  20%          { transform: translate(57px, 377px); opacity: 1; }
  20.4%        { transform: translate(57px, 377px) scale(.8); opacity: 1; }
  20.8%        { transform: translate(57px, 377px); opacity: 1; }
  21.3%        { transform: translate(57px, 377px); opacity: 0; }
  25.6%        { transform: translate(var(--sc-fg-x, 128px), var(--sc-fg-y, 294px)) scale(.6); opacity: 0; }
  26%          { transform: translate(var(--sc-fg-x, 128px), var(--sc-fg-y, 294px)); opacity: 1; }
  26.4%        { transform: translate(var(--sc-fg-x, 128px), var(--sc-fg-y, 294px)) scale(.8); opacity: 1; }
  26.8%        { transform: translate(var(--sc-fg-x, 128px), var(--sc-fg-y, 294px)); opacity: 1; }
  27.3%        { transform: translate(var(--sc-fg-x, 128px), var(--sc-fg-y, 294px)); opacity: 0; }
  29.6%        { transform: translate(148px, 388px) scale(.6); opacity: 0; }
  30%          { transform: translate(148px, 388px); opacity: 1; }
  30.4%        { transform: translate(148px, 388px) scale(.8); opacity: 1; }
  30.8%        { transform: translate(148px, 388px); opacity: 1; }
  31.3%        { transform: translate(148px, 388px); opacity: 0; }
  37.6%        { transform: translate(141px, 144px) scale(.6); opacity: 0; }
  38%          { transform: translate(141px, 144px); opacity: 1; }
  38.4%        { transform: translate(141px, 144px) scale(.8); opacity: 1; }
  38.8%        { transform: translate(141px, 144px); opacity: 1; }
  39.3%, 98.4% { transform: translate(141px, 144px); opacity: 0; }
  99.9%, 100%  { transform: translate(74px, 432px) scale(.6); opacity: 0; }
}
@keyframes sc-fiche-google-modif {
  0%, 7.8%     { background: #D3E3FD; }
  8%, 8.5%     { background: #B6CFF5; }
  8.8%, 100%   { background: #D3E3FD; }
}
/* L'édition monte sur tout l'écran, puis redescend une fois enregistré. */
@keyframes sc-fiche-google-gg {
  0%, 8.6%     { transform: translateY(410px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  10.8%, 38.8% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  41%, 98.4%   { transform: translateY(410px); }
  99.9%, 100%  { transform: translateY(410px); }
}
/* Le lundi se coupe : piste claire cerclée, pouce gris et plus petit. */
@keyframes sc-fiche-google-inter {
  0%, 14.2%    { background: #0B57D0; border-color: #0B57D0; }
  15%, 98.4%   { background: #E1E3E1; border-color: #747775; }
  99.9%, 100%  { background: #0B57D0; border-color: #0B57D0; }
}
@keyframes sc-fiche-google-pouce {
  0%, 14.2%    { transform: none; background: #FFFFFF; color: #0B57D0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  15%, 98.4%   { transform: translateX(-7px) scale(.7); background: #747775; color: rgba(11, 87, 208, 0); }
  99.9%, 100%  { transform: none; background: #FFFFFF; color: #0B57D0; }
}
@keyframes sc-fiche-google-av {
  0%, 14.5%    { opacity: 1; }
  14.9%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-fiche-google-ap {
  0%, 15%      { opacity: 0; }
  15.4%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-fiche-google-ajout {
  0%, 20.3%    { background: rgba(11, 87, 208, 0); }
  20.5%, 21%   { background: rgba(11, 87, 208, .12); }
  21.3%, 100%  { background: rgba(11, 87, 208, 0); }
}
/* Le calendrier s'ouvre, on choisit, « OK », il se referme. */
@keyframes sc-fiche-google-voile {
  0%, 20.8%    { opacity: 0; }
  22%, 30.8%   { opacity: 1; }
  31.8%, 100%  { opacity: 0; }
}
@keyframes sc-fiche-google-cal {
  0%, 20.8%    { opacity: 0; transform: scale(.94); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  22.2%, 30.8% { opacity: 1; transform: none; }
  31.8%, 100%  { opacity: 0; transform: scale(.98); }
}
@keyframes sc-fiche-google-choisi {
  0%, 26.3%    { background: rgba(11, 87, 208, 0); color: #1F1F1F; }
  26.6%, 98.4% { background: rgba(11, 87, 208, 1); color: #FFFFFF; }
  99.9%, 100%  { background: rgba(11, 87, 208, 0); color: #1F1F1F; }
}
@keyframes sc-fiche-google-cd-av {
  0%, 26.5%    { opacity: 1; }
  26.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-fiche-google-cd-ap {
  0%, 26.8%    { opacity: 0; }
  27.1%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-fiche-google-ok {
  0%, 30.3%    { background: rgba(11, 87, 208, 0); }
  30.5%, 31%   { background: rgba(11, 87, 208, .12); }
  31.3%, 100%  { background: rgba(11, 87, 208, 0); }
}
@keyframes sc-fiche-google-gg-case {
  0%, 32%      { height: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  34%, 98.4%   { height: 24px; }
  99.9%, 100%  { height: 0; }
}
@keyframes sc-fiche-google-gg-exc {
  0%, 32.8%    { opacity: 0; }
  34.2%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-fiche-google-enr {
  0%, 38.3%    { background: rgba(11, 87, 208, 0); }
  38.5%, 39%   { background: rgba(11, 87, 208, .12); }
  39.3%, 100%  { background: rgba(11, 87, 208, 0); }
}
/* De retour sur la fiche : Google affiche déjà « Fermé ». */
@keyframes sc-fiche-google-fe-av {
  0%, 41.2%    { opacity: 1; }
  41.6%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-fiche-google-fe-ap {
  0%, 41.7%    { opacity: 0; }
  42.2%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-fiche-google-snack {
  0%, 41.6%    { opacity: 0; transform: translateY(12px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  42.6%, 49.6% { opacity: 1; transform: none; }
  50.6%, 100%  { opacity: 0; transform: none; }
}

/* ═══ 2. LE RELEVÉ : DE LA FICHE AU SITE ══════════════════════════════
   La carte des changements naît sur la fiche (sur la ligne « Fermé »),
   monte, franchit l'espace et se pose sur le lundi du site. */
@keyframes sc-fiche-google-vol-x {
  0%, 47.6%    { opacity: 0; transform: translateX(20px) scale(.9); }
  48.2%        { opacity: 1; transform: translateX(20px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  51.6%        { opacity: 1; transform: translateX(204px); }
  52.3%, 100%  { opacity: 0; transform: translateX(204px) scale(.96); }
}
@keyframes sc-fiche-google-vol-y {
  0%, 48.2%    { transform: translateY(340px); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  49.9%        { transform: translateY(228px); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  51.6%, 100%  { transform: translateY(262px); }
}

/* ═══ 3. SUR VOTRE SITE ═══════════════════════════════════════════════ */
@keyframes sc-fiche-google-roue {
  0%, 48%      { transform: rotate(0); color: #737373; }
  48.2%        { transform: rotate(0); color: #0A0A0A; animation-timing-function: linear; }
  51.8%        { transform: rotate(-1080deg); color: #0A0A0A; }
  52.2%, 98.4% { transform: rotate(-1080deg); color: #737373; }
  99.9%, 100%  { transform: rotate(0); color: #737373; }
}
@keyframes sc-fiche-google-rt-av {
  0%, 51.6%    { opacity: 1; }
  52%, 98.4%   { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-fiche-google-rt-ap {
  0%, 52%      { opacity: 0; }
  52.4%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-fiche-google-hv-av {
  0%, 51.8%    { opacity: 1; }
  52.2%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-fiche-google-hv-ap {
  0%, 52.2%    { opacity: 0; }
  52.7%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* Le bandeau noir s'ouvre en haut du site et pousse la page. */
@keyframes sc-fiche-google-bandeau {
  0%, 52.8%    { height: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  55%, 98.4%   { height: 20px; }
  99.9%, 100%  { height: 0; }
}

/* Moins de mouvement : l'état d'arrivée, des deux côtés. */
@media (prefers-reduced-motion: reduce) {
  .sc-fiche-google-fe--av, .sc-fiche-google-s-rt--av, .sc-fiche-google-s-hv--av { opacity: 0; }
  .sc-fiche-google-fe--ap, .sc-fiche-google-s-rt--ap, .sc-fiche-google-s-hv--ap { opacity: 1; }
  .sc-fiche-google-s-bandeau { height: 20px; }
}