/* Scène « resa » : à 23 h, le restaurant est fermé, et Camille réserve
   quand même, sur son iPhone, sans que personne ne décroche. Un seul
   écran. Ancienne scène (formulaire dans une fenêtre, rempli au curseur)
   rangée dans _avant-refonte-ux/reservation-en-ligne/. Le rideau de fin vient
   du kit.

   LISIBLE SANS ZOOMER : 12 px pour tout ce qui se lit, 11 px minimum.
   Le site est celui de Chez Lucie : Inter, encre, boutons noirs.

   FICHIER ÉCRIT PAR scene-css.py : les @keyframes (doigt, choix, défilement,
   clavier, remplissage, confirmation) sont calculés là-bas depuis un seul
   minutage et des mesures prises au banc (mesures.json). Modifier
   scene-fixe.css ou le script, jamais scene.css.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      6 %  samedi ; 11 % : 20 h 30 (20 h est complet) ; 15,5 % : 3 personnes
   18,5 %  la page descend ; 24 % : « Nom », le clavier monte avec la fiche
           de contact de l'iPhone ; 30 % : un geste, nom et téléphone remplis
     36 %  « Réserver » : « C'est réservé » ; 41 % : la notification de
           l'email de confirmation ; plus rien ne bouge après 43 %
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 600, fond blanc. Un iPhone de 260 x 548 en (130, 44),
   écran de 248 x 536 en (136, 50). Dans l'écran : la barre d'état (36), la
   page (444), la barre de Safari (56) ; le clavier (226) monte par-dessus. */
.fn-scene--resa {
  --sc-haut: 600px;
  --encre: #0A0A0A; --gris: #525252; --gris2: #737373; --ligne: #E5E5E5; --bord: #D4D4D4;
  --ios-bleu: #007AFF; --ios-gris: #8E8E93;
  line-height: 1.35;
}
.fn-scene--resa svg { display: block; }
.fn-scene--resa p { margin: 0; }
.fn-scene--resa i { font-style: normal; }

/* ═══ LE TITRE ════════════════════════════════════════════════════════ */
.sc-resa-qui {
  position: absolute; top: 0; left: 0; width: 520px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-resa-qui b { font-size: 0.8125rem; font-weight: 800; line-height: 17px; letter-spacing: -.01em; color: var(--encre); }
.sc-resa-qui span { font-size: 0.75rem; line-height: 16px; color: var(--gris); }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-resa-tel {
  position: absolute; top: 44px; left: 130px; z-index: 1;
  width: 260px; height: 548px; padding: 6px;
  border-radius: 40px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .18);
}
.sc-resa-ecran { position: relative; height: 536px; overflow: hidden; border-radius: 34px; background: #FFFFFF; color: var(--encre); }
.sc-resa-ilot { position: absolute; top: 9px; left: 92px; z-index: 20; width: 64px; height: 19px; border-radius: 10px; background: #000000; }
.sc-resa-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 3px 20px 0 30px; background: #FFFFFF; font-size: 0.6875rem;
}
.sc-resa-statut b { font-weight: 700; }
.sc-resa-statut-ico { display: flex; align-items: center; gap: 4px; }
.sc-resa-statut-ico svg { width: 12px; height: 9px; fill: #0A0A0A; }
.sc-resa-pile { display: block; width: 19px; height: 9px; padding: 1px; border: 1px solid rgba(10, 10, 10, .45); border-radius: 3px; }
.sc-resa-pile i { display: block; width: 72%; height: 100%; border-radius: 1px; background: #0A0A0A; }

/* La page Réserver, entre la barre d'état et Safari : 248 x 444. */
.sc-resa-vue { position: absolute; top: 36px; left: 0; right: 0; z-index: 0; height: 444px; overflow: hidden; background: #FFFFFF; }
.sc-resa-page { padding: 0 14px 20px; }
.sc-resa-s-tete { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.sc-resa-marque { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-resa-marque i {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 5px; background: var(--encre); color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
}
.sc-resa-ferme { padding: 3px 8px; border-radius: 8px; background: #F0F0EE; font-size: 0.6875rem; line-height: 15px; color: var(--gris); white-space: nowrap; }
.sc-resa-titre { display: flex; flex-direction: column; padding-bottom: 4px; }
.sc-resa-titre b { font-size: 1.0625rem; font-weight: 800; line-height: 22px; letter-spacing: -.02em; }
.sc-resa-titre small { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.fn-scene--resa .sc-resa-lbl { margin: 10px 0 6px; font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-resa-puces { display: flex; gap: 6px; }
.sc-resa-heures { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-resa-puce {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1;
  height: 34px; border: 1px solid var(--bord); border-radius: 10px; background: #FFFFFF;
  font-size: 0.75rem; line-height: 15px; white-space: nowrap; color: var(--encre);
}
.sc-resa-heures .sc-resa-puce { height: 36px; }
.sc-resa-puce--complet { border-color: #EDEDED; background: #F5F5F3; color: #A3A3A3; }
.sc-resa-puce--complet small { font-size: 0.6875rem; line-height: 13px; }
.sc-resa-pas { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.sc-resa-pas i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--bord); border-radius: 10px; }
.sc-resa-pas svg { width: 14px; height: 14px; }
.sc-resa-pas b { position: relative; width: 110px; height: 17px; font-size: 0.75rem; font-weight: 700; text-align: center; }
.sc-resa-n2,
.sc-resa-n3 { position: absolute; left: 0; right: 0; top: 0; line-height: 17px; }
.sc-resa-n3 { opacity: 0; }
.sc-resa-champ {
  position: relative; display: flex; align-items: center;
  height: 38px; padding: 0 12px; margin-bottom: 6px !important;
  border: 1px solid var(--bord); border-radius: 10px; background-color: #FFFFFF;
  font-size: 0.75rem;
}
.sc-resa-vide,
.sc-resa-rempli { position: absolute; left: 12px; top: 10px; line-height: 17px; white-space: nowrap; }
.sc-resa-vide { color: #A3A3A3; }
.sc-resa-rempli { color: var(--encre); opacity: 0; }
.sc-resa-caret { position: absolute; left: 11px; top: 11px; width: 1.5px; height: 16px; border-radius: 1px; background: var(--ios-bleu); opacity: 0; }
.sc-resa-bouton { position: relative; display: block; height: 44px; margin-top: 12px; border-radius: 12px; background: var(--encre); color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; }
.sc-resa-bouton span { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; }
.sc-resa-b3 { opacity: 0; }

/* La confirmation. */
.sc-resa-ok {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 18px; background: #FFFFFF; text-align: center; opacity: 0;
}
.sc-resa-ok .sc-resa-s-tete { align-self: stretch; }
.sc-resa-ok-coche { display: grid; place-items: center; width: 52px; height: 52px; margin: 66px 0 14px; border-radius: 50%; background: var(--encre); color: #FFFFFF; }
.sc-resa-ok-coche svg { width: 26px; height: 26px; stroke-width: 2.2; }
.sc-resa-ok-titre { font-size: 1.25rem; font-weight: 800; line-height: 26px; letter-spacing: -.02em; }
.fn-scene--resa .sc-resa-ok-quand { margin-top: 8px; font-size: 0.8125rem; font-weight: 700; line-height: 18px; }
.sc-resa-ok-qui { font-size: 0.75rem; line-height: 17px; color: var(--gris); }
.fn-scene--resa .sc-resa-ok-mail {
  display: flex; align-items: center; gap: 6px; margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--ligne); font-size: 0.75rem; line-height: 17px; color: var(--gris);
}
.sc-resa-ok-mail svg { width: 15px; height: 15px; flex: none; }
.sc-resa-ok-cal {
  display: flex; align-items: center; gap: 7px; height: 38px; margin-top: 14px; padding: 0 14px;
  border: 1px solid var(--bord); border-radius: 10px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.sc-resa-ok-cal svg { width: 14px; height: 14px; }

/* Le clavier d'iPhone, avec la fiche de contact proposée. */
.sc-resa-clavier {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: 226px; padding: 0 3px 18px; background: #D1D3D9;
  transform: translateY(232px);
}
.sc-resa-suggestion { display: flex; align-items: center; justify-content: center; height: 40px; }
.sc-resa-sugg { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; background-color: rgba(255, 255, 255, 0); }
.sc-resa-sugg svg { width: 15px; height: 15px; }
.sc-resa-rang { display: flex; justify-content: center; gap: 5px; height: 42px; padding-top: 6px; }
.sc-resa-rang--1 { padding-left: 0; }
.sc-resa-touche {
  display: grid; place-items: center; width: 19.7px; height: 36px;
  border-radius: 5px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
  font-size: 0.8125rem; line-height: 1; color: var(--encre);
}
.sc-resa-touche svg { width: 15px; height: 15px; }
.sc-resa-touche--large { width: 32px; background: #ABB0BA; font-size: 0.6875rem; }
.sc-resa-touche--espace { width: 118px; font-size: 0.75rem; }
.sc-resa-touche--ok { width: 62px; background: #ABB0BA; font-size: 0.75rem; }

/* ── Safari ───────────────────────────────────────────────────────────── */
.sc-resa-safari {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 56px; padding: 7px 10px 0;
  background: #F7F7F7 linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)) left top / 100% 1px no-repeat;
}
.sc-resa-safari-champ {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 11px; border-radius: 11px; background: #E4E4E9;
  font-size: 0.75rem; color: #0A0A0A;
}
.sc-resa-safari-champ b { font-size: 0.875rem; font-weight: 600; }
.sc-resa-safari-champ small { font-size: 0.6875rem; }
.sc-resa-safari-champ svg { width: 12px; height: 12px; }
.sc-resa-safari-url { display: flex; align-items: center; gap: 4px; }
.sc-resa-safari-url svg { width: 11px; height: 11px; }
.sc-resa-maison { position: absolute; bottom: 6px; left: 82px; z-index: 10; width: 84px; height: 4px; border-radius: 2px; background: #0A0A0A; }

/* La notification de l'email de confirmation. */
.sc-resa-notif {
  position: absolute; top: 42px; left: 8px; right: 8px; z-index: 8;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px; border-radius: 16px; background: rgba(242, 242, 244, .97);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  transform: translateY(-120px);
}
.sc-resa-notif-ico {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: 7px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #D8D8DC; color: var(--ios-bleu);
}
.sc-resa-notif-ico svg { width: 16px; height: 16px; }
.sc-resa-notif > span { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.3; }
.sc-resa-notif-l1 { display: flex; justify-content: space-between; align-items: baseline; }
.sc-resa-notif-l1 b { font-weight: 700; }
.sc-resa-notif-l1 small { font-size: 0.6875rem; color: var(--ios-gris); }
.sc-resa-notif-l3 { color: #3C3C43; }

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

/* ── Les animations ───────────────────────────────────────────────────── */
.sc-resa-puce--j1 { animation-name: sc-resa-j1; }
.sc-resa-puce--h2 { animation-name: sc-resa-h2; }
.sc-resa-n2 { animation-name: sc-resa-n2; }
.sc-resa-n3 { animation-name: sc-resa-n3; }
.sc-resa-b2 { animation-name: sc-resa-b2; }
.sc-resa-b3 { animation-name: sc-resa-b3; }
.sc-resa-page { animation-name: sc-resa-defile; }
.sc-resa-champ--nom { animation-name: sc-resa-nom; }
.sc-resa-champ--tel { animation-name: sc-resa-tel-champ; }
.sc-resa-caret { animation-name: sc-resa-caret; }
.sc-resa-vide { animation-name: sc-resa-vide; }
.sc-resa-rempli { animation-name: sc-resa-rempli; }
.sc-resa-clavier { animation-name: sc-resa-clavier; }
.sc-resa-sugg { animation-name: sc-resa-sugg; }
.sc-resa-bouton { animation-name: sc-resa-bouton; }
.sc-resa-ok { animation-name: sc-resa-ok; }
.sc-resa-notif { animation-name: sc-resa-notif; }
.sc-resa-doigt { animation-name: sc-resa-doigt; }

@keyframes sc-resa-j1 {
  0%            { border-color: #D4D4D4; background-color: #FFFFFF; color: #0A0A0A; }
  6.1%          { border-color: #D4D4D4; background-color: #FFFFFF; color: #0A0A0A; }
  6.3%, 98.4%   { border-color: #0A0A0A; background-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%   { border-color: #D4D4D4; background-color: #FFFFFF; color: #0A0A0A; }
}
@keyframes sc-resa-h2 {
  0%            { border-color: #D4D4D4; background-color: #FFFFFF; color: #0A0A0A; }
  11.1%         { border-color: #D4D4D4; background-color: #FFFFFF; color: #0A0A0A; }
  11.3%, 98.4%  { border-color: #0A0A0A; background-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%   { border-color: #D4D4D4; background-color: #FFFFFF; color: #0A0A0A; }
}
@keyframes sc-resa-n2 {
  0%            { opacity: 1; }
  15.6%         { opacity: 1; }
  15.9%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-resa-n3 {
  0%            { opacity: 0; }
  15.6%         { opacity: 0; }
  15.9%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-resa-b2 {
  0%            { opacity: 1; }
  15.6%         { opacity: 1; }
  15.9%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-resa-b3 {
  0%            { opacity: 0; }
  15.6%         { opacity: 0; }
  15.9%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-resa-defile {
  0%            { transform: translateY(0); }
  18.5%         { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  21%, 98.4%    { transform: translateY(-151px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-resa-nom {
  0%            { border-color: #D4D4D4; border-width: 1px; padding-left: 12px; background-color: #FFFFFF; animation-timing-function: steps(1, end); }
  24.1%         { border-color: #007AFF; border-width: 2px; padding-left: 11px; background-color: #FFFFFF; animation-timing-function: steps(1, end); }
  30.2%, 98.4%  { border-color: #D4D4D4; border-width: 1px; padding-left: 12px; background-color: #FEF8D8; }
  99.9%, 100%   { border-color: #D4D4D4; border-width: 1px; padding-left: 12px; background-color: #FFFFFF; }
}
@keyframes sc-resa-tel-champ {
  0%            { background-color: #FFFFFF; }
  30.2%         { background-color: #FFFFFF; }
  30.5%, 98.4%  { background-color: #FEF8D8; }
  99.9%, 100%   { background-color: #FFFFFF; }
}
@keyframes sc-resa-caret {
  0%            { opacity: 0; animation-timing-function: steps(1, end); }
  24.1%         { opacity: 1; animation-timing-function: steps(1, end); }
  30.2%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-resa-vide {
  0%            { opacity: 1; }
  30.2%         { opacity: 1; }
  30.5%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-resa-rempli {
  0%            { opacity: 0; }
  30.2%         { opacity: 0; }
  30.5%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-resa-clavier {
  0%            { transform: translateY(232px); }
  24.4%         { transform: translateY(232px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  26.4%         { transform: translateY(0); }
  30.8%         { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  32.8%, 98.4%  { transform: translateY(232px); }
  99.9%, 100%   { transform: translateY(232px); }
}
@keyframes sc-resa-sugg {
  0%            { background-color: rgba(255, 255, 255, 0); }
  29.9%         { background-color: rgba(255, 255, 255, 0); }
  30.1%         { background-color: rgba(255, 255, 255, .9); }
  30.6%, 98.4%  { background-color: rgba(255, 255, 255, 0); }
  99.9%, 100%   { background-color: rgba(255, 255, 255, 0); }
}
@keyframes sc-resa-bouton {
  0%            { transform: scale(1); }
  35.9%         { transform: scale(1); }
  36.15%        { transform: scale(.97); }
  36.5%, 98.4%  { transform: scale(1); }
  99.9%, 100%   { transform: scale(1); }
}
@keyframes sc-resa-ok {
  0%            { opacity: 0; transform: translateY(8px); }
  36.6%         { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  38%, 98.4%    { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(8px); }
}
@keyframes sc-resa-notif {
  0%            { transform: translateY(-120px); }
  41%           { transform: translateY(-120px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  43%, 98.4%    { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(-120px); }
}
@keyframes sc-resa-doigt {
  0%            { opacity: 0; transform: translate(247px, 207px) scale(1.3); }
  5.65%         { opacity: 0; transform: translate(247px, 207px) scale(1.3); }
  5.9%          { opacity: 1; transform: translate(247px, 207px) scale(1); animation-timing-function: ease-out; }
  6.2%          { opacity: 1; transform: translate(247px, 207px) scale(0.84); }
  6.6%          { opacity: 0; transform: translate(247px, 207px) scale(1); }
  10.65%        { opacity: 0; transform: translate(190.5px, 316px) scale(1.3); }
  10.9%         { opacity: 1; transform: translate(190.5px, 316px) scale(1); animation-timing-function: ease-out; }
  11.2%         { opacity: 1; transform: translate(190.5px, 316px) scale(0.84); }
  11.6%         { opacity: 0; transform: translate(190.5px, 316px) scale(1); }
  15.15%        { opacity: 0; transform: translate(340px, 383px) scale(1.3); }
  15.4%         { opacity: 1; transform: translate(340px, 383px) scale(1); animation-timing-function: ease-out; }
  15.7%         { opacity: 1; transform: translate(340px, 383px) scale(0.84); }
  16.1%         { opacity: 0; transform: translate(340px, 383px) scale(1); }
  23.65%        { opacity: 0; transform: translate(247px, 300px) scale(1.3); }
  23.9%         { opacity: 1; transform: translate(247px, 300px) scale(1); animation-timing-function: ease-out; }
  24.2%         { opacity: 1; transform: translate(247px, 300px) scale(0.84); }
  24.6%         { opacity: 0; transform: translate(247px, 300px) scale(1); }
  29.65%        { opacity: 0; transform: translate(247px, 367px) scale(1.3); }
  29.9%         { opacity: 1; transform: translate(247px, 367px) scale(1); animation-timing-function: ease-out; }
  30.2%         { opacity: 1; transform: translate(247px, 367px) scale(0.84); }
  30.6%         { opacity: 0; transform: translate(247px, 367px) scale(1); }
  35.65%        { opacity: 0; transform: translate(247px, 397px) scale(1.3); }
  35.9%         { opacity: 1; transform: translate(247px, 397px) scale(1); animation-timing-function: ease-out; }
  36.2%         { opacity: 1; transform: translate(247px, 397px) scale(0.84); }
  36.6%, 98.4%  { opacity: 0; transform: translate(247px, 397px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(247px, 207px) scale(1.3); }
}

/* Moins de mouvement : l'état d'arrivée, immobile. C'est réservé, et la
   notification de l'email de confirmation est arrivée. */
@media (prefers-reduced-motion: reduce) {
  .sc-resa-ok { opacity: 1; }
  .sc-resa-notif { transform: none; }
}