/* Scène « formulaire et bouton d'appel » : deux vrais iPhone, celui du client
   et celui de Lucie (demande de Théo du 24 septembre). Le rideau de fin vient
   du kit ; pas de curseur, on touche au doigt.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  Safari ouvert sur « Groupes et banquets » ; Lucie, écran verrouillé
      4 %  1. LA BARRE RESTE EN BAS : deux balayages du pouce (4 à 9 %, 13 à
           18 %), la page continue sur son élan, la barre ne bouge pas
     23 %  2. UN APPUI, ÇA SONNE : « Appeler » ; Safari demande confirmation
           (25 %), « Appeler » (26,5 %) ; l'écran d'appel (29 %)
     30 %  le téléphone de Lucie : appel entrant, il vibre deux fois
   37,7 %  elle décroche ; 00:01, 00:02 des deux côtés
   45,3 %  le client raccroche, « Appel terminé », retour à la page (49 %)
     50 %  3. LE MESSAGE ARRIVE REMPLI : « Écrire » ; la page du message, le
           sujet déjà repris de la page (52,5 %)
   54,3 %  « Nom » ; le clavier monte avec la suggestion « Camille Roux »
   57,3 %  la suggestion : nom, mobile, adresse se remplissent en jaune
   60,5 %  « Message » : il tape sa question (61 à 66 %)
   68,1 %  « Envoyer » ; le clavier descend, « Message envoyé » (70 %)
   70,4 %  la notification tombe chez Lucie (72 %) ; plus rien ne bouge
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 516, sans légende. Le téléphone du client de (20, 18)
   à (252, 500),
   écran de 220 x 470 en (26, 24) ; celui de Lucie de (286, 60) à (500, 500),
   écran de 202 x 428 en (292, 66). Sous les deux, 16 px pour leur ombre. */
.fn-scene--contact {
  --sc-haut: 516px;
  /* Les filets, tous neutres. */
  --line-site: #EDEDED; --line-safari: #DADADF; --line-ios: #D8D8DD; --line-k: #C9CCD2;
  --ios-bleu: #007AFF; --ios-vert: #34C759; --ios-rouge: #FF3B30;
  --jaune: #FBF3C4;
  line-height: 1.35;
}
.fn-scene--contact svg { display: block; }
.fn-scene--contact p { margin: 0; }
/* Le thème borne toute image à la largeur de son parent : les fonds floutés,
   plus grands que l'écran pour cacher le bord du flou, en ont besoin. */
.fn-scene--contact img { max-width: none; }

.sc-contact-qui {
  position: absolute; top: 0; height: 14px;
  font-size: 0.5625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 14px; text-align: center; color: #737373;
}
.sc-contact-qui--client { left: 20px; width: 232px; }
.sc-contact-qui--vous { left: 286px; width: 214px; top: 42px; }

/* ═══ LES DEUX TÉLÉPHONES ═════════════════════════════════════════════ */
.sc-contact-tel {
  position: absolute; z-index: 1;
  padding: 6px; background: #0A0A0A;
  box-shadow: 0 14px 30px rgba(31, 36, 46, .18);
}
.sc-contact-tel--client { left: 20px; top: 18px; width: 232px; height: 482px; border-radius: 36px; }
.sc-contact-tel--lucie  { left: 286px; top: 60px; width: 214px; height: 440px; border-radius: 34px; }
.sc-contact-ecran {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 30px; background: #FFFFFF; color: #0A0A0A;
}
.sc-contact-tel--lucie .sc-contact-ecran { border-radius: 28px; }
.sc-contact-ilot {
  position: absolute; top: 7px; left: 50%; z-index: 9;
  width: 58px; height: 16px; margin-left: -29px; border-radius: 9px; background: #000000;
}
.sc-contact-tel--lucie .sc-contact-ilot { width: 54px; margin-left: -27px; }
.sc-contact-maison {
  position: absolute; bottom: 3px; left: 50%; z-index: 9;
  width: 76px; height: 3px; margin-left: -38px; border-radius: 2px; background: #0A0A0A;
}
.sc-contact-maison--clair { background: #FFFFFF; }

/* La barre d'état d'iOS. */
.sc-contact-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  height: 28px; padding: 2px 16px 0 26px;
  font-size: 0.5rem;
}
.sc-contact-statut b { flex: 1; font-weight: 700; }
.sc-contact-statut--sombre { background: #FFFFFF; color: #0A0A0A; }
.sc-contact-statut--clair { color: #FFFFFF; }
.sc-contact-reseau { display: flex; align-items: flex-end; gap: 1px; height: 7px; }
.sc-contact-reseau i { display: block; width: 2px; border-radius: 1px; background: currentColor; }
.sc-contact-reseau i:nth-child(1) { height: 3px; }
.sc-contact-reseau i:nth-child(2) { height: 4px; }
.sc-contact-reseau i:nth-child(3) { height: 5.5px; }
.sc-contact-reseau i:nth-child(4) { height: 7px; }
.sc-contact-pile { display: block; width: 14px; height: 7px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-contact-pile i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }

/* ═══ LE CLIENT : SAFARI ══════════════════════════════════════════════ */
.sc-contact-vue { position: absolute; top: 28px; left: 0; right: 0; bottom: 56px; overflow: hidden; }
.sc-contact-site,
.sc-contact-form { position: absolute; inset: 0; background: #FFFFFF; }
.sc-contact-form { opacity: 0; }

.sc-contact-page { position: absolute; top: 0; left: 0; right: 0; }
.sc-contact-p-tete {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 12px;
  border-bottom: 1px solid var(--line-site);
}
.sc-contact-p-tete b { font-size: 0.625rem; font-weight: 800; letter-spacing: -.01em; }
.sc-contact-p-tete svg { width: 13px; height: 13px; }
.sc-contact-p-une { display: block; width: 100%; height: 108px; object-fit: cover; }
.sc-contact-p-corps { display: flex; flex-direction: column; padding: 11px 12px 70px; }
.sc-contact-p-kicker { font-size: 0.40625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #737373; }
.sc-contact-p-h1 { margin-top: 3px; font-size: 0.9375rem; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.sc-contact-p-txt { margin-top: 4px; font-size: 0.5rem; line-height: 1.45; color: #525252; }
.sc-contact-p-h2 { margin-top: 13px; margin-bottom: 3px; font-size: 0.625rem; font-weight: 800; }
.sc-contact-p-formule {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  height: 36px; border-bottom: 1px dashed var(--line-site);
  font-size: 0.5rem;
}
.sc-contact-p-formule img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.sc-contact-p-formule span { font-weight: 600; white-space: nowrap; }
.sc-contact-p-formule b { font-weight: 700; }
.sc-contact-p-salle { display: block; width: 100%; height: 96px; margin-top: 4px; border-radius: 8px; object-fit: cover; }
.sc-contact-p-item {
  display: flex; align-items: center; height: 19px;
  border-bottom: 1px dashed var(--line-site);
  font-size: 0.5rem; color: #3A3A3A;
}

/* L'indicateur de défilement d'iOS : il ne paraît que pendant qu'on fait
   défiler. 388 x 388 / 701 = 215 de haut. */
.sc-contact-rail {
  position: absolute; top: 4px; right: 2px; z-index: 1;
  width: 3px; height: 215px; border-radius: 2px;
  background: rgba(0, 0, 0, .35); opacity: 0;
}

/* LA BARRE collée au bas de la page. Deux boutons de 36 de haut. */
.sc-contact-barre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  height: 50px; padding: 7px 10px;
  border-top: 1px solid var(--line-site); background: #FFFFFF;
}
.sc-contact-bt {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 36px; border-radius: 9px;
  font-size: 0.5625rem; font-weight: 700;
}
.sc-contact-bt svg { width: 12px; height: 12px; }
.sc-contact-bt--appel { background: #0A0A0A; color: #FFFFFF; }
.sc-contact-bt--ecrire { border: 1px solid #D4D4D4; background: #FFFFFF; color: #0A0A0A; }

/* La page du message. Tout tient au-dessus du clavier, qui monte à y 266. */
.sc-contact-form .sc-contact-p-tete { height: 28px; }
.sc-contact-f-corps { display: flex; flex-direction: column; padding: 8px 12px 0; }
.sc-contact-f-titre { font-size: 0.75rem; font-weight: 800; line-height: 14px; letter-spacing: -.01em; }
.sc-contact-f-note { margin-top: 1px; font-size: 0.4375rem; line-height: 8px; color: #737373; }
.sc-contact-f-bloc { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
.sc-contact-f-lib {
  display: flex; align-items: center; gap: 5px; height: 9px;
  font-size: 0.375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #737373;
}
.sc-contact-f-tag {
  padding: 0 4px; border-radius: 3px; background: #EEF3FF;
  font-size: 0.34375rem; letter-spacing: .02em; text-transform: none; line-height: 9px; color: #2F5FD0;
}
.sc-contact-f-champ {
  display: flex; align-items: center;
  height: 20px; padding: 0 7px; overflow: hidden;
  border: 1px solid #D4D4D8; border-radius: 6px; background: #FFFFFF;
  font-size: 0.5rem; white-space: nowrap;
}
.sc-contact-f-val { opacity: 0; }
.sc-contact-f-val--sujet { opacity: 1; }
/* La frappe : la question se découvre lettre à lettre, le curseur la suit. */
.sc-contact-f-tape { display: inline-block; max-width: 0; overflow: hidden; vertical-align: top; }
.sc-contact-f-caret { display: inline-block; width: 1px; height: 11px; margin-left: 1px; background: var(--ios-bleu); opacity: 0; }
.sc-contact-f-envoi {
  display: grid; place-items: center;
  height: 22px; margin-top: 6px; border-radius: 6px;
  background: #0A0A0A; color: #FFFFFF; font-size: 0.5rem; font-weight: 700;
}
.sc-contact-f-ok {
  position: absolute; top: 28px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0 24px 40px; text-align: center; opacity: 0;
}
.sc-contact-f-coche {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ios-vert); color: #FFFFFF;
}
.sc-contact-f-coche svg { width: 20px; height: 20px; stroke-width: 2; }
.sc-contact-f-ok b { font-size: 0.75rem; font-weight: 800; }
.sc-contact-f-ok-dit { font-size: 0.5rem; line-height: 1.45; color: #525252; }

/* La barre de Safari, en bas de l'écran. */
.sc-contact-safari {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 56px; padding: 6px 10px 0;
  border-top: 1px solid var(--line-safari); background: #F7F7F8;
}
.sc-contact-s-champ {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 11px;
  background: #E5E5EA; font-size: 0.5rem; white-space: nowrap;
}
.sc-contact-s-champ b { font-weight: 600; }
.sc-contact-s-champ small { font-size: .8em; }
.sc-contact-s-champ svg { width: 9px; height: 9px; }
.sc-contact-s-outils { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 8px; color: var(--ios-bleu); }
.sc-contact-s-outils svg { width: 12px; height: 12px; }

/* Le clavier d'iOS : la barre « OK » de Safari, la suggestion de
   remplissage, les trois rangées AZERTY et la rangée du bas. 178 de haut. */
.sc-contact-clavier {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  height: 178px; background: #D1D4DA;
  transform: translateY(178px);
}
.sc-contact-k-barre {
  display: flex; align-items: center; gap: 12px;
  height: 22px; padding: 0 12px;
  border-bottom: 1px solid var(--line-k); background: #F2F2F4; color: #A0A0A6;
}
.sc-contact-k-barre svg { width: 11px; height: 11px; }
.sc-contact-k-barre b { margin-left: auto; font-size: 0.5rem; font-weight: 700; color: var(--ios-bleu); }
.sc-contact-k-sugg { display: flex; align-items: center; justify-content: center; height: 26px; }
.sc-contact-k-camille {
  display: flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 10px; border-radius: 6px;
  font-size: 0.5rem; font-weight: 600;
}
.sc-contact-k-camille svg { width: 11px; height: 11px; }
.sc-contact-k-rang { display: flex; justify-content: center; gap: 4px; margin-top: 6px; padding: 0 3px; }
.sc-contact-k-rang i {
  display: grid; place-items: center; flex: none;
  width: 17.8px; height: 24px; border-radius: 4px;
  background: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
  font-size: 0.5625rem; font-style: normal; color: #0A0A0A;
}
.sc-contact-k-rang .sc-contact-k-large { width: 26px; background: #ADB3BC; font-size: 0.4375rem; }
.sc-contact-k-rang .sc-contact-k-large svg { width: 11px; height: 11px; }
.sc-contact-k-rang--bas .sc-contact-k-large { width: 38px; }
.sc-contact-k-rang .sc-contact-k-espace { flex: 1; width: auto; font-size: 0.4375rem; }
.sc-contact-k-rang .sc-contact-k-retour { width: 46px; background: #ADB3BC; font-size: 0.4375rem; }

/* La confirmation d'appel de Safari. */
.sc-contact-confirme { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sc-contact-c-voile { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); opacity: 0; }
.sc-contact-c-feuille {
  position: absolute; left: 8px; right: 8px; bottom: 12px;
  display: flex; flex-direction: column; gap: 7px;
  transform: translateY(140px);
}
.sc-contact-c-bloc { display: block; overflow: hidden; border-radius: 12px; background: rgba(250, 250, 252, .98); text-align: center; }
.sc-contact-c-num {
  display: block; height: 26px; line-height: 26px;
  border-bottom: 1px solid var(--line-ios);
  font-size: 0.4375rem; color: #8A8A8E;
}
.sc-contact-c-appeler {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; font-size: 0.625rem; color: var(--ios-bleu);
}
.sc-contact-c-appeler svg { width: 12px; height: 12px; }
.sc-contact-c-annuler { height: 34px; line-height: 34px; font-size: 0.625rem; font-weight: 700; color: var(--ios-bleu); }

/* ═══ LES ÉCRANS D'APPEL, DES DEUX CÔTÉS ══════════════════════════════ */
.sc-contact-appel,
.sc-contact-entrant {
  position: absolute; inset: 0; z-index: 6; overflow: hidden;
  background: #1C1C1E; color: #FFFFFF; opacity: 0;
}
/* Le fond : la photo de l'écran, floutée et assombrie, plus grande que
   l'écran pour qu'aucun bord de flou ne se voie. */
.sc-contact-flou {
  position: absolute; top: -24px; left: -24px;
  width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover;
  filter: blur(14px) brightness(.5);
}
.sc-contact-a-num {
  position: absolute; top: 66px; left: 0; right: 0;
  font-size: 0.9375rem; font-weight: 500; text-align: center; letter-spacing: -.01em;
}
.sc-contact-a-lieu,
.sc-contact-a-etat {
  position: absolute; top: 88px; left: 0; right: 0; height: 12px;
  font-size: 0.5rem; line-height: 12px; text-align: center; color: rgba(255, 255, 255, .72);
}
.sc-contact-a-e { position: absolute; left: 0; right: 0; top: 0; opacity: 0; font-variant-numeric: tabular-nums; }
.sc-contact-ac-e0 { opacity: 1; }
.sc-contact-grille {
  position: absolute; left: 20px; right: 20px; bottom: 70px;
  display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 14px; justify-items: center;
}
.sc-contact-rond { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-contact-rond i {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.sc-contact-rond svg { width: 17px; height: 17px; }
.sc-contact-rond small { font-size: 0.375rem; line-height: 8px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.sc-contact-rond--fin i { background: var(--ios-rouge); }
.sc-contact-rond--oui i { background: var(--ios-vert); }

.sc-contact-e-petits {
  position: absolute; left: 34px; right: 34px; bottom: 132px;
  display: flex; justify-content: space-between;
}
.sc-contact-e-petits span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.375rem; }
.sc-contact-e-petits svg { width: 14px; height: 14px; }
.sc-contact-e-choix {
  position: absolute; left: 28px; right: 28px; bottom: 56px;
  display: flex; justify-content: space-between;
}
.sc-contact-e-choix .sc-contact-rond i { width: 46px; height: 46px; }
.sc-contact-e-choix .sc-contact-rond svg { width: 19px; height: 19px; }

/* ═══ LUCIE : L'ÉCRAN VERROUILLÉ ══════════════════════════════════════ */
.sc-contact-verrou { position: absolute; inset: 0; background: #2A3440; color: #FFFFFF; }
.sc-contact-v-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-contact-verrou::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .06) 70%, rgba(0, 0, 0, .3));
}
.sc-contact-v-date,
.sc-contact-v-heure,
.sc-contact-v-bt,
.sc-contact-notif { z-index: 1; }
.sc-contact-v-date {
  position: absolute; top: 42px; left: 0; right: 0;
  font-size: 0.5625rem; font-weight: 600; text-align: center;
}
.sc-contact-v-heure {
  position: absolute; top: 52px; left: 0; right: 0;
  font-size: 2.875rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-align: center;
}
.sc-contact-v-bt {
  position: absolute; bottom: 24px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0, 0, 0, .32);
}
.sc-contact-v-bt svg { width: 13px; height: 13px; }
.sc-contact-v-bt--g { left: 24px; }
.sc-contact-v-bt--d { right: 24px; }
.sc-contact-notif {
  position: absolute; left: 8px; right: 8px; top: 232px;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start;
  padding: 8px 9px 9px 8px; border-radius: 14px;
  background: rgba(246, 246, 248, .93); color: #0A0A0A;
  opacity: 0; transform: translateY(24px);
}
.sc-contact-n-app {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: #0A0A0A; color: #FFFFFF;
}
.sc-contact-n-app svg { width: 13px; height: 13px; }
.sc-contact-n-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 0.4375rem; line-height: 1.35; }
.sc-contact-n-l1 { display: flex; justify-content: space-between; gap: 4px; }
.sc-contact-n-l1 b { font-weight: 700; }
.sc-contact-n-l1 span { color: #737373; }
.sc-contact-n-sujet { font-weight: 700; }
.sc-contact-n-dit { color: #3A3A3C; }
.sc-contact-n-num { white-space: nowrap; }

/* Les deux doigts. */
.sc-contact-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-contact-page         { animation-name: sc-contact-defile; }
.sc-contact-rail         { animation-name: sc-contact-rail; }
.sc-contact-doigt--client { animation-name: sc-contact-doigt-c; }
.sc-contact-doigt--lucie  { animation-name: sc-contact-doigt-l; }
.sc-contact-bt--appel    { animation-name: sc-contact-bt-appel; }
.sc-contact-bt--ecrire   { animation-name: sc-contact-bt-ecrire; }

.sc-contact-c-voile      { animation-name: sc-contact-c-voile; }
.sc-contact-c-feuille    { animation-name: sc-contact-c-feuille; }
.sc-contact-c-appeler    { animation-name: sc-contact-c-appui; }
.sc-contact-appel--client { animation-name: sc-contact-appel-c; }
.sc-contact-ac-e0        { animation-name: sc-contact-e0; }
.sc-contact-ac-e1,
.sc-contact-al-e1        { animation-name: sc-contact-e1; }
.sc-contact-ac-e2,
.sc-contact-al-e2        { animation-name: sc-contact-e2; }
.sc-contact-ac-e3,
.sc-contact-al-e3        { animation-name: sc-contact-e3; }
.sc-contact-ac-fin       { animation-name: sc-contact-raccroche; }
.sc-contact-tel--lucie   { animation-name: sc-contact-vibre; }
.sc-contact-entrant      { animation-name: sc-contact-entrant; }
.sc-contact-rond--oui    { animation-name: sc-contact-decroche; }
.sc-contact-appel--lucie { animation-name: sc-contact-appel-l; }

.sc-contact-site         { animation-name: sc-contact-site; }
.sc-contact-form         { animation-name: sc-contact-form; }
.sc-contact-f-champ--nom  { animation-name: sc-contact-ch-nom; }
.sc-contact-f-champ--mob  { animation-name: sc-contact-ch-mob; }
.sc-contact-f-champ--mail { animation-name: sc-contact-ch-mail; }
.sc-contact-f-champ--mot  { animation-name: sc-contact-ch-mot; }
.sc-contact-f-val--nom   { animation-name: sc-contact-v-nom; }
.sc-contact-f-val--mob   { animation-name: sc-contact-v-mob; }
.sc-contact-f-val--mail  { animation-name: sc-contact-v-mail; }
.sc-contact-f-tape       { animation-name: sc-contact-tape; }
.sc-contact-f-caret      { animation-name: sc-contact-caret; }
.sc-contact-f-envoi      { animation-name: sc-contact-envoi; }
.sc-contact-clavier      { animation-name: sc-contact-clavier; }
.sc-contact-k-camille    { animation-name: sc-contact-sugg; }
.sc-contact-f-corps      { animation-name: sc-contact-f-corps; }
.sc-contact-f-ok         { animation-name: sc-contact-f-ok; }
.sc-contact-f-coche      { animation-name: sc-contact-coche; }
.sc-contact-notif        { animation-name: sc-contact-notif; }


/* ═══ 1. LA BARRE RESTE EN BAS ════════════════════════════════════════
   Deux balayages : le doigt et la page font la même course au pixel près
   (155 puis 110 px), puis la page continue sur son élan une fois le doigt
   levé, comme sur iOS. La barre, elle, n'a aucune animation.
   LES DEUX ARRÊTS SONT MESURÉS : la page fait 701 de haut dans une vue de
   388, elle s'arrête donc à 313, tout en bas ; l'arrêt du milieu, à 180,
   tombe entre le titre et le chapeau (à 185, une ligne restait coupée sous
   la barre d'état). */
@keyframes sc-contact-defile {
  0%, 3.8%     { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .7, 1); }
  9%           { transform: translateY(-155px); animation-timing-function: cubic-bezier(.1, .6, .3, 1); }
  11%, 12.8%   { transform: translateY(-180px); animation-timing-function: cubic-bezier(.3, 0, .7, 1); }
  18%          { transform: translateY(-290px); animation-timing-function: cubic-bezier(.1, .6, .3, 1); }
  20%, 98.4%   { transform: translateY(-313px); }
  99.9%, 100%  { transform: translateY(0); }
}
/* L'indicateur descend de (388 - 8 - 215) x défilement / 313. */
@keyframes sc-contact-rail {
  0%, 3.8%     { opacity: 0; transform: translateY(0); }
  4.4%         { opacity: 1; transform: translateY(8px); }
  11%          { opacity: 1; transform: translateY(95px); }
  12%, 12.8%   { opacity: 0; transform: translateY(95px); }
  13.4%        { opacity: 1; transform: translateY(101px); }
  20%          { opacity: 1; transform: translateY(165px); }
  21%, 98.4%   { opacity: 0; transform: translateY(165px); }
  99.9%, 100%  { opacity: 0; transform: translateY(0); }
}

/* LE DOIGT DU CLIENT. Le rond de 22 px se centre sur chaque cible MESURÉE
   dans la toile (translate = centre - 11) :
     balayages : de (176, 348) à (176, 193), puis à (176, 238)
     « Appeler » de la barre (84, 413) · « Appeler » de la confirmation
     (136, 424) · le bouton rouge (136, 391) · « Écrire » (188, 413) ·
     « Nom » (136, 136) · la suggestion (136, 351) · « Message » (136, 276) ·
     « Envoyer » (136, 303).
   Il n'est visible que pendant qu'il touche, comme sur une capture d'iPhone. */
@keyframes sc-contact-doigt-c {
  0%, 3.4%     { transform: translate(165px, 337px) scale(.6); opacity: 0; }
  3.8%         { transform: translate(165px, 337px); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .7, 1); }
  9%           { transform: translate(165px, 182px); opacity: 1; }
  9.6%         { transform: translate(165px, 175px); opacity: 0; }
  12.2%        { transform: translate(165px, 337px) scale(.6); opacity: 0; }
  12.8%        { transform: translate(165px, 337px); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .7, 1); }
  18%          { transform: translate(165px, 227px); opacity: 1; }
  18.6%        { transform: translate(165px, 220px); opacity: 0; }
  21.8%        { transform: translate(73px, 402px) scale(.6); opacity: 0; }
  22.3%        { transform: translate(73px, 402px); opacity: 1; }
  22.7%        { transform: translate(73px, 402px) scale(.8); opacity: 1; }
  23.1%        { transform: translate(73px, 402px); opacity: 1; }
  23.6%        { transform: translate(73px, 402px); opacity: 0; }
  25.4%        { transform: translate(125px, 413px) scale(.6); opacity: 0; }
  25.9%        { transform: translate(125px, 413px); opacity: 1; }
  26.3%        { transform: translate(125px, 413px) scale(.8); opacity: 1; }
  26.7%        { transform: translate(125px, 413px); opacity: 1; }
  27.2%        { transform: translate(125px, 413px); opacity: 0; }
  44.2%        { transform: translate(125px, 380px) scale(.6); opacity: 0; }
  44.7%        { transform: translate(125px, 380px); opacity: 1; }
  45.1%        { transform: translate(125px, 380px) scale(.8); opacity: 1; }
  45.5%        { transform: translate(125px, 380px); opacity: 1; }
  46%          { transform: translate(125px, 380px); opacity: 0; }
  49.4%        { transform: translate(177px, 402px) scale(.6); opacity: 0; }
  49.9%        { transform: translate(177px, 402px); opacity: 1; }
  50.3%        { transform: translate(177px, 402px) scale(.8); opacity: 1; }
  50.7%        { transform: translate(177px, 402px); opacity: 1; }
  51.2%        { transform: translate(177px, 402px); opacity: 0; }
  53.2%        { transform: translate(125px, 125px) scale(.6); opacity: 0; }
  53.7%        { transform: translate(125px, 125px); opacity: 1; }
  54.1%        { transform: translate(125px, 125px) scale(.8); opacity: 1; }
  54.5%        { transform: translate(125px, 125px); opacity: 1; }
  55%          { transform: translate(125px, 125px); opacity: 0; }
  56.2%        { transform: translate(125px, 340px) scale(.6); opacity: 0; }
  56.7%        { transform: translate(125px, 340px); opacity: 1; }
  57.1%        { transform: translate(125px, 340px) scale(.8); opacity: 1; }
  57.5%        { transform: translate(125px, 340px); opacity: 1; }
  58%          { transform: translate(125px, 340px); opacity: 0; }
  59.4%        { transform: translate(125px, 265px) scale(.6); opacity: 0; }
  59.9%        { transform: translate(125px, 265px); opacity: 1; }
  60.3%        { transform: translate(125px, 265px) scale(.8); opacity: 1; }
  60.7%        { transform: translate(125px, 265px); opacity: 1; }
  61.2%        { transform: translate(125px, 265px); opacity: 0; }
  67%          { transform: translate(125px, 292px) scale(.6); opacity: 0; }
  67.5%        { transform: translate(125px, 292px); opacity: 1; }
  67.9%        { transform: translate(125px, 292px) scale(.8); opacity: 1; }
  68.3%        { transform: translate(125px, 292px); opacity: 1; }
  68.8%, 98.4% { transform: translate(125px, 292px); opacity: 0; }
  99.9%, 100%  { transform: translate(165px, 337px) scale(.6); opacity: 0; }
}
@keyframes sc-contact-bt-appel {
  0%, 22.6%    { background: #0A0A0A; }
  22.8%, 23.3% { background: #3A3A3A; }
  23.6%, 100%  { background: #0A0A0A; }
}
@keyframes sc-contact-bt-ecrire {
  0%, 50.2%    { background: #FFFFFF; }
  50.4%, 50.9% { background: #EDEDED; }
  51.2%, 100%  { background: #FFFFFF; }
}

/* ═══ 2. UN APPUI, ÇA SONNE ═══════════════════════════════════════════ */
@keyframes sc-contact-c-voile {
  0%, 23.4%    { opacity: 0; }
  24.4%, 27.2% { opacity: 1; }
  28.2%, 100%  { opacity: 0; }
}
@keyframes sc-contact-c-feuille {
  0%, 23.4%    { transform: translateY(140px); opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  25%, 27.3%   { transform: translateY(0); opacity: 1; }
  28%, 98.4%   { transform: translateY(0); opacity: 0; }
  99.9%, 100%  { transform: translateY(140px); opacity: 1; }
}
@keyframes sc-contact-c-appui {
  0%, 26.2%    { background: rgba(229, 229, 234, 0); }
  26.4%, 27%   { background: rgba(229, 229, 234, 1); }
  27.3%, 100%  { background: rgba(229, 229, 234, 0); }
}
/* L'écran d'appel du client, et ses quatre états, communs aux deux
   téléphones à partir du décroché. */
@keyframes sc-contact-appel-c {
  0%, 27.6%    { opacity: 0; transform: scale(1.04); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.8%, 47.6% { opacity: 1; transform: none; }
  48.8%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-contact-e0 {
  0%, 38.4%    { opacity: 1; }
  38.6%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-contact-e1 {
  0%, 38.5%    { opacity: 0; }
  38.7%, 42.8% { opacity: 1; }
  43%, 100%    { opacity: 0; }
}
@keyframes sc-contact-e2 {
  0%, 42.9%    { opacity: 0; }
  43.1%, 46.3% { opacity: 1; }
  46.5%, 100%  { opacity: 0; }
}
@keyframes sc-contact-e3 {
  0%, 46.4%    { opacity: 0; }
  46.6%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-contact-raccroche {
  0%, 45%      { opacity: 1; }
  45.2%, 45.6% { opacity: .6; }
  45.9%, 100%  { opacity: 1; }
}
/* Le téléphone de Lucie vibre : deux salves, comme un vrai. */
@keyframes sc-contact-vibre {
  0%, 30.8%    { transform: none; }
  31.1%        { transform: translateX(2px); }
  31.4%        { transform: translateX(-2px); }
  31.7%        { transform: translateX(2px); }
  32%          { transform: translateX(-2px); }
  32.3%        { transform: translateX(2px); }
  32.6%, 34.2% { transform: none; }
  34.5%        { transform: translateX(2px); }
  34.8%        { transform: translateX(-2px); }
  35.1%        { transform: translateX(2px); }
  35.4%        { transform: translateX(-2px); }
  35.7%        { transform: translateX(2px); }
  36%, 100%    { transform: none; }
}
@keyframes sc-contact-entrant {
  0%, 29.4%    { opacity: 0; }
  30.6%, 38.2% { opacity: 1; }
  39%, 100%    { opacity: 0; }
}
/* LE DOIGT DE LUCIE, sur « Accepter », centre MESURÉ (443, 403). */
@keyframes sc-contact-doigt-l {
  0%, 36.6%    { transform: translate(432px, 392px) scale(.6); opacity: 0; }
  37.1%        { transform: translate(432px, 392px); opacity: 1; }
  37.5%        { transform: translate(432px, 392px) scale(.8); opacity: 1; }
  37.9%        { transform: translate(432px, 392px); opacity: 1; }
  38.4%, 100%  { transform: translate(432px, 392px); opacity: 0; }
}
@keyframes sc-contact-decroche {
  0%, 37.4%    { opacity: 1; }
  37.6%, 38%   { opacity: .6; }
  38.3%, 100%  { opacity: 1; }
}
@keyframes sc-contact-appel-l {
  0%, 38.2%    { opacity: 0; }
  39%, 47.6%   { opacity: 1; }
  48.8%, 100%  { opacity: 0; }
}

/* ═══ 3. LE MESSAGE ARRIVE REMPLI ═════════════════════════════════════ */
@keyframes sc-contact-site {
  0%, 51.1%    { opacity: 1; }
  52%, 98.4%   { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-contact-form {
  0%, 51.1%    { opacity: 0; transform: translateX(16px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  52.5%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateX(16px); }
}
/* « Nom » prend le focus (bordure bleue), puis la suggestion remplit les
   trois champs en cascade, sur le jaune du remplissage automatique. */
@keyframes sc-contact-ch-nom {
  0%, 54%      { border-color: #D4D4D8; background: #FFFFFF; }
  54.2%, 57.7% { border-color: #007AFF; background: #FFFFFF; }
  58.1%, 98.4% { border-color: #D4D4D8; background: #FBF3C4; }
  99.9%, 100%  { border-color: #D4D4D8; background: #FFFFFF; }
}
@keyframes sc-contact-ch-mob {
  0%, 58.1%    { background: #FFFFFF; }
  58.5%, 98.4% { background: #FBF3C4; }
  99.9%, 100%  { background: #FFFFFF; }
}
@keyframes sc-contact-ch-mail {
  0%, 58.5%    { background: #FFFFFF; }
  58.9%, 98.4% { background: #FBF3C4; }
  99.9%, 100%  { background: #FFFFFF; }
}
@keyframes sc-contact-ch-mot {
  0%, 60.1%    { border-color: #D4D4D8; }
  60.3%, 68%   { border-color: #007AFF; }
  68.4%, 100%  { border-color: #D4D4D8; }
}
@keyframes sc-contact-v-nom {
  0%, 57.8%    { opacity: 0; }
  58.1%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-contact-v-mob {
  0%, 58.2%    { opacity: 0; }
  58.5%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-contact-v-mail {
  0%, 58.6%    { opacity: 0; }
  58.9%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* La frappe, lettre à lettre. */
@keyframes sc-contact-tape {
  0%, 61%      { max-width: 0; animation-timing-function: steps(28, end); }
  66.4%, 98.4% { max-width: 120px; }
  99.9%, 100%  { max-width: 0; }
}
@keyframes sc-contact-caret {
  0%, 60.3%    { opacity: 0; }
  60.5%, 68%   { opacity: 1; }
  68.2%, 100%  { opacity: 0; }
}
@keyframes sc-contact-envoi {
  0%, 67.8%    { background: #0A0A0A; }
  68%, 68.4%   { background: #3A3A3A; }
  68.7%, 100%  { background: #0A0A0A; }
}
@keyframes sc-contact-clavier {
  0%, 54.4%    { transform: translateY(178px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  55.9%, 68.2% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  69.4%, 100%  { transform: translateY(178px); }
}
/* La suggestion s'éclaire sous le doigt, puis s'efface : elle a servi. */
@keyframes sc-contact-sugg {
  0%, 57%      { background: rgba(255, 255, 255, 0); opacity: 1; }
  57.2%, 57.7% { background: rgba(255, 255, 255, .8); opacity: 1; }
  58%, 58.2%   { background: rgba(255, 255, 255, 0); opacity: 1; }
  58.6%, 98.4% { background: rgba(255, 255, 255, 0); opacity: 0; }
  99.9%, 100%  { background: rgba(255, 255, 255, 0); opacity: 1; }
}
@keyframes sc-contact-f-corps {
  0%, 68.6%    { opacity: 1; }
  69.3%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-contact-f-ok {
  0%, 69.2%    { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); }
}
@keyframes sc-contact-coche {
  0%, 69.4%    { transform: scale(.4); animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  70.4%, 98.4% { transform: none; }
  99.9%, 100%  { transform: scale(.4); }
}
/* La notification monte sur l'écran verrouillé de Lucie. */
@keyframes sc-contact-notif {
  0%, 70.4%    { opacity: 0; transform: translateY(24px); animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  72%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(24px); }
}

/* Moins de mouvement : la page avec sa barre, un peu descendue, et chez
   Lucie la notification du message arrivé. */
@media (prefers-reduced-motion: reduce) {
  .sc-contact-page { transform: translateY(-180px); }
  .sc-contact-notif { opacity: 1; transform: none; }
}