/* Scène « lisible par les IA », refaite le 24 septembre : la même question
   posée à ChatGPT avant et après la réécriture des pages, puis la page d'où
   vient la réponse. Le rideau de fin et le curseur viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  Chrome, ChatGPT : « Sur quoi travaillez-vous ? »
    5,2 %  le curseur touche le champ ; la question se tape (6,2 à 14,2 %)
   15,6 %  il envoie ; la conversation s'ouvre, « Recherche sur le Web »
   20,6 %  AVANT : la réponse s'écrit, ligne par ligne, sans les horaires
   35,2 %  quelques semaines après, il touche « Réessayer »
   39,6 %  APRÈS : la réponse donne le port et les horaires, en gras ; 2/2
   54,4 %  il touche la source « chezlucie.fr » : nouvel onglet, la page de
           Chez Lucie (57,6 %), photo avec un lent recul (jusqu'à 70 %), le
           passage des horaires surligné (60,4 %)
     70 %  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. Chrome en occupe les 500 du haut, sans bouger ; la
   vue commence en (1, 65) : un point (x, y) de la vue tombe en
   (1 + x, 65 + y). La légende, fixe, de 508 à 534.

   LES CIBLES DU CURSEUR (centre de la cible moins (4, 2), tout est posé en
   absolu) :
     le champ de l'accueil        vue (200, 206) → (197, 269)
     le bouton d'envoi            vue (437, 206) → (434, 269)
     « Réessayer »                vue (121, 168) → (118, 231)
     la source « chezlucie.fr »   mesurée (342,3 ; 205) → (338, 203) */
.fn-scene--ia {
  --sc-haut: 540px;
  /* ChatGPT en thème clair, relevé sur chatgpt.com. */
  --c-ink: #0D0D0D; --c-gris: #5D5D5D; --c-pale: #8F8F8F; --c-bulle: #F4F4F4;
  /* Les filets, tous neutres. */
  --line-c: #E3E3E3; --line-chrome: #E3E6EA; --line-site: #EDEDED; --line-leg: #E5E5E5;
  line-height: 1.35;
}
.fn-scene--ia svg { display: block; }
.fn-scene--ia i { font-style: normal; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-ia-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);
}
.sc-ia-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-ia-c-onglet {
  position: absolute; top: 5px;
  display: flex; align-items: center; gap: 6px;
  width: 150px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-ia-c-onglet--1 { left: 8px; }
.sc-ia-c-onglet--2 { left: 160px; opacity: 0; }
.sc-ia-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-ia-c-favi { position: relative; width: 12px; height: 12px; flex: none; }
.sc-ia-c-favi i { position: absolute; inset: 0; }
.sc-ia-c-favi--bulle { color: #474747; }
.sc-ia-c-favi--bulle svg { width: 12px; height: 12px; }
.sc-ia-c-logo {
  display: grid; place-items: center; opacity: 0;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
/* La roue de chargement de Chrome : un arc bleu à la place de l'icône. */
.sc-ia-c-roue {
  border: 1.6px solid transparent; border-top-color: #0B57D0; border-right-color: #0B57D0;
  border-radius: 50%; opacity: 0;
}
.sc-ia-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-ia-c-plus { position: absolute; top: 9px; left: 176px; color: #474747; }
.sc-ia-c-plus svg { width: 12px; height: 12px; }
.sc-ia-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-ia-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-ia-fen svg { width: 10px; height: 10px; }

.sc-ia-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-ia-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-ia-c-outils > i svg { width: 14px; height: 14px; }
.sc-ia-c-off { color: #C4C7C5; }
.sc-ia-c-outils > .sc-ia-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-ia-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  height: 26px; margin: 0 6px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.65625rem; color: #1F1F1F; white-space: nowrap;
}
.sc-ia-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-ia-c-url { display: grid; flex: 1; min-width: 0; overflow: hidden; }
.sc-ia-c-url-t { grid-area: 1 / 1; overflow: hidden; }
.sc-ia-c-url-t--site { opacity: 0; }
.sc-ia-c-chemin { color: #5F6368; }
.sc-ia-c-etoile { margin-left: auto; }
.sc-ia-c-etoile svg { width: 13px; height: 13px; }

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

/* ═══ CHATGPT ═════════════════════════════════════════════════════════ */
.sc-ia-chat { position: absolute; inset: 0; z-index: 1; background: #FFFFFF; color: var(--c-ink); }
.sc-ia-barre {
  position: absolute; top: 0; left: 14px; right: 14px; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
}
.sc-ia-barre-g { display: flex; align-items: center; gap: 8px; color: var(--c-gris); }
.sc-ia-barre-g svg { width: 15px; height: 15px; }
.sc-ia-barre-g b { font-size: 0.6875rem; font-weight: 600; color: var(--c-ink); }
.sc-ia-barre-g b + svg { width: 11px; height: 11px; margin-left: -4px; }
.sc-ia-avatar {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #00897B; color: #FFFFFF;
  font-size: 0.625rem; font-weight: 500; line-height: 1;
}

/* Le champ, à l'accueil puis en bas de la conversation. Arrondi comme
   celui de ChatGPT : c'est sa forme, pas la nôtre. */
.sc-ia-champ {
  position: absolute; left: 59px; width: 400px;
  border: 1px solid var(--line-c); background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.sc-ia-champ > span { position: absolute; }
.sc-ia-champ-plus { left: 14px; color: var(--c-gris); }
.sc-ia-champ-plus svg,
.sc-ia-champ-micro svg { width: 16px; height: 16px; }
.sc-ia-champ-micro { right: 46px; color: var(--c-gris); }
.sc-ia-invite { left: 40px; font-size: 0.625rem; color: var(--c-pale); white-space: nowrap; }
.sc-ia-envoi {
  display: grid; place-items: center;
  border-radius: 50%; background: #D7D7D7; color: #FFFFFF;
}
.sc-ia-envoi svg { width: 13px; height: 13px; }
.sc-ia-champ--accueil { top: 184px; height: 44px; border-radius: 22px; }
.sc-ia-champ--accueil .sc-ia-champ-plus,
.sc-ia-champ--accueil .sc-ia-champ-micro { top: 13px; }
.sc-ia-champ--accueil .sc-ia-invite { top: 0; line-height: 44px; }
.sc-ia-champ--accueil .sc-ia-envoi { top: 7px; right: 8px; width: 28px; height: 28px; }
.sc-ia-champ--bas { top: 350px; height: 40px; border-radius: 20px; }
.sc-ia-champ--bas .sc-ia-champ-plus,
.sc-ia-champ--bas .sc-ia-champ-micro { top: 11px; }
.sc-ia-champ--bas .sc-ia-invite { top: 0; line-height: 40px; }
.sc-ia-champ--bas .sc-ia-envoi { top: 7px; right: 8px; width: 24px; height: 24px; }
/* La frappe : `max-width` en paliers d'une lettre, la bordure droite fait le
   curseur de saisie. */
.sc-ia-tape {
  top: 14px; left: 40px;
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap;
  border-right: 1.2px solid transparent;
  font-size: 0.625rem; line-height: 16px;
}

.sc-ia-accueil { position: absolute; inset: 0; }
.sc-ia-accueil-t { position: absolute; top: 140px; left: 0; right: 0; text-align: center; font-size: 1rem; line-height: 22px; }

.sc-ia-conv { position: absolute; inset: 0; visibility: hidden; }
.sc-ia-conv > span { position: absolute; }
.sc-ia-bulle {
  top: 56px; right: 49px; height: 32px; padding: 0 14px;
  border-radius: 18px; background: var(--c-bulle);
  font-size: 0.59375rem; line-height: 32px; white-space: nowrap;
}
.sc-ia-cherche { top: 100px; left: 49px; font-size: 0.59375rem; line-height: 16px; color: var(--c-pale); opacity: 0; }
.sc-ia-rep { top: 100px; left: 49px; width: 420px; height: 48px; }
.sc-ia-rang { position: absolute; left: 0; display: flex; align-items: center; height: 16px; white-space: nowrap; }
.sc-ia-rang--1 { top: 0; }
.sc-ia-rang--2 { top: 16px; }
.sc-ia-rang--3 { top: 32px; }
/* La réponse s'écrit : chaque ligne s'ouvre par paliers, d'un mot environ. */
.sc-ia-ligne {
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 0.625rem; line-height: 16px;
}
.sc-ia-ligne b { font-weight: 600; }
/* La source, en pastille grise au bout de la réponse, comme ChatGPT la met. */
.sc-ia-source {
  display: inline-flex; align-items: center; height: 16px; margin-left: 5px; padding: 0 7px;
  border-radius: 8px; background: var(--c-bulle); color: var(--c-gris);
  font-size: 0.46875rem; font-weight: 500; line-height: 1;
  opacity: 0;
}
.sc-ia-actions { top: 158px; left: 45px; display: flex; align-items: center; gap: 2px; height: 20px; color: var(--c-gris); opacity: 0; }
.sc-ia-actions i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; }
.sc-ia-actions svg { width: 13px; height: 13px; }
.sc-ia-page2 { margin-left: 6px; font-size: 0.5rem; opacity: 0; }
.sc-ia-mention { top: 398px; left: 0; right: 0; text-align: center; font-size: 0.4375rem; line-height: 10px; color: var(--c-gris); }

/* ═══ LA SOURCE : LA PAGE DE CHEZ LUCIE ═══════════════════════════════ */
.sc-ia-site { position: absolute; inset: 0; z-index: 3; background: #FFFFFF; visibility: hidden; }
.sc-ia-s-page { position: absolute; inset: 0; color: #0A0A0A; opacity: 0; }
.sc-ia-s-tete {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 20px;
  border-bottom: 1px solid var(--line-site);
}
.sc-ia-s-marque { font-size: 0.6875rem; font-weight: 800; letter-spacing: -.01em; }
.sc-ia-s-nav { display: flex; align-items: center; gap: 12px; font-size: 0.46875rem; font-weight: 500; color: #404040; }
.sc-ia-s-resa { display: grid; place-items: center; height: 20px; padding: 0 9px; border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font-weight: 700; }
.sc-ia-s-photo { display: block; height: 170px; overflow: hidden; }
.sc-ia-s-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.1); }
.sc-ia-s-col { position: absolute; top: 210px; left: 60px; width: 398px; height: 150px; }
.sc-ia-s-col > span { position: absolute; left: 0; opacity: 0; transform: translateY(10px); }
.sc-ia-s-kicker { top: 16px; font-size: 0.40625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 10px; color: #737373; white-space: nowrap; }
.sc-ia-s-h1 { top: 30px; font-size: 0.9375rem; font-weight: 800; line-height: 20px; letter-spacing: -.02em; white-space: nowrap; }
.sc-ia-s-texte { top: 58px; width: 398px; font-size: 0.5625rem; line-height: 14px; color: #404040; }
/* Le surlignage de Chrome sur le passage que la réponse a cité. */
.sc-ia-s-surligne { padding: 1px 0; border-radius: 2px; background: transparent; color: inherit; }
.sc-ia-s-boutons { top: 110px; display: flex; gap: 8px; }
.sc-ia-s-b1,
.sc-ia-s-b2 { display: grid; place-items: center; height: 26px; padding: 0 14px; border-radius: 7px; font-size: 0.5rem; font-weight: 700; white-space: nowrap; }
.sc-ia-s-b1 { background: #0A0A0A; color: #FFFFFF; }
.sc-ia-s-b2 { border: 1px solid #0A0A0A; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-ia-legende { position: absolute; top: 508px; left: 14px; right: 14px; z-index: 2; display: grid; height: 26px; margin: 0; }
.sc-ia-leg {
  grid-area: 1 / 1;
  display: flex; align-items: center; gap: 9px;
  font-size: 0.59375rem; font-weight: 700; line-height: 1; color: #0A0A0A; white-space: nowrap;
  opacity: 0;
}
.sc-ia-leg--a { opacity: 1; }
.sc-ia-leg i {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border: 1px solid var(--line-leg); border-radius: 8px; background: #FFFFFF; color: #525252;
}
.sc-ia-leg i svg { width: 13px; height: 13px; }
.sc-ia-leg img { flex: none; width: 22px; height: 22px; margin: 0 2px; border-radius: 50%; }

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

.sc-ia-champ--accueil .sc-ia-invite { animation-name: sc-ia-invite; }
.sc-ia-tape                 { animation-name: sc-ia-frappe, sc-ia-caret; }
.sc-ia-champ--accueil .sc-ia-envoi { animation-name: sc-ia-envoi; }
.sc-ia-accueil              { animation-name: sc-ia-accueil; }
.sc-ia-conv                 { animation-name: sc-ia-conv; }
.sc-ia-cherche--1           { animation-name: sc-ia-cherche-1; }
.sc-ia-cherche--2           { animation-name: sc-ia-cherche-2; }
.sc-ia-rep--avant           { animation-name: sc-ia-rep-avant; }
.sc-ia-ligne--avant-1       { animation-name: sc-ia-a1; }
.sc-ia-ligne--avant-2       { animation-name: sc-ia-a2; }
.sc-ia-ligne--avant-3       { animation-name: sc-ia-a3; }
.sc-ia-source--avant        { animation-name: sc-ia-source-avant; }
.sc-ia-ligne--apres-1       { animation-name: sc-ia-b1; }
.sc-ia-ligne--apres-2       { animation-name: sc-ia-b2; }
.sc-ia-ligne--apres-3       { animation-name: sc-ia-b3; }
.sc-ia-source--apres        { animation-name: sc-ia-source-apres; }
.sc-ia-actions              { animation-name: sc-ia-actions; }
.sc-ia-reessayer            { animation-name: sc-ia-reessayer; }
.sc-ia-page2                { animation-name: sc-ia-page2; }

.sc-ia-c-onglet--1          { animation-name: sc-ia-onglet-1; }
.sc-ia-c-onglet--2          { animation-name: sc-ia-onglet-2; }
.sc-ia-c-plus               { animation-name: sc-ia-plus; }
.sc-ia-c-roue               { animation-name: sc-ia-roue; }
.sc-ia-c-logo               { animation-name: sc-ia-logo; }
.sc-ia-c-url-t--chat        { animation-name: sc-ia-url-chat; }
.sc-ia-c-url-t--site        { animation-name: sc-ia-url-site; }
.sc-ia-site                 { animation-name: sc-ia-site; }
.sc-ia-s-page               { animation-name: sc-ia-s-page; }
.sc-ia-s-img                { animation-name: sc-ia-recul; }
.sc-ia-s-kicker             { animation-name: sc-ia-monte-1; }
.sc-ia-s-h1                 { animation-name: sc-ia-monte-2; }
.sc-ia-s-texte              { animation-name: sc-ia-monte-3; }
.sc-ia-s-boutons            { animation-name: sc-ia-monte-4; }
.sc-ia-s-surligne           { animation-name: sc-ia-surligne; }

.sc-ia-leg--a               { animation-name: sc-ia-leg-a; }
.sc-ia-leg--b               { animation-name: sc-ia-leg-b; }
.sc-ia-leg--c               { animation-name: sc-ia-leg-c; }

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

/* 1. LA QUESTION ──────────────────────────────────────────────────── */
@keyframes sc-ia-invite { 0%, 6% { opacity: 1; } 6.1%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
/* La frappe, une lettre par palier ; largeur d'arrivée MESURÉE au banc,
   plus 2 px. */
@keyframes sc-ia-frappe {
  0%, 6.2%     { max-width: 0; animation-timing-function: steps(44, end); }
  14.2%, 98.4% { max-width: 216px; }
  99.9%, 100%  { max-width: 0; }
}
@keyframes sc-ia-caret { 0%, 5.4% { border-right-color: transparent; } 5.5%, 16% { border-right-color: var(--c-ink); } 16.1%, 100% { border-right-color: transparent; } }
/* Le bouton d'envoi passe au noir dès qu'il y a du texte, s'enfonce au clic. */
@keyframes sc-ia-envoi {
  0%, 6.2%     { background: #D7D7D7; transform: none; }
  6.4%, 15.5%  { background: var(--c-ink); transform: none; }
  15.6%        { background: var(--c-ink); transform: scale(.88); }
  16%, 98.4%   { background: var(--c-ink); transform: none; }
  99.9%, 100%  { background: #D7D7D7; transform: none; }
}
@keyframes sc-ia-accueil { 0%, 16.1% { visibility: visible; } 16.2%, 98.4% { visibility: hidden; } 99.9%, 100% { visibility: visible; } }
@keyframes sc-ia-conv    { 0%, 16.1% { visibility: hidden; } 16.2%, 98.4% { visibility: visible; } 99.9%, 100% { visibility: hidden; } }

/* « Recherche sur le Web » bat pendant que l'IA cherche. */
@keyframes sc-ia-cherche-1 {
  0%, 16.4%    { opacity: 0; }
  16.8%        { opacity: 1; }
  17.8%        { opacity: .45; }
  18.8%        { opacity: 1; }
  19.8%        { opacity: .45; }
  20.4%, 100%  { opacity: 0; }
}
@keyframes sc-ia-cherche-2 {
  0%, 35.8%    { opacity: 0; }
  36.2%        { opacity: 1; }
  37.2%        { opacity: .45; }
  38.2%        { opacity: 1; }
  39%          { opacity: .45; }
  39.4%, 100%  { opacity: 0; }
}

/* 2. AVANT ────────────────────────────────────────────────────────── */
/* La réponse s'écrit, un mot environ par palier ; largeurs MESURÉES. */
@keyframes sc-ia-a1 { 0%, 20.6% { max-width: 0; animation-timing-function: steps(10, end); } 23.6%, 98.4% { max-width: 307px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-ia-a2 { 0%, 23.8% { max-width: 0; animation-timing-function: steps(11, end); } 26.8%, 98.4% { max-width: 302px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-ia-a3 { 0%, 27% { max-width: 0; animation-timing-function: steps(11, end); } 30%, 98.4% { max-width: 317px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-ia-source-avant { 0%, 30.1% { opacity: 0; } 30.5%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
/* La réponse d'avant s'efface quand on réessaie. */
@keyframes sc-ia-rep-avant { 0%, 35.7% { opacity: 1; } 35.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
/* Les actions : après la première réponse, cachées pendant qu'on réessaie,
   de retour sous la seconde. « Réessayer » s'assombrit sous le curseur. */
@keyframes sc-ia-actions {
  0%, 30.5%    { opacity: 0; }
  30.9%, 35.7% { opacity: 1; }
  35.8%, 49.2% { opacity: 0; }
  49.6%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-ia-reessayer { 0%, 34.6% { background: transparent; } 34.8%, 35.7% { background: #ECECEC; } 35.8%, 100% { background: transparent; } }
@keyframes sc-ia-page2 { 0%, 49.2% { opacity: 0; } 49.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* 3. APRÈS ────────────────────────────────────────────────────────── */
@keyframes sc-ia-b1 { 0%, 39.6% { max-width: 0; animation-timing-function: steps(11, end); } 42.6%, 98.4% { max-width: 293px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-ia-b2 { 0%, 42.8% { max-width: 0; animation-timing-function: steps(13, end); } 45.8%, 98.4% { max-width: 306px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-ia-b3 { 0%, 46% { max-width: 0; animation-timing-function: steps(10, end); } 48.8%, 98.4% { max-width: 261px; } 99.9%, 100% { max-width: 0; } }
/* La source d'après : elle paraît, puis s'assombrit sous le curseur. */
@keyframes sc-ia-source-apres {
  0%, 48.9%    { opacity: 0; background: var(--c-bulle); }
  49.3%, 53.2% { opacity: 1; background: var(--c-bulle); }
  53.6%, 54.8% { opacity: 1; background: #E3E3E3; }
  55.2%, 98.4% { opacity: 1; background: var(--c-bulle); }
  99.9%, 100%  { opacity: 0; background: var(--c-bulle); }
}

/* 4. LA SOURCE ────────────────────────────────────────────────────── */
/* ChatGPT ouvre ses sources dans un nouvel onglet : il apparaît à droite du
   premier et prend la main. */
@keyframes sc-ia-onglet-1 {
  0%, 54.9%    { background: #FFFFFF; color: #1F1F1F; }
  55%, 98.4%   { background: transparent; color: #474747; }
  99.9%, 100%  { background: #FFFFFF; color: #1F1F1F; }
}
@keyframes sc-ia-onglet-2 { 0%, 54.9% { opacity: 0; } 55.1%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-ia-plus { 0%, 54.9% { transform: none; } 55.1%, 98.4% { transform: translateX(152px); } 99.9%, 100% { transform: none; } }
@keyframes sc-ia-roue {
  0%, 55%      { opacity: 0; transform: rotate(0); }
  55.1%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  57.4%        { opacity: 1; transform: rotate(400deg); }
  57.5%, 100%  { opacity: 0; transform: rotate(0); }
}
@keyframes sc-ia-logo     { 0%, 57.4% { opacity: 0; } 57.5%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-ia-url-chat { 0%, 54.9% { opacity: 1; } 55%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-ia-url-site { 0%, 54.9% { opacity: 0; } 55%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-ia-site     { 0%, 55% { visibility: hidden; } 55.1%, 98.4% { visibility: visible; } 99.9%, 100% { visibility: hidden; } }
@keyframes sc-ia-s-page   { 0%, 57.5% { opacity: 0; } 57.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-ia-recul {
  0%, 57.6%    { transform: scale(1.1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70%, 98.4%   { transform: none; }
  99.9%, 100%  { transform: scale(1.1); }
}
@keyframes sc-ia-monte-1 { 0%, 57.8% { opacity: 0; transform: translateY(10px); } 59.4%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-ia-monte-2 { 0%, 58.2% { opacity: 0; transform: translateY(10px); } 59.8%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-ia-monte-3 { 0%, 58.6% { opacity: 0; transform: translateY(10px); } 60.2%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-ia-monte-4 { 0%, 59% { opacity: 0; transform: translateY(10px); } 60.6%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-ia-surligne { 0%, 60.4% { background: transparent; } 61.4%, 98.4% { background: #E9D2FD; } 99.9%, 100% { background: transparent; } }

@keyframes sc-ia-leg-a { 0%, 16% { opacity: 1; } 16.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-ia-leg-b { 0%, 16.4% { opacity: 0; } 16.8%, 35.4% { opacity: 1; } 35.8%, 100% { opacity: 0; } }
@keyframes sc-ia-leg-c { 0%, 35.8% { opacity: 0; } 36.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR. Il touche le champ, s'écarte pendant la frappe, envoie,
   attend la réponse, touche « Réessayer », puis la source, et s'en va avant
   62 %. */
@keyframes sc-cur-ia {
  0%, 3%       { transform: translate(440px, 470px); opacity: 0; }
  3.5%         { transform: translate(330px, 380px); opacity: 1; }
  5%           { transform: translate(197px, 269px); opacity: 1; }
  5.2%         { transform: translate(197px, 269px) scale(.84); opacity: 1; }
  5.6%         { transform: translate(197px, 269px); opacity: 1; }
  6.8%, 13.8%  { transform: translate(480px, 330px); opacity: 1; }
  15.2%        { transform: translate(434px, 269px); opacity: 1; }
  15.6%        { transform: translate(434px, 269px) scale(.84); opacity: 1; }
  16%, 16.6%   { transform: translate(434px, 269px); opacity: 1; }
  18.6%, 33%   { transform: translate(480px, 330px); opacity: 1; }
  34.6%        { transform: translate(118px, 231px); opacity: 1; }
  35.2%        { transform: translate(118px, 231px) scale(.84); opacity: 1; }
  35.6%, 36.4% { transform: translate(118px, 231px); opacity: 1; }
  38.4%, 51.4% { transform: translate(480px, 330px); opacity: 1; }
  53.4%        { transform: translate(338px, 203px); opacity: 1; }
  54.4%        { transform: translate(338px, 203px) scale(.84); opacity: 1; }
  54.8%, 55.6% { transform: translate(338px, 203px); opacity: 1; }
  58%, 59.4%   { transform: translate(470px, 430px); opacity: 1; }
  62%, 98.4%   { transform: translate(480px, 440px); opacity: 0; }
  99.9%, 100%  { transform: translate(440px, 470px); opacity: 0; }
}
@keyframes sc-ia-onde {
  0%, 5.1%     { transform: scale(.4); opacity: 0; }
  5.2%         { transform: scale(.4); opacity: .9; }
  7.2%         { transform: scale(2.2); opacity: 0; }
  15.5%        { transform: scale(.4); opacity: 0; }
  15.6%        { transform: scale(.4); opacity: .9; }
  17.6%        { transform: scale(2.2); opacity: 0; }
  35.1%        { transform: scale(.4); opacity: 0; }
  35.2%        { transform: scale(.4); opacity: .9; }
  37.2%        { transform: scale(2.2); opacity: 0; }
  54.3%        { transform: scale(.4); opacity: 0; }
  54.4%        { transform: scale(.4); opacity: .9; }
  56.4%        { transform: scale(2.2); opacity: 0; }
  56.6%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, la page de Chez Lucie ouverte
   depuis la réponse, passage surligné. */
@media (prefers-reduced-motion: reduce) {
  .sc-ia-site { visibility: visible; }
  .sc-ia-s-page { opacity: 1; }
  .sc-ia-s-img { transform: none; }
  .sc-ia-s-col > span { opacity: 1; transform: none; }
  .sc-ia-s-surligne { background: #E9D2FD; }
  .sc-ia-c-onglet--1 { background: transparent; color: #474747; }
  .sc-ia-c-onglet--2,
  .sc-ia-c-logo,
  .sc-ia-c-url-t--site { opacity: 1; }
  .sc-ia-c-url-t--chat { opacity: 0; }
  .sc-ia-c-plus { transform: translateX(152px); }
  .sc-ia-leg--a { opacity: 0; }
  .sc-ia-leg--c { opacity: 1; }
}