/* Scène « textes travaillés pour Google », refaite le 24 septembre : la
   recherche, le résultat de Chez Lucie avant puis après la réécriture, et la
   page qui répond. Le rideau de fin et le curseur viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  Chrome, la page de recherche de Google
    5,2 %  le curseur touche le champ ; « huîtres gu » se tape (6 à 10,6 %)
     11 %  les suggestions s'ouvrent : « huîtres gujan-mestras »…
   15,8 %  il touche la première ; la page de résultats (17,8 %)
   17,8 %  AVANT : « Une expérience gustative unique face au bassin », pas un
           mot en gras
     40 %  il actualise ; la croix, la roue
   42,6 %  APRÈS, quelques semaines plus tard : « Dégustation d'huîtres au port
           de Larros », les mots de la recherche en gras, signalés d'un fond
           bleu pâle (43 à 48,5 %). Même place, même page.
   55,8 %  il touche le titre ; la page de Chez Lucie paraît (59 %), photo
           avec un lent recul (jusqu'à 72 %), Chrome surligne le passage
           cité (61,5 %)
     72 %  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, CALCULÉES (centre de la cible moins (4, 2), tout
   est posé en absolu) :
     le champ de recherche        vue (200, 167)   → (197, 230)
     la 1re suggestion            mesurée (156,4 ; 268,5) → (152, 266)
     « Actualiser » de Chrome     toile (71, 48)   → (67, 46)
     le titre du résultat         mesuré (171 ; 197,5)    → (167, 195) */
.fn-scene--textes {
  --sc-haut: 540px;
  /* Google, dans la page de résultats. */
  --g-ink: #202124; --g-gris: #4D5156; --g-gris2: #70757A; --g-lien: #1A0DAB; --g-vu: #681DA8; --g-bleu: #1A73E8;
  /* Les filets, tous neutres. */
  --line-g: #DFE1E5; --line-g2: #EBEBEB; --line-g3: #DADCE0; --line-chrome: #E3E6EA; --line-site: #EDEDED; --line-leg: #E5E5E5;
  line-height: 1.35;
}
.fn-scene--textes svg { display: block; }
.fn-scene--textes i { font-style: normal; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-textes-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-textes-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-textes-c-onglet {
  position: absolute; top: 5px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 190px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-textes-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-textes-c-favi { position: relative; width: 12px; height: 12px; flex: none; }
.sc-textes-c-favi i { position: absolute; inset: 0; }
.sc-textes-c-f--loupe { color: #5F6368; }
.sc-textes-c-f--loupe svg { width: 12px; height: 12px; }
.sc-textes-c-f--site {
  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-textes-c-roue {
  border: 1.6px solid transparent; border-top-color: #0B57D0; border-right-color: #0B57D0;
  border-radius: 50%; opacity: 0;
}
.sc-textes-c-titres {
  display: grid; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
  mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.sc-textes-c-titre { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; font-size: 0.59375rem; }
.sc-textes-c-titre--resultats,
.sc-textes-c-titre--site { opacity: 0; }
.sc-textes-c-plus { position: absolute; top: 9px; left: 216px; color: #474747; }
.sc-textes-c-plus svg { width: 12px; height: 12px; }
.sc-textes-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-textes-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-textes-fen svg { width: 10px; height: 10px; }

.sc-textes-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-textes-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-textes-c-outils > i svg { width: 14px; height: 14px; }
.sc-textes-c-off { color: #C4C7C5; }
.sc-textes-c-outils > .sc-textes-c-rech { position: relative; border-radius: 50%; }
.sc-textes-rech-a,
.sc-textes-rech-b { position: absolute; inset: 0; display: grid; place-items: center; }
.sc-textes-rech-b { opacity: 0; }
.sc-textes-c-outils > .sc-textes-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-textes-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-textes-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-textes-c-url { display: grid; flex: 1; min-width: 0; overflow: hidden; }
.sc-textes-c-url-t { grid-area: 1 / 1; overflow: hidden; }
.sc-textes-c-url-t--resultats,
.sc-textes-c-url-t--site { opacity: 0; }
.sc-textes-c-chemin { color: #5F6368; }
.sc-textes-c-etoile { margin-left: auto; }
.sc-textes-c-etoile svg { width: 13px; height: 13px; }

.sc-textes-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: var(--g-ink); }
.sc-textes-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;
}

/* ═══ 1. LA PAGE DE RECHERCHE ═════════════════════════════════════════ */
.sc-textes-g1 { position: absolute; inset: 0; z-index: 1; background: #FFFFFF; }
.sc-textes-g1 > span { position: absolute; }
.sc-textes-g1-coin,
.sc-textes-g2-coin { top: 12px; right: 14px; display: flex; align-items: center; gap: 12px; color: #5F6368; }
.sc-textes-g1-coin svg,
.sc-textes-g2-coin svg { width: 16px; height: 16px; }
.sc-textes-g1-champ {
  top: 150px; left: 69px; z-index: 2; width: 380px; height: 34px;
  border: 1px solid var(--line-g); border-radius: 17px;
}
.sc-textes-g1-loupe { position: absolute; top: 10px; left: 14px; color: #9AA0A6; }
.sc-textes-g1-loupe svg,
.sc-textes-g1-micro svg,
.sc-textes-g1-obj svg { width: 14px; height: 14px; }
.sc-textes-g1-micro { position: absolute; top: 9px; right: 40px; color: #5F6368; }
.sc-textes-g1-obj { position: absolute; top: 9px; right: 14px; color: #5F6368; }
/* La frappe : `max-width` en paliers d'une lettre, la bordure droite fait le
   curseur de saisie. */
.sc-textes-g1-tape {
  position: absolute; top: 9px; left: 38px;
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap;
  border-right: 1.2px solid transparent;
  font-size: 0.625rem; line-height: 16px;
}
/* La liste des suggestions, derrière le champ : fond blanc et ombre neutre,
   comme la boîte qui s'ouvre sous le champ de Google. */
.sc-textes-g1-sug {
  top: 150px; left: 69px; z-index: 1; width: 380px; height: 152px;
  border-radius: 17px; background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  opacity: 0;
}
.sc-textes-g1-trait { position: absolute; top: 34px; left: 14px; right: 14px; height: 1px; background: #E8EAED; }
.sc-textes-g1-s {
  position: absolute; left: 0; right: 0; height: 27px;
  display: flex; align-items: center; gap: 10px; padding-left: 14px;
  font-size: 0.59375rem; white-space: nowrap;
}
.sc-textes-g1-s svg { width: 12px; height: 12px; flex: none; color: #9AA0A6; }
.sc-textes-g1-s b { font-weight: 700; }
.sc-textes-g1-s--1 { top: 40px; }
.sc-textes-g1-s--2 { top: 67px; }
.sc-textes-g1-s--3 { top: 94px; }
.sc-textes-g1-s--4 { top: 121px; }
.sc-textes-g1-boutons { top: 206px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.sc-textes-g1-boutons span {
  display: grid; place-items: center; height: 26px; padding: 0 12px;
  border-radius: 4px; background: #F8F9FA; color: #3C4043; font-size: 0.46875rem;
}

/* ═══ 2 et 3. LA PAGE DE RÉSULTATS ════════════════════════════════════ */
.sc-textes-g2 { position: absolute; inset: 0; z-index: 2; background: #FFFFFF; visibility: hidden; }
.sc-textes-g2-page { position: absolute; inset: 0; opacity: 0; }
.sc-textes-g2-page > span { position: absolute; }
.sc-textes-g2-champ {
  top: 12px; left: 16px; width: 340px; height: 32px;
  border: 1px solid var(--line-g); border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.sc-textes-g2-q { position: absolute; top: 0; left: 16px; font-size: 0.59375rem; line-height: 32px; white-space: nowrap; }
.sc-textes-g2-ic { position: absolute; top: 0; right: 12px; height: 32px; display: flex; align-items: center; gap: 9px; color: var(--g-gris2); }
.sc-textes-g2-ic svg { width: 12px; height: 12px; }
.sc-textes-g2-ic i { width: 1px; height: 18px; background: var(--line-g3); }
.sc-textes-g2-ic b { color: var(--g-bleu); }
.sc-textes-g2-onglets { top: 54px; left: 16px; display: flex; gap: 18px; font-size: 0.5rem; line-height: 20px; color: #5F6368; }
.sc-textes-g2-actif { position: relative; color: var(--g-ink); font-weight: 500; }
/* Le trait de l'onglet actif : un fond, pas une bordure d'un seul côté. */
.sc-textes-g2-actif i { position: absolute; left: 0; right: 0; bottom: -4px; height: 2.5px; border-radius: 2px 2px 0 0; background: var(--g-bleu); }
.sc-textes-g2-filet { top: 78px; left: 0; right: 0; height: 1px; background: var(--line-g2); }

.sc-textes-res { top: 94px; left: 16px; width: 440px; height: 84px; }
.sc-textes-res > * { position: absolute; }
.sc-textes-res-favi {
  top: 0; left: 0; display: grid; place-items: center;
  width: 20px; height: 20px; border: 1px solid var(--line-g3); border-radius: 50%;
  background: #F1F3F4; color: #0A0A0A; font-size: 0.5rem; font-weight: 800; line-height: 1;
}
.sc-textes-res-nom { top: 0; left: 28px; font-size: 0.53125rem; line-height: 11px; white-space: nowrap; }
.sc-textes-res-url { top: 11px; left: 28px; font-size: 0.4375rem; line-height: 10px; color: var(--g-gris); white-space: nowrap; }
.sc-textes-res-kebab { top: 3px; left: 150px; color: var(--g-gris2); }
.sc-textes-res-kebab svg { width: 12px; height: 12px; }
.sc-textes-res-titre {
  top: 30px; left: 0; font-size: 0.78125rem; line-height: 17px; color: var(--g-lien); white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px;
}
.sc-textes-res-titre--apres { opacity: 0; }
.sc-textes-res-desc { top: 51px; left: 0; width: 440px; font-size: 0.53125rem; line-height: 13px; color: var(--g-gris); }
.sc-textes-res-desc--apres { opacity: 0; }
.sc-textes-res-desc b { padding: 0 1px; font-weight: 700; border-radius: 2px; }

.sc-textes-paa { top: 196px; left: 16px; width: 440px; height: 120px; }
.sc-textes-paa > span { position: absolute; left: 0; right: 0; }
.sc-textes-paa-t { top: 0; font-size: 0.65625rem; font-weight: 500; line-height: 20px; }
/* Le filet au-dessus de chaque question est un fond d'un pixel. */
.sc-textes-paa-q {
  height: 30px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(var(--line-g3), var(--line-g3)) left top / 100% 1px no-repeat;
  font-size: 0.53125rem; white-space: nowrap;
}
.sc-textes-paa-q svg { width: 12px; height: 12px; color: var(--g-gris2); }
.sc-textes-paa-q--1 { top: 28px; }
.sc-textes-paa-q--2 { top: 58px; }
.sc-textes-paa-q--3 { top: 88px; }

/* ═══ 4. LA PAGE DE CHEZ LUCIE ════════════════════════════════════════ */
.sc-textes-site { position: absolute; inset: 0; z-index: 3; background: #FFFFFF; visibility: hidden; }
.sc-textes-s-page { position: absolute; inset: 0; color: #0A0A0A; opacity: 0; }
.sc-textes-s-tete {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 20px;
  border-bottom: 1px solid var(--line-site);
}
.sc-textes-s-marque { font-size: 0.6875rem; font-weight: 800; letter-spacing: -.01em; }
.sc-textes-s-nav { display: flex; align-items: center; gap: 12px; font-size: 0.46875rem; font-weight: 500; color: #404040; }
.sc-textes-s-actif { font-weight: 700; color: #0A0A0A; text-decoration: underline; text-underline-offset: 3px; }
.sc-textes-s-resa { display: grid; place-items: center; height: 20px; padding: 0 9px; border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font-weight: 700; }
.sc-textes-s-photo { display: block; height: 180px; overflow: hidden; }
.sc-textes-s-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.1); }
.sc-textes-s-col { position: absolute; top: 220px; left: 60px; width: 398px; height: 140px; }
.sc-textes-s-col > span { position: absolute; left: 0; opacity: 0; transform: translateY(10px); }
.sc-textes-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-textes-s-h1 { top: 30px; font-size: 1.0625rem; font-weight: 800; line-height: 21px; letter-spacing: -.02em; white-space: nowrap; }
.sc-textes-s-texte { top: 58px; width: 398px; font-size: 0.5625rem; line-height: 14px; color: #404040; }
/* Le surlignage de Chrome sur le passage qu'on vient de chercher. */
.sc-textes-s-surligne { padding: 1px 0; border-radius: 2px; background: transparent; color: inherit; }
.sc-textes-s-boutons { top: 98px; display: flex; gap: 8px; }
.sc-textes-s-b1,
.sc-textes-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-textes-s-b1 { background: #0A0A0A; color: #FFFFFF; }
.sc-textes-s-b2 { border: 1px solid #0A0A0A; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-textes-legende { position: absolute; top: 508px; left: 14px; right: 14px; z-index: 2; display: grid; height: 26px; margin: 0; }
.sc-textes-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-textes-leg--a { opacity: 1; }
.sc-textes-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-textes-leg i svg { width: 13px; height: 13px; }
.sc-textes-leg img { flex: none; width: 22px; height: 22px; margin: 0 2px; border-radius: 50%; }

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

.sc-textes-c-f--loupe      { animation-name: sc-textes-f-loupe; }
.sc-textes-c-f--site       { animation-name: sc-textes-f-site; }
.sc-textes-c-roue          { animation-name: sc-textes-roue; }
.sc-textes-c-titre--accueil,
.sc-textes-c-url-t--accueil   { animation-name: sc-textes-p1; }
.sc-textes-c-titre--resultats,
.sc-textes-c-url-t--resultats { animation-name: sc-textes-p2; }
.sc-textes-c-titre--site,
.sc-textes-c-url-t--site      { animation-name: sc-textes-p3; }
.sc-textes-c-rech          { animation-name: sc-textes-clic; }
.sc-textes-rech-a          { animation-name: sc-textes-rech-a; }
.sc-textes-rech-b          { animation-name: sc-textes-rech-b; }

.sc-textes-g1-champ        { animation-name: sc-textes-champ; }
.sc-textes-g1-tape         { animation-name: sc-textes-frappe, sc-textes-caret; }
.sc-textes-g1-sug          { animation-name: sc-textes-sug; }
.sc-textes-g1-s--1         { animation-name: sc-textes-survol-s; }
.sc-textes-g1              { animation-name: sc-textes-g1; }
.sc-textes-g2              { animation-name: sc-textes-g2; }
.sc-textes-g2-page         { animation-name: sc-textes-g2-page; }
.sc-textes-res-titre--avant,
.sc-textes-res-desc--avant { animation-name: sc-textes-avant; }
.sc-textes-res-desc--apres { animation-name: sc-textes-apres; }
.sc-textes-res-titre--apres { animation-name: sc-textes-apres, sc-textes-lien; }
/* Le kit ne minute que les éléments dont une classe commence par « sc- » :
   le gras et la photo portent donc la leur. */
.sc-textes-mot             { animation-name: sc-textes-marque; }
.sc-textes-site            { animation-name: sc-textes-site; }
.sc-textes-s-page          { animation-name: sc-textes-s-page; }
.sc-textes-s-img           { animation-name: sc-textes-recul; }
.sc-textes-s-kicker        { animation-name: sc-textes-monte-1; }
.sc-textes-s-h1            { animation-name: sc-textes-monte-2; }
.sc-textes-s-texte         { animation-name: sc-textes-monte-3; }
.sc-textes-s-boutons       { animation-name: sc-textes-monte-4; }
.sc-textes-s-surligne      { animation-name: sc-textes-surligne; }

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

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

/* CHROME : l'onglet, l'adresse, la roue, trois chargements (la suggestion
   touchée à 16,4 %, l'actualisation à 40,2 %, le titre touché à 56,4 %). */
@keyframes sc-textes-p1 { 0%, 16.3% { opacity: 1; } 16.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-textes-p2 { 0%, 16.3% { opacity: 0; } 16.4%, 56.3% { opacity: 1; } 56.4%, 100% { opacity: 0; } }
@keyframes sc-textes-p3 { 0%, 56.3% { opacity: 0; } 56.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-textes-f-loupe {
  0%, 16.3%    { opacity: 1; }
  16.4%, 17.6% { opacity: 0; }
  17.7%, 40.1% { opacity: 1; }
  40.2%, 42.5% { opacity: 0; }
  42.6%, 56.3% { opacity: 1; }
  56.4%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-textes-f-site { 0%, 58.5% { opacity: 0; } 58.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-textes-roue {
  0%, 16.3%    { opacity: 0; transform: rotate(0); }
  16.4%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  17.6%        { opacity: 1; transform: rotate(220deg); }
  17.7%, 40.1% { opacity: 0; transform: rotate(0); }
  40.2%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  42.5%        { opacity: 1; transform: rotate(420deg); }
  42.6%, 56.3% { opacity: 0; transform: rotate(0); }
  56.4%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  58.5%        { opacity: 1; transform: rotate(400deg); }
  58.6%, 100%  { opacity: 0; transform: rotate(0); }
}
@keyframes sc-textes-clic { 0%, 39.9% { background: transparent; } 40%, 40.4% { background: #DADCE0; } 40.5%, 100% { background: transparent; } }
@keyframes sc-textes-rech-a {
  0%, 16.3%    { opacity: 1; }
  16.4%, 17.6% { opacity: 0; }
  17.7%, 40.1% { opacity: 1; }
  40.2%, 42.5% { opacity: 0; }
  42.6%, 56.3% { opacity: 1; }
  56.4%, 58.5% { opacity: 0; }
  58.6%, 100%  { opacity: 1; }
}
@keyframes sc-textes-rech-b {
  0%, 16.3%    { opacity: 0; }
  16.4%, 17.6% { opacity: 1; }
  17.7%, 40.1% { opacity: 0; }
  40.2%, 42.5% { opacity: 1; }
  42.6%, 56.3% { opacity: 0; }
  56.4%, 58.5% { opacity: 1; }
  58.6%, 100%  { opacity: 0; }
}

/* 1. LA RECHERCHE ─────────────────────────────────────────────────── */
/* Le champ prend l'ombre quand on le touche, puis perd son contour quand la
   liste des suggestions s'ouvre sous lui. */
@keyframes sc-textes-champ {
  0%, 5.3%     { border-color: var(--line-g); box-shadow: none; }
  5.6%, 10.9%  { border-color: transparent; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
  11.1%, 98.4% { border-color: transparent; box-shadow: none; }
  99.9%, 100%  { border-color: var(--line-g); box-shadow: none; }
}
/* La frappe, une lettre par palier ; largeur d'arrivée MESURÉE au banc,
   plus 2 px. */
@keyframes sc-textes-frappe {
  0%, 6%       { max-width: 0; animation-timing-function: steps(10, end); }
  10.6%, 98.4% { max-width: 49px; }
  99.9%, 100%  { max-width: 0; }
}
@keyframes sc-textes-caret { 0%, 5.4% { border-right-color: transparent; } 5.5%, 16.2% { border-right-color: var(--g-ink); } 16.3%, 100% { border-right-color: transparent; } }
@keyframes sc-textes-sug { 0%, 11% { opacity: 0; } 11.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-textes-survol-s { 0%, 14.7% { background: transparent; } 15%, 16.4% { background: #F1F3F4; } 16.5%, 100% { background: transparent; } }
/* La page de recherche reste affichée pendant le chargement, comme dans
   Chrome ; la page de résultats la remplace à 17,6 %. */
@keyframes sc-textes-g1 { 0%, 17.5% { visibility: visible; } 17.6%, 98.4% { visibility: hidden; } 99.9%, 100% { visibility: visible; } }

/* 2 et 3. AVANT, PUIS APRÈS ───────────────────────────────────────── */
@keyframes sc-textes-g2 { 0%, 17.5% { visibility: hidden; } 17.6%, 98.4% { visibility: visible; } 99.9%, 100% { visibility: hidden; } }
@keyframes sc-textes-g2-page {
  0%, 17.7%    { opacity: 0; }
  17.8%, 40.2% { opacity: 1; }
  40.3%, 42.5% { opacity: 0; }
  42.6%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* Le résultat change pendant que la page est blanche : on ne voit jamais les
   deux versions l'une sur l'autre. */
@keyframes sc-textes-avant { 0%, 41.4% { opacity: 1; } 41.5%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-textes-apres { 0%, 41.4% { opacity: 0; } 41.5%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
/* Les mots de la recherche : un fond bleu pâle le temps qu'on les voie. */
@keyframes sc-textes-marque {
  0%, 43%      { background: transparent; }
  43.8%, 47%   { background: #D2E3FC; }
  48.6%, 100%  { background: transparent; }
}
/* Le survol du titre le souligne ; touché, il passe au violet des liens
   déjà visités. */
@keyframes sc-textes-lien {
  0%, 54.4%    { text-decoration-color: transparent; color: var(--g-lien); }
  54.8%, 55.9% { text-decoration-color: var(--g-lien); color: var(--g-lien); }
  56%, 98.4%   { text-decoration-color: var(--g-vu); color: var(--g-vu); }
  99.9%, 100%  { text-decoration-color: transparent; color: var(--g-lien); }
}

/* 4. LA PAGE DE CHEZ LUCIE ────────────────────────────────────────── */
@keyframes sc-textes-site   { 0%, 58.5% { visibility: hidden; } 58.6%, 98.4% { visibility: visible; } 99.9%, 100% { visibility: hidden; } }
@keyframes sc-textes-s-page { 0%, 58.9% { opacity: 0; } 59%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-textes-recul {
  0%, 59%      { transform: scale(1.1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  72%, 98.4%   { transform: none; }
  99.9%, 100%  { transform: scale(1.1); }
}
@keyframes sc-textes-monte-1 { 0%, 59.2% { opacity: 0; transform: translateY(10px); } 60.8%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-textes-monte-2 { 0%, 59.6% { opacity: 0; transform: translateY(10px); } 61.2%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-textes-monte-3 { 0%, 60% { opacity: 0; transform: translateY(10px); } 61.6%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-textes-monte-4 { 0%, 60.4% { opacity: 0; transform: translateY(10px); } 62%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-textes-surligne { 0%, 61.8% { background: transparent; } 62.8%, 98.4% { background: #E9D2FD; } 99.9%, 100% { background: transparent; } }

@keyframes sc-textes-leg-a { 0%, 17.4% { opacity: 1; } 17.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-textes-leg-b { 0%, 17.6% { opacity: 0; } 18%, 42.2% { opacity: 1; } 42.6%, 100% { opacity: 0; } }
@keyframes sc-textes-leg-c { 0%, 42.6% { opacity: 0; } 43%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR. Il touche le champ, s'écarte pendant la frappe (à droite de la
   liste, sur aucun mot), touche la suggestion, actualise, survole et touche
   le titre, puis s'en va avant 64 %. */
@keyframes sc-cur-textes {
  0%, 3%       { transform: translate(440px, 470px); opacity: 0; }
  3.5%         { transform: translate(330px, 330px); opacity: 1; }
  5%           { transform: translate(197px, 230px); opacity: 1; }
  5.2%         { transform: translate(197px, 230px) scale(.84); opacity: 1; }
  5.6%         { transform: translate(197px, 230px); opacity: 1; }
  6.6%, 13.6%  { transform: translate(470px, 330px); opacity: 1; }
  15%          { transform: translate(152px, 266px); opacity: 1; }
  15.8%        { transform: translate(152px, 266px) scale(.84); opacity: 1; }
  16.2%, 16.6% { transform: translate(152px, 266px); opacity: 1; }
  18.6%, 37.6% { transform: translate(470px, 330px); opacity: 1; }
  39.6%        { transform: translate(67px, 46px); opacity: 1; }
  40%          { transform: translate(67px, 46px) scale(.84); opacity: 1; }
  40.4%, 42.6% { transform: translate(67px, 46px); opacity: 1; }
  44.4%, 52.6% { transform: translate(470px, 330px); opacity: 1; }
  54.6%        { transform: translate(167px, 195px); opacity: 1; }
  55.8%        { transform: translate(167px, 195px) scale(.84); opacity: 1; }
  56.2%, 57%   { transform: translate(167px, 195px); opacity: 1; }
  60%, 61%     { transform: translate(470px, 420px); opacity: 1; }
  64%, 98.4%   { transform: translate(480px, 440px); opacity: 0; }
  99.9%, 100%  { transform: translate(440px, 470px); opacity: 0; }
}
@keyframes sc-textes-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.7%        { transform: scale(.4); opacity: 0; }
  15.8%        { transform: scale(.4); opacity: .9; }
  17.8%        { transform: scale(2.2); opacity: 0; }
  39.9%        { transform: scale(.4); opacity: 0; }
  40%          { transform: scale(.4); opacity: .9; }
  42%          { transform: scale(2.2); opacity: 0; }
  55.7%        { transform: scale(.4); opacity: 0; }
  55.8%        { transform: scale(.4); opacity: .9; }
  57.8%        { transform: scale(2.2); opacity: 0; }
  58%, 100%    { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, la page de Chez Lucie ouverte
   depuis la recherche, passage surligné. */
@media (prefers-reduced-motion: reduce) {
  .sc-textes-g1 { visibility: hidden; }
  .sc-textes-g2,
  .sc-textes-site { visibility: visible; }
  .sc-textes-g2-page,
  .sc-textes-s-page { opacity: 1; }
  .sc-textes-s-photo img { transform: none; }
  .sc-textes-s-col > span { opacity: 1; transform: none; }
  .sc-textes-s-surligne { background: #E9D2FD; }
  .sc-textes-c-titre--accueil,
  .sc-textes-c-url-t--accueil,
  .sc-textes-c-f--loupe { opacity: 0; }
  .sc-textes-c-titre--site,
  .sc-textes-c-url-t--site,
  .sc-textes-c-f--site { opacity: 1; }
  .sc-textes-leg--a { opacity: 0; }
  .sc-textes-leg--c { opacity: 1; }
}